css的全称为cascading style sheet 层叠样式表,它的主要作用是为我们的html标签添加各种各样的样式和修饰效果。
首先,我们来介绍一下html页面如何引入CSS。
css的引入方式一共有4种:
1.行间样式 直接写在html 标签的style属性中。eg: <div style="..."></div>
2.页面级css 在head标签里面添加一个style标签,写入样式。eg: <style type=”text/css”> ...</style>
3.外部css文件 创建一个.css后缀的文件书写css样式,然后在html里面引入这个外部的css文件:即在head标签里面加上一个link标签。eg: <link rel=”stylesheet” href="">(link标签里面的href属性上写我们建立的css文件的地址,最好用相对地址的形式。)
一般情况下我们都推荐使用外部css文件的方式引入css,因为link加载不会阻塞html的加载,html和css属于异步加载。
4.import方式引入(已经弃用) 在head标签里面写一个style标签,在第一行写上@import url();(url里面写上css文件的地址,可以加引号也可以不加引号。)
这种引入方式有几种缺点导致它现在被废弃使用:
1.必须写在第一行,若有多个则一起写在最前面。
2.ie6的环境下,只能使用最多31次,这个数字据说是阿里的开发人员一点一点测试出来的。
3.程序读到import的时候,会忽略掉import,等到html里面的所有内容包括图片在内的所有资源全都加载完之后才加载import的css文件,也就是说,import引入的css文件和html的加载是同步进行的。
介绍完如何引入CSS,我们来介绍一下CSS选择器的相关内容。
1.id选择器
我们可以给元素添加id属性,这个id是唯一标识,一个元素只能有一个id,一个id也只能给一个元素。eg:<div id=”demo”></div>
这样我们就可以使用id选择器来选择这个元素了。
#demo {
background-color: red;
width: 100px;
height: 100px;
}
2.class/类选择器
像id属性一样,我们可以给元素添加class的属性,这个属性是为这个元素添加一个类名,每一个元素可以有多个类名,同一个类名也可以赋给很多个元素。eg:<div class=”demo”></div>
.demo {
background-color: red;
width: 100px;
height: 100px;
}
3.标签选择器
div{} ->只要是div的标签就会被选择出来。
4.通配符选择器
*{} 所有的标签都会被选择出来加上样式,body标签页包含在内。
5.属性选择器
[id] {} 这样有id属性的标签就都会被选择出来。
6.父子选择器 (派生选择器)
div p {} 即给div下面的p加样式
注意: 在实际开发中,我们因为要注意浏览器寻找时候的耗能,一般父子选择器不超过4层。eg:.wrapper .box .content .name 一般不超过像这样的四层。
7.直接子元素选择器
div>strong div直接子元素里面的strong,不是div的直接子元素的strong都不符合要求。
8.并列选择器
div.select {} 选择出类名是select的div。这种方式是只有div和.select同时作用在一个标签上的时候才会被选择出来,书写的时候标签名放在前面,其他的放在后面。
9.分组选择器
我们要想同时给多种标签都加上同一种属性的话,就可以使用分组选择器。
div, p, em, strong {} 中间是用逗号连接,这样我们就可以把前面写的所有的标签都选择出来加上统一样式了。
最后,我们来聊一下选择器的权重问题。
CSS选择器 | 权重值 |
---|---|
!important | 无穷大 |
行间样式 | 1000 |
id | 100 |
class、属性、伪类 | 10 |
标签、伪元素 | 1 |
通配符 | 0 |
有一点值得大家注意,在数学中无穷大+1依然是无穷大,但是在css选择器的权重值里面,无穷大+1 > 无穷大。
以上就是这篇文章全部要告诉大家的内容,希望对大家有帮助~