CSS 书写语法
- 内部与外部样式
选择器 {
样式1; // 属性: 值; width: 300px
样式2;
}
- 内联样式
<div style="样式1;样式2"></div> // width: 300px
CSS 基础选择器
- ID选择器
#id{ }
- class选择器
.cls{ }
- 元素选择器
div{ }
div.cls{ }
以上三种基本选择器可以拼接在一起,匹配更
准确
例如:div.cls{ }选择器的作用:匹配HTML元素
CSS 高级选择器
- 组合选择器
element,element{ }
- 通配符选择器
*{ }
- 后代选择器
pElement subElement{ }
- 子元素选择器
pElem > subElem{ }
- 相邻兄弟选择器
div + a{ } // 选择div后面相邻的a标签
- 属性选择器
[attribute]{ }
element[attribute]{ }
element[attribute=value]{ }
- 伪类选择器
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
p:first-child { }
- 伪元素选择器
div::after{ content:"" }
div::before{ content:"" }
CSS 优先级
内部样式
和外部样式
合并
!important > 行间样式 > ID选择器 > 类选择器/属性选择器/伪类选择器 > 元素选择器/伪元素选择器 > 通配符选择器
.cls{} //0-0-0-1-0
#id{} //0-0-1-0-0
div.cls{} //0-0-0-1-1
CSS 常用样式
- 文字
字体:font-family: "Times New Roman", Times, serif;
颜色:color: red;
字体大小:font-size: 40px;
字体粗细:font-weight: 900;
字体样式:font-style:italic;
- 盒子
外边距:margin:15px;
内边距:padding: 20px;
边框: border: 1px solid #999;
宽: width: 500px;
高: height: 400px;
- 背景
集成属性写法:
background: #0079D2 url(img/jt.jpg) no-repeat fixed 50% 20%;
单个属性写法:
背景图大小:background-size:80px 60px;
背景颜色:background-color:yellow;
背景图位置:background-position:center;
背景图重复:background-repeat:no-repeat;
背景图:background-image:url('paper.gif');
- 行高
line-height: 30px; // 文字居中使用 取值可以是%,数值,像素
- 显示与隐藏
1、display
隐藏样式:display:none;
显示样式:display:非none的其它值
2、visibility
隐藏:visibility:hidden;
显示:visibility:visible;
- 定位
position
取值:absolute、relative、fixed
1、绝对定位
CSS 布局
- html标签分类
块级元素(block)
1、可以设置宽、高,不设置宽度,默认100%
2、独占一行
3、块级元素可以嵌套块级元素和行内元素
行内元素(inline)
1、行内元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行
2、不支持设置宽、高,其宽和高随元素的内容而变化
3、行内元素只能嵌套行内元素,不能嵌套块级元素和行内块元素
行内块元素(inline-block)
1、可以设置宽、高
2、行内元素不会独占一行
3、块级元素可以嵌套块级元素和行内元素
- 布局种类
1、table 表格布局
2、float 浮动布局 (重点)
3、inline-block布局
4、flexbox 布局 (现在布局方式)
- float 浮动布局
容器需要清浮动,子元素需要浮动(float: left/right;)
/*清除浮动代码*/
.clearfloat:after{display:block;clear:both;content:"";}
.clearfloat{zoom:1} /*可解决ie6,ie7浮动问题*/