CSS样式基础
CSS<!-- -->一、<!-- -->样式规则的基本格式
头样式<link href="" media="screen" rel="Stylesheet" type="text/css" />
<!-- -->1)<!-- --><选择器> { <属性名> : <属性值>; <属性名> : <属性值>; ...}
<!-- -->二、<!-- -->基本概念
<!-- -->1)<!-- -->选择器：控制对应样式作用在那些标签上
<!-- -->三、<!-- -->选择器的基本形式
<!-- -->1)<!-- -->div — 标签名字 — 作用于 <div>
<!-- -->2)<!-- -->#layer1 — 标签的id名 —作用于<p id="layer1"><a id="layer1">.....
<!-- -->3)<!-- -->.small — 标签的class名 —作用于<p class="small"><a class="small">.....
<!-- -->4)<!-- -->p#layer1 — 带有id=“layer1”的<p> — 作用于<p id="layer1">
<!-- -->5)<!-- -->p a — 包含在<p>中的<a>
<!-- -->6)<!-- -->h1,h2,p,em,img {boder: 1pxsolid bule;} 为组合选择器
<!-- -->四、<!-- -->格式化文本
<!-- -->1)<!-- -->字体样式：font
<!-- -->a)<!-- -->字体属性：font-family
值域：serif 、sans-serif 、monospace 、cursive 、fantasy（五个通用字体）
<!-- -->b)<!-- -->字体尺寸：font-size
值域：例h1 ｛font-size：1.5px｝
<!-- -->c)<!-- -->字重（粗细）：font-weight
值域：（normal，bold，bolder，lighter）（100-900九个值）
<!-- -->d)<!-- -->字体样式（斜体）font-style
值域：（normal）垂直（italic和oblique）倾斜
<!-- -->2)<!-- -->改变文本颜色：color 值域见P219
<!-- -->3)<!-- -->字段设置
<!-- -->a)<!-- -->行高：line-height 值域：尺寸的定义
<!-- -->b)<!-- -->缩进：text-indent 值域：尺寸的定义
<!-- -->c)<!-- -->水平对齐：text-align 值域：left左对齐right右对齐center中间对齐
Justify左右都对齐
<!-- -->d)<!-- -->下划线：text-decoration 值域：none|underline|overline|line-through|blink
无上划 下划 中划文本闪烁
<!-- -->五、<!-- -->颜色和背景
<!-- -->1)<!-- -->前景色（文本和边框）color
<!-- -->2)<!-- -->背景色 background-color
<!-- -->3)<!-- -->链接选择器：a:link未点击链接
a:visited以点击的链接
a:hover 当鼠标划过时
a:active 鼠标按下之后
<!-- -->4)<!-- -->背景图像background-image 格式：xx｛background-image：url（star.gif）｝
背景图像的平铺background-repeat：repeat-x（repeat-y）水平垂直平铺
背景图位置background-position：注表示位置的值top bottom right left
背景图滚动的模式background-attachment 值域：scroll、fixed
<!-- -->六、<!-- -->元素合子
<!-- -->1)<!-- -->内容区域设置
宽度设置width
高度设置height
<!-- -->2)<!-- -->填充区设置padding
Padding-top、padding-right、padding-bottom、padding-left
<!-- -->3)<!-- -->边框设置border
边框样式：border-style值域：none无solid实线double双实线dotted虚线
Dashed流动虚线……
边框厚度：border-width 若加方位则border-top-width
边框颜色：border-color
<!-- -->4)<!-- -->空白边设置margin
设置如填充区
<!-- -->七、<!-- -->浮动与定位
<!-- -->1)<!-- -->浮动float 注：浮动一定要定义元素的width值
清楚浮动：clear：left（right）此后的元素将不围绕浮动元素
<!-- -->2)<!-- -->定位position （只讨论相对定位）
例：Position:
Top:30px
Left:60px
<!-- -->3)<!-- -->堆积z-index 值域越高说明表示这个元素堆积在最搞层
页:
[1]