day4(css优先级)

参考博客：

　　http://www.cnblogs.com/yuanchenqi/articles/6856399.html

css属性选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>/*.c1[po*="p"]{*//*color: red;*//*}*//*[po="p1 p"]{*//*color: green;*//*}*//*.c1{*//*color: red;*//*}*//*.btn{*//*font-size: 30px;*//*}*/</style>
</head>
<body><div po="p1 p" class="c1 btn">p1</div>
<!--这个class有两个值，即等于c1又等于btn-->
<div po="p2 p" class="c1">p2</div><div class="c1">p3</div></body>
</html>

View Code

css优先级

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>/*div{*//*color: red;*//*}*//*#id1{*//*background-color: blueviolet;*//*}*//*.d2{*//*background-color: bisque;*//*}*//*div{*//*background-color: darkblue;*//*}*//*#id1 .p1{*//*color: darkcyan;*//*}*//*div p{*//*color: green;*//*}*//*.d1 p{*//*color: red;*//*}*//*.p1{*//*color: sienna;*//*}*//*.d1 .p2{*//*color: red;*//*}*/.d1 .c2 .p2{color: green;}.p2{color: red!important;}</style>
</head>
<body><!--<div class="d1 d2" id="id1" style="background-color: green">--><div class="d1 d2" id="id1">DIV<p class="p1">PPP</p><div class="c2"><div class="c3"><p class="p2">inner</p></div></div>
</div><p>hello</p><span>span</span></body>
</html>

View Code

所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。

样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：

1 内联样式表的权值最高 style=""－－－－－－－－－－－－1000；

2 统计选择符中的ID属性个数。 #id －－－－－－－－－－－－－－100

3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10

4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-－1

按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。

css颜色，文本在标签中的位置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>p{color: blue;/*color: RGB(0,255,0);*//*color: RGBA(255,0,0,1);*//*R是红色，G是green，B是蓝色，A是透明度*//*color: #A1A1A1;*/opacity:0.9 ;/*此也是个透明度的设置*/}div{width: 200px;height: 200px;background-color: gray;text-align: right;/*控制文本在背景的位置，right为右边，还有center，left*/}</style>
</head>
<body><p>hello</p>
<div>DIV</div>
</body>
</html>

View Code

背景属性，图片什么的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>div{width: 1600px;height: 1600px;/*背景图片相关*//*/!*background-image: url("12.jpg");*!/*//*/!*background-repeat: no-repeat;*!/*//*/!*background-position: 400px 200px;*!/*//*/!*background-position: center center;*!/*//*把背景图片调整，第一个center水平居中(离左边的距离)，第二个center是距离上边缘的位置*/background: url("12.jpg") no-repeat 100px 100px ;/*简写的一个全部包括其中，no-repeat不平铺*/background-color: #2459a2;}</style>
</head>
<body>
<div></div></body>
</html>

View Code

display属性很重要，常用，有四参数

none知道就行了，
block设为块标签
inline设为内联标签
inline-block此属性重要，能设长宽而且不是块(内联标签不能设长宽，而块标签是独占一行的)

转载于:https://www.cnblogs.com/wanchenxi/p/8446832.html

day4(css优先级)相关推荐

CSS三大特性（CSS层叠性、CSS继承性、CSS优先级）
1. CSS层叠性层叠性是指多种CSS样式的叠加. 原则: 样式冲突,遵循的原则是就近原则. 那个样式离着结构近,就执行那个样式. 样式不冲突,不会层叠示例代码: <!DOCTYPE htm ...
css就近原则_「Web前端开发进阶篇」CSS优先级
所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序.既然样式有优先级,那么就会有一个规则来约定这个优先级,而这个"规则"就是重点. [引言] 讲解完这篇CSS优先级的文章 ...
CSS优先级算法是如何计算？
CSS的specificity特性或非凡性,它是一个衡量css优先级的一个标准, 既然的标准就有判定规定和计算方式,specificity用一个四位数来表示, 更像四级从左到右,左的最大级,一级大于一 ...
css优先级计算规则
2019独角兽企业重金招聘Python工程师标准>>> 最近面试了一些求职者,我问css优先级计算规则是怎样的?答曰ID优先级>class>元素选择器,外联样式优先级低于 ...
详细解读CSS优先级——Web前端系列学习笔记
文章目录样式优先级选择器的优先级总结样式优先级 CSS优先级即是指CSS样式在浏览器中被解析的权重不同. 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于 ...
深入理解css优先级
为什么要写这篇文章是因为 <style type="text/css"> body h1 {color: green; } html h1 {color: purple ...
CSS语法和CSS优先级
语法层叠样式表( Cascading Stylesheet ,简称CSS ), 其基本目标是让浏览器以指定的特性去绘制页面元素,比如颜色,定位,装饰.CSS的语法反映了这个目标,由下面两个部分构建: ...
前端：CSS/11/CSS浮动和清除，CSS继承性，CSS优先级
CSS浮动和清除 float:让元素浮动,取值:left(左浮动),right(右浮动): clear:清除浮动,取值left(清除左浮动),right(清除右浮动) both(左右浮动都去掉): 1 ...
week9 day4 CSS网页布局
week9 day4 CSS网页布局一.网页布局方式二.标准流三.浮动流 3.1 什么是脱离文档流? 3.2 什么又是半脱离文档流 3.3 浮动元素贴靠问题 3.4 浮动元素字围现象 3.5 浮 ...

day4(css优先级)

day4(css优先级)相关推荐

最新文章

热门文章