<!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>
浙公网安备 33010602011771号