CSS 基础

• 1.概念

• CSS 指层叠样式表 (Cascading Style Sheets)
• 样式定义如何显示 HTML 元素
• 样式通常存储在样式表中
• 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
• 外部样式表可以极大提高工作效率
• 外部样式表通常存储在 CSS 文件中
• 多个样式定义可层叠为一

2.样式层叠次序

1. 浏览器缺省设置
2. 外部样式表
3. 内部样式表（位于 标签内部）
4. 内联样式（在 HTML 元素内部）

3.语法

css内容本质是选择器。
selector {property: value}
示例：
h1 {color:red; font-size:14px;}
在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。

4.选择器特性

4.1选择器的分组

示例：
h1,h2,h3,h4,h5,h6 { color: green; }
对所有的标题元素进行了分组。所有的标题元素都是绿色的。

4.2选择器的继承

示例：
body { font-family: Verdana, sans-serif; }
根据上面这条规则，站点的 body 元素将使用 Verdana 字体（假如访问者的系统中存在该字体的话）。
通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。

如果你不希望 "Verdana, sans-serif" 字体被所有的子元素继承，又该怎么做呢？比方说，你希望段落的字体是 Times。没问题。创建一个针对 p 的特殊规则，这样它就会摆脱父元素的规则：

     body  {
     font-family: Verdana, sans-serif;
     }

     td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

     p  {
     font-family: Times, "Times New Roman", serif;
     }

5.选择器类型

5.1派生选择器

     strong {
     color: red;
     }

     h2 {
     color: red;
     }

     h2 strong {
     color: blue;
     }

效果

The strongly emphasized word in this paragraph isred.
This subhead is also red.
The strongly emphasized word in this subhead isblue.

5.2 id选择器

示例：

#red {color:red;}
#green {color:green;}

效果

这个段落是红色。
这个段落是绿色。

注意：id 属性只能在每个 HTML 文档中出现一次。想知道原因吗，请参阅 XHTML:网站重构。

5.3 类选择器

示例：

//所有拥有 center 类的 HTML 元素均为居中
.center {text-align: center}

//和 id 一样，class 也可被用作派生选择器，类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字：
.fancy td {color: #f60; background: #666; }

//元素也可以基于它们的类而被选择，类名为 fancy 的表格单元将是带有灰色背景的橙色：
td.fancy {color: #f60; background: #666; }

注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

5.4 属性选择器

示例：

//带有 title 属性的所有元素设置样式
[title]{color:red;}

//为 title="W3School" 的所有元素设置样式
[title=W3School]{border:5px solid blue;}

//包含指定值的 title 属性的所有元素设置样式
[title~=hello] { color:red; }

示例：
W3School

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute=value]	匹配属性值中包含指定值的每个元素。

6.参考

https://www.w3school.com.cn/css/index.asp