CSS3 (1)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3 知识点总结</title> <style type="text/css"> h1#text1{ margin:0px; padding:0px; position:absolute; /*设置div为绝对定位*/ font-size:40px; /*字高*/ color:#FF0000; /*字体颜色*/ margin-left:50px; /*与组件水平距离*/ } h1#text2{ margin:0px; padding:5px; position:absolute; font-size:30px; color:#FFFFFF; top:30px; margin-left:150px; z-index:1; /*将层次设在第1层*/ filter:glow(color=#ff0000,strength=5); /*设置光晕滤镜*/ text-shadow:5px 5px 5px #FF0000; /**设置阴影/ } h2{ color:#0000CC; font-family:ParkAvenue BT; font-weight:bold; border:3px #669900 DOUBLE; } a{cursor:pointer;} /*鼠标光标特效:图标可以由CSS的cursor属性进行控制*/ [class*="test"]{background:red}} /*<font>标记,<a>标记,<p>标记*/ </style> </head> <body> <h1 id="text1">HTML5+CSS3</h1> <h1 id="text2">HTML5+CSS3</h1><br> <h2>Do a thing quickly often means doing it badly.</h2> <a><img src="2.jpg" width="231" width="200"></a> <!--属性选择器--> <div class="first_cond">div 标记.</div> <font class="secondtest">font 标记.</font><br> <a class="test">a 标记.</a> <p class="test word">p 标记.</p> <!--CSS样式表由选择器(selector)与样式规则(rule)组成--> <!--(selector):HTML标记 全局选择器(*) Class选择器 ID选择器 属性选择器--> <!--样式规则(rule):样式规则是用大括号{}括起来的部分,每个规则由属性和设置值组成--> <!--应用CSS样式表:行内声明(Inline) 内嵌声明(embedding) 链接外部样式文件(Linking)--> <!--1.字体属性--> <!--color字体颜色:颜色名称、十六进制、RGB码--> <!--font-family字体样式:字形名称--> <!--font-size字体大小:数值+百分比、数值+单位(pt,px,em,ex)--> <!--font-style文字斜体:normal,italic,oblique--> <!--font-weight文字粗体:normal,bold,bolder,lighter--> <!--2.段落属性--> <!--text-align文字水平对齐方式:left,center,right,justify(两端对齐)--> <!--text-indent首行缩进:数值+百分比、数值+单位--> <!--letter-spacing字符间距:normal,数值"+"单位(pt,px,em)--> <!--line-height行高:数值+单位--> <!--word-wrap是否换行:break-word--> <!--3.文字效果属性--> <!--vertical-align垂直对齐:baseline((一般位置),super(上标),sub(下标), top(顶端对齐),middle(垂直居中),bottom(底端对齐)--> <!--text-decoration文字装饰样式:none,underline(下划线),line-through(删除线),overline(上划线)--> <!--text-transform转换字母大小写:none,lowercase,uppercase,capitalize--> <!--text-shadow(IE不支持)增加阴影效果--> <!--1.设置背景图片--> <!--background-image背景图片:url(图片文件相对路径)--> <!--background-repeat是否重复显示背景图片:repeat,repeat-x,repeat-y,no-repeat--> <!--background-attachment背景图片是否随网页滚动条滚动:fixed(固定),scroll(随滚动条滚动)--> <!--background-position背景图片位置:百分比(x)百分比(y),x y,[top,center,bottom][left,center,right]--> <!--background综合应用:--> <!--background-size设置背景尺寸:padding-box,border-box,content-box--> <!--1.边框--> <!--border-style边框样式:none(默认值),solid,double,groove,ridge,inset,outset--> <!--border-width边框宽度:宽度数值+单位,thin(薄),thick(厚),medium(中等,默认值)--> <!--border-color边框颜色:颜色名称,十六进制(HEX)码,RGB码--> <!--border综合设置:--> <!--border-radius圆角边框:长度(px)或百分比--> <!--border-image花边框线:--> <!--1.一般定位--> <!--position设置组件位置的排列方式:absolute,relative,static--> <!--width,height指定组件宽度/高度:宽度数值/高度数值--> <!--left,top指定组件与左/右边界的距离(x坐标)/(y坐标):距离数值/距离数值--> <!--overflow超出边界的显示方式:距离数值--> <!-- <img src="sample.gif" style="position:absolute; top:30; left:30; z-index:1"> 图片放在距离上边界及左边界各30点的位置,层次顺序为1. z-index数值越大,层次就越高,z-index数值大的组件会排在数值小的组件上面. --> <!-- a{border:1px red solid;}:声明超链接的样式是红色实线、宽1px的边框 a:link{color:black;}:未连接前超链接文字颜色是黑色 a:visited{color:blue;border:0px;}:已链接过的超链接文字颜色为蓝色,没有边框 a:active{color:yellow;}:激活时超链接文字颜色为黄色 a:hover{border:1px green solid;text-decoration:none;}: 当鼠标移到链接时的超链接样式是绿色实线,宽1px的边框,文字不添加下划线 --> </body> </html>