CSS
1. CSS是什么
CSS指层叠样式表(Cascading Style Sheets)
2. CSS的作用
美化页面,提高代码的复用性
3. 选择器
id选择器
#para1{}
class选择器
.para1{}
标签选择器
p {}
选择器分组
.para1,.para2{}
注意
优先级: 按照选择精确度:
行内样式>ID选择器>类选择器>元素选择器
4. CSS字体属性
// 文字颜色
color:#999999;
// 文字字体
font-family:宋体,sans-serif;
// 文字大小
font-size:9pt;
// 文字斜体
font-style:itelic;
// 小字体
font-variant:small-caps;
// 字体间距
letter-spacing : 1pt;
// 设置行高
line-height:200%;
// 文字粗体
font-weight:bold;
// 下标字
vertical-align:sub;
// 上标字
vertical-align:super;
// 加删除线
text-decoration:line-through;
// 加顶线
text-decoratio
//overline;
// 加下划线 :
text-decorationunderline;
// 删除链接下划线
text-decoration:none;
// 首字大写
text-transform:capitalize;
// 英文大写
text-transform:uppercase;
// 英文小写
text-transform:lowercase;
// 文字右对齐
text-align:right;
// 文字左对齐
text-align:left;
// 文字居中对齐
text-align:center;
// 文字分散对齐
text-align:justify;
// 垂直向上对齐
vertical-align:top;
// 垂直向下对齐
vertical-align:bottom;
// 垂直居中对齐
vertical-align:middle;
// 文字垂直向上对齐
vertical-align:text-top;
// 文字垂直向下对齐
vertical-align:text-bottom;
5. CSS边框
// 上边框留空白
padding-top:10px;
// 右边框留空白
padding-right:10px;
// 下边框留空白
padding-bottom:10px;
// 左边框留空白
padding-left:10px;
// 上边界
margin-top:10px;
// 右边界值
margin-right:10px;
// 下边界值
margin-bottom:10px;
// 左边界值
margin-left:10px;
6. CSS符号属性
// 不编号
list-style-type:none;
// 阿拉伯数字
list-style-type:decimal;
// 小写罗马数字
list-style-type:lower-roman;
// 大写罗马数字
list-style-type:upper-roman;
// 小写英文字母
list-style-type:lower-alpha;
// 大写英文字母
list-style-type:upper-alpha;
// 实心圆形符号
list-style-type:disc;
// 空心圆形符号
list-style-type:circle;
// 实心方形符号
list-style-type:square;
// 图片式符号
list-style-image:url(/dot.gif);
// 凸排
list-style-position: outside;
// 缩进
list-style-position:inside;
7. CSS背景颜色
// 透视背景
background:transparent;
// 背景图片
background-image : url(/image/bg.gif);
// 浮水印固定背景
background-attachment : fixed;
// 重复排列-网页默认
background-repeat : repeat;
// 不重复排列
background-repeat : no-repeat;
// 在x轴重复排列
background-repeat : repeat-x;
// 在y轴重复排列
background-repeat : repeat-y;
8. CSS指定背景定位
// 背景图片x与y轴的位置
background-position : 90% 90%;
// 向上对齐
background-position : top;
// 向下对齐
background-position : buttom;
// 向左对齐
background-position : left;
// 向右对齐
background-position : right;
// 居中对齐
background-position : center;
9. CSS链接属性
// 所有超链接
a
// 超链接文字格式
a:link
// 浏览过的链接文字格式
a:visited
// 按下链接的格式
a:active
// 鼠标转到链接
a:hover
10. CSS鼠标光标样式
// 链接手指
cursor: hand
// 十字体
cursor:crosshair
// 箭头朝下
cursor:s-resize
// 十字箭头
cursor:move
// 箭头朝右
cursor:move
// 加一问号
cursor:help
// 箭头朝左
cursor:w-resize
// 箭头朝上
cursor:n-resize
// 箭头朝右上
cursor:ne-resize
// 箭头朝左上
cursor:nw-resize
// 文字I型
cursor:text
// 箭头斜右下
cursor:se-resize
// 箭头斜左下
cursor:sw-resize
// 漏斗
cursor:wait
11. CSS框线一览表
// 上框线
border-top:1px solid #6699cc;
// 下框线
border-bottom:1px solid #6699cc;
// 左框线
border-left:1px solid #6699cc;
// 右框线
border-right:1px solid #6699cc;
建议的书写方式:
// 设置上框线top颜色
border-top-color:#369
// 设置上框线top宽度
border-top-width:1px
// 设置上框线top样式
border-top-style:solid
框线样式
// 实线框
solid
// 虚线框
dotted
// 双线框
double
// 立体内凸框
groove
// 立体浮雕框
ridge
// 凹框
inset
// 凸框
outset