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: 1px solid 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   值域越高说明表示这个元素堆积在最搞层