品牌网站建设磐石网络优等,长春火车站,网站的功能规范,wordpress 收费下载资源#x1f31f;所属专栏#xff1a;前端只因变凤凰之路#x1f414;作者简介#xff1a;rchjr——五带信管菜只因一枚#x1f62e;前言#xff1a;该系列将持续更新前端的相关学习笔记#xff0c;欢迎和我一样的小白订阅#xff0c;一起学习共同进步~#x1f449;文章简…所属专栏前端只因变凤凰之路作者简介rchjr——五带信管菜只因一枚前言该系列将持续更新前端的相关学习笔记欢迎和我一样的小白订阅一起学习共同进步~文章简介本文介绍CSS的三大特性。知识学习内容来自b站的黑马程序员的视频1.1 层叠性相同选择器设置相同的样式此时一个样式就会覆盖另一个冲突的样式比如两个div一个div设置颜色与字体另一个div设置不一样的颜色。那么就会选择后面的div的颜色和前面div的字体因为只有颜色冲突了。原则样式冲突遵循就近原则哪个样式设置距离标签更近就执行哪个样式!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {color: red;font-size: 14px;}div {color: pink;}/style
/head
div层叠性/divbody/body/html1.2 继承性子标签会继承父标签的某些样式如文字的颜色和大小最主要的就是和文字有关的如text-,font-,line-这些开头的属性以及color。常用情况在body中设置整个页面的文字格式。!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody {color: pink;font-size: 14px;}/style
/headbodydivpbody已经给我设置好了/p/div
/body/html行高的继承性body { font:12px/1.5 Microsoft Yahei}行高可以不跟单位采用1.5表示字体大小的1.5倍。这样可以让子元素根据自己的文字大小自动调整行高!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody {color: pink;font: 12px/1.5 Microsoft Yahei;}div {/* 继承了body的行高这里是14*1.521px */font-size: 14px;}p {font-size: 16px;}/style
/head
div指定了自己的大小行高继承为14*1.5px/div
p指定了自己大小行高继承为16*1.5排序/p
ulli没指定自己大小行高继承为12*1.5/li
/ulbody/body/html1.3 优先性 当一个元素标签指定多个选择器就会有优先级的问题。如果多个选择器选择了同一个元素就要根据选择器自身的权重来判断。选择器选择器权重继承或者*0元素选择器1类选择器伪类选择器10id选择器100行内样式1000注意继承的权重是0。例如body中指定的文字颜色但是只要body中的标签有默认值都会用标签自己的默认值。复合选择器的权重复合选择器中的权重会叠加。例如同时设置li和ul li则用ul li的样式。又比如有.nav li和ul li则执行.nav li因为类选择器的权重更大。!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.nav li {color: red;}.nav .pink {color: pink;font-weight: 800;}/style
/headbodyul classnavli classpinkaaa/lilibbb/liliccc/liliddd/li/ul
/body/html
