前面总结完了html部分的基础内容之后,我总结了一下一下css部分的内容,希望对大家有所帮助~
初识CSS
• css的全称为cascading style sheet 层叠样式表,它的主要作用是为我们的html标签添加各种各样的样式和修饰效果。
• 这里我总结的css属于css2.0的知识点,css3.0的知识我打算在后面的文章里面总结。
• 其实html+css部分的知识点总共站前端的知识总量的1%-2%,但是却占了20%-30%的重要度,所以我们一定不能轻视html和css。(这是针对最近网上有很多人学习前端忽视html和css说的…)
首先我们要介绍一下,html页面如何引入我们的css样式
css的引入方式一共有4种:
1.行间样式 直接在html 的标签里面写style属性 前面两篇里面的更改标签的样式都是用的这一种方式
2.页面级css 在head标签里面添加一个style标签
这里的style标签的type要不不写,不然就要写正确,只要书写错误,这个样式就不会生效。
3.外部css文件 <—我们选择这种方式
我们在外面创建一个.css后缀的文件,然后在html里面引入这个外部的css文件即可。
在head标签里面加上一个link标签。
• link标签里面的href属性上写我们建立的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的加载是同步进行的。
• 这里有一点不得不说明的是,link标签引入和style标签修改样式二者之间并没有什么优先级,谁写在前面谁就先执行,写在后面的css文件会覆盖掉前面的css文件。有时候会因为网速问题,link写在上面,但是link还没有加载进来,所以先运行了后面的style,这种问题是网速导致的,并不是二者本身拥有优先级的问题。
介绍完了如何引入css文件之后,我们再来介绍一下css选择器的知识
• css选择器的作用是让我们找到我们想要修改样式的元素,然后为其修改样式。
我们的选择方式有很多种:
1.id选择器
我们给元素添加一个id属性,这个id是唯一标识,一个元素只能有一个id,一个id也只能给一个元素。然后我们在css文件中,通过#id {}的方式,就可以选择到我们添加id的那个元素了。
CSS; “复制代码”); “查看纯文本代码”); “返回代码高亮”)
2.class类选择器
在元素的属性中写一个叫做class的属性,这个属性是为这个元素添加一个类名,每一个元素可以有多个类名,同一个类名也可以赋给很多个元素。然后我们在css文件中,通过.class {} 的方式来选择出添加了类名的元素。
CSS; “复制代码”); “查看纯文本代码”); “返回代码高亮”)
3.标签选择器
div{} 只要是div的标签就会被选择出来。
• 这里有一个很重要的编程思想:我们先写css在写html,是我们自己在创造标签,而如果我们现在html再写css的话,是我们在添加样式。比如:我们在em加上font-weight: bold;的样式,这样我们就创造了一个加粗斜体的标签。
4.通配符选择器 {} 所有的标签都会被选择出来加上样式,body标签页包含在内。所以如果{background-color: red}的话,那么整个页面都会变红,因为我们同时给body元素也添加了背景颜色。
• 我们在单独的样式后面加上 !important之后,这个样式就会被赋予最高级的优先级,在没有特殊情况下,后面怎么添加样式都不会覆盖或者修改这个样式。比如:background-color: red !important;没有特殊情况的话后面怎么加样式都是红色的。
5.属性选择器
[id] {} 这样有id属性的标签就都会被选择出来。
我经过测试发现:
优先级 !important > 行间样式 > id > class|属性 > 标签 > *
但是我们不必背这些东西,我们只需要记住他们每一种选择器的权重值就可以了。
• 值得一提的是,在数学中无穷大+1依然是无穷大,但是在css选择器的权重值里面,无穷大+1 > 无穷大。
有了权重值 我们就可以了解父子选择器了
6.父子选择器 (派生选择器)
div p {}
给div下面的p加样式 这时候的p的权重值是加和的结果。
• 在实际开发中,我们因为要注意浏览器寻找时候的耗能,一般父子选择器不超过4层。
.wrapper .box .content .name 一般不超过像这样的四层。
7.直接子元素选择器
div>strong
div直接子元素里面的strong,div的子元素里面的不是div的直接子元素的strong就不符合要求。
√
×
id和class也是可以使用父子选择器的哟~
8.并列选择器
怎么选择出类名是select的div呢?
我们可以使用div.select {} 来选择出来
这种方式是只有div和.select同时作用在一个标签上的时候才会被选择出来,书写的时候标签名放在前面,其他的放在后面。
9.分组选择器
我们要想同时给四种标签都加上color: red的样式,不可能把四个标签都写一遍样式,因此要用分组选择器。
div, p, em, strong {} 这样的写法,我们可以把前面写的所有的标签都选择出来加上样式,中间是用逗号连接的。这个样子四种标签就全都被选择出来并且都加上了统一的样式。
最后有一个很重要的问题,那就是父子选择器的时候浏览器是怎么检索的?
div p strong em span 这样的选择器,浏览器是怎么找的?是从左往右,还是从右往左?
答案是从右往左哟~
这是为什么呢?
• 因为如果是从左往右寻找的话,每找到一个父级标签,都要把它下面的所有标签都遍历一遍,看看有没有我们下一个标签,上面那个选择器中,浏览器会先找到div这个标签,然后把div下面所有的子元素都遍历一遍后,找到strong这个标签,然后再把strong这个标签下面的所有元素遍历一遍,找到em这个标签,以此类推,这样是十分消耗性能并且速度非常慢的。
• 而如果是从右往左的话,那么浏览器只需要先找到span标签,然后从span这个节点向上寻找,只要找到em就可以停止寻找,以此类推,不必遍历所有的节点,而且需要遍历的点非常的少,这样的好处显而易见,速度非常快,而且不耗性能。
最后有一些需要说
• 我们一般不给标签加id,而是通过添加class类名来选择的,因为id代表唯一标示,我们一般用id来做标记,后台的php会提取出来id,然后换成他们的标记,因此可能会导致我们的选择器选择不出来我们想要的标签。
• 我们写类名的时候,一定要注意语义化,要符合语义化标准,要用英文单词去命名,而不是用看不懂的abc之类的类名。
希望以上的知识会对大家有所帮助哟~