【CSS】笔记3-三大样式
一、三大特性
1.层叠性
- 相同选择器设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。
- 层叠性主要解决样式冲突的问题
- 层叠性原则：
- 样式冲突，遵循的原则是就近原则（离标签近的）
2.继承性
- CSS中的继承：子标签会继承父标签里面的某些样式
- 如文本颜色和字号等
子元素可以继承父元素的样式(text-,font-,line-这些开头的可以继承，以及color属性)
高度、盒子模型的内外边距就不会继承
***行高的继承性
body{
font:12px/1.5 Microsoft YaHei;
}行高可以跟单位也可以不跟
如果子元素没有设置行高，则会继承父元素行高为1.5
此时子元素的行高是：当前子元素文字大小*1.5
body行高1.5这样写最大的优势就是里面子元素可以根据自己文字大小自动化调整行高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
color: pink;
font: 12px/1.5 'Microsoft YaHei'
}
div {
/*子元素继承了父元素body的行高1.5*/
/*就是当前元素文字大小font_size的1.5倍，所以当前div行高14*1.5=21*/
font-size: 14px;
}
/*li没有指定文字大小 则会继承父亲的文字大小 body12px所有li的文字大小问12px,当前li的行高就是12*1.5=18px*/
</style>
</head>
<body>
<div>粉红色的回忆</div>
<p>粉红色的回忆</p>
<ul>
<li>我没有指定文字大小</li>
</ul>
</body>
</html>3.优先级
- 选择器相同，则执行层叠性
- 选择器不同，则按权重
div {
color:pink!important
}注意事项
- 权重是有4子数字组成，但是不会有进位
- 等级判断是从左到右，如果某一位数值相同，则判断下一位数值
- 继承的权重是0，如果该原始没有直接选中，不管父亲元素权重多高，子元素得到的权重都是0。所以以后我们看标签到底执行哪个样式，就先看这个标签有没有直接被选出来
- a链接口浏览器默认指定了一个颜色 蓝色有下划线
4.CSS权重叠加
- 权重叠加：如果是复合选择器，则会有权重的叠加，需要计算权重
<head>
<style>
li {
color:green;
}
/* li 的权重是 0,0,0,1 */
ul li{
color :red;
}
/* 复合选择器权重叠加，ul li权重 0,0,0,1 + 0,0,0,1 =0,0,0,2 */
.nav li{
color:pink;
}
/* .nav li 权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
<style>
</head>
<body>
<ul class="nav">
<li>大猪蹄子</li>
<li>大肘子</li>
<li>猪尾巴</li>
</ul>
</body>
div ul li----------> 0,0,0,3.nav ul li-------------->0,0,1,2a:hover---------------->0,0,1,1 /* 伪类选择器*/.nav a-------------------->0,0,1,1
小案例
<head>
<style>
/*.nav li权重11*/
.nav li {
color: red;
}
/*需求把第一个小li颜色改为粉色加粗*/
/*pink权重是10 .nav .pink权重是20*/
.nav .pink {
color: pink;
font-weight: 700;
}
</style>
</head>
<body>
<ul class="nav">
<li class="pink">人生四大悲</li>
<li>家里没宽带</li>
<li>网速不够快</li>
<li>手机没流量</li>
</ul>
</body>二、盒子模型
目标
能改准确阐述盒子模型4个组成部分
利用边框复合写法给元素添加边框
计算盒子实际大小
利用盒子模型布局模块案例
给盒子设置圆角边框
给盒子添加阴影
给文字添加阴影
1.盒子模型
页面布局要学习三大核心
- 盒子模型
- 浮动
- 定位
页面布局步骤
1.先准备好相关的网页元素，网页元素基本都是盒子
2.利用CSS设置好盒子样式，然后摆放到相应位置
3.往盒子里面装内容
盒子模型的组成：
border(边框)content(内容)padding(内边距)margin(外边距)
（1）边框（border）
-
CSS 边框属性允许你指定一个元素边框的样式和颜色
-
边框由三部分组成：边框宽度（粗细） 边框样式 边框颜色
boder-width边框的粗细，一般情况都用px
border-style solid实线边框 dashed虚线 dotted点线
简写:无顺序，通俗如下顺序
border : borde-width || border-style || border-color
boder:5px solid pink
边框分开写法
border-top:1px solid red 只设定上边框，其余同理
border-bottom下边框
左右一样的
（2)border-collapse表格细线边框
-
border-collapse 属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框
-
border-coppapse表格的细线边框
border-collapse : collapse;
- 表示相邻边框合并在一起
- collapse 单词是合并的意思
table,td,th{
boder:1px solid pink
}
（3)边框会影响盒子实际大小
边框会额外增加盒子的实际大小，因此我们有两种方案解决：
- 测量盒子大小的时候，不量边框
- 如果测量的时候包含了边框，则需要 width/height 减去边框宽度
（4）内边距padding
padding 属性用于设置内边距,即盒子边框与内容之间的距离
- padding属性(简写属性)可以有一到四个值
（5）padding影响盒子大小
给盒子指定padding之后，
1.内容和边框有了距离，添加了内边距
2.padding影响了盒子实际大小
也就是盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子
解决方案：如果保证盒子和效果图大小保持一致，则让width、height 减去多出来的内边距大小
新浪导航栏实例：
*1a标签转为行内块元素
*2padding指的左右内边距，撑开距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.nav {
height: 41px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
background-color: #fcfcfc;
line-height: 41px;
}
.nav a {
display: inline-block;
height: 41px;
padding: 0 20px;
font-size: 12px;
color: #4c4c4c;
text-decoration: none;
}
.nav a:hover {
background-color: #eee;
color: #ff8500;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">新浪导航</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">微博</a>
<a href="#">三个字</a>
</div>
</body>
</html>