css属性
字体属性
font-family
设置字体，具有继承性
body{
font-family:'字体1','字体2';
}
建议：设置多字体，备选。
font-size
设置字号，具有继承性
单位
- px 绝对单位，设置多少是多少
- em 相对单位，当前某块区域的字体大小，自适应。
- rem 相对单位，主要用于移动端。
color
字体颜色，具有继承性
颜色值
- 颜色名 white
- rgb(255,255,255)
- rgba(255,255,255,0.7)
- 十六进制 #ffffff,可缩写#fff
font-style
设置字体样式
值
- normal
- italic 倾斜
font-weight
设置字宽
值
- 100-900
- normal 对应400
简写方式
p{
font:字号/行高比 "字体";
}
文本属性
text-decoration
设置下划线
值
- none
- underline
- overline
- linethrough
text-indent
设置缩进，建议使用em
line-height
设置行间距，行与行之间的距离
设置line-height=height，可使文本垂直居中。
注意：保证行高大于字体大小
letter-spacing
设置中文字间距
word-spacing
设置英文单词间距
text-align
设置文本对齐方式
背景属性
background-color
设置背景色，颜色取值与color一样
background-image
设置背景图片，默认会平铺
.box{
background-image:url("图片地址");
}
background-repeat
设置图片的行为
值
- no-repeat
- repeat-x
- repeat-y
- repeat(默认)
background-position
背景定位，可设单一的方向，background-position-x&background-position-y。
值
- 百分比
- 关键字(top bottom left right center)
- px
.box{
background-position:'水平' '垂直';
}
百分比深入研究
水平百分比的值=(容器宽度-图片宽度)x100%
元素分类
块状元素 :独占一行，可设宽高
- div
- ul/ol/dl
- p
- h1-h6
- table
- form 行内元素：在一行内显示，不可设宽高，文本填充其大小
- a
- span
- em/strong
- label 行内块元素：在一行内显示，可设宽高
- input
- img
display属性
控制元素的显示方式
值
- block
- inline
- inline-block
- none 隐藏，不留坑
盒模型
所有的html元素都可看成盒子
盒模型是针对块级元素而言的，盒子模型的属性包括：
- width
- height
- padding
- margin
- border
注意：我们通常设置的width和height只是内容的宽高，并不是盒子实际的宽高。
padding
内边距，border到content的距离，可以设置四个方向
- padding-top
- padding-right
- padding-bottom
- padding-left
div{
/*200px 200px*/
width:180px;
height:180px;
padding:10px;
/*就是
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;*/
}
简写方式
/*上 右 下 左*/
padding:10px 10px 10px 10px;
/*上 左右 下*/
padding:10px 20px 10px;
/*上下 左右*/
padding:10px 20px;
/*上下左右*/
padding:10px;
可以通过设置padding来使content的位置达到想要的效果。
注意：padding会填充背景色
border
边框
三要素，也可设四个方向。
- border-width 粗细
- border-style 样式
- bordr-color 颜色
border:1px solid red;
margin
盒子之间的距离，可设四个方向
注意：
- 如果两个左右相邻盒子在水平方向上设置了水平的margin，此时的margin为两者之和。
- 但是如果两个上下相邻的盒子在竖直方向上设置了竖直的margin，此时的margin为较大的那个，这称为margin塌陷。
清除默认样式
创建一个reset.css，存放清除设置。
body,ul,ol,dl,p,dt{
margin:0;
padding:0;
}
input{
border:none;
outline:none;
}
ul{
list-style:none;
}
