--- 恢复内容开始 ---
CSS 是 Cascading Style Sheets 的简称, 中文称为层叠样式表, 用来控制网页数据的表现, 可以使网页的表现与数据内容分离.
步骤:
A. 找到标签 B. 操作标签
一 CSS 四种引入方式
1. 行内式
<p style="background-color: rebeccapurple">hello yuan</p>
2. 嵌入式
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- p{
- background-color: #2b99ff;
- }
- </style>
- </head>
3. 链接式
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
4. 导入式
将一个独立的. CSS 文件引入 html 文件中, 导入式使用 CSS 规则引入外部 CSS 文件,<style > 标记也是写在 < head > 标记中, 使用的语法如下:
<style type="text/css">
@import"mystyle.css"; 此处要注意. CSS 文件的路径
</style>
注意:
导入式会在整个网页装载完后再装载 CSS 文件, 因此这就导致了一个问题, 如果网页比较大则会儿出现先显示无样式的页面, 闪烁一下之后, 再出现网页的样式. 这是导入式固有的一个缺陷. 使用链接式时与导入式不同的是它会以网页文件主体装载前装载 CSS 文件, 因此显示出来的网页从一开始就是带样式的效果的, 它不会象导入式那样先显示无样式的网页, 然后再显示有样式的网页, 这是链接式的优点.
二. 选择器
1, 标签选择器
标签选择器, 此种选择器影响范围大, 一般用来做一些通用设置, 或用在层级选择器中.
举例:
- div{
- color:red
- }
- ......
- <div > 这是第一个 div</div> <!-- 对应以上样式 -->
- <div > 这是第二个 div</div> <!-- 对应以上样式 -->
2, 类选择器
通过类名来选择元素, 一个类可应用于多个元素, 一个元素上也可以使用多个类, 应用灵活, 可复用, 是 CSS 中应用最多的一种选择器.
举例:
- .blue{
- color:blue
- }
- .big{
- font-size:20px
- }
- .box{
- width:100px;height:100px;background:gold
- }
- ......
- <div class="blue">....</div>
- <h3 class="blue big box">....</h3>
- <p class="blue box">....</p>
3, 层级选择器
主要应用在标签嵌套的结构中, 层级选择器, 是结合上面的两种选择器来写的选择器, 它可与标签选择器结合使用, 减少命名, 同时也可以通过层级, 限制样式的作用范围.
举例:
- .con{width:300px;height:80px;background:green}
- .con span{color:red}
- .con .pink{color:pink}
- .con .gold{color:gold}
- ......
- <div class="con">
- <span>....</span>
- <a href="#" class="pink">....</a>
- <a href="#" class="gold">...</a>
- </div>
- <span>....</span> # 没有样式
- <a href="#" class="pink">....</a> # 没有样式
4,id 选择器
通过 id 名来选择元素, 元素的 id 名称不能重复, 所以一个样式设置项只能对应于页面上一个元素, 不能复用, id 名一般给程序使用, 所以不推荐使用 id 作为选择器.
举例:
#box{ color:red } ...... <p id="box"> 这是一个段落标签 </p> <!-- 对应以上一条样式, 其它元素不允许应用此样式 --> <p > 这是第二个段落标签 </p> <!-- 无法应用以上样式, 每个标签只能有唯一的 id 名 --> <p > 这是第三个段落标签 </p> <!-- 无法应用以上样式, 每个标签只能有唯一的 id 名 -->
5, 组选择器
多个选择器, 如果有同样的样式设置, 可以使用组选择器. 举例:
E,F 多元素选择器, 同时匹配所有 E 元素或 F 元素, E 和 F 之间用逗号分隔 div,p { color:#f00; }
E F 后代元素选择器, 匹配所有属于 E 元素后代的 F 元素, E 和 F 之间用空格分隔 li a { font-weight:bold;
E> F 子代元素选择器, 匹配所有 E 元素的子元素 F div> p { color:#f00; }
E + F 毗邻元素选择器, 匹配所有紧随 E 元素之后的同级元素 F div + p { color:#f00; }
注意嵌套规则:
块级元素可以包含内联元素或某些块级元素, 但内联元素不能包含块级元素, 它只能包含其它内联元素.
有几个特殊的块级元素只能包含内联元素, 不能包含块级元素. 如 h1,h2,h3,h4,h5,h6,p,dt
li 内可以包含 div
块级元素与块级元素并列, 内联元素与内联元素并列.
6, 属性选择器
E[att] 匹配所有具有 att 属性的 E 元素, 不考虑它的值.(注意: E 在此处可以省略, 比如 "[cheacked]". 以下同.) p[title] { color:#f00; }
E[att=val] 匹配所有 att 属性等于 "val" 的 E 元素 div[class="error"] { color:#f00; }
7. 伪类 (Pseudo-classes)
CSS 伪类是用来给选择器添加一些特殊效果.
anchor 伪类: 专用于控制链接的显示效果
a:link(没有接触过的链接), 用于定义了链接的常规状态.
a:hover(鼠标放在链接上的状态), 用于产生视觉效果.
a:visited(访问过的链接), 用于阅读文章, 能清楚的判断已经访问过的链接.
a:active(在链接上按下鼠标时的状态), 用于表现鼠标按下时的链接状态.
伪类选择器 : 伪类指的是标签的不同状态:
a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
a:link { color: #FF0000 } /* 未访问的链接 */ a:visited { color: #00FF00 } /* 已访问的链接 */ a:hover { color: #FF00FF } /* 鼠标移动到链接上 */ a:active { color: #0000FF } /* 选定的链接 */ 格式: 标签: 伪类名称 { CSS 代码; }
当鼠标放在 "百度" 这两个字上面时, 下划线消失, 这就是伪类选择器的功能.
9. 权重的等级
可以把样式的应用方式分为几个等级, 按照等级来计算权重
1, 内联样式, 如: style="", 权重值为 1000
2,ID 选择器, 如:#content, 权重值为 100
3, 类, 伪类, 如:.content,:hover 权重值为 10
4, 标签选择器, 如: div,p 权重值为 1
附加说明
1, 文内的样式优先级为 1000, 所以始终高于外部定义. 这里文内样式指形如 < div style="color:red>blah</div > 的样式, 而外部定义指经由 < link > 或 < style > 卷标定义的规则.
2, 有! important 声明的规则高于一切.
3, 如果! important 声明冲突, 则比较优先权.
4, 如果优先权一样, 则按照在源码中出现的顺序决定, 后来者居上.
5, 由继承而得到的样式没有 specificity 的计算, 它低于一切其它规则 (比如全局选择符 * 定义的规则).
按这些规则将数字符串逐位相加, 就得到最终的权重, 然后在比较取舍时按照从左到右的顺序逐位比较.
参考: https://www.cnblogs.com/yuanchenqi/articles/5977825.html
https://www.cnblogs.com/chichung/p/9664487.html
--- 恢复内容结束 ---
来源: http://www.bubuko.com/infodetail-2978659.html