css常用属性
字体属性：
1.color 规定文本的颜色
div{ color:red;}
div{ color:#ff0000;}
div{ color:rgb(255,0,0);}
div{ color:rgba(255,0,0,.5);}
注意：这四种颜色规定方式都可以
2.font-size 设置文本的大小
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
font-style 指定文本的字体样式
值 描述
normal 默认值
italic 定义斜体字
font-family font-family属性指定一个元素的字体
font-family:"Microsoft YaHei","Simsun","SimHei";
背景属性
background-color 设置背景颜色
background-image 设置背景图片
background-attachment 设置背景图片是随内容滚动还是固定
background-position 设置背景图片显示位置
background-repeat 设置背景图片如何填充
background 复合属性
background-repeat属性 该属性设置如何平铺背景图像
.box{
width: 600px;
height: 600px;
background-color: #fcc;
background-image: url("images/img1.jpg");
background-repeat: no-repeat;
}
repeat 默认值
repeat-x 只向水平方向平铺
repeat-y 只向垂直方向平铺
no-repeat 不平铺
background-size属性 该属性设置背景图像的大小
length
设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只是设置一个， 第二个值auto
percentage
计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只是设置一个， 第二个值auto
cover
保持图片纵横比并将图片缩放成完全覆盖背景区域的小大小
contain
保持图片纵横比并将图像缩放成适合背景定位区域的大大小
background-position属性
该属性设置背景图像的起始位置，其默认值是：0% 0%
left top 左上角
left center
左 中
left bottom
左 下
right top
右上角
right center
右 中
right bottom
右 下
center top
中 上
center center
中 中
center bottom
中 下
x% y%
第一个值是水平位置，第二个值是垂直位置，左上角是0% 0%，右下角是100% 100% 。如果只指定了一个值，其他值默认是50%。默认是0% 0%
xpos ypos
单位是像素
文本属性
1.文本对应位置：text-align
left 文本居左排列，默认值
right 把文本排列到右边
center 把文本排列到中间
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
2.文本下划线：text-decoration
underline 定义下划线
overline 定义上划线
line-through 定义删除线
h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
3.文本字母大小写：text-transform
captialize 定义每个单词开头大写
uppercase 定义全部大写字母
lowercase 定义全部小写字母
h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}
4.文本首行缩进：text-indent
text-indent 属性规定文本块中首行文本的缩进
p{ text-indent:50px;
列表属性
在HTML中，有两种类型的列表 无序列表 - 列表项标记用特殊图形（如小黑点、小方框等） 有序列表 - 列表项的标记有数字或字母
1.设置列表标记
list-style-type
none 无标记
disc 标记是实心圆
circle 标记是空心圆
square 标记实心方块
decimal 标记是数字
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
2.图像代替标记
list-style-image 属性使用图像来替换列表项的标记
list-style-image: url('sqpurple.gif');
3.规定列表标记是在列表内还是在列表外
list-style-position
inside 列表项目标记放置在文本内
outside 列表项目标记放置在文本外
4.可以调用所有列表属性的函数
list-style list-style
简写属性在一个声明中设置所有的列表属性
表格属性
1.指定表格宽度，颜色
指定CSS表格边框，使用border属性
table, td { border: 1px solid black; }
2.指定边框折叠还是隔开
属性设置表格的边框是否重叠成一个单一的边框或隔开
border-collapse: collapse; /* 合并边框 */
border-collapse: separate; /* 分隔边框（默认值）*/
表格文字对齐方式
表格中的文本对齐和垂直对齐属性 text-align属性设置水平对齐方式，
向左，右，或中心对齐
td { text-align:right; }
设置垂直对齐
td { height:50px; vertical-align:bottom; }
表格填充
如果在表的内容中控制空格之间的边框，应使用td和th元素的填充 属性
td { padding:15px; }
表格颜色：
分为三大类，边框颜色border:1px solid green;
背景颜色：background-color:green;
文本颜色：color:white;
其他css属性：
letter-spacing
letter-spacing 属性增加或减少字符间的空白（字符间距）
h1 {letter-spacing:2px} h2 {letter-spacing:-3px}
line-height 设置行高
overflow 修剪内容
visible 默认值
hidden 超出容器内容被修剪
scroll 内容会被修剪，但是可以滚动查看剩余内容
auto 如果内容被修剪，可以滚动滚动查看剩余内容
white-space
white-space属性指定元素内的空白怎样处理
pre 空白会被浏览器保存 nowrap 文本不会换行
verticle-align
vertical-align 属性设置一个元素的垂直对齐方式
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐
opacity
设置整个元素的透明度，取值0-1,0表示完全透明，1表示不透明