本文参考：W3school
CSS 简介
简介
- CSS 指层叠样式表(Cascading Style Sheets)
- 样式规定如何显示HTML元素
- 样式通常存放在样式表中
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在CSS文件中
- 多样式可层叠为一
层叠次序
样式表优先顺序
- 内联样式（在 HTML 元素内部）
- 内部样式表（位于 标签内部）
- 外部样式表
- 浏览器缺省设置
如果有多个样式表时，浏览器会按上述顺序进行使用样式表，优先级高的没有才会使用优先级低的
CSS 基础语法
通过一个例子来介绍CSS语法
将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素
h1 {color:red; font-size:14px;}
CSS 规则由两部分组成：选择器，声明(可以有多个)
- 选择器：需要改变样式的 HTML 元素
- 声明：由一个属性和一个值组成，需要显示的样式
上面例子中CSS语句结构如下
注意： 声明需要用花括号括起来
引号
如果值为两个及以上的单词，需要给值加上引号
p {font-family: "sans serif";}
空格
空格不会影响 CSS 在浏览器的工作效果
一般书写格式如下
body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}
选择器分组
对选择器进行分组使得分组的选择器就可以共享相同的声明
h1,h2,h3,h4,h5,h6 {
color: green;
}
继承
- 在CSS中，，子元素将继承最高级元素所拥有的属性(有些浏览器不支持)
- 如设置body的字体为Verdana，根据继承网页中所有子元素显示的字体应该都为Verdana
- 若不希望子元素继承父元素的属性，只需指定子元素对应的属性值即可
CSS 派生选择器
派生选择器根据上下文关系来定义样式
将列表中的strong元素变为蓝色，其他地方的不变
li strong {
color: blue;
}
根据上下文关系来定义样式，无需为 strong 元素定义特别的 class 或 id，代码更加简洁。
CSS id选择器
id选择器为特定id的HTML元素指定样式，id选择器以#来定义
<p id="red_p">这个段落是红色。</p>
#red_p {color:red;}
注意： 每个id在每个HTML中只能出现一次
id选择器加派生选择器
定义一个样式给id为sidebar中的p元素
#sidebar p {
font-style: italic;
}
定义一个样式给id为sidebar中的h2元素
#sidebar h2 {
font-size: 1em;
font-style: italic;
text-align: right;
}
CSS 类选择器
类选择器为该类中的HTML元素指定样式，类选择器以.来定义
指定样式给类为center的元素
.center {text-align: center}
注意： 类名的第一个字符不能使用数字，Mozilla 或 Firefox识别不了。
类选择器加派生选择器
指定一个样式给fancy类中的td元素
.fancy td {
color: #f60;
background: #666;
}
定义一个class为fancy的td元素
<td class="fancy">
给该表格指定样式
td.fancy {
color: #f60;
background: #666;
}
CSS 属性选择器
为拥有指定属性的 HTML 元素设置样式，只需要有该属性即可
为所有含有title属性的元素指定样式
[title]
{
color:red;
}
属性和值选择器
为含有title属性且值为t1的元素指定样式
[title=t1]
{
border:5px solid blue;
}
为含有title属性且值中含为hello的元素指定样式(属性值用空格分隔)
[title~=hello] { color:red; }
为含有title属性且值中含为hello的元素指定样式(属性值用-连字符分隔)
[lang|=en] { color:red; }
| 属性选择器 | 作用 |
|---|---|
| [attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
| [attribute$=value] | 匹配属性值以指定值结尾的每个元素。 |
| [attribute*=value] | 匹配属性值中包含指定值的每个元素。 |
CSS 创建
外部样式表
-
外部样式表可以应用多个界面
-
可以通过修改文件来改变整个网页的外观
-
每个页面使用link来链接外部样式表，link在文档头部，如下，浏览器会从mystyle.css 中读取样式声明，并根据它来显示文档。
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> -
样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：
hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");}
内部样式表
-
内部样式表用于定义单个文档的样式
-
使用style标签在文档头部定义内部样式表，如
<head> <style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} </style> </head>
内联样式
-
内联样式将需要显示的样式定义在标签内
-
内联样式使用标签的style属性，如定义元素p内联样式
<p style="color: sienna; margin-left: 20px"> This is a paragraph </p>