Shulou(Shulou.com)06/01 Report--

这篇文章主要讲解了"css层叠样式表的知识点有哪些"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"css层叠样式表的知识点有哪些"吧!

css 层叠样式表

CSS: 层叠样式表 style:样式

修饰和美化整个网页，实现各种不同的网页布局风格

行内样式的优先级最高 内部样式和外部样式并没有明确的优先级，看先后书写顺序，后写的会覆盖先写的

行内样式：将css样式直接加到html每一个标签上，在头部标签书写 类似于写HTML的属性 使用style="样式名:样式内容;" 来设置

例： 文字颜色是红色

内部样式： 需要使用一对style标签，一般写在html的head标签中

外部样式：需要使用link标签来引入一个css文件 rel属性表示引入文件的类型 href属性表示引入文件的路径

导入样式： 暂时已经被废弃掉

导入样式和外部样式的区别：

导入样式：加载顺序是先加载HTML页面，当所有页面内容加载完之后，才会开始加载css，

会导致页面刚打开的前一两秒有短暂的没有css效果的网页

外部样式：加载HTML页面的同时一起加载CSS样式

常见的CSS样式：

color：文字颜色

background-color 背景颜色

关于编程语言 命名要求：不能以数字开头，不能使用特殊符号 可以使用的有 字母 数字 下划线 _ 结雅符号 $

css的选择器：

基本选择器（元素选择符）： 优先级：

id > 类 > 标签 > 通配符

优先级的计算： 采用权重值计算

id 权重值 100

类 10

标签 1

通配 0

通配选择符： * 表示 代表匹配页面中所有的HTML标签，设置统一的样式

注意：该选择符尽量避免使用，对页面的性能有影响

例： *{color:red;} 将页面所有的文字颜色设置成红色

标签选择符（类型选择符）：

通过标签名来选择对应的HTML标签，设置统一样式

例： p{color:red;} 将页面中所有的p标签文字颜色设置成红色

类选择符： class属性 每一个标签都可以添加一个class属性，该属性代表类名

在css中 使用 . 来表示类选择符

例： .co{color:green;} 将所有class名字是co的标签设置文字颜色是绿色

ID选择符： id属性 每一个标签都可以加一个id属性，但是该属性具有唯一性，同一个id名只允许出现一次

在css中 使用 # 来代表ID选择符

例： #lis{color:red;} 将id名为lis的标签设置文字颜色是红色

关系选择符：

包含选择符(后代选择器) 语法： 选择器1 选择器2{样式名:样式值;}

例： ul .lis{color:red;} 表示获取到ul中所有后代标签class属性是lis的标签，设置颜色是红色

子选择符 语法： 选择器1>选择器2{样式名:样式值;}

例： ul>li{color:red;} 表示获取到ul中所有子元素是li的标签，设置颜色是红色

相邻选择符 语法： 选择器1+选择器2{样式名:样式值;}

相邻选择符只会选择到下一个相邻的兄弟标签，不会选择之前的兄弟标签

例： #li3+li{color:red;} 表示选择id是li3的标签的下一个兄弟元素是li的标签，设置颜色是红色

兄弟选择符 语法： 选择器1~选择器2{样式名:样式值;}

兄弟选择符只会选择当前标签之后的所有兄弟标签，不会选择到前面的兄弟标签

例： #li3~li{color:red;} 表示选择id是li3的标签的后面所有兄弟元素是li的标签，设置颜色是红色

感谢各位的阅读，以上就是"css层叠样式表的知识点有哪些"的内容了，经过本文的学习后，相信大家对css层叠样式表的知识点有哪些这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.