CSS

css 也叫层叠样式表，用来设置网页中元素的样式。背景颜色 字体颜色 大小等等

基本语法：css的样式表由一个个的样式构成，一个样式又由选择器和声明块构成。

--选择器{样式名：样式值；样式名：样式值；}

--p{color:red;font-size:40px;}

三种样式：

内联样式： 将样式编写到标签内部的style属性中这种样式不用填写选择器，直接编写声明即可。

这种样式只会对当前标签起作用，不能对样式进行复用，不推荐使用。

<p style="color:red;font-size:20px"></p>

内部样式表：将样式直接写到head中的style标签中，可以同时为多个元素设置样式，但是这种方式，样式只能在一个页面中使用，不能在多个页面中重复使用。

<style type="text/css"></style>

外部样式表：可以将所有的样式保存到一个外部的css文件中，然后通过<link>标签将样式表引入到文件中。

<link rel="stylesheet" type="text/css"href="style.css"/>

选择器

1.元素选择器  根据标签名，选取页面中的指定元素

语法：标签名{}     div{}    p{}    h1{}

2.id选择器   根据元素的id属性值选取唯一的元素

语法：#id{}     #box{}   #hello{}

3.类选择器  根据元素的class属性值选中一组元素

语法：.class{}     .hello{}    .box{}

4.复合选择器（交集选择器）  可以选中多个条件的元素

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

5.群组选择器（并集选择器） 可以同时选中多个选择器的元素

语法：选择器1,选择器2,选择器3 { }   div,p,#box,.hello{}

6.通用选择器  可以同时选中页面中所有的元素

语法： *{}   

7.后代元素选择器      选中指定元素的指定后代元素

语法：祖先元素  后代元素  后代元素{}    div span{}   div p{}

8.子元素选择器  选中指定元素的指定子元素

语法: 父元素 >子元素{}     div > span{}   div > p{}

伪类和伪元素

链接定义样式：

1.正常链接    - a:link

2.访问过的链接   - a:visited

3.鼠标划过的链接   - a:hover

4.正在点击过的链接  -  a:active

其他

1.获取焦点   -  :focus

2.指定元素前 -  :before

3.指定元素后 - :after

4.选中的元素  - ::selection

给段落定义样式

1.首字母   - ：first-letter

2.首行  - ：first-line

其他子元素选择器

first-child

– 选择第一个子标签

-  :last-child

– 选择最后一个子标签

-   :nth-child

– 选择指定位置的子元素

-   :first-of-type

-    :last-of-type

-   :nth-of-type

– 选择指定类型的子元素

兄弟选择器

 语法:

– 查找后边一个兄弟元素

-  兄弟元素 + 兄弟元素{}

– 查找后边所有的兄弟元素

-   兄弟元素 ~ 兄弟元素{}

否定伪类

语法：  

-   ：not(选择器){}

选择器的优先级

-  内联样式：优先级 1000

- id选择器：优先级 100

- 类和伪类选择器：优先级 10

-元素选择器：优先级 1

- 通配符：优先级 0

餐厅作业

1.plate 元素选择器

2. bento 元素选择器

3. #fancy ID选择器

4. plate apple 后代元素选择器

5.  #fancy pickle 复合选择器

6. .small 类选择器

7. bento .small,plate .small  并集选择器

8. bento orange 后代元素选择器

9. plate,bento,plate 并集选择器

10.  * 通配选择器

11. plate * 后代元素选择器 

12. plate + apple 兄弟元素选择器

13. bento~pickle 兄弟元素选择器

14. plate > apple 子元素选择器

15. orange:first-child 子元素选择器

16. :only-child 子元素选择器

17. .small:last-child 子元素选择器

18. plate:nth-child(3) 子元素选择器

19. :nth-last-child(4)子元素选择器

20. apple:first-of-type 子元素选择器

21. plate:nth-of-type(even) 子元素选择器

22. plate：nth-of-type（2n+3）子元素选择器

23. apple：only-of-type 子元素选择器

24.  .small:nth-child(even) 子元素选择器

25.  bento:empty 子元素选择器

26.  apple:not(.small) not选择器

，