1.添加css的方法
1)链接外部样式表
<head> <link rel=stylesheet type=text/css href="文件所在路径"> </head>
2)内部样式表
<head> <style> </style> </head>
3)内嵌样式
<table style=color:red>
2.字体属性
1)字体font-family
font-family:"字体1","字体2"
2)字号font-size
font-size:24px
3)字体风格font-style
font-size:normal正常,italic斜体,oblique偏斜体
4)加粗字体font-weight
font-weight:normal正常,bold粗体,bolder特粗体,lighter特细体,number(100-900具体数值)
5)小写字母转为大写font-variant
font-variant:normal正常,小写转化为大写且字体较小small-caps
6)字体复合属性
font:bold italic "宋体"
3.颜色和背景属性
1)颜色属性color
color:颜色取值(关键字/16进制RGB值)
2)背景颜色background-color
background-color:颜色取值
3)背景图像background-image
background-image:url(图像地址)
4)背景重复background-repeat
background-repeat:no-repeat不平铺,repeat平铺排满整个网页,repeat-x水平方向平铺,repeat-y垂直方向平铺
5)背景附件background-attachment
background-attachment:scroll背景图像随对象滚动而滚动,fixed背景图像固定在页面上不动,其他内容随滚动条滚动
6)背景位置background-position
background-position:位置取值(数字:50% 50%/关键字:center center)
7)背景复合属性
background:url(images.jpg) no-repeat left top;
4.段落属性
1)单词间隔word-spacing
word-spacing:normal/长度值(正负)
2)字符间隔letter-spacing
letter-spacing:取值
3)文字修饰text-decoration
text-decoration:none不修饰,underline对文字添加下划线,overline对文字添加上划线,line-through对文字添加删除线,blink文字闪烁效果
4)垂直对齐方式vertical-align
vertical-align:baseline默认,sub文字的下标,super文字的上标,top垂直靠上对齐,text-bottom使元素和上级元素的字体向下对齐
5)文本转换text-transform
text-transform:none使用原始值,capitalize每个单词第一个字母大写,uppercase所有字母大写,lowercase所有字母小写
6)水平对齐方式text-align
text-align:left左对齐,right右对齐,center居中对齐,justify两端对齐
7)文本缩进text-indent
text-indent:缩进值(长度/百分比)
8)文本行高line-height
line-height:行高值(长度/倍数/百分比)
9)处理空白white-space
white-space:normal默认,将连续的多个空格合并;pre源代码中的空格和换行符会保留;nowrap强制在同一行显示所有文本,直到文本结束或遇到<br>对象
10)文本反排
direction:ltr从左到右,rtl从右到左,inherit文本流的值不可继承
unicode-bidi:bidi-override严格按照direction属性的值重排序,normal默认值,embed对象打开附加的嵌入层
5.外边距与内边距属性
1)上边距margin-top
margin-top:长度值/百分比/auto
2)其他边距margin-bottom、margin-left、margin-right
3)外边距复合属性margin
margin:10pt 30px 10px 20px(上下左右)
4)顶端内边距padding-top
padding-top:间隔值(长度/百分比)
5)其他内边距padding-bottom、padding-right、padding-left
6)内边距复合属性padding
padding:10pt 30px 10px 20px(上下左右)
6、边框属性
1)边框样式border-style
border-top-style: 上边框样式
border-bottom-style: 下边框样式
border-left-style: 左边框样式
border-right-style: 右边框样式
取值 含义
none 默认值,无线框
dotted 点线边框
dashed 虚线边框
solid 实线边框
double 双实线边框
groove 边框具有立体感的沟槽
ridge 边框成脊形
inset 整个边框凹陷
outset 整个边框凸起
2)边框宽度border-width
3)边框颜色border-color
4)边框属性border
border-top:2px dashed #00ccff;
5)边框圆角border-radius
border-radius: 5px 5px 5px 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
7.定位属性
1)定位方式position
static默认值,absolute采用绝对定位,fixed页面滚动时元素不随着滚动,relative采用相对定位,对象不可层叠
2)元素位置top、right、bottom、left
3)层叠顺序z-index
auto遵从其父对象的定位;数字必须是无单位的整数
4)浮动属性float
none对象浮动;left文字浮动在元素的右边;right文字浮动在元素的左边
5)清除属性clear
none:允许两边都可以有浮动对象;left不允许左边有浮动对象;right不允许右边有浮动对象;both不允许有浮动对象
6)可视区域clip
clip:auto对象不裁切;rect(5px,5px,5px,5px)上右下左
7)层的宽度和高度width、height
8)超出范围overflow
visible:层的大小和内容都会自动显示出来
auto:只有在内容超出层的范围时才显示滚动条
hidden:会隐藏超出层范围的内容
scroll:总是显示滚动条
9)可见属性visibility
inherit:继承父对象的可见性,默认值
visible:无论父对象是否可见,子层都是可见的
hidden:无论父对象是否可见,子层都隐藏
8.列表属性
1)列表符号list-style-type
取值 含义
disc 默认值,实心圆
circle 空心圆
square 实心方块
decimal 阿拉伯数字
lower-roman 小写罗马字母
upper-roman 大写罗马字母
lower-alpha 小写英文字母
upper-alpha 大写英文字母
none 不使用任何符号
2)图像符号list-style-image
none/url(图像地址)
3)列表缩进list-style-position
outside列表项目标记放置在文本以外,且环绕文本不根据标记
inside列表项目标记放置在文本以内,且环绕文本根据标记
4)列表复合属性list-style
list-style-type:square;
list-style-image:url(图像地址);
list-style-position:outside;
9.光标属性cursor
cursor:auto | 形状取值 | url(图像地址)
光标形状取值 含义
default 默认,箭头
hand 竖起一只手
crosshair 简单的十字线光标
text 大写字母I的形状
help 带有问号标记的箭头
wait 用于标示程序忙用户需要等待的光标
e-resize 向东的箭头
ne-resize 向东北的箭头
n-resize 向北的箭头
nw-resize 向西北的箭头
w-resize 向西的箭头
sw-resize 向西南的箭头
s-resize 向南的箭头
se-resize 向东南的箭头
auto 默认值,根据浏览器
10.滤镜属性
1)不透明度alpha
filter:alpha(参数=参数值)
参数值 含义
opacity 开始时的透明度,0-100
finishopacity 结束时的透明度,0-100
style 渐变样式,0无渐变,1直线渐变,2圆形渐变,3矩形渐变
startx 设置透明渐变开始点的水平坐标
starty 设置透明渐变开始点的垂直坐标
finishx 设置透明渐变结束点的水平坐标
finishy 设置透明渐变结束点的垂直坐标
2)动感模糊blur
filter:blur(add=参数值,direction=参数值,strength=参数值)
add:设置是否显示原始图片;direction:设置动态模糊的方向;strength:设置动态模糊的强度
3)对颜色进行透明处理chroma
filter:chroma(color=颜色代码或颜色关键字)
4)阴影效果dropShadow
dropShadow(color=阴影颜色,offX=水平移动,offY=垂直移动,positive=是否透明1/0)
5)对象翻转flipH、flipV
filter:FlipH水平翻转
filter:FlipV垂直翻转
6)发光效果glow
filter:Glow(color=颜色,strength=强度)
7)灰度处理gray
filter:gray转换成为黑白图片
8)反相invert
9)X光片效果xray
10)遮罩效果mask
filter:Mask(Color=颜色)
11)波形滤镜wave
filter:wave(add=参数值,freq=参数值,lightstrength=参数值,phase=参数值,strength=参数值)
add:是否把图像按照波形样式打乱true/false
freq:设置图片上的波浪数目
lightstrength:设置波浪的光照强度0-100
phase:设置波浪的起始位置
strength:设置波浪的强度大小
11.背景属性
background-image : url(image/bg.gif) 背景图片
background-attachment : fixed 固定背景
background-repeat : repeat 重复排列-网页预设
background-repeat : no-repeat 不重复排列
background-repeat : repeat-x 在x轴重复排列
background-repeat : repeat-y 在y轴重复排列
background-position : 90% 90% 背景图片x与y轴的位置
12.链接属性
a 所有超连接
a:link 超连接文字格式
a:visited 浏览过的连接文字格式
a:active 按下连接的格式
a:hover 鼠标移至连接