CSS(Cascading StyleSheet)是层叠样式表,在网页制作时候采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景等效果实现更加精确地控制。CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发作的。CSS的好处在于用户只需要一次性定义文字的显示样式,就可以在各个网页中统一使用了。
(百度的页面就是用CSS做的)
1. CSS基本语句
选择器{
属性名:值;
属性名:值;}
div{
width:100px;
font-size:16pt;
color:red
}
// 把div元素的宽度设置为100,大小设置为16,颜色为红色
基本语句都有一个选择器(Selector),用于指定在HTML文档中哪种HTML标记元素(如body、p或h3)套用{}内的属性设置。
2. 在HTML文档中应用CSS样式
1. 内部样式表
在网页中可以使用style元素定义一个内部样式表,指定该网页内元素的CSS样式
<HTML>
<HEAD>
<STYLE type = "text/css">
A {color: red}
P {background-color: red; color:white}
</STYLE>
</HEAD>
<BODY>
<A href="http://www.zstu.edu.cn/">CSS示例</A>
<P>文字的颜色和背景颜色是之前的属性设置</P>
</BODY> </HTML>
2.样式表文件
一个网站包含很多网页,通常这些网页都使用相同的样式,可以定义一个样式表文件,样式表文件的扩展名为.css,然后在所有网页中引用样式表文件。在HTML文档中可以使用link元素引用外部样式表。
创建一个style.css文件
A {color: red}
P {background-color: blue; color:white}
引用style.css文件
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="style.css" />
</HEAD>
<BODY>
<A href="http://www.tju.edu.cn/">CSS示例</A>
<P>文字的颜色和背景颜色为css中的设置</P>
</BODY> </HTML>
3. CSS选择器
1. 标记选择器
标记选择器决定哪些标记元素采用相应的CSS样式
比如在style.css文件中对 p标记 样式的申明如下
P{
font-size:12px
background:#900 //红色
color:090 //绿色
}
2.类别选择器
在定义HTML元素时,可以使用class属性指定元素的类别。
<div class='demoDiv'>这个区域的字体为红色</div>
<p class='demoDiv'>这个段落的字体为红色</p>
CSS的类选择器根据类名来选择,前面以“."来标志,如:
.demoDiv{
color:#FF0000
}
这样所有class为demoDiv的元素内容都会应用这个样式,包括div和p
3.ID选择器
ID,相当于HTML文档中元素的“身份证”,以保证其在一个HTML文档中具有唯一性,要将一个ID包括在样式定义中,需要‘#’号作为ID名称的前缀,例如讲id=‘highlight’的元素设置背景为黄色的代码如下:
# highlight{background-color:yellow}