本文深入讲解CSS层叠样式表的概念、书写方式、选择器类型及其权重、继承性、盒子模型等核心内容，帮助读者掌握网页样式设计的关键技术。
1.css的概念
css是一种层叠样式表文件
2.css的书写方式
- 行内样式: 在html文件body里面的标签尖括号中写入样式
<div style=" width:100px;height:100px;"> </div>
- 内嵌样式: 在html文件head中<style></style>写入样式,也可以通过@import url() 导入
<style> div{} </style>/<style> @import url("css/base.css") </style>
- 外联样式: 在html文件中通过link标签导入css文件
<link rel="stylesheet" href="css/base.css">
3.选择器
- 基本选择器
标签选择器: div{}
类名选择器: .box{}
id选择器: #boxId{}
- 并集选择器
body,ul,ol{ width:0; height:0; }
- 后代选择器
假如在ul下面的li中嵌套一个ol>li,像下面:
<ul>
<li>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
</li>
</ul>
直接子代选择器 ( ul>li {} ):只能定位到ul下面的li,不能定位到ol下面的li.
间接后代选择器( ul li {} ): 能定位到ul下面的li跟ol下面的li. 就是说间接后代选择器可以选择到父元素的两个括号中间的所有为该命名的后代属性.
- 交集选择器
div.img{...}
- 属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>css属性选择器</title>
<style>
div{
width: 200px;
height: 50px;
border: 1px solid #ccc;
margin-top: 10px;
}
/* 属性选择器 */
div[class="box"]{
background-color: blue;
}
/* 以d开头的属性值 */
div[class^="d"]{
background-color: red;
}
/* 结尾是d的属性值 */
div[class$="v"]{
background-color: green;
}
/* 包含i的属性值 */
div[class*="i"]{
background-color: purple;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="demo"></div>
<div class="nav"></div>
<div class="main"></div>
<div data-num="10010">自定义属性</div>
</body>
</html>
- 伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>css伪类选择器</title>
<style>
div.box{
width: 100px;
height: 100px;
background-color: orange;
}
div.box:hover{
/*伪类选择器,鼠标悬停*/
width: 200px;
height: 200px;
background-color: blue;
}
/* 伪类选择器 链接标签*/
/*a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻*/
/* css(不包括css3)其他标签只有hover伪类,a标签才有四个伪类 */
a{
display: block;
width: 160px;
height: 40px;
border: 1px solid #ccc;
margin-top: 10px;
color: #333;
text-decoration: none;
}
a:link{
color: #333
}
a:visited{
color: red;
background-color: pink;
}
a:hover{
color: orange;
background-color: lightblue;
}
a:active{
color: green;
background-color: lightyellow;
}
</style>
</head>
<body>
<div class="box"></div>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.sohu.com">搜狐</a>
<a href="https://www.jd.com">京东</a>
</body>
</html>
- 相邻选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>相邻选择器</title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
/*'+' 选中当前标签.box的下一个同级标签 */
div.box + div{
background-color: green ;
}
/* 选择当前标签.demo的后面所有同级标签 */
.demo~span{
color: red;
}
</style>
</head>
<body>
<div></div>
<div class="box"></div>
<div></div>
<div></div>
<div></div>
<span>hello1</span>
<span class="demo">hello2</span>
<span>hello3</span>
<span>hello4</span>
<span>hello5</span>
</body>
</html>
4. 选择器的权重问题
css的层叠性最重要的就是权重问题,当有多个选择器选上了某个元素的时候，需要通过就算权重才能决定最终显示的是哪个样式,就是通过计算id数量，类的数量，标签的数量。一般都假设一个id为100,一个类(class)为10,一个标签为1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>选择器的权重问题</title>
<style>
body{
font-size:100px;
}
/* 选择器的权重问题, id*100 + class*10 + 标签*1 = 最终权重*/
div.box .circle#pointId{ /*1 2 1 = 121*/
color:green;
}
.box #pointId{ /*1 1 0 = 110*/
color:pink;
}
div#demoId span{ /*1 0 2 = 102 */
color: yellow;
}
div.box span.circle{ /*0 2 2 = 22*/
color: red;
}
div#demoId .circle{ /*1 1 1 = 111*/
color: blue;
}
</style>
</head>
<body>
<div class="box" id="demoId">
<span class="circle" id="pointId">
青春无极限
</span>
</div>
</body>
</html>
上面的例子最终显示的就是绿色的(green),绿色的权重最高121,假如将绿色的注释掉显示的就是蓝色的.
如果权重一样,最终显示的就是最后出现的那个.
如果想要指定一个属性跳过权重计算直接显示想要的样式可以在属性值后面的分号前加上"!important" . important 的英文意思是重要的,所以这里不难理解, 加上之后这个属性的权重值就是无穷大的,
注意: !important提升的是一个属性，而不是一个选择器.
5. css样式的继承性问题
有些属性，当自己设置的时候，自己的后代都继承上了，这就是继承性。
哪些属性可以继承？
color、text开头的、line-开头的、font-开头的
关于文字样式的都可以继承，所有关于盒子定位的布局的属性包括内边距外边距都不能继承。
6. 盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>1.css盒子模型</title>
<style>
/* 盒子模型 */
/* margin(外边距) border padding content(width height) 组合的一种思维模型 */
/* 盒子大小 */
/* 宽度=border-left + padding-left + width + padding-right + border-right */
/* 高度=border-top + padding-top + height + padding-bottom + border-bottom */
div.box1{
width:100px;
height:100px;
background-color: #ccc;
}
div.box1{
padding: 50px;
/* padding: 50px 20px 10px; 上50 左右20 下10*/
/* padding: 50px 20px; 上下50 左右20*/
}
div.box2{
/* 线的样式 实线solid 虚线dashed 点线dotted*/
border: 2px dotted red;
}
.em img{
/* width:100px;
height: 150px; */
position:absolute;
top:20em;
right:15em;
}
</style>
</head>
<body>
<div class="box1 box2"></div>
<div class="em"><img src="../../src/001.webp" alt=""></div>
</body>
</html>
7. 外边框问题
外边距塌陷: 假如外层盒子又内层盒子撑开, 内层盒子的外边距撑不开外层盒子的宽高就叫外边距塌陷
外边距重叠: 假如同时给两个盒子上下的外边距,两个盒子上下之间的间距只能由其中的外边距大的决定,不会两个相加.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>css外边距</title>
<style>
body,ul,ol{
margin: 0;
padding: 0;
}
/*外边距 设置盒子与盒子之间的位置*/
.box{
width: 100px;
height: 50px;
margin-top: 50px;
background-color: red;
margin-bottom: 50px;
}
.demo{
width: 100px;
height: 100px;
background-color: blue;
}
/*<!-- 2.margin 发生外边距重叠解决方法 -->*/
ul li{
width: 450px;
height: 50px;
background-color: #ccc;
/* margin-top: 30px; */
margin: 15px 0;/*只能显示一个方向的距离,上下外边距会重叠*/
}
ol li{
width: 450px;
/*BFC 独立渲染区域*/
overflow: hidden;
}
ol li div{
width: 450px;
height: 50px;
background-color: skyblue ;
margin-bottom: 15px;
margin-top: 15px;
}
/* <!-- 3.margin 外边距塌陷问题--> */
.big{
width: 500px;
height: 300px;
background-color: red;
/*外边距塌陷四种解决方法：*/
/* overflow: hidden;
border: 1px solid blue;
float: left;
position: absolute; */
}
.big .small{
width: 100px;
height: 100px;
background-color: yellow;
margin-top: 50px;
}
</style>
</head>
<body>
<!-- 1.margin -->
<div class="box"></div>
<div class="demo"></div>
<!-- 2.margin 发生外边距重叠解决方法 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ol>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li><div></div></li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
</ol>
<!-- 3.margin 外边距塌陷问题-->
<div class="big">
<div class="small"></div>
</div>
</body>
</html>
8. 字体属性
font-size 字体大小
font-style 字体样式
font-weight 字体粗细
font-family 字体名称
font-family: 中文名称/英文名称/Unicode编码
color 字体颜色
font: 字体粗细 字体大小/行高 字体名称
font:800 1em/50px '\5b8b\4f53';
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
