CSS样式基础

CSS

<!-- [if !supportLists]-->一、 <!-- [endif]-->样式规则的基本格式

头样式 <link href="" media="screen" rel="Stylesheet" type="text/css" />

<!-- [if !supportLists]-->1) <!-- [endif]-->< 选择器 > { < 属性名 > : < 属性值 >; < 属性名 > : < 属性值 >; ...}

<!-- [if !supportLists]-->二、 <!-- [endif]-->基本概念

<!-- [if !supportLists]-->1) <!-- [endif]-->选择器：控制对应样式作用在那些标签上

<!-- [if !supportLists]-->三、 <!-- [endif]-->选择器的基本形式

<!-- [if !supportLists]-->1) <!-- [endif]-->div — 标签名字 — 作用于 <div>

<!-- [if !supportLists]-->2) <!-- [endif]-->#layer1 — 标签的 id 名 — 作用于 <p id="layer1"> <a id="layer1">.....

<!-- [if !supportLists]-->3) <!-- [endif]-->.small — 标签的 class 名 — 作用于 <p class="small"> <a class="small">.....

<!-- [if !supportLists]-->4) <!-- [endif]-->p#layer1 — 带有 id= “ layer1” 的 <p> — 作用于 <p id="layer1">

<!-- [if !supportLists]-->5) <!-- [endif]-->p a — 包含在 <p> 中的 <a>

<!-- [if !supportLists]-->6) <!-- [endif]-->h1,h2,p,em,img {boder: 1px solid bule;} 为组合选择器

<!-- [if !supportLists]-->四、 <!-- [endif]-->格式化文本

<!-- [if !supportLists]-->1) <!-- [endif]-->字体样式： font

<!-- [if !supportLists]-->a) <!-- [endif]-->字体属性： font-family

值域： serif 、 sans-serif 、 monospace 、 cursive 、 fantasy （五个通用字体）

<!-- [if !supportLists]-->b) <!-- [endif]-->字体尺寸： font-size

值域：例 h1 ｛ font-size ： 1.5px ｝

<!-- [if !supportLists]-->c) <!-- [endif]-->字重（粗细）： font-weight

值域：（ normal ， bold ， bolder ， lighter ）（ 100-900 九个值）

<!-- [if !supportLists]-->d) <!-- [endif]-->字体样式（斜体） font-style

值域：（ normal ）垂直（ italic 和 oblique ）倾斜

<!-- [if !supportLists]-->2) <!-- [endif]-->改变文本颜色： color 值域见 P219

<!-- [if !supportLists]-->3) <!-- [endif]-->字段设置

<!-- [if !supportLists]-->a) <!-- [endif]-->行高： line-height 值域：尺寸的定义

<!-- [if !supportLists]-->b) <!-- [endif]-->缩进： text-indent 值域：尺寸的定义

<!-- [if !supportLists]-->c) <!-- [endif]-->水平对齐： text-align 值域： left 左对齐 right 右对齐 center 中间对齐

Justify 左右都对齐

<!-- [if !supportLists]-->d) <!-- [endif]-->下划线： text-decoration 值域： none|underline|overline|line-through|blink

无 上划 下划 中划 文本闪烁

<!-- [if !supportLists]-->五、 <!-- [endif]-->颜色和背景

<!-- [if !supportLists]-->1) <!-- [endif]-->前景色（文本和边框） color

<!-- [if !supportLists]-->2) <!-- [endif]-->背景色 background-color

<!-- [if !supportLists]-->3) <!-- [endif]-->链接选择器： a:link 未点击链接

a:visited 以点击的链接

a:hover 当鼠标划过时

a:active 鼠标按下之后

<!-- [if !supportLists]-->4) <!-- [endif]-->背景图像 background-image 格式： xx ｛ background-image ： url （ star.gif ）｝

背景图像的平铺 background-repeat ： repeat-x （ repeat-y ）水平垂直平铺

背景图位置 background-position ：注表示位置的值 top bottom right left

背景图滚动的模式 background-attachment 值域： scroll 、 fixed

<!-- [if !supportLists]-->六、 <!-- [endif]-->元素合子

<!-- [if !supportLists]-->1) <!-- [endif]-->内容区域设置

宽度设置 width

高度设置 height

<!-- [if !supportLists]-->2) <!-- [endif]-->填充区设置 padding

Padding-top 、 padding-right 、 padding-bottom 、 padding-left

<!-- [if !supportLists]-->3) <!-- [endif]-->边框设置 border

边框样式： border-style 值域： none 无 solid 实线 double 双实线 dotted 虚线

Dashed 流动虚线……

边框厚度： border-width 若加方位则 border-top-width

边框颜色： border-color

<!-- [if !supportLists]-->4) <!-- [endif]-->空白边设置 margin

设置如填充区

<!-- [if !supportLists]-->七、 <!-- [endif]-->浮动与定位

<!-- [if !supportLists]-->1) <!-- [endif]-->浮动 float 注：浮动一定要定义元素的 width 值

清楚浮动： clear ： left （ right ）此后的元素将不围绕浮动元素

<!-- [if !supportLists]-->2) <!-- [endif]-->定位 position （只讨论相对定位）

例： Position:

Top:30px

Left:60px

<!-- [if !supportLists]-->3) <!-- [endif]-->堆积 z-index 值域越高说明表示这个元素堆积在最搞层