CSS
1. CSS简介
层叠样式表(Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS自1994年CSS1发展至今到CSS3。1998年5月W3C发表了CSS2,紧接着2001年微软发布了IE6,很大程度推动了CSS发展。CSS2 的规范是基于 CSS1 设计的,包含了 CSS1 所有的功能,并扩充和改进了很多更加强大的属性。包括选择器、位置模型、布局、表格样式、媒体类型、伪类、光标样式。然后接着就是CSS3,事实上,CSS3早于1999年已经开始制订,直到2011年6月7日,CSS 3 Color Module终于发布为W3C Recommendation。从CSS3开始,CSS规范就被拆成众多模块(module)单独进行升级,或者将新需求作为一个新模块来立项并进行标准化。因此今后不会再有CSS4、CSS5这种所谓大版本号的变更,有的只是CSS某个模块级别的跃迁。
2. 入门
-
CSS是基于结构,美化结构的,所以结构是基础。
<body> <h1>标题标签</h1> </body>
-
CSS代码我们写在head的style标签中,对这个h1标签进行修饰,改变文字颜色为红色。
<style type="text/css"> h1{ color: red; } </style>
在游览器中运行,我们发现标题文字已经成功变成红色了。
3. CSS的分类
CSS根据导入的位置可以分为3类:行内样式、内部样式、外部样式。
行内样式
行内样式是定义在标签内部的style属性中。语法为:
<元素 style=" key1: value1 ; key2: value2 ; …" >
<h1 style="color: red;">标题标签</h1>
缺点:结构跟样式混乱,不具有重用性。
内部样式
内部样式是定义在style标签中,语法为:
<style type="text/css">
选择器{
key1: value1;
key2: value2;
......
}
</style>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
h1{
color: red;
}
</style>
</head>
<body>
<h1 style="color: red;">标题标签</h1>
</body>
</html>
缺点:如果有多个文件需要引用这个样式的话,无法重用
外部样式
外部样式把CSS样式定义在外部的CSS文件中。语法同内部样式。
- style.css
h1{
color: red;
}
-
将外部样式文件引入到需要的文件中
<html> <head> <meta charset="utf-8" /> <title></title> <!-- 引入需要的外部样式 --> <link rel="stylesheet" href="css/style.css" /> </head> <body> <h1 style="color: red;">标题标签</h1> </body> </html>
4. 选择器
作用:把定义的样式跟想生效的元素进行配对连接。
4.1 基本选择器
选择器 | 语法 | 例子 | 描述 |
---|---|---|---|
类选择器 | .class | .intro | 选择 class=“intro” 的所有元素。 |
id选择器 | #id | #firstname | 选择 id=“firstname” 的所有元素。 |
标签选择器 | element | p | 选择所有 元素。 |
通配符选择器 | * | * | 选择所有元素。 |
4.2 层次选择器
选择器 | 语法 | 例子 | 描述 |
---|---|---|---|
群组选择器 | element,element | div,p | 选择所有
元素和所有
元素。 |
后代选择器 | element element | div p | 选择
元素后代中所有
元素。 |
子选择器 | element>element | div>p | 选择
元素的所有儿子
元素。 |
相邻弟弟选择器 | element+element | div+p | 选择紧接在
元素之后的弟弟
元素。 |
所有弟弟选择器 | element1~element2 | div~p | 选择
元素的所有弟弟
元素。 |
4.3 结构伪类选择器
选择器 | 语法 | 例子 | 描述 |
---|---|---|---|
第一个子元素 | :first-child | p:first-child | 选择属于父元素的第一个子元素且这个元素为 元素。 |
最后一个子元素 | :last-child | p:last-child | 选择属于父元素最后一个子元素且这个元素为 元素。 |
第一个子元素 | :first-of-type | p:first-of-type | 选择在父元素中第一个p元素。不受其它元素影响。 |
最后一个子元素 | :last-of-type | p:last-of-type | 选择在父元素中最后一个p元素。不受其它元素影响。 |
第N个子元素 | :nth-last-child(n) | p:nth-last-child(3) | 选择属于父元素的第3个子元素且这个元素为 元素。 |
第N个子元素 | :nth-of-type(n) | p:nth-of-type(3) | 选择在父元素中第3个p元素。不受其它元素影响。 |
倒数第N个子元素 | :nth-last-child(n) | p:nth-last-child(3) | 选择属于父元素的倒数第3个子元素且这个元素为 元素。 |
倒数第N个子元素 | :nth-last-of-type(n) | p:nth-last-of-type(3) | 选择在父元素中倒数第3个p元素。不受其它元素影响。 |
4.4 属性选择器
语法 | 例子 | 描述 |
---|---|---|
[attribute] | [target] | 选择带有 target 属性所有元素。 |
[attribute=value] | [target=_blank] | 选择 target="_blank" 的所有元素。 |
[attribute*=value] | a[src*=“abc”] | 选择其 src 属性中包含 “abc” 子串的每个 元素。 |
[attribute$=value] | a[src$=".pdf"] | 选择其 src 属性以 “.pdf” 结尾的所有 元素。 |
[attribute^=value] | a[src^=“https”] | 选择其 src 属性值以 “https” 开头的每个 元素。 |
4.5 优先级
选择器 | 权值 |
---|