css常用代码大全讲解

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

:(font)
{font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就

PX、PD
{font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)
{line-height: normal;}(正常) 单位:PX、PD、EM
{font-weight: bold;}(粗体) lighter;(细体) normal;(正常)
{font-variant: small-caps;}(小型大写字母) normal;(正常)
小写 {text-transform: capitalize;}(首字母大写) uppercase;(大写)
小写)
无)
{text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除
)
闪烁)
(font-family)
(background)
{background-color: #FFFFFF;}
{background-image: url();}
{background-repeat: no-repeat;}
{background-attachment: fixed;}(固定) scroll;(滚动)
{background-position: left;}(水平) top(垂直);
{background:#000 url(..) repeat fixed left top;} /*简写·这个在阅读代

*/
(Block) /*这个属性第一次认识,要多多研究*/
{letter-spacing: normal;} 数值 /*这个属性似乎有用,多实践下*/
{text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中)
{text-indent: 数值px;}
{vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top;
word-spacing: normal; 数值
white-space: pre;(保留) nowrap;(不换行)
{display:block;}(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分)
紧凑) marker;(标记) table; inline-table; table-raw-group;
table-footer-group; table-raw; table-column-group; table-column;
表格标题) /*display 属性的了解很模糊*/
(Box)
顺序:上右下左
(Border)
dotted;(点线) dashed;(虚线) solid(实线); double;(双线)
槽线)
脊状) inset;(凹陷) outset;
边框宽度
border:width style color; /*简写*/
(List-style)
list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字)
小罗码数字) upper-roman; lower-alpha; upper-alpha;
list-style-position: outside;(外) inside;
list-style-image: url(..);
(Position)
裁切)
属性代码大全
CSS文字属性:
文字颜色*/
宋体,sans-serif; /*文字字体*/
文字大小*/
文字斜体*/
小字体*/
字间距离*/
设置行高*/
文字粗体*/
下标字*/
上标字*/
加删除线*/
加顶线*/
加下划线*/
删除链接下划线*/
首字大写*/
英文大写*/
英文小写*/
文字右对齐*/
文字左对齐*/
文字居中对齐*/
文字分散对齐*/
属性
垂直向上对齐*/
垂直向下对齐*/
垂直居中对齐*/
文字垂直向上对齐*/
文字垂直向下对齐*/
CSS边框空白
上边框留空白*/
右边框留空白*/
下边框留空白*/
左边框留空白
CSS符号属性:
不编号*/
阿拉伯数字*/
小写罗马数字*/
大写罗马数字*/
小写英文字母*/
大写英文字母*/
实心圆形符号*/
空心圆形符号*/
实心方形符号*/
图片式符号*/
凸排*/
缩进*/
CSS背景样式:
背景颜色*/
透视背景*/
背景图片*/
浮水印固定

背景*/
重复排列-网页默认*/
不重复排列*/
在x轴重复排列*/
在y轴重复排列*/

背景图片x与y轴的位置*/
向上对齐*/
向下对齐*/
向左对齐*/
向右对齐*/
居中对齐*/
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
(IE6) p {cursor:url("光标文件名.cur"),text;}
CSS边框线一览表:
上框线*/
下框线*/
左框线*/
右框线*/
,但也可以使用常规的方式 如下:
设置上框线top颜色*/
设置上框线top宽度*/
设置上框线top样式*/

实线框*/
虚线框*/
双线框*/
立体内凸框*/
立体浮雕框*/
凹框*/
凸框*/
CSS表单运用:





选项1选项2
CSS边界样式:
上边界*/
右边界值*/
下边界值*/
左边界值*/
属性: 字体样式(Font Style)
中文说明 标记语法
字体样式 {font:font-style font-variant font-weight font-size font-family}
字体类型 {font-family:"字体1","字体2","字体3",...}
字体大小 {font-size:数值|inherit| medium| large| larger| x-large| xx-large|
字体风格 {font-style:inherit|italic|normal|oblique}
字体粗细 {font-weight:100-900|bold|bolder|lighter|normal;}
字体颜色 {color:数值;}
阴影颜色 {text-shadow:16位色值}
字体行高 {line-height:数值|inherit|normal;}
字 间 距 {letter-spacing:数值|inherit|normal}
单词间距 {word-spacing:数值|inherit|normal}
字体变形 {font-variant:inherit|normal|small-cps }
英文转换 {text-transform:inherit|none|capitalize|uppercase|lowercase}
字体变形 {font-size-adjust:inherit|none}
字体 {font-stretch:condensed|expanded|extra-condensed|extra-
(Text Style)
中文说明 标记语法
行 间 距 {line-height:数值|inherit|normal;}
文本修饰 {text-decoration:inherit|none|underline|overline|line-through|blink}
段首空格 {text-indent:数值|inherit}
水平对齐 {text-align:left|right|center|justify}
垂直对齐 {vertical-align:inherit|top|bottom|text-top|text-
书写方式 {writing-mode:lr-tb|tb-rl}

中文说明 标记语法
背景颜色 {background-color:数值}
背景图片 {background-image: url(URL)|none}
背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
背景固定 {background-attachment:fixed|scroll}
背景定位 {background-position:数值|top|bottom|left|right|center}
背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置}
(Box Style)
中文说明 标记语法
边界留白 {margin:margin-top margin-right margin-bottom margin-left}
补 白 {padding:padding-top padding-right padding-bottom padding-left}
边框宽度 {border-width:border-top-width bor

der-right-width

thin|medium|thick|数值
边框颜色 {border-color:数值 数值 数值 数值} 数值:分别代表top、right、

颜色值
边框风格 {border-
边 框 {border:border-width border-style color}
上 边 框 {border-top:border-top-width border-style color}
右 边 框 {border-right:border-right-width border-style color}
下 边 框 {border-bottom:border-bottom-width border-style color}
左 边 框 {border-left:border-left-width border-style color}
宽 度 {width:长度|百分比| auto}
高 度 {height:数值|auto}
漂 浮 {float:left|right|none}
清 除 {clear:none|left|right|both}

中文说明 标记语法
控制显示 {display:none|block|inline|list-item}
控制空白 {white-space:normal|pre|nowarp}
符号列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-
图形列表 {list-style-image:URL}
位置列表 {list-style-position:inside|outside}
目录列表 {list-style:目录样式类型|目录样式位置|url}
鼠标形状 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-
属性大全
背景]属性共有六项:
(background-color),设置背景颜色。
(background-image),设置网页背景图像。
(background-repeat),控制背景图像的平铺方式,有不重复
no-repeat)、重复(repeat,沿水平、垂直方向平铺)、横向重复(repeat-X,
repeat-Y,沿图像垂直方向平铺)
4种选择。
(background-attachment),用于控制背景图像是否会随页面的
fixd,文字滚动时,背景图像保质固定)和
scroll,背景图像随文字内容一起滚动)两种选择。
/「垂直位置」(background-position),确定背景图像的水
。共有左对齐(left)、右对齐(right)、顶部(top)、底部
bottom)、居中(center)和值(自定义背景图像的起点位置,
6种选择。
类型]属性共有九项:
(font-family),设定时,需考虑浏览器中有无该字体。
(font-size),注意度量单位。
(font-weight),除了normal(正常)、bold(粗体)、bolder(特
、lighter(细体)外,还有9种以像素为度量为单位的设置方式。
(font-style),也就是字型。
(line-height),就是行距。注意,行距只能以是字体大小值为
(font-variant),可以将正常文字一半尺寸后大写显示,但IE目

(text-transform),这项属性能轻而易举地控制字母大小写,
(capitalize、大写(uppercase)、小写(lowercase)和无(none,
文字将以正常形式显示)等4种。
(text-decoration),用于控制链接文本的显示形态,有下划线
underline)、无下划线(overline)、删除线(line-through)、闪烁(blink)
none ,使上述效果均不会发生)等5种修饰方式。但IE4不支

区块]属性共有六项:
(word-spacing),主要用于控制文字间相隔的距离。有正
normal

)和值(自定义间隔值)两种选择方式。当选择值时,可用
in)、厘米(cm)、毫米(mm)、点数(pt)、12pt字(pc)、
em)、字体x有高(ex)像素(px)。
(letter-spacing),其作用与字符间距类似,也有正常(normal)

(vertical-align),控制文字或图像相对于其母体元素的垂
如将一个2×3像素的GIF图像同其母体元素文字的顶部垂直对
GIF图像将在该行文字的顶部显示。共有基线(baseline,将
、下标(sub,将元素以下标的
,上标(super,将元素以上标的形式显示)、顶部(top ,将
、文本顶对齐(text-top,将元素的顶
、中线对齐(middle,将元素的中点同
、底部(bottom,将元素的底部同最低的母体元
9种选择。
(text-align),设置块的水平对齐方式。共有左对齐(left)、
right)、居中(center)和均分(justify)等4种选择。
(text-indent),控制块的缩进程度。
(white-space),在HTML中,空格是被省略的;在CSS
white-space)控制空格的输入。共有正常(normal)、保
pre)和不换行(nowrap)等3种选择。
边框]的属性有3项:
宽」(border-width),控制边框的宽度,其中分为4个属性:
顶边框的宽度、border-right-width右边框的宽度、
底边框的宽度、border-left-width左边框的宽度。
(border-color),设置各边框的颜色。若要使边框的四边显示不


(border-style),设定边框的样式,共有无(none)、虚线(dotted)、
dotted)、点划线(dashed)、实线(solid)、双线(double )、
grove)、脊状(ridge)、凹陷(inset)和凸起(outset)等9种。
6项:
(width),确定盒子本身的宽度,可以使盒子的宽度不依靠它所

(height),确定盒子本身的高度。
(float),设置块元素的浮动效果。
(clear),用于清除设置的浮动效果。
(margin),控制围绕边框的边距大小。其中包含4个属性:
控制上边距的宽度、margin-right控制右边距的宽度、
控制下边距的宽度、margin-left控制左边距的宽度。
(padding),确定围绕块元素的空格填充数量,其中包含4个属
padding-top控制上留白的宽度、padding-right控制右留白的宽度、
控制下留白宽度、padding-left控制左留白的宽度。
列表]属性共有3项:
(list-style-type),确定列表每一项前使用的符号,共有圆点
disc)、圆圈(circle)、方形(square)、数字(decimal)、小写罗马数
(lower-roman )、大写罗马数字(upper-roman)、小写字母(lower-alpha)
upper-alpha)等8种。
(list-style-image),其作用是将列表前面的符号换为图形。
(list-style-position),用于描述列表位置,有内(outside)和外
inside)两种选择。
定位]属性共有6项:
(position),用

于确定定位的类型,共有绝对(absolute)、相对
relative)和静态(static)等3种选择。
Z轴」(z-index),用于控制网页中块元素的叠放顺序,可为元素设置
0时,元素在最下层,适

(visibility)使用该属性可将网页中的元素隐藏,共有继承
inherit,继承母体要素的可视性设置)、可见(visible)和隐藏(hidden)
3种选择。
(overflow),在确定了元素的高度和宽度后,如果元素的面积
visible,扩大面积以显示所有内容)、隐藏(hidden,隐
、滚动(scroll,在元素的右边显示一个滚动条)和
auto,当内容超出元素面积时,显示滚动条)等4种选择。
,当为元素确定了绝对定位类型后,该组属性决定元素在网页
该组属性包含4个子属性,分别是「左」(属性名为「left」,
、「上」(属性名为「top」,控制元素上面的
、 「宽」或「高」(与「盒子」类属性面板中「宽」或「高」

(clip),当元素被指定为绝对定位类型后,该属性可以把元素
但目前提供的只有方形一种。属性值为rect(top right
,即:
,属性值的单位为任何一种长度单位。
扩展]属性共有两部分:
,其中两个属性的作用是为打印的页面设置分页符。 「之前」
page-break-before);「之后」(page-break-after)。
,其中两个属性的作用是为网页中的元素施加特殊效果。
(cusor),可以指定在某个元素上要使用的光标形状,共有15
Windows操作系统中的各种形状。另外
URL地址;「滤镜」(fiter),可以为网页中元
16种滤镜

相关文档
最新文档