Cascade Style Sheet
CSS层叠样式表:1998/5/12 CSS level2成为W3C标准 用来装饰HTML/XML标签的集合
1.在<head>内
<style type=”text/css”> //H1、H2为选择符.选择html文档中的标签
H1{font-size:16pt;color:red} //选择符1,标识符2{属性名:属性值;属性名:属性值}
H2{font-size:10pt;color:green}
</style>
2.在<body>中的标签内
<h1 style=”font-size:20pt;color:blue”>hello<h1>
3.单独写在某一个文件内
<link href="css/web.css" rel="stylesheet" type="text/css" />
对应的web.css中:
H1{font-size:16pt;color:red}
H2{font-size:10pt;color:green}
4.多种风格就近原则
5.选择标签方式:直接写标签、类选择符、id选择符
①用标签+Class选择 | ②用Class选择 | ①用id选择 |
在< style >中定义 p.code{...} p. comment {...} | 在< style >中定义 .code{...}
| 在< style >中定义 #code{...} #comment {...} |
在<body>中的标签为 <p class=”code”>....</p> <p class=”comment”>....</p> | 在<body>中的标签为 <p class=”code”>....</p> <h2 class=”code”>....</h2> | 在<body>中的标签为 <p id=”code”>....</p> <h2 id=”comment”>....</h2> |
两个不同的标签其class可以相同 但id不能相同(id唯一性也可以在js中使用getElementById)
6.关于<pre>内会按代码的缩进格式在浏览器中显示
7.当标识符1内部如果有标识符2就采用该装修风格
选择符1 标识符2{属性名:属性值;属性名:属性值}
8.字体属性
属性 | 含义 | 属性值 | 属性 | 含义 | 属性值 |
color | 字体颜色 | 颜色值 | font-weight | 字体粗细 | bold\bolder\lighter |
font-style | 字体样式 | italic\oblique | font-variant | 小体大写 | small-caps |
font-size | 字体大小 | absolute\relative\% | font-family | 字体 | 各种字体 |
8.颜色与背景属性(em为m作为单位大小12pixels)
Color颜色 background-color背景色 background-image背景图案
background-repeat背景图案重复方式:repeat-x | repeat-y | no-repeat
background-attachment背景滚动:Scroll | fix
background-position背景图案位置: % | n em | top | left | right | bottom
9.文本属性
Word-spacing单词间距Letter-spacing字母间距 Text-decoration装饰样式 line-height行高
veribcal-align垂直方向位置text-transtorm转为其他形式Text-align对齐 text-indent缩进
10.伪类选择符 装饰超链接
A:link未访问时的状态 A:visited访问过后的状态
A:active鼠标点中不放时的状态 A:hover鼠标滑过时的状态
11.边距属性:Margin-top \ Margin-right \ Margin-bottom \ Margin-left(填充距对应为padding-)
12.边框属性
Border-xxx 或border-xxx-width (xxx为top、right、bottom、left)、border-width(四边框宽度)
border-color边框颜色 border-style边框样式
13.图文混排:(不常用)
Width height float文字环绕 clear去除文字环绕
14.列表属性
Display是否显示 white-space空白部分 list-style-type项目编号
List-style-image项目前图片 list-style-position第二行位置list-style全部属性
15.鼠标属性:cursor:hand ne-resize move wait help
16.定位属性:
样式:
#pic1{POSITION:absolute;TOP:100px}
#pic2{POSITION:absolute;TOP:100px;VISIBILITY:hidden}
在<body>中的标签
<div id=pic1> <img src=”pic1.jpg” height=180 width=185> </div>
<div id=pic2> <img src=”pic2.jpg” height=180 width=185> </div>
对应按钮
<input οnclick=”pic1.style.visibility=’visible’; pic2.style.visibility=’hidden’” type=button value=pic1>
<input οnclick=”pic2.style.visibility=’visible’; pic1.style.visibility=’hidden’” type=button value=pic2>
17.z轴的定位:sytle=“Z-INDEX:n“ n指定层次
18.滤镜效果:
在<script>中
function handlechange(obj){
with(obj.filters(0)){
if(strength<255){
strength+=2;
direction+=45;
}
}
}
在<body>中
<IMG id=img1 onfilterchange=handlechange(this) style=”FILTER:wave|strength=1” src=”01.jpg”>