千锋教育-做有情怀、有良心、有品质的IT职业教育机构

400-811-9990
当前位置:首页  >  行业资讯  >  正文
分享到:

Web前端入门教程之CSS相关知识概述

时间:2019-01-09 16:34     来源:千锋太原 作者:Yolanda

  CSS被用于同时控制多重页面的样式和布局,关键在于布局的耗时和难点通过CSS可以将HTML中的格式化都剥离出来。

  什么是层叠?

  简单说就是:一个元素标签的样式CSS的来源,是可以有很多来源的。把每个来源点抽象看为一个层,每个来源层根据CSS的标准,是有不同的优先级的。优先级低的在底层,优先级高的在高层。这样层次堆叠就有了一个从上而下的堆叠模型。每一层都可以给元素设置任何CSS属性,每一层之间可以有相同的属性。只是,相同的属性会根据层次的优先级进行覆盖。可以再次想象从上帝视角,垂直向下看,上层有的会遮挡下层有的,上层没有的就会看到下层有的。将一个立体的看成一个平面视角,这就是层叠的含义了。

  至于优先级,内联高于选择器(多个选择器,根据权重排列优先,后者覆盖先前),选择器高于继承。可以说,CSS这种设计非常优秀的。了解层叠和CSS属性来源,是调试样式的关键。

  优点:

  1. 大大提升网页开发的效率

  2. 提高网站被搜索引擎收录。

  3. 内容和表现分离。

  4. 网站表现统一,容易修改;这个很重要,用户体验最重要。

  CSS引入方式

  内联样式:在HHTML元素标签头中添加style属性。

  内部样式表:在HHTML的head标签使用style标签,包含CSS内容。

  外部引用:使用外部CSS文件,通常在head中使用link;CSS文件以.CSS结尾;外部还有一种导入式;三种引入方式,内联是优先大于后两者的。而后两者注意其在HHTML代码中引入的顺序,这个顺序会影响优先级。相同选择器权重后引入的优先级高。

  一般父级标签可以影响到子标签,但是有些则不能,如a链接标签.

  在引入方还要提到,引入方式除了内联,其它都是选择器。标签CSS样式的抽象来源方式有:继承,选择器,内联。只是选择器有两种引入方式。

  CSS结构

  CSS结构:选择器和声明;

  选择器:selector 选择出dom节点。匹配选择器的节点,将获得该选择器的声明(CSS样式)作为一层。至于这一层是优先级,另行判定权重。选择器原理在很多框架中都得到了应用,如jQuery。

  声明:声明就是属性和值是k:v对,多个声明间使用分号间隔。

  CSS选择器

  从在元素标签的角度,它被选择器Selector选中后,元素去选择排序涉及到自己的选择器权重顺序,并重叠他们,取出想要的。权重高的没有时,则选择使用选择权重低的的样式。这就是重叠。

  其实选择的分类,可以站在另一个角度来看待:

  一类:直接选择器,通过元素自身的特点的选择器;标签,类,id,属性。

  二类:间接选择器,很多叫组合选择器;通过自己所处的环境和位置来;由直接选择器构成,直接选择器之间存在包含关系或者说父子关系,最后选择上的是被包含的元素,利用了父元素的选择来间接通过它们的关系来选择元素。后代选择器,儿子选择器,毗邻选择器,弟弟选择器。

  三类:分组选择器,很多叫群组选择器。就是多个选择器,无论直接还是间接,它们都是一样的声明样式;为了节约代码,将他们用逗号间隔。其实质就是把选择器放到一起成为一个组,他们之间没有任何关联关系,只是大家都是一样的声明样式,放在一块儿而已。

  四类:交集选择器,因为一个元素的多个自身特点组合在一起来选择元素。但是,第一个选择器必须是标签选择器,第二个必须是内选择器或者id选择器。如元素有多个类,通过一个类可能选择不到,就通过多个类一起选择。也可以想成,一个选择器选择的元素和另一个选择器选择的元素之间的交集里面的元素。交集选择器用的还是比较多的。它的构成就是选择器之间没有空格。交集还可以是标签和属性选择器交集。

  五类:伪类和伪元素,不存在的。伪类是元素事件发生时被选择上所呈现的样式。伪元素是元素的前后虚拟出元素。

  选择器说白了,就是通过找可能定位元素的各种维度去实现查找。当你要给一个或者一类元素创建选择器时,就要考虑怎么查找到他们更准确,就是选择器类型的选型了。还有种选择器是用于动态的,就是配合js改变元素,从而改变元素匹配的选择器,从而改变页面的布局样式。这就是js操纵页面动态的手段之一(也要考虑选择器优先级)。

  其实类选择器可以看作是用于标签继承的,标签可以多继承。

  类用来归类一些样式。可以将实现了不同样式的类应用到元素中。最后多个类进行层叠,得到想要的效果。所以用类的层叠使用是很科学和灵活的。

  1 要用“公共类”的思想,将多个标签相同的样式,都抽象到一个类中。

  2 不要试图使用一个类就将标签的样式都写到这个类中。通过抽象公共部分到一个类中,然后标签使用多个类。这样就解除了一定的耦合,即如果元素的样式都在一个类中,那么类和这个元素之间就是高度耦合的。每个类尽量小,减少了耦合度,这样就变得非常灵活,把代码写活了。

  ID选择器:选择器是#id值: #k2 {}

  通用选择器:* { }

  组合选择器:是对前三种选择器进行扩展组合。而inline style是元素标签内的,严格不是选择器,但是人们便于理解记忆,将其说成内联选择器。

  后代选择器:标签选择器后跟标签。

  后代,无论直属还是间接: div p {}

  直属,直接后代 : div>p {}

  毗邻, 后代中最近的一个: div+p {}

  弟弟,找到和自己同级的标签: div~p {}

  如: .k2 span img {} 通过多个选择器好到具体的标签。

  分组选择器 也叫并集选择器,如: div,span,img {} 注意使用逗号间隔的,这就是群组选择器,其实群组选择器就是将定义相同的放在一起,省代码。

  属性选择器:

  根据属性查找;根据属性和值查找:=,^=,$=,*=,~=

  伪类选择器:是标签加上标签的type类型。如: a:active {} 。

  伪类选择器主要用在a标签

  表单的input标签input输入框获取焦点时的样式:input:focus {}

  伪元素选择器:

  所谓伪元素选择器,就是针对一个虚拟的元素,没有具体的标签,就是一个标签的相对位置构建一个inline的盒子。所以伪元素选择器,长得像这样:p:after {} 这样。

  主要有三类:first-letter、before、after

  其实指定元素的伪元素,伪元素是一个相当于是个元素,就是一个盒子,这个盒子是在指定元素盒子的content内,即是指定元素的子元素。before在前面after在后面。after多用于一个盒子内,利用它的位置性,即总是在最后,可以给他指定一个clear:both属性,进行清除浮动。

  CSS选择器的优先级

  CSS选择器是一个查找的过程,高效的查找影响页面加载的效率

  选择器优先原理,一般而言,选择器越特殊,选择器指向越准确,优先级越高(所以我们要定义一个选择器时,要想优先级高不被其它覆盖,尽量准确)根据基本选择器的权重进行计算。

  组合的选择器,就根据这个进行计算得出权重值。

  还有一些法则:

  1. 伪类选择器、属性选择器、类选择器 权重一样

  2. 标签选择器、伪元素标签选择器 权重一样

  注意:权重比较是按照同类比较,不会去计算和的大小。也就是说同一权重计数是不会进位的。

相关文章

  • 北京天丰利校区(总部)地址:北京市海淀区宝盛北里西区28号天丰利商城4层
    北京沙河校区:北京市昌平区沙阳路18号北京科技职业技术学院广场服务楼2、3层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 深圳西部硅谷校区地址:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619
    深圳大学城校区地址:深圳市南山区留仙大道1201号大学城创客小镇16栋3楼
    咨询电话: 0755-23015275/23015546-801(硅谷) 0755-86660670-801(大学城)
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 上海校区地址:上海市宝山区同济支路199号智慧七立方3号楼2-4层
    咨询电话:400-811-9990 021-65233829-609
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 郑州校区地址:郑州市二七区航海中路60号海为科技园C区10层、12层
    咨询电话:0371-55191750
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 广州校区地址:广州市天河区元岗路200号慧通产业园B9三层
    咨询电话:020-38035223 020-38035220
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 大连校区地址:辽宁省大连市高新园区爱贤街10号大连设计城A座901
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 武汉金融港校区地址:武汉市东湖高新技术开发区光谷大道77号金融港B18栋3楼
    武汉智慧园校区地址:武汉市东湖高新技术开发区光谷大道61号智慧园21栋2楼
    咨询电话:027-59313371
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、360网络安全、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训
  • 成都校区地址:成都市武侯区科华北路62号力宝大厦N(北楼)18楼
    咨询电话:400-811-9990 028-83178771
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 西安校区地址:西安市雁塔区高新六路52号立人科技C座西区4楼
    咨询电话:029-85363390
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 杭州旺田校区:浙江省杭州市江干区九堡旺田书画城A座4层
    杭州龙驰校区:浙江省杭州市下沙经济技术开发区元成路199号龙驰智慧谷B座7层
    咨询电话:400-811-9990 0571-86893632/0571-86094032
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 青岛校区地址:青岛市市北区龙城路卓越世纪中心3号楼8层801
    咨询电话:0532-80911190
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 重庆校区地址:重庆市高新区科园一路2号大西洋国际12-1
    咨询电话:400-811-9990 023-68883009
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 长沙校区地址:湖南省长沙市岳麓区麓谷企业广场A2栋三单元306号
    咨询电话:0731-85513210
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 哈尔滨校区地址:哈尔滨市松北区创新一路699号 科技创新城19号楼B座五楼
    咨询电话:400-811-9990/0451-87173191
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 南京校区地址:南京市建邺区应天大街780号应天智汇产业园弘辉园1幢2楼
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 太原校区地址:太原市小店区长治路230号能源互联网大厦6层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 千锋教育服务号

    了解千锋动态
    关注千锋教育服务号

  • 千锋教育移动站

    扫一扫快速进入
    千锋移动端页面

  • 千锋互联服务号

    扫码匿名提建议
    直达CEO信箱