1、群组选择器:交集选择器(语法:选择器1选择器2选择器3{},例如div.box{},代表的是有一个div标签并且类名是box。交集选择器的权重是叠加的。#box.box或者是.box#box,类名为box并且id为box的元素)、并集选择器(语法:选择器1,选择器2,选择器3.例如.div1,.div2{},代表的是类名叫做div1的和类名是div2的元素。并集选择器的权重:以逗号区分,自己算自己的。)
2、通配符选择器(通通可以匹配的):*{},通常是用来清除元素的默认样式
3、字体样式:font-size(设置字体大小,一般是偶数)、color(字体颜色)、font-weight(字体加粗 100-900 没有单位,或者是bold,直接就是加粗)、font-family(字体的样式,比如是'楷体'、'宋体')、font-style(字体倾斜)
4、文本属性:text-align(文本水平对齐方式,center、right、justify(两端对齐))、text-indent(首行缩进)、text-decoration: none;(取消下划线)、垂直对齐方式(line-height(行高,行高可以调整元素垂直对齐方式。单行文本:当行高跟容器的高度一样时,垂直居中对齐))
5、图片在容器中的垂直水平居中:给图片上面添加 vertical-align: middle;(top、middle、bottom、默认是baseline(基线对齐))
6、边框属性:边框的形状、颜色、粗细。border: solid 1px black;复合属性。边框必须要有border-style,其他为选填,默认的边框的粗细是1px,默认的边框的颜色是黑色。solid(实线)、dashed(虚线)、dotted(点线)、double(双线)、groove(渐变)。border-left\border-right\border-top\border-bottom
边框弧度:border-radius。
7、边框绘制三角形:倒三角形
div {
width: 0;
border-top: 100px solid greenyellow;
border-bottom: 100px solid transparent; //设置成透明的
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
// 简洁版
div{
width:0px;
border:100px solid transparent;
border-left-color:yellow;
}
8、列表属性(有序、无序、自定义的):list-style:none(清除列表的样式)。list-style也是一个复合属性。
li{
list-style-type: circle;
list-style-image: url(./img/1.png); //设置图片的url地址
list-style-position: inside; // 只能调图片在li中里外的位置
}
9、背景属性:
div{
width: 300px;
height: 300px;
background-color: greenyellow;
/* 背景图片 */
background-image: url(./images/yun.png);
/* 背景平铺 */
background-repeat: no-repeat;
/* 背景位置:分别代表水平和垂直方向,这两个值没有顺序 */
background-position: center center;
/* 还可以使用数值,分别代表x轴移动位置和y轴移动位置。如果只有一个值,代表水平方向移动,垂直方向自动居中 */
/* background-position: 50px 50px; */
background-position-x: 50px;
background-position-y: 50px;
background-size:100%; // 一个值代表的是宽度是100%,高度是成原比例缩放的。
background-attachment: fixed; //背景固定 图片不动 fixed、scroll
}
background: url('') no-repeat right top/35px 35px #f00;
复合属性:background:路径 是否重复 位置1 位置2/宽度 高度 颜色
多张背景图:路径 是否重复 位置1 位置2/ 宽度 高度,路径 是否重复 位置1 位置2 /宽度 高度 颜色
10、浮动:让正常文档流中的元素脱离文档流。float:left/right/none.
清除浮动:clear:both(清除左右浮动)left、right