文档介绍：CSS(Cascading Stylesheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具之一。使用CSS能够简化网页的格式代码,加快下载显示的速度和减少需要上传的代码量,也减少了重复劳动的工作量.
为网页上的元素精确地定位
把网页上的内容结构和格式控制相分离.
只要修改CSS样式表文件就可以改变整个站点的风格特色
CSS是一种样式表语言,用户可以使用它将样式(如:字体,间距及语音提示等)附加到结构化的文档(如:HTML文档和XML应用)中。由于CSS将文档呈现的样式和文档的内容相互分离,因此网页的写作和站点的维护得以简化。
CSS(Cascading Stylesheets,层叠样式表)
样式是一个规则,告诉浏览器如何表现特定的HTML或XHTML标签中的内容。每个标签都有一系列相关的样式属性,它们的值决定了浏览器将如何显示这个标签。一条规则定义了标签中一个或几个属性的特定值。
将样式和标签结合起来的方式有三种:
内嵌样式表、内部样式表,外部样式表。
1、内嵌样式(inline style)是连接样式和标签的最简单的方式,只需在标签中包含一个style属性,后面再跟一列属性及属性值即可。浏览器会根据样式属性及其值来表现标签中的内容。
<H1 style="color:blue">Bach's home page</H1>
<H1 style="color:blue; font-style:italic">Bach's home page</H1>
因为内联样式会向其标签的定义中添加更多内容,所以它们难维护,也难以阅读。
2、内部样式表
将样式表放在<head>内的<style>标签和(/style>结束标签之间,就会影响文档中所有相同标签的内容
<style>标签
功能:定义文档级样式表
属性:
dir lang media title type
<style>和</style>标签之间的所有内容都将被看作是样式规则的一部分
type属性
级联样式表全部都是text/css类型;JavaScript样式表使用的类型则是text/javascript
<html>
<head>
<title>Bach's home page</title>
<style type="text/css">
h1{color:blue;font-style:italic}
</style>
<body> <h1>Bach's home page</h1>
<p>Johann Sebastian Bach was a poser.</p>
</body>
</html>
3、外部样式表
当在文档的<head>标签中使用<link>标签
<html>
<head> <title>Bach's home page</title>
<link rel="stylesheet" href=“" type="text/css">
<link rel="stylesheet" href=“" type="text/css">
</head>
<body> <h1>Bach's home page</h1>
<p>Johann Sebastian Bach was a poser. </p>
</body>
</html>
link元素规定了:
链接类型:指向“stylesheet”。
通过“href”属性,指定了样式表的位置。
链接的样式表的类型:“text/css”。
样式语法:样式的语法( 规则)
样式规则至少由三个基本部分组成:
1、选择符selector:HTML或XHTML标记元素的名称,
2、大括号{ }
3、大括号{ }括起来并用分号分隔的样式列表(样式:”CSS属性:属性值”)
selector{propertyl:valuel;property2:value2;...}
例如:h1{color:purple;font-style:italic}
样式的种类:
1、单个的简单选择符(只有一个标记)
h1{color:blue;font-style:italic}
2分组选择符(集合选择符)
具有相同样式的选择符可以写在一起,中间用逗号分开。如:
h1,h2,h3{color:red;font-style:italic}
3、嵌套选择符(派生选择符/上下文选择符)
E F
匹配元素 E 的任意后代元素 F
p b{color:red}
将出现在p之内任何位置的b元素的文本颜色设置为红色
p b,h1 sub{color:green}
将出现在p之内任何位置的b元素和h1之内任何位置的sub元素的文本颜色