分享更有价值
被信任是一种快乐

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层叠样式表的知识点有哪些这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是云技术,小编将为大家推送更多相关知识点的文章,欢迎关注!

相关推荐: egg.js是不是node

这篇文章主要讲解了“egg.js是不是node”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“egg.js是不是node”吧! egg.js是node框架,是一个继承于Koa的node.js框架;egg.js框架…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册