一、背景属性。
1.背景颜色
直接定义 对应的颜色英文单词
16进制定义 #xxxxxx 0-f
三原色定义法 rgb(x,x,x) 0-255
width:100px; //容器宽度
height:100px; //容器高度
background-color:red;//背景颜色
2.背景图片
如果背景图的大小不足以覆盖整个元素,那么背景图会自动重复,以至于铺满整个元素。
背景图的重复方式 : background-repeat:no-repeat;不重复
背景图位置: 水平位置 left、center、right 垂直位置 top 、center、bottom 还可以写对应像素值。
background-image:url(images/bg.jpg)
background-repeat:no-repeat;//不重复
background-position:center center;/30px 50px;
二、文本属性
color:red; //颜色
font-size:32px; //字号
font-family:"黑体"; //字体(百度web安全字体)
font-weight:800/bolod; //加粗
font-style:italic; //倾斜
text-align:center; //对齐方式 水平对齐方式:left center right 两端对齐方式:justify
text-indent:30px; //首行缩进
text-transform:uppercase; //文本转化 uppercase大写,lowercase小写,capitalize首字母大写
text-decoration:underline; //文本修饰线 underline下划线,overline上划线,line-through删除线,none取消装饰线
line-height:50px; //行高
letter-spacing:10px; //字母之间间距(中文)
Word-spacing:30px; //单词之间的间距
三、表格属性
border="1" //边框
border-collapse:collapse; //边框重合
caption-side;bottom; //标题在表格下面
vertical-align:bottom; //用在td中,bottom middle top 文字位置
四、列表属性
list-style-type:square; //列表符号类型 square circle none
list-style-image:url(images/1.jpg) //将列表符号改成图片
list-style-position:inside; //列表符号的位置
五、边框属性
三要素:1.宽度 2.线型 solid实线 dashed虚线 dotted点划线 3.颜色
border:1px solid red;
六、盒模型
一个元素(标签)实际在网页中所占位置的大小。
宽=width+左右border
高=height+上下border
七、外边距和内填充
margin//外边距
padding//内填充
八、浮动
使块元素并排显示,谁想并排谁加浮动 浮动的元素不占位置
float:left;
clear:both; //清除浮动影响
九、元素转化
display:block; //转化为块元素,可设置宽高
display:inline; //转化为行元素
display:inline-block; //转化为行级块元素,可设置宽高,不独立成行
display:none; //隐藏元素
十、高级选择器
1.* 通配符选择器 对整个网页生效 主要作用于样式重置
2.选择器,选择器 分组选择器,可以同时选中多个标签,统一添加同一样式
3.后代选择器 先找到父级容器 空格隔开 再找后代
4.子选择器 找到父级选择器>子选择器
5.相邻兄弟选择器 下方第一个元素
6.普通兄弟选择器 下方所有元素
*{
padding:0;
margin:0;
} //样式重置
h1,h4{
color:red;
}
.box p{
color:red;
}
.box>p{
color:green;
}
.box+p{
color:blue;
}
.box~p{
color:pink;
}
*十一、定位属性
1.相对定位 relative 占的是初始位置
2.绝对定位 absolute 不占位置 采用绝对定位的元素,会先向上查找其父级是否采用了相对定位,如果采用了就以父级的左上角为坐标原点。如果没采用,接着向上找,直到找到body。
3.固定定位 fixed 不占位置,默认坐标为body。
position:relative;
left:20px; //距离左侧移动多少
top:10px; //距离左上角向下移动多少
position:absolute;
left:0;
top:0;
position:fixed;
left:0;
top:0;