CSS背景
background-color: darkgray; 设置元素的背景颜色
background-image 把图片设置为背景
background-repeat 设置背景图片是否重复以及重复的规则
不重复、x重复、y重复、xy都重复
background-position 设置背景图片的起始位置
right 表示显示在父视图的右边，图片从中间开始显示
right top 表示显示在父试图的右边，图片从上方开始显示
0px 0px 表示从左、上方开始显示
也可以采用百分比的值来标示图片显示相对于屏幕的位置
background-attachment 背景图片是否固定 或 随着页面的其余部分滚动
默认不设置该属性的情况下，背景图是随着父视图滚动而滚动
background-size 规定背景图片的尺寸
background-origin 规定背景图片的定位区域
background-clip 规定背景的绘制区域
CSS文本
color 文本颜色
direction 文本方向
line-height 行高
letter-spacing 字符间距
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-transform 元素中的字母
text-transform: capitalize; //首字母大写
text-transform: lowercase; //字母全部小写
text-transform: uppercase; //字母全部大写
unicode-bidi 设置文本方向
white-space 元素中空白的处理方式
word-spacing 字间距
text-shadow: 向文本添加阴影
text-shadow: 5px 3px 1px #FF0000; //阴影距离文字的左、上间距、阴影清晰度（值越小越清晰）、阴影颜色
word-wrap: 规定文本的换行规则
CSS字体
font-family 设置字体系列
font-family: fantasy;//指定用系统的某个字体
//使用自定义字体:可以将自己的字体放在服务器上
@font-face {
font-family:myfont;
src:url(字体路径);
}
div{
font-family: myfont;
}
font-size 设置字体的尺寸
font-size:40px;
font-style 设置字体风格
font-variant 以小型大写字体或正常字体显示文本
font-weight 设置字体的粗细
CSS链接
a:link{ //普通的、未被访问的链接
color: #FF0000; //文字颜色
text-decoration:none; //去掉链接中的下划线
background-color:gray; //背景色（会一直存在）
}
a:visited{ //用户已访问的链接
color:#00FF00
}
a:hover{ //鼠标指针位于链接的上方
color:#0000FF;
}
a:active{ //链接被点击的时刻
color:green;
}
CSS列表
list-style 简写列表项
list-style-image 列表项图像
list-style-image: url("icon.png);//列表前面小圆点用自定义图片代替
list-style-position 列表标志位置
list-style-position: inside; //列表项往右偏移
list-style-position: outside; //列表项往左偏移
list-style-type 列表类型，列表前面小圆点的样式
list-style-type: circle;空心圆、数字等
示例1 普通表格：
<table id="tb">
<tr> //tr是一行
<th>姓名</th> //th是表头
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>小王</td> //td 是列表项
<td>20</td>
<td>男</td>
</tr>
</table>
//样式
#tb,tr,th,td{
border: 1px solid blue; //边框宽度1px 颜色为 blue
text-align: center; //文字居中
background-color:aqua; //背景色为aqua
}
#tb{
width: 400px;
height: 400px;
border-collapse: collapse; //边框合并
}
示例2 隔行背景色表格：
<table id="tb">
<tr> //tr是一行
<th>姓名</th> //th是表头
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>小王</td> //td 是列表项
<td>20</td>
<td>男</td>
</tr>
<tr class="alt">
<td>小王</td> //td 是列表项
<td>20</td>
<td>男</td>
</tr>
</table>
//样式
#tb{
border-collapse: collapse; //边框合并
width: 400px;
}
#tb td,#tb th{ //设置tb下的 td 和 th
border: 1px solid bisque; //边框宽度1px 颜色为 bisque
padding: 5px; //内边距
}
#tb th{
text-align: right;//表头文本居右
background-color: aqua;
color:#FFFFFF;
}
#tb tr.alt td{ //tb下的 名为alt的tr 下的 td
background-color: aquamarine;
color:#black;
}
CSS轮廓
主要用来突出元素的作用（边框轮廓）
outline 设置轮廓的属性
outline-color:red 设置轮廓的颜色
outline-style:dotted 设置轮廓的样式（虚线小点边框）
outline-width:20px 设置轮廓的宽度
网友评论