CSS 概述
- CSS 指层叠样式(Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大的提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
样式解决了一个普遍的问题
HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、</p>、<table>等标签，HTML 的初衷是表达 "这是标题"、"这是表格"、"这是表格" 之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。
由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容独立于文档表现层的站点变得越来越困难。
为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出了样式（Style）。
所有的主流浏览器均支持层叠样式表。
样式表极大地提高工作效率
样式表定义如何显示 HTML元素，就像 HTML 3.2的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css文件中。通过仅仅编辑一个简单的CSS 文档，外部样式表使你有能力改变站点中所有页面的布局和外观。
由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。
多重样式将层叠为一个
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
层叠次序
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
- 1.浏览器缺省设置
- 2.外部样式表
- 3.内部样式表（位于 <head> 标签内部）
- 4.内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
简介介绍完了，接下来进入正题了。先介绍样式选择器。
选择器
包含如下几种：
- 类选择器
- ID选择器
- 通配符选择器
- 链接伪类选择器
- 结构伪类选择器(css3 才有 )
- 交集选择器
- 后代选择器
- 子元素选择器
- 属性选择器
- 伪元素选择器
下面通过代码来介绍：
/*类选择器 是可以重复多次使用的，类似于姓名*/
.mingren { /*声明类样式*/
color: orange;
}
/*ID选择器 只允许使用一次，类似于身份证是惟一的*/
#big { /*声明类样式*/
color: orange;
}
/*通配符选择器 控制所有的标签，实际开发很少很少用到，一般测试使用*/
* {
color: red;
}
/*链接伪类选择器*/
a:link { /*未访问的链接 用得少*/
font-size: 16px;
color: gray;
font-weight: 700;
}
/*已访问的链接:只要点击过链接一次的状态 用得少*/
a:visited {
font-size: 16px;
color: orange;
font-weight: 700;
}
/*鼠标移动到链接上 用得多*/
a:hover {
font-size: 16px;
color: red;
font-weight: 700;
}
/*鼠标在链接上长按 用得少***/
a:active {
color: green;
}
/*结构伪类选择器*/
li:first-child { /*第一个孩子*/
color: red;
}
li:last-child { /*最后一个孩子*/
color: green;
}
li:nth-child(3) { /*选择第三个孩子 nth-child(n) n代表第几个孩子*/
color: skyblue
}
li:nth-child(even) { /*选择所有的偶数孩子*/
color: green;
}
li:nth-child(odd) { /*选择所有的奇数孩子*/
color: blue;
}
li:nth-child(2n) { /*选择所有的2n孩子*/
color: black;
}
li:nth-child(2n+1) { /*选择所有的2n+1孩子*/
color: black;
}
li:nth-last-child(even) { /*从最后一个孩子开始数*/
color: pink;
}
:target { /*目标伪装选择器：可用于选择当前活动的元素*/
color: red;
}
/*交集选择器 标签.类选择器 ,即..又*/
div.singer {
font-weight: 700;
font-size: 40px;
}
div ul li { /*后代选择器，表示所有的后代li标签，要求一定是嵌套关系*/
color: gray;
}
.nav li {
color: green;
}
.nav > li { /*子元素选择器 亲儿子标签*/
color: red;
}
/*属性选择器:选取标签带有某些特殊属性的选择器 我们成为属性选择器*/
a[title] {
color: blue;
}
input[type=text] { /*表示选择input 属性 input="text" 的标签*/
color: pink;
}
div[class^=font] { /* ^=表示 class 以font开始的div 标签*/
color: pink;
}
div[class$=footer] { /* $=表示class 以footer结尾的div标签*/
color: green;
}
div[class*=tab] { /* *=表示class 包含tao的div标签*/
color: gray;
}
/* 伪元素选择器 比如 ::first-letter */
p::first-letter { /* 伪元素选择器 ::first-letter 选择第一个字*/
font-size: 30px;
color: orange;
}
p::first-line { /* 伪元素选择器 ::first-line 选择第一行*/
font-size: 20px;
color: gray;
}
p::selection { /* 当我们选择P 标签的样式*/
color: green;
}
div::before { /* before 和 after 在盒子div 的内部前面插入或者后面插入*/
color: green;
content: "我哦我";
}
div::after {
content: "我哦我";
}
PS:欢迎留言补充，笔者会继续跟进CSS 介绍（二）文章。
