CSS3基础(1)
CSS介绍
前端三层
| 层次 | 语言 | 功能 |
|---|---|---|
| 结构层 | html | 搭建结构、放置部件、描述语义 |
| 样式层 | css | 美化页面、实现布局 |
| 行为层 | javascript | 实现交互效果、数据收发、表单验证等 |
css（cascading style sheet）层叠样式表是用来给html标签添加样式的语言。
css基础语法
h2 {
/*
结尾必须有";"
最后一条样式可以没有;
每条样式可以不换行,但最好换行
*/
color: red;
}
如何引用CSS样式
css的四种引用方式：
1.内嵌式
将css样式写在html中的head标签中，用style标签包裹
如：
<style>
h2 {
color: red;
}
</style>
2.外链式
将css样式写在css文件中，用link标签在head标签中引用，rel 属性表示关系，href 属性指定css文件的路径，例如：
<link rel="stylesheet" href="css/第一个css文件.css">
3.导入式
导入式是最不常用的css导入方法，使用导入式的样式表,不会等待css文件加载完,而是直接渲染html结构,会导致页面一开始只有html显示。例如：
<style>
@import url(css/第一个css文件.css);
</style>
4. 行内式
直接通过style写在对应标签内，牺牲了css的批量设置样式的的功能。例如：
<h2 style="color: red;">行内式</h2>
css中的选择器
传统的css2.1有5种选择器:
1.标签选择器
标签选择器也叫元素选择器，类型选择器，直接使用标签名作为选择器，通常用在标签的初始化。
span {
color: red;
}
ul {
/* 去掉无序列表的小圆点 */
list-style: none;
}
a {
/* 去掉超链接的下划线去掉 decoration(装饰) */
text-decoration: none;
}
2.id选择器
id 是标签的唯一标识，同一个页面每一个标签的 id 都是不一样的 ，id 的名称只能由字母,数字,下划线,短横构成,且不能以数字开头,字母区分大小写,但习惯上一般小写，id选择器用 #id 表示选择器。
#para1 {
color: red;
}
#para2 {
color: blue;
}
#para3 {
color: green;
}
#para4 {
color: yellow;
}
3.class选择器
class 命名规范与 id 相同，多个标签可以为相同类名同一个标签可以属于多个类，使用多个类名时，类名用空格隔开。如果一个标签中有多个冲突的class选择器,冲突的属性值取决于css中class选择器的书写顺序,后写的class选择器会覆盖先写的class选择器，class选择器用 .class 表示。
.warning {
color: red;
}
.spec {
/* 文字倾斜 italic表示斜体 */
font-style: italic;
}
关于原子类
一些常用的属性我们完全可以把它单独提出来，提高复用性，能增加开发效率，这就是原子类，例如：
.fs-12 {
font-size: 12px;
}
.color-red {
color: red;
}
4.复合选择器
复合选择器又分为三种：
后代选择器
例如：.box .spec 用 空格 分隔两个选择器名，选择类名为 box 的标签中类名为 spec 的标签。
注意：**后代*不一定是"儿子"可以用空格隔开好几代。
.box p {
color: red;
}
.box .spec{
color: red;
}
.box #first{
color: red;
}
交集选择器
例如：li.spec，两个连续的选择器名，没有任何东西连接，选择既是li标签,也属于spec类的标签，如果有标题选择器名，标题选择器名应该放在开头，后面再接其他选择器名
div.spec1{
color: red;
}
div#spec1{
color: red;
}
并集选择器
例如：ul, ol 两个选择器名用逗号分隔，选择所有ul和ol标签。
div,h2 {
color: red;
}
#f,#s {
color: red;
}
.f,.s {
color: red;
}
伪类选择器
类名或标签名或id名:标签状态
a标签的伪类 :link（没有被访问的超链接）->:visited（已被访问的超链接）->:hover（正被鼠标悬停的超链接）->:active（正被激活的超链接,按下未被松开）
注意：顺序不可错（LVHA）。
a:link{
color: red;
}
a:visited {
color: blue;
}
a:hover {
color: green;
}
a:active {
color: black;
}
css3新增的选择器
css3新增5种选择器：
1.元素关系选择器
元素关系选择器分为三种：
子选择器
用>分隔两个元素，表示只会选择第一个元素的直接后代元素，即两个标签为父子关系。例如：
/* 选择类名为 box 的标签的子标签，且为<p></p>的标签*/
.box>p {
color: red;
}
相邻兄弟选择器
+介于两个元素之间，当第二个元素紧跟着第一个元素之后(唯一)，并且两个元素为兄弟元素，则第二个元素将被选择。例如：
/* 选择 <img> 紧跟着的 <span> */
img+span {
color: red;
}
通用兄弟选择器
~介于两个元素之间，选择第一个元素之后所有同层级的第二个元素。
例如：
/* <h3></h3> 之后的和与其为兄弟标签的<span></span> */
h3~span {
font-style: italic;
}
2.序号选择器
:first-child 第一个元素
:last-child 最后一个元素
:nth-child(3) 第3个子元素
:nth-of-type(3) 第3个某类型子元素
:nth-last-child(3) 倒数第3个子元素
:nth-last-of-type(3) 倒数第三个某类型的子元素
/*
:first-child
表示类名为box的标签中第一个子标签，且为p标签的标签
*/
.box p:first-child {
color: red;
}
/*
:last-child
表示类名为box的标签中最后一个子标签，且为p标签的标签
*/
.box p:last-child {
color：red；
}
/*
:nth-child(3)
表示类名为box的标签中第三个子标签，且为<p></p>的标签，如果第三个子标签不为p标签，则无效
*/
.box p:nth-child(3) {
color：red；
}
/*
:nth-of-type(3)
表示类名为box的标签的子标签中，类型为<p></p>的第三个标签
*/
.box p:nth-of-type(3) {
color: red;
}
/*
:nth-last-child(3)
表示类名为box的标签中倒数第三个子标签，且为<p></p>的标签，如果第三个子标签不为p标签，则无效
*/
.box p:nth-last-child(3) {
color: red;
}
/*
:nth-last-of-type(3)
表示类名为box的标签的子标签，类型为<p></p>的倒数第三个标签
*/
.box p:nth-last-of-type(3) {
color： red；
}
注意：可以使用 （an+b） 的形式
/* 选择1、3、5、7..... */
.box p:nth-child(2n+1) {
color: red;
}
3.属性选择器
举例1：img[alt]
/* 选择有alt属性的img标签 */
img[alt] {
color: red;
}
举例2：img[alt=[“赫萝”]
/* 选择alt属性是赫萝的img标签 */
img[alt="赫萝"] {
color: red;
}
举例3：img[alt^=“赫萝”]
/* 选择alt属性以赫萝开头的img标签 */
img[alt^="赫萝"] {
color: red;
}
举例4：img[alt$=“赫萝”]
/* 选择alt属性以赫萝结尾的img标签 */
img[alt$="赫萝"] {
color: red;
}
举例5：img[alt*=“美”]
/* 选择alt属性中含有美的img标签 */
img[alt*=“美”] {
color: red;
}
举例6：img[alt~=“美丽”]
/* 选择alt属性中有空格隔开的美丽字样的img标签 */
img[alt~="美丽"] {
color: red;
}
举例7：img[alt|=“开心”]
/* 选择alt属性以“开心-”开头的img标签 */
img[alt|=“开心”] {
color: red;
}
4.css3新增伪类
| 伪类 | 意义 |
|---|---|
| :empty | 选择内容为空的元素 |
| :focus | 选择当前获得焦点的表单元素 |
| :enabled | 选择当前有效的表单元素 |
| :disabled | 选择当前无效的表单元素 |
| :checked | 选择当前已被勾选的单选或复选按钮 |
| :root | 选择根元素,即< html >标签 |
举例：
css样式：
<style>
.para {
/* 宽度、高度 */
width: 100px;
height: 100px;
/* 边框 */
border: 1px soild black;
}
p:empty {
background-color: red;
}
input:disabled {
background-color: yellow;
}
input:enabled {
background-color: red;
}
input:focus {
background-color: blue;
}
input:checked+span {
color : green;
}
:root {
font-size: 20px;
}
</style>
html：
<body>
<p class="para"></p>
<p class="para"></p>
<p class="para">123</p>
<p>
<input type="text">
<input type="text" disabled>
<input type="checkbox"><span>文字</span>
</p>
</body>
效果：
5.伪元素
css3新增“伪元素”的特性，表示虚拟动态创建的元素。
用双冒号表示，IE8兼容单冒号。
::before
创建一个伪元素，其将成为匹配选中的元素的第一个子元素，必须设置content属性表示其中的内容。
::after
创建一个伪元素，其将成为匹配选中的元素的最后一个子元素，必须设置content属性表示其中的内容。
例如：
a::before {
content: "★";
}
a::after {
content: "😀";
}
<a href="">伪元素</a>
效果：
::before和::after主要用在想在文字前添加小图标的时候。
::selection
应用于文档中被用户鼠标选中的部分。
例如：
p::selection {
background-color: red;
color: blue;
}
<p>文字</p>
效果：
选中前：
选中后：
::first-letter
选中某元素（必须是块级元素）中第一行的第一个字母。
::first-line
选中某元素（必须是块级元素）中第一行的全部文字。
例如：
.spec::first-letter {
font-size: 50px;
}
.spec::first-line {
/* 添加下划线 */
text-decoration: underline;
}
<p class="spec">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
效果：
层叠性与选择器权重计算
css的层叠性
多个选择器可以作用于同一个标签，效果叠加。
<style>
p {
color: red;
}
.spec {
font-style: italic;
}
#para {
text-decoration: underline;
}
</style>
<p id="para" class="spec">我是段落</p>
效果：
层叠性的冲突处理
当多个选择器定义的属性有冲突时，按照选择器的权重进行处理。
id权重 > class权重 > 标签权重
例如：
<style>
p {
color: red;
}
.spec {
color: green;
}
#para {
color: blue;
}
</style>
<p id="para" class="spec">我是段落</p>
效果：
复杂选择器权重计算
复杂选择器可以通过（id的个数，class的个数，标签的个数）的形式，计算权重。
例如：
<style>
#box1 #box2 p {
color: red;
}
#box1 div.box2 #box3 p {
color: green;
}
.box1 .box2 .box3 p {
color: blue;
}
</style>
<div class="box1" id="box1">
<div class="box2" id="box2">
<div class="box3" id="box3">
<p>我是段落</p>
</div>
</div>
</div>
我们发现 p 标签被三个复合选择器修饰，我们需要计算权重
#box1 #box2 p （2，0，1）
#box1 div.box2 #box3 p （2，1，2）
box1 .box2 .box3 p （0，3，1）
由于id权重 > class权重 > 标签权重
所以选择 #box1 div.box2 #box3 p 的选择器。
提升权重
利用 !important 提高选择器某条属性的权重，可以在属性的后面写 !important 。尽量不要用，容易造成不经意的样式冲突。
例如：
.spec {
color: red !important;
}
扫一扫
268
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
