css知识

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