CSS:层叠式样式表
CSS语法风格
就是一个选择器,键值对形式
学习重点
CSS属性
颜色表示:单词,十六进制(#ff0000),rgb(255,0,0)
选择器
标签选择器:作用与当前页面所有该标签,不管标签在哪里,都会被施加样式。
通常给标签施加默认样式。
ID选择器:id属性有关,任何标签,都有id属性,页面上不能有相同id属性值的标签
命名规范:
必须字母开头,数字,下划线
大小写敏感
名字不能是标签名
名字中不能有空格
main_nav content header footer p1 p2
类选择器 Class选择器
一个标签可以有多个class,中间使用空格隔开
一个类选择器可以施加给多个元素
标签名.类名(交集选择器)
后代选择器 中间有空格
div.box p{} 选中页面中class=box的div的后代p
div.box p.haha 选中页面中class=box的后代中class=haha的p标签
分组选择器(并集选择器)
选择器,选择器{
}
通用选择器
*{
//一般用于清除默认的margin和padding
}
CSS重要特性
继承性
具有继承性的属性
color:前景色
font系列 font-size font-weight font-style font-family:字体
text系列 text-algin text-decoration 下划线
list系列 list-style
line-height 行高
cursor:鼠标形态
不能继承
backgroud-color
float
position
盒模型:margin padding border
层叠性
一个标签获得的样式可能出现冲突,就是层叠性需要解决的问题
权重:id 100 类 10 标签 1 继承的权重是0 权重相同,就近原则
!important 权重无限大,继承来的还是0
样式表的维护
1
盒模型:CSS认为网页上的所有标签都是盒模型
盒模型:width宽度(块级元素:默认是父盒子100% 行内元素:默认就是内容宽度) height高度(不设置就是0) padding内边距 margin外边距 border:边框
一个盒子占网页宽度:width+左右padding+左右border
padding:内边距,内容与边框距离,子盒子与父盒子距离 有背景颜色,就是盒子的颜色
有些元素默认有padding ul
border:边框
margin外边距 没有背景颜色 body除外(body设置背景颜色,margin区域有颜色的)
塌陷现象
上下盒子margin冲突,谁的值大听谁的
盒子居中
.box3{
width: 500px;
height: 80px;
background-color: green;
margin:0 auto;//盒子居中
text-align: center;//文本水平居中
line-height: 80px;//文本垂直居中
color: red;
font-size: 30px;
}