1 - CSS样式

CSS 全称为“层叠样式表（Cascading Style Sheets）”。它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等用于设置页面的表现。CSS2.1是应用最广泛的，CSS3并不是一个完整的独立版本而是将不同的功能拆分成独立模块，这有利于不同功能的及时更新与发布也利于浏览器厂商的实际使用。

2 - 为何使用CSS

CSS可以将文档信息的内容和如何展现它的细节相分离。也就是可以将样式（Style标签）从它的内容分离出来避免重复且更容易维护，还可以为不同的目的，使用不同的样式而内容相同。

3 - CSS语法

CSS 规则是由两个主要的部分构成：选择器，以及一条或多条声明：

选择器：指明网页中要应用样式规则的元素

声明：在英文大括号“{}”中的就是声明，属性和值之间用英文冒号“:”分隔。当有多条声明时，中间可以英文分号“;”分隔

p {
      color: red;
      text-align:center;
}

CSS注释
注释就是用来解释你的代码，并可以随意编辑它，浏览器会忽略它。
CSS注释以/*开始以*/结束

/*p标签的样式 */
p {
      color: red;   /* 颜色为红色*/
      text-align：/*文本居中*/
}

4 - CSS样式引入

CSS样式都可以写在哪些地方？以CSS样式代码插入的形式来看基本分为三种

内联式CSS样式
嵌入式CSS样式
外联式CSS样式

内联式CSS样式
内联式CSS样式表就是把CSS代码直接写在现有的HTML标签中
<p style="color:red">这里内容是红色</p>
如有多条CSS样式代码设置可以写在一起用分号隔开。
<p style="color:red;font-size:12px">这里内容是红色</p>
嵌入式CSS样式
嵌入式CSS样式，就是可以把CSS样式代码写在<style type="text/css"></style>标签之间

<style type="text/css">
      span {
            color:red;    
            }
</style>

外联式CSS样式
外联式CSS样式就是把CSS代码写在一个单独的外部文件中，这个样式文件以“.css”为扩展名，在<head>内使用<link>标签将CSS样式文件连接到HTML文件内
<link href="a.css" rel="stylesheet" type="text/css" />
三种方法的优先级
内联式 > 嵌入式 > 外联式
嵌入式 > 外联式的前提：嵌入式CSS样式的位置一定在外联式的后面
<link href="style.css" ...>在<style type="text/css">...</style>的前面

5 - CSS选择器

每一条css样式声明（定义）由两部分组成

选择器{
    样式;
}

在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。

标签选择器
标签选择器其实就是html代码中的标签。如<html>、<body>、<h1>、<p>

p{font-size:12px;}  /*  字符大小为12像素 */

2.类选择器
.className以 . 开头，名称可包含字母，数字，-，_，但必须以字母开头。它区分大小写并可出现多次。
语法：
.类选器名称{css样式代码;}
注意：
英文圆点开头
其中类选器名称可以任意起名（但不要起中文）

/*类前面要加入一个英文圆点*/
.stress {
    color:red;
}

ID选择器
#idName以 # 开头且只可出现一次，其命名要求于 .className 相同。在很多方面，ID选择器都类似于类选择符，但也有一些区别：
为标签设置id="ID名称"，而不是class="类名称"。
ID选择符的前面是井号（#）号，而不是英文圆点（.）。
ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。

<div>
  <p id="special">Sample Paragraph</p>
</div>

<style type="text/css">
  #special {
    color: red;
  }
</style>

通配符选择器
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：
* {color:red;}

5.伪类选择器
更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color:red;}
上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。

常用伪类选择器：

:link IE6+
:visited IE7+
:hover IE6中仅可用于链接
:active IE6/7中仅可用于链接
:enabled IE9+
:disabled IE9+
:checked IE9+
:first-child IE8+
:last-child IE9+
:nth-child(even) 可为 odd even 或数字 IE9+
:nth-last-child(n) n从 0 开始计算 IE9+
:only-child 仅选择唯一的元素 IE9+
:only-of-type IE9+
:first-of-type IE9+
:last-of-type IE9+
:nth-of-type(even) IE9+
:nth-last-of-type(2n) IE9+

不常用伪类选择器：

:empty 选中页面中无子元素的标签 IE9+
:root 选择 HTML 根标签 IE9+
:not() 参数为一般选择器 IE9+
:target 被锚点选中的目标元素 IE9+
:lang() 选中语言值为某类特殊值的元素 IE7+

注意：
element:nth-of-type(n) 指父元素下第 n 个 element 元素，element:nth-child(n) 指父元素下第 n 个元素且元素为 element，若不是，选择失败。具体细节请在使用时查找文档。

/* 伪类属性定义有顺序要求！ */
  a:link {
    color: gray;
  }
  a:visited {
    color:red;
  }
  a:hover {
    color: green;
    /* 鼠标悬停 */
  }
  a:active {
    color: orange;
    /* 鼠标点击 */
  }

组合选择器

后代选择器 .main h2 {...}，使用空格表示IE6+
子选择器 .main>h2 {...}，使用>表示 IE7+
兄弟选择器 h2+p {...}，使用+表示 IE7+
h2~p {...}，使用~表示（此标签无需紧邻）IE7+

你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，）

/* 下面两组样式声明效果一致 */
h1 {color: red;}
h2 {color: red;}
h3 {color: red;}

h1, h2, h3 {color: red;}

CSS 笔记

CSS 笔记

1 - CSS样式

2 - 为何使用CSS

3 - CSS语法

选择器：指明网页中要应用样式规则的元素

声明：在英文大括号“{}”中的就是声明，属性和值之间用英文冒号“:”分隔。当有多条声明时，中间可以英文分号“;”分隔

4 - CSS样式引入

5 - CSS选择器

推荐阅读更多精彩内容

CSS 笔记

1 - CSS样式

2 - 为何使用CSS

3 - CSS语法

选择器：指明网页中要应用样式规则的元素

声明： 在英文大括号“{}”中的就是声明，属性和值之间用英文冒号“:”分隔。当有多条声明时，中间可以英文分号“;”分隔

4 - CSS样式引入

5 - CSS选择器

推荐阅读更多精彩内容

声明：在英文大括号“{}”中的就是声明，属性和值之间用英文冒号“:”分隔。当有多条声明时，中间可以英文分号“;”分隔