是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言
ONE:
3种类型以及顺序
内联 -> 外部样式表 ---->内部样式
格式:
1.内联:
<html 标签> <style "css样式">
css控制显示区域
</html标签>
<p style="margin-left:.5in;margin-right:0.5in">
....
<p>
2.外部样式表
<link rel=stylesheet href="url" type="text/css" >
eg:<link rel=stylesheet href="xx.css" type="text/css">
3.first between </title>&&</head>
<style type="text/css">
<!--
body {font:10pt "arial"} 和加点区别
h1{font:15pt "arial";font-weight:bole;color:marnoon}
p{font:10px "arial"; color:black}
-->
</style>
TWO: 样式表的分类:
1.字体设置 font-family字体类型 font-size
font-style 字体风格 italic normal oblique
font-weight:bold
text-decoration:文字修饰 underline overline line-through blink none
text-transform 文字变形 upcase lowcase
2.位置设置
word-spacing词间距设置
letter-spacing字间距设置
line-height行距设置
text-align 文字水平/垂直对齐 可用属性:center,left,right,justify
vertical-align
top将要素顶部同最高的母体要素对齐
bottom将要素的底部同最低的母体要素对齐
text-top将要素的顶部同母体要素文字的顶部对齐
text-bottom将要素的底部同母体要素文字的底部对齐
baseline将要素的基准线同母体要素的基准线对齐
middle将要素的中点同母体要素的中点对齐
sub将要素以下标的形式显示
sup将要素以上标的形式显示
3.link
<style type="text/css">
A:link { text-decoration:none }
A:active {text-decoration:none ; font-size:13px }
A:visited {text-decoration:none }
A:hover {
text-decoration:underline;
}
</style>
补充:
h4{margin-top:10px;margin-bottom:10px;margin-left:10px;margin-right:10px}
td {padding-top:10px;padding-bottom:10px;padding-left:10px;padding-right:10px}
td {border-top-width:10px;
border-bottom-width:10px;
border-left-width:10px;
border-right-width:10px
}
border-color:#ff0000
border-style:double;border-width:3px;border-color:#ff0000
type:solid double dotted dashed groove ridge inset outset