css3新增属性（html5和css3新增属性）



一、CSS定义：cascading style sheet 层叠样式表（css就是装饰HTML的）

二 、为网页添加样式

1、术语解释
css规则 = 选择器 + 生明块

选择器：选中元素

声明块：出现在大括号中包含很多声明（属性），每一个声明（属性）表达了一方面的样式

三、CSS代码书写的位置
1、行间样式（内部样式表）：直接在对应的HTML标签后面加上属性 style = “css 样式”
2、页面级css（内联样式表）：在head标签里写上style标签

<style type=”text/css”>

css 样式

</style>

<link rel="stylesheet" type="text/css" href=https://www.bilibili.com/read/cv/"">

前两个属性是告诉浏览器这里边链接的是 css 样式， href 里边放地址，然后把 css 样式写在 css 文件里

四、css选择器
1、作用：精准的选中你想要的元素
2、选择器种类
1） id 选择器：给 HTML 元素后边加上属性 id=“id 值”，对应在 css 里边写上#id 值{css 代码}， 一个元素只能有一个 id 值，一个 id 值只能对应一个元素。
2） class 选择器：给 HTML 元素后边加上属性 class=“class 值”，对应在 css 里边写上 .class 值{css 代码}，和 id 不同的是： 一个元素可以有多个 class 值（写法：class=“class 值 1 class 值 2”）， 一个 class 值也可以对应多个元素。
3）标签选择器：在 css 里边写上标签名{css 代码}， 则 HTML 里边所有的此类标签都应用此 css 样式属性（不管这个标签在哪，也不管外边被套了多少层，都能被选中）。
4）通配符选择器：在 css 里边写上*{css 代码}， 则 HTML 里边所有的标签都应用此css 样式属性。
5）属性选择器：在 css 里边写上[id]{css 代码} / [class]{css 代码}， 则所有的id/class 元素都会应用此 css 样式，如果写上[id=“id 名” ]{css 代码} / [class=“class 名” ]{css 代码}， 则只有被命名成这种 id/class 名的元素可以应用此样式。
6）伪类选择器
：选中某些元素的某种状态
：hover，鼠标悬停上面的状态
：active，激活状态，鼠标按下状态
：link：超链接为访问时候状态
：visited，超链接访问过后的状态
顺序：注意如果说上面四个一起使用一定按照link visited hover active ，便于记忆，可以这个样， lvha 爱恨法则
7）伪元素选择器
：before

：after

<span>HTML</span>

        span::before{

               content:”《”

        }

五、层叠
1、声明冲突：同一个样多次应用到同一个元素，解决声明冲突的过程，浏览器自动处理
2、权重计算：
1）、比较重要性
• 作者样式中的!important样式
• 作者样式表普通样式
• 浏览器默认样式表中的样式
2）、比较特殊性
看选择器，总体规则选择器选中的范围越窄，越特殊
具体规则：通过选择器，计算出一个4位数（XXXX）
• 千位：如果是内敛样式记作1，否则记作0
• 百位：等于选择器中所有id选择器中的数量
• 十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
• 个位：等于选择器中所有元素选择器、伪类选择器的数量
逢256进1
3）、比较源次序
代码靠后的胜出

原作者：

原链接：https://blog.csdn.net/_/article/details/?ops_request_misc=%257B%2522request%255Fid%2522%253A%%2522%252C%2522scm%2522%253A%3..pc%255Ffavorite.%2522%257D&request_id=06&biz_id=&utm_medium=distribute.pc_search_result.none-task-favorite-2~favorite~first_rank_v2~hot_rank-2-.pc_favorite&utm_term=HTML%E5%85%A5%E9%97%A8

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdhtml/29525.html