CSS定义及使用

来源：互联网发布：mac怎么查服务器地址编辑：程序博客网时间：2024/05/17 21:56

CSS定义及使用

CSS是Cascading Style Sheet的缩写，中文译为“层叠样式表”。它的主要功能是定义网页数据的编排、显示、格式化及特殊效果，它扩展了HTML的功能。

一．CSS样式的基本语法：

选择符{属性1：值1；属性2：值2；…..}

二．常用的几种定义及使用方法：

1．选择符为HTML标记符

如：H2{text-align:center;"">黑体}

H1,H2,H3,H4{"">黑体;color: blue}

注：如果多个标签具有相同的属性，则可以放在一起，用“，”隔开。

例1: <html>

<head>

<title>CSS范例1</title>

<!--

P{color: blue}

P I{color: red}

I{color: yellow}

H1{color: purple}

-->

</style>

</head>

<body>

<p>我的颜色是蓝色<I>我是斜体红色</I>我的颜色也是蓝色<p>

<H1>我的颜色是紫色<I>我是斜体黄色</I>我的颜色也是紫色</H1>

</body>

</html>

2．选择符为ID选择符

格式：#ID选择器名称{属性：属性值；属性：属性值….}

<标签名称 ID=”ID选择器名称”>内容</标签名称>

例2： <html>

<head>

<title>CSS范例2</title>

<!--

#first{color:blue}

#second{color:red}

#third{color:yellow}

-->

</style>

</head>

<body>

<H1 ID="first">这个H1标题内的文字，其色彩均为蓝色</H1>

<P ID="first">这个段落内的文字，其色彩均为蓝色</P>

<H2 ID="second">这个H2标题内的文字，其色彩均为红色</H2>

<P ID="second">这个段落内的文字，其色彩均为红色</P>

<H3 ID="third">这个H3标题内的文字，其色彩均为黄色</H3>

<P ID="third">这个段落内的文字，其色彩均为黄色</P>

</body>

</html>

3. 选择符为用户自定义的类CLASS

如：.mystyle{color: red}

注：可以用任何名称命名；在<body>里的所有元素都可以定义“类”；

例3： <html>

<head>

<title>CSS范例3</title>

<!-- h1.mycolor{color:blue;}

.yourcolor{color:red;}

-->

</style>

</head>

<body>

<h1 CLASS="mycolor">我的颜色是蓝色</h1>

<h1 CLASS="yourcolor">我的颜色是红色</h1>

<h2 CLASS="mycolor">我的颜色是蓝色</h2>

<h2 CLASS="yourcolor">我的颜色是红色</h2>

</body>

</html>

4．选择符为虚类

定义：指对同一个HTML元素的各种状态和其所包括的部分内容的一种定义方式。

格式：HTML元素：伪元素{属性：值}

注：伪元素主要有：

:link :hover :active :visited :first-child :first :left right

:lang focus :after :first-letter :first-line :before

例4：超链接的例子

<html>

<head>

<title>CSS范例4</title>

<!-- p:first-letter{color:red;}

p:first-line{color:blue;}

p:link{color:red;}

p:visited{color:blue;}

p:active{color:yellow;}

p:hover{color:green;}

-->

</style>

</head>

<body>

<p>first<br> letter</p>

<p>xieyanfeng</p>

</body>

</html>

5．选择符包含属性元素

格式：HTML标签[属性]{属性：属性值；属性：属性值；….}

HTML标签[属性＝值]{ 属性：属性值；属性：属性值；….}

例如：h[title] { color: blue; } /* 所有具有title属性的h对象 */

span[class=demo] { color: red; }/*所有class属性值为demo的span对象*/

三．总结

以上就是关于CSS常用的几种定义及使用方法，CSS作为HTML的补充渲染起着非常重要的作用。想了解CSS更加详细使用方法的朋友建议阅读一下苏昱的《样式表中文手册》，该书写的相当不错，本人强烈推荐。需要的朋友可以站内留下E-mail向本人索取。