尚硅谷新版Web前端HTML5+CSS3知识点集合篇【p27-p37】

尚硅谷新版Web前端HTML5+CSS3全套基础教程完整版(初学者零基础入门)

p27（17:48)、p28（23:54)、p29 (12:47)、P30 (18:12)、p31(12:09)、p32（19:45）、p33（09:57）、p34（24:47）、p35（12:58）、p36（15:05）、p37（05:12）
一、CSS简介
1.网页分为三个部分
-结构 HTML
-表现 CSS
-行为 JavaScript
2.CSS
-中文名称为层叠样式表 （Cascading Style Sheets）
-网页实际上是一个多层结构，可以通过CSS为网页的每一层设置样式，最终我们只能看到网页最顶层的样式。总而言之，CSS的作用是设置网页中元素的样式。
二、CSS样式表
1.内联样式
-第一种方法，在标签内部通过style属性来设置元素的样式。一般在实际开发中不推荐使用。
-问题：内联样式只能对一个标签生效，如果希望影响到多个元素，必须得在每个元素中都添加style属性。并且在样式需要变化时，需要一个一个的修改，不方便维护。
-开发时绝对不要使用内联样式。
2.内部样式表
-第二种方法，将样式编写到head标签里的style标签里，然后通过css的选择器来选中元素，并为其设置各种样式。
-好处：可以同时为对个标签设置样式，并且修改时只需要修改一处即可全部应用。内部样式表更加方便对样式进行复用。
-问题：内部样式表只能对一个网页起作用。里边的样式不能跨页面进行复用。
3.外部样式表（开发中最佳实践）
-可以将css样式编写到一个外部的css文件中，通过link标签来引入css文件。
-好处：外部样式表，需要通过link标签进行引入，这意味着只要想使用这些样式的网页，都可以对其进行引用，使我们的样式可以在不同的页面之间进行复用。
-将样式编写到外部的css文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。
三、CSS的基本语法
1.style标签
-在style标签里，无法使用html规范，而是要遵循css语法规范。
2.选择器
-通过选择器可以选中页面中的指定元素，比如P的作用就是选中页面中所有的p元素。
3.声明块
-通过声明块表示要给元素设置哪些样式，声明块由一个一个的声明组成。
-声明块是名值对结构，一个样式名对应一个样式值，名和值之间以：连接，以；结尾。
四、选择器
1.常用选择器
-元素选择器：可以根据标签名选择指定的元素，语法就是标签名+声明块如p{}。
-id选择器：可以根据元素的id属性值，选中一个元素，id值唯一）。语法为#id属性值{}。
-class标签属性：和id类似，但不同的是，class可以重复使用。可以通过class属性，为元素分组。
-类选择器（开发当中主要使用）：可以根据元素的class属性选中一组元素，语法为.class属性值{}。可以同时为一个元素指定多个class。
-通配选择器：选中页面中的所有元素，语法为*{}。
五、选择器优先级
1.总结排序
-!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
六、复合选择器
1.交集选择器
-同时选择符合多个条件的元素，语法：选择器1选择器2选择器3{}。
-交集选择器中如果有元素选择器，必须使用元素选择器开头。
2.选择器分组/并集选择器
-同时选择多个选择器对应的元素 如h1,span{}。
七、关系选择器
1.父元素
-直接包含子元素的元素叫做父元素
2.子元素
-接被父元素包含的元素是子元素
3.祖先元素
-直接或间接包含后代元素的元素叫做祖先元素， 一个元素的父元素也是它的祖先元素
4.后代元素
-直接或间接被祖先元素包含的元素叫做后代元素
-子元素也是后代元素
5.兄弟元素
-拥有相同父元素的元素叫兄弟元素
6.子元素选择器
-作用：选中指定父元素的子元素
-语法：父元素 > 子元素{}。
7.后代元素选择器
-作用：可以选中指定祖先元素内的指定后代元素
-语法：祖先 后代{}。
8.兄弟元素选择器
-选择下一个兄弟，语法：前一个+下一个
-选择下面所有兄弟，语法：兄~弟
八.属性选择器
1.【属性名】
-选择含有指定属性的元素
2.【属性名=属性值】
-选择含有指定属性名和属性值的元素
3.【属性名^=属性值】
-选择属性值以指定值开头的元素
4.【属性名$=属性值】
-选择属性值以指定值结尾的元素
5.【属性名*=属性值】
-选择属性值中含有某值的元素

九、伪类选择器
1.伪类
-伪类是不存在的类，特殊的类
-作用是用来描述一个元素的特殊状态（比如被鼠标点击的元素、第一个元素、被移入的元素）
-伪类一般情况下都是使用：开头
-:first-child，选中第一个子元素
-:last-child，选中最后一个子元素
-nth-child()，选中第n个子元素
-特殊值： 第n个，n的范围0到正无穷，2n 或 even 表示选中偶数位的元素，2n+1 或 odd 表示选中奇数位的元素
-以上所有的伪元素都是根据所有的子元素进行排序的
-first-of-type，last-of-type，nth-of-type（），这几个伪类的功能和上述类似，不同点在于他们是在同类型元素中进行排序。
-：not（）表示否定伪类，将符合条件的元素从选择器中去除

十、超链接的伪类
1.:link一般用来表示没被访问过的链接（正常的链接）
2.：visited一般用来表示被访问过的链接，由于隐私的原因，所以visited这个伪类只能修改链接的颜色。
3.:hover用来表示鼠标移入的样式
4.:active用来表示鼠标点击的状态

十一、伪元素选择器
1.伪元素
-伪元素表示页面中一些特殊的并不真实存在的元素（特殊位置）
-伪元素使用：：开头（双冒号）
-：：first-letter（表示第一个字母）
-：：first-line（表示第一行）
-：：selection（表示选中的内容）
-：：before（表示元素的起始位置）
-：：after(表示元素的结束位置）
-：：before和：：after必须结合到content属性来用