CSS学习入门
CSS3的一些入门用法介绍。
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 鼠标移至连接
浙公网安备 33010602011771号