归零——CSS-第四天
2020-02-25 本文已影响0人
夏沫雪殇
CSS学习
CSS权重
选择器 权重（256进制）
！important Infinity（正无穷）
行间样式 1000
id选择器 100
class选择器|属性～|伪类～ 10
标签|伪元素 1
通配符* 0
权重在并列选择器时显示出来用途
1.设置字体时，设置的是高——规范字体在显示时统一
2.设置颜色时有三种方法：▹纯英文单词，▹颜色代码#ff0000，▹颜色函数rgb（255，255，255）；光学三原色：r（00-ff） g（00-ff） b（00-ff）
3.浏览器底层遍历父子选择器从右向左
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style type="text/css">
/*父子选择器/派生选择器*/
div span{
background-color: red;
}
/*直接子元素选择器*/
div>p{
background-color: blue;
}
/*浏览器底层遍历父子选择器从右向左*/
/*并列选择器*/
div.demo{
color: green;
}
/*分组选择器*/
em,strong,span{
color: darkcyan;
}
/*字体样式设置*/
#font{
/*字体大小*/
font-size: 14px;
/*字体粗细：normal正常400，bold粗体700，bolder特粗体，lighter细体*/
font-weight: bold;
/*字体样式:italic斜体，oblique倾斜*/
font-style:italic;
/*字体：arial*/
font-family: cursive;
/*字体颜色：1.纯英文单词，2.颜色代码：#ffff00，3.颜色函数：rgb（255，255，255）*/
color: #ff4400;
}
#border01{
width: 0px;
height: 0px;;
border: 100px solid antiquewhite;
/*border-width: 2px;*/
/*border-style:dashed虚线，solid实线，dotted点*/
/*border-style: dashed;*/
border-left-color: #ff0000;
border-right-color: green;
border-bottom-color: orange;
border-top-color: cornflowerblue;
}
#border02{
width: 10px;
height: 10px;;
border: 100px solid antiquewhite;
/*border-width: 2px;*/
/*border-style:dashed虚线，solid实线，dotted点*/
/*border-style: dashed;*/
border-left-color: #ff0000;
border-right-color: green;
border-bottom-color: orange;
border-top-color: cornflowerblue;
}
#border03{
width: 0px;
height: 0px;;
border: 100px solid antiquewhite;
/*border-width: 2px;*/
/*border-style:dashed虚线，solid实线，dotted点*/
/*border-style: dashed;*/
border-left-color: #ff0000;
/*透明色*/
border-right-color: transparent;
border-bottom-color: transparent;
border-top-color: transparent;
}
</style>
</head>
<body>
<div>
<span>123</span>
<p>111</p>
</div>
<span>321</span>
<div>1</div>
<div class="demo">2</div>
<p class="demo">3</p>
<em>em</em>
<strong>strong</strong>
<span>span</span>
<p id="font">字体样式</p>
<div id="border01"></div>
<div id="border02"></div>
<div id="border03"></div>
</body>
</html>
效果展示
04.gif
