Css基础
一、Css背景(blackground)
background-color:背景颜色
background-image:背景图片地址 none/url(url)
background-repeat:是否平铺 no-repeat、repeat-x、repeat-y
background-position:背景位置 (20% 20%)、(10px 10px)、(bottom right)
background-attachment 背景固定还是滚动 scroll(滚动)、fixed(固定)
一步到位顺序:background:颜色、图片地址、平铺、滚动、位置
xpx=(容器宽度-背景图片宽度)*x%
ypx=(容器高度-背景图片高度)*y%
二、Css书写规范
1.空格规范
选择器与{之间必须包含空格
select {}
属性名与之后的:之间不允许包含空格,:与属性值之间必须包含空格
font-size: 12px;
2.选择器规范
当一个rule包含多个selector时,每个选择器声明必须独占一行
.p
.h1
.h2 {}
选择器的嵌套层级应不大于 3 级,位置靠后的限定条件应尽可能精确
3.属性规范
属性定义必须另起一行
.p {
width: 0;
height: 0;
}
属性定义后必须以分号结尾
三、Css三大特性
1.Css层叠性
层叠性是指多种CSS样式的叠加
样式冲突:(就近原则)遵循的原则是就近原则。 那个样式离着结构近,就执行那个样式
样式不冲突:不会层叠
2.CSS继承性(子承父业)
子元素可以继承父元素的样式(text-,font-,line-这些元素开头的都可以继承,以及color属性)
3.CSS优先级
优先级:
使用了!important声明的规则
内嵌在HTML元素的style属性里面的声明
使用了ID选择器的规则
使用了类选择器、属性选择器、伪元素和伪类选择器的规则
使用了元素选择器的规则
只包含一个通用选择器的规则
同一类选择器则遵循就近原则
四.盒子模型
1.盒子模型
CSS就三个大模块:盒子模型、浮动、定位
每个盒子都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成
2.盒子模型边框
border : border-width 、 border-style 、border-color
边框的风格样式:
none:没有边框(默认值)
solid:边框为单实线
dashed:边框为虚线
dotted:边框为点线
double:边框为双实线
3.边框写法综合
border-top-width:宽度;
border-top-style:样式;
border-top-color:颜色;
border-top:宽度 样式 颜色;
top:上
right:右
bottom:下
left:左
方向:默认顺时针方向,上右下左