CSS代码示例.doc

CSS样式style样式写在与之间1.内嵌样式：这个内嵌样式(Inline Style)定义段落里面的文字是20pt字体，字体颜色是红色。这段文字没有使用内嵌样式。2.内部样式表：H1.mylayout border-width: 1; border: solid; text-align: center;color:red 这个标题使用了Style。这个标题没有使用Style。3.外部样式表： 这个标题使用了Style。这个标题没有使用Style。4.通用样式表：Generic Class Selector .center text-align:center这个标题居中显示。这个段落居中显示。5.Tag样式：Class Selectorp.right text-align:rightp.center text-align:center这一段居中显示。这一段是居右显示。6.内嵌于其他Tag的样式：Class Selectorp em color:red这个段落中用em强调的字是红色的。这个标题中用em强调的字不是红色的。7.背景颜色属性：背景颜色 background-colorbody background-color:#99FF00;这个HTML使用了CSS的background-color属性，将HTML的背景颜色变成翠绿色。8.背景图片属性：背景图片background-image这个HTML使用了CSS的background-image属性，设置了背景图片。9.背景附着属性：body background-image:url(./images/css_tutorials/background.jpg); background-repeat:no-repeat; background-attachment:fixed10.背景位置属性：body background-image:url(./images/css_tutorials/background.jpg);background-repeat:no-repeat; background-position:20px 60px这个HTML使用了CSS的background-position属性。这个属性和background-image属性连在一起使用，决定了背景图片的最初位置。上面的代码表示背景图片的初始位置距离网页最左面20px，距离网页最上面60px。11.背景属性:背景属性 backgroundbody background:#99FF00 url(./images/css_tutorials/background.jpg) no-repeat fixed 40px 100px这个属性是设置背景相关属性的一种快捷的综合写法， 包括background-color, background-image, background-repeat, backgroundattachment, background-position。这个HTML所用的背景属性表示，网页的背景颜色是翠绿色，背景图片是background.jpg图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面40px，距离网页最上面100px。这个属性是设置背景相关属性的一种快捷的综合写法， 包括background-color, background-image, background-repeat, backgroundattachment, background-position。这个HTML所用的背景属性表示，网页的背景颜色是翠绿色，背景图片background.jpg图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面40px，距离网页最上面100px。这个属性是设置背景相关属性的一种快捷的综合写法， 包括background-color, background-image, background-repeat, backgroundattachment, background-position。这个HTML所用的背景属性表示，网页的背景颜色是翠绿色，背景图片是background.jpg图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面40px，距离网页最上面100px。12.字体属性：字体大小属性 font-sizeBODYfont-size:10pt.s1 font-size:16px.s2 font-size:16pt.s3 font-size:80%.s4 font-size:larger.s5 font-size:xx-large这段文字大小是10pt。这段文字大小是16px。这段文字大小是16pt。这段文字大小是10pt的80%。这段文字的大小比10pt大。这段文字的大小是特大号(xx-large)。13.字体风格：字体风格属性 font-style.s1 font-style:italic.s2 font-style:oblique这段文字风格是normal，正常显示。normal是字体风格属性(font-style)的缺省值。这段文字的字体风格(font-style)属性值是italic，斜体显示。这段文字的字体风格(font-style)属性值是oblique，斜体显示。14.字体浓淡属性：字体浓淡属性 font-weight这段文字没有设浓淡属性。这段文字字体的浓淡属性(font-weight)值是bold。这段文字字体的浓淡属性(font-weight)值是lighter。这段文字字体的浓淡属性值(font-weight)是200。这段文字字体的浓淡属性值(font-weight)是800。15.字体变量属性：字体变量属性 font-variant.s1 font-variant:small-caps字体变量(font-variant)属性有两个值，一个是缺省值normal，另外一个是small-caps。下面这段文字的字体变量属性(font-variant)是small-caps。The font-variant value of the text is small-caps. 16.字体属性：字体属性 font.s1 font:italic normal bold 11pt Arial.s2 font:normal small-caps normal 14pt Courier这段文字的字体风格(font-style)属性值是italic，字体变量(font-variant)属性值是normal，字体浓淡(font-weight)属性值是bold，字体大小(font-size)属性值是11pt，字体名称(font-family)属性值是Arial。这段文字的字体风格(font-style)属性值是normal，字体变量(font-variant)属性值是small-caps，字体浓淡(font-weight)属性值是normal，字体大小(font-size)属性值是14pt，字体名称(font-family)属性值是Courier。17.字体名称属性：字体名称属性 font-family.s1 font-family:Arial.s2 font-family:Tahoma.s3 font-family:Courier.s4 font-family:Verdana.s5 font-family:Book AntiquaThe font-family value of the text is the browser default font.The fon-family value of the text is Arial。The fon-family value of the text is Tahoma。/The fon-family value of the text is Courer。/The fon-family value of the text is Verdana。/The fon-family value of the text is Book Antiqua。/18.边框风格属性：边框风格属性 border-style .d1 border-style:none;.d2 border-style:solid;.d3 border-style:dotted;.d4 border-style:dashed;.d5 border-style:double;.d6 border-style:groove;.d7 border-style:ridge;.d8 border-style:inset;.d9 border-style:outset;这个div的CSS边框风格(border-style)属性缺省值是none。这个div的CSS边框风格(border-style)属性是none。这个div的CSS边框风格(border-style)属性是solid。这个div的CSS边框风格(border-style)属性是dotted。这个div的CSS边框风格(border-style)属性是dashed。这个div的CSS边框风格(border-style)属性是double。这个div的CSS边框风格(border-style)属性是groove。这个div的CSS边框风格(border-style)属性是ridge。这个div的CSS边框风格(border-style)属性是inset。这个div的CSS边框风格(border-style)属性是outset。19.边框宽度：边框宽度 border-width.d1 border-style:solid;.d2 border-width:thin;border-style:solid;.d3 border-width:thick;border-style:solid;.d4 border-width:10px;border-style:solid;.d5 border-width:5mm;border-style:solid;这个div的CSS边框宽度(border-width)属性缺省值是medium。这个div的CSS边框宽度(border-width)属性值是thin。这个div的CSS边框宽度(border-width)属性值是thick。这个div的CSS边框宽度(border-width)属性值是10px。这个div的CSS边框宽度(border-width)属性值是5mm。20.边框颜色：边框颜色属性 border-color.d1 border-color:#FFA500;border-style:solid;.d2 border-color:#33CC00;border-style:solid;.d3 ;border-color:#6600FF;border-style:solid;.d4 border-color:#FF6347;border-style:solid;.d5 border-color:gray;border-style:solid;这个div的CSS边框颜色(border-color)属性值是橙色。这个div的CSS边框颜色(border-color)属性值是绿色。这个div的CSS边框颜色(border-color)属性值是蓝色。这个div的CSS边框颜色(border-color)属性值是番茄红。这个div的CSS边框颜色(border-color)属性值是灰色。21.边框属性：边框属性 border.d1 border:5px solid gray;这个div的边框属性：边框宽度(border-width)为5px；边框风格(border-style)为直线式；边框颜色为灰色。22.单个边框属性;单个边框属性 .d1 border-top:5px solid #FF0000.d2 border-bottom:5px solid #FF0000.d3 border-left:5px solid #FF0000.d4 border-right:5px solid #FF0000单个边框属性：设置上边框用border-top设置下边框用border-bottom设置左边框用border-left设置右边框用border-right23.边距CSS边距属性 margin.D1border:1px solid #FF0000;.D2border:1px solid gray;.D3margin:0.5cm 1cm 2.5cm 1.5cm;border:1px solid gray;没有margin上面两个div没有设置边距属性(margin)，仅设置了边框属性(border)。外面那个div的border设为红色，里面那个div的border属性设为灰色。和上面两个div的CSS属性设置不同的是，下面两个div中，里面的那个div设置了边距属性(margin)，设定上边距为0.5cm，右边距为1cm，下边距为2.5cm，左边距为1.5cm。上下左右边距宽度各不同边距属性：CSS边距属性 margin.D1border:1px solid #FF0000;.D2border:1px solid gray;.D3margin:1cm;border:1px solid gray;没有margin上面两个div没有设置边距属性(margin)，仅设置了边框属性(border)。外面那个div的border设为红色，里面那个div的border属性设为灰色。和上面两个div的CSS属性设置唯一不同的是，下面两个div中，里面的那个div设置了边距属性(margin)，边距为1厘米，表示这个div上下左右的边距都为1厘米。margin设为1cm24.左边距属性：CSS左边距属性 margin-left.D1border:1px solid #FF0000;.D2border:1px solid gray;.D3margin-left:1cm;border:1px solid gray;没有margin上面两个div没有设置边距属性(margin)，仅设置了边框属性(border)。外面那个div的border设为红色，里面那个div的border属性设为灰色。和上面两个div的CSS属性设置唯一不同的是，下面两个div中，里面的那个div设置了左边距属性(margin-left)，表示这个div左边距为1厘米。margin-left设为1cm25.左间隙属性（padding-left）：左间隙属性 padding-lefttd padding-left: 2cm这个单元格的CSS左间隙属性(padding-left)为2厘米。26.间隙属性（左，右，上，下各不相同）：间隙属性 paddingtd padding: 0.5cm 1cm 4cm 2cm这个单元格设置了CSS间隙属性。上间隙为0.5厘米，右间隙为1厘米，下间隙为4厘米，左间隙为2厘米。27.间隙属性（左，右，上，下 相同）：间隙属性 paddingtd padding: 1cm这个单元格设置了CSS间隙属性。上下左右间隙宽度都为1厘米。28.文本修饰属性-划线：文本修饰属性 text-decoration.p1text-decoration: none.p2 text-decoration: underline.p3text-decoration: line-through.p4 text-decoration:overline文本修饰属性(text-decoration)的缺省值是none。这段的文本修饰属性(text-decoration)值是underline。这段的文本修饰属性(text-decoration)值是line-through。这段的文本修饰属性(text-decoration)值是overline。29.文本字体颜色：颜色属性 color.p1color:gray.p2 color:#FF0000.p3color:#3300FF这段没有设置颜色属性(color)。这段的颜色属性(color)值是灰色。这段的颜色属性(color)值是红色。这段的颜色属性(color)值是蓝色。30.文本对齐属性：文本对齐属性 text-align.p1text-align:left.p2 text-align:right.p3text-align:center这段的本文对齐属性(text-align)值为居左。这段的本文对齐属性(text-align)值为居右。这段的本文对齐属性(text-align)值为居中。31.行高属性-设置行距离：行高属性 line-height.p1 line-height:1cm.p2 line-height:2cm这个段落的CSS行高属性(line-hight)值为1cm，即每行之间的距离是1厘米。这个段落的CSS行高属性(line-hight)值为2cm，即每行之间的距离是2厘米。32.字间距属性-字符间距：字间距属性 letter-spacing.p1 letter-spacing: 3mm这段没有设置字间距属性(letter-spacing)。这段设定字间距属性(letter-spacing)值为3毫米。33.文本缩进属性-首行缩进：文本缩进属性 text-indent.p1 text-indent: 8mm.d1 width:300px.p2 text-indent:50%下面两端都设定CSS文本缩进属性(text-indent)，第一段用长度方法设值，第二段用百分比方法设值。芙蓉姐姐说道：“我那妖媚性感的外形和冰清玉洁的气质让我无论走到哪里都会被众人的目光无情地揪出来。我总是很焦点。我那张耐看的脸，配上那副火爆得让男人流鼻血的身体，就注定了我前半生的悲剧。”芙蓉姐姐说道：“我那妖媚性感的外形和冰清玉洁的气质让我无论走到哪里都会被众人的目光无情地揪出来。我总是很焦点。我那张耐看的脸，配上那副火爆得让男人流鼻血的身体，就注定了我前半生的悲剧。”34.列表样式图片属性示例：列表样式图片 list-style-imageul list-style-image: url(./images/css_tutorials/dot02.gif)芙蓉姐姐木子美竹影青瞳流氓燕35.列表样式位置属性：列表样式位置 list-style-position.u1 list-style-position:outside.u2 list-style-position:inside芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐木子美竹影青瞳流氓燕芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐木子美竹影青瞳流氓燕36.列表项标志的示例:列表样式类型 list-style-typeul.disc list-style-type: discul.circle list-style-type: circleul.square list-style-type: squareul.none list-style-type: none肉类蔬菜水果肉类蔬菜水果肉类蔬菜水果肉类蔬菜水果37.列表标志示例：列表样式类型 list-style-typeol.decimal list-sty