CSS样式基础

gift5168xf

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