CSS3很简单

一 什么是CSS？

• CSS是用于描述HTML文档样式我语言，将内容和样式放开。即：美化网页
• 语法：【选择器】和【一个或多的说明】
  （1）选择器：指定将要被设置样式的HTML元素。
  （2）说明：使用大括号包裹。每个样式说明包括一个css属性以及该属性对应的值，以冒号分隔。不同样式说明之间使用分号分隔。
• 如何在网页中插入CSS样式表？
  （1）内联样式（Inline Style）。直接在HTML标签中设置。定制性强。
  （2）内部样式表（Internal Style Sheet）。使用一个style标签在head中定义。
  （3）外部样式表（External Style Sheet）。相同的样式应用于很多个网页时。将样式设置为以.css为文件后缀的一个文件中，使用时使用标签调用这个样式表。
  1. link的rel属性：设置为stylesheet。
  2. link的type属性：设置为text/css。
  3. link的href属性：执行外部样式表的路径
• CSS没有限制空格的使用。CSS对字母大小写是不敏感的，但应该注意一点。
• 内部样式 > 内部样式表 > 外部样式表。

二 选择器

选择器是什么？
选择器就是用来精准定位的东西，可以当做是一个门牌号，根据这个门牌号去找到需要装饰的房子。

概述：
CSS选择器分为5类：

1. 基本选择器
2. 复合选择器
3. 伪类选择器
4. 伪元素选择器
5. 属性选择器

• 基本选择器：
  （1） 通用选择器：代表符号【*】，能够匹配所有的元素。

  1. 语法：*{……}

  （2） 元素选择器：以某个HTML元素作为选择器。比如：p，h1等

  2. 语法：元素{……}

  （3）类选择器：使用class给需要相同样式的标签加一个类属性。在设置样式是使用【.类名{}】

  3. 语法：.类名{……}

  （4） id选择器：使用HTML标签的id属性进行定位，和class差不多。id属性是唯一的，所以它定位到的元素是单个的。在设置样式是使用【#id名{}】

  4. 语法：#id名{……}

• 复合选择器：是由两个或多个基本选择器进行组合，目的：进一步匹配元素。
  （1）交集选择器：由两个选择器构成，第一个必须是元素选择器，第二个必须是类选择器或id选择器。

  1. 语法：元素选择器.类选择器{……}
  2. 语法：元素选择器#id选择器{……}

  （2）并集选择器：也叫群组选择器。由两个或两个以上的任意选择器构成。所设置的样式对每个参与的选择器都有效。将不同选择器的样式抽取出来进行统一设置。

  3. 语法：选择器1,选择器2,……{……}

  （3）后代选择器：也叫包含选择器。用于选择包含在指定选择器匹配的元素中的后代元素。先应用选择器1，再从匹配元素的后代中找出匹配选择器2的元素。选择所有子元素。

  4. 语法：选择器1 选择器2 ……{……}

  （4）子元素选择器：只选择匹配选择器中的直接后代子元素。

  5. 语法：选择器1>选择器2{……} 即：只应用于选择器1的匹配选择器2的直接子元素。

  （5）相邻兄弟选择器：如果需要选择紧接在某个元素后面，而且两者有共同的父元素。

  6. 语法：选择器1+选择器2{……} 即：紧接在选择器1后面的选择器2才被设置。

  （6）通用兄弟选择器：选择器1后面的所有同一级的选择器2都被设置

  7. 语法：选择器1~选择器2{……}

概述：
伪选择器：伪元素选择器、伪类选择器。

乱数假文：当我们不知道要说什么时，可以使用乱数假文代替
使用Lorem生成

• 伪元素选择器：
  （1）::first-line选择器：只设置文本块的第一行内容的样式。只对块级元素的第一行有效。也可在::前加限定，只对那个块级元素有效。
  （2）::first-letter选择器：用来选中文本块的第一个字符。和上一个类似。
  （3）::before和::after选择器：会将content属性的内容插入。content：要插入的内容。

  1. 例： a::before{content: “……”; }，也可以插入图片。
  2. 例： a::before{content: url(); }

  （3）::selection选择器：改变用户选中的部分文本的样式

伪类选择器概述：

1. 动态伪类选择器：
   :link、:visited、 hover、:active.、:focus
2. UI伪类选择器:
   :enabled、:disabled、 :checked、 required、 :optional、:default、:valid、 :invalid、
   :in-range、 :out- of-range、:read-only、:read-write、 :indeterminate。
3. 结构伪类选择器:
   :root、:nth-child、 :nth-last-child、 :nth-of-type、:nth-last- of-type、:first-child、
   :last-child、 :first-of-type、:last-of-type、:only-child、 :only-of-type、 :empty
4. 其他伪类选择器;
   :target、:lang、 :not

• 伪类选择器：
  （1） 动态伪类选择器：根据条件的改变来匹配元素。

  1. 用在a标签上：语法：a:link{……}。必须按照以下顺序。简记为【LOVE&HATE】
     1. :link（链接未被访问）
     2. :visited（链接被访问过）
     3. :hover（当鼠标悬停在链接上方的时候）
     4. :active（鼠标按下链接的那一刻）
  2. :hover、:active也经常用在div等其他元素上。
  3. :focus ：当元素获得焦点时被选中。

  （2）UI伪类选择器：人机交互界面，表单元素中。

  4. :enabled和:disabled：有些表单元素，比如输入框、密码框、复选框等，都有可用和禁用这两个属性。
  5. :checked：使用与单选框，复选框，下拉列表中的选项，选中时的样式。
  6. :required、 :optional：适用于必选和可选的元素。
  7. :default：选中默认的元素
  8. :valid、:invalid：用于检查输入是否合法时改变输入框样式。
  9. :in-range、:out- of-range：用于用户输入的数字在范围内和不在范围内时的样式
  10. :read-only、:read-write：用于只读和可读可写。给input标签设置为只读或可读可写

  （3）结构伪类选择器:

  11. :root：只匹配HTML元素。即：整个网页。
  12. :empty：匹配那些没有定义任何内容的元素。
  13. :first-child、:last-child、 :first-of-type、:last-of-type、:only-child、 :only-of-type：用来设置子元素的选择器。
  14. :nth-child(n)、 :nth-last-child(n)、 :nth-of-type(n)、:nth-last- of-type(n)：匹配第n个子元素，

  （4）其他伪类选择器：

  15. :target：为页面内锚点设置样式。锚点：主要是为了实现在页面内部的跳转。和id属性搭配使用，即：在目标中设置id值，例：

      跳转

      回到第二个跳转

  16. :lang：匹配设置了lang全局属性的元素。
  17. :not(selector)：也叫否定选择器。可以对任意选择器进行取反操作。即：除了指定的元素之外，其他的都取反。

• 如何区分伪类选择器和伪元素选择器？
  （1）为了格式化文档树之外的信息。
  （2）伪类用于当已有元素处于某个状态时，为其添加样式。就是在不添加class属性时实现类的功能。
  （3）伪元素用于创建一些不在文档树中的元素，为其添加样式。

• 属性选择器：可以基于元素的属性进行筛选。语法例：[class=“Wood”]{……}

【传送门】
20分钟学会HTML5