phpchina 第3期：CSS基础技术讲解篇 文件下载:CSS基础技术讲解篇
一、CSS语法
:
right
center
left p
left h1
二、css字体属性
字体Arial;
字体大小14;
风格属性斜体oblique
字体浓淡属性
字体属性
字体颜色
三、CSS常用文本属性:
文本缩进属性(text-indent)
length (长度，可以用绝对单位(cm, mm, in, pt, pc)或者相对单位 (em, ex, px))
percentage (百分比，相当于父对象宽度的百分比)
行高属性(line-height)
这个属性设定每行之间的距离。其值有以下设定方法：
normal (缺省值)
length (长度，可以用绝对单位(cm, mm, in, pt,pc)或者相对单位 (em, ex, px))
percentage (百分比，相当于父对象高度的百分比)
示例代码如下：
p3 {line-height:1cm}
字间距属性(letter-spacing)
p4 {letter-spacing: 3mm}
四、CSS背景属性
背景颜色
body {background-color:#ccc;}
背景图片属性(background-image)
body{background-image:url(../images/css_tutorials/background.jpg)}
五、CSS边框属性
边框风格属性(border-style)
这个属性用来设定上下左右边框的风格，它的值如下：
none (没有边框，无论边框宽度设为多大)
dotted (点线式边框)
dashed (破折线式边框)
solid (直线式边框)
double (双线式边框)
groove (槽线式边框)
ridge(脊线式边框)
inset (内嵌效果的边框)
outset (突起效果的边框)
边框颜色属性(border-color)
.kuang9{border-style: ridge;border-color:yellow;}
边框宽度属性(border-width)
这个属性用来设定上下左右边框的宽度，它的值如下
medium (是缺省值) thin (比medium细) thick (比medium粗)
用长度单位定值。可以用绝对长度单位(cm, mm, in, pt, pc)或者用相对长度单位 (em, ex, px)。
.kuang10{border-style:solid;border-width:1px;border-color:#ccc;}
单边边框属性
.kuang11{ border-style:solid; border-width:1px; border-top-color:#ccc; border-bottom-color:#ccc; }
上边框属性(top ,left ,right,bottom类似)，你可以使用border-top, border-top-width, border-top-style, border-top-color
.kuang12 { border-top-style:solid; border-width:1px; border-top-color:#ccc; border-bottom-color:#ccc; }
六、CSS边距属性
左边距属性(margin-left)
这个属性用来设定左边距的宽度。示例如下：
.d1{ border-style:solid; border-width:1px; border-color:#ccc; margin-left:8cm}
这个属性用来设定右边距的宽度。示例如下：
.d1{ border-style:solid; border-width:1px; border-color:#ccc; margin-right:8cm}
其他top bottom类似
边距属性(margin)
这个属性是设定边距宽度的一个快捷的综合写法，用这个属性可以同时设定上下左右边距属性。你可以为上下左右边距设置相同的宽度
.d3{border-style:solid; border-width:1px; border-color:#ccc; margin:1cm,1cm,1cm,1cm}
七、CSS间隙属性
间隙属性(padding)是用来设置元素内容到元素边界的距离。
左间隙属性(padding-left)
这个属性用来设定左间隙的宽度。示例如下：
.d1{padding-left:1cm}
右间隙属性(padding-right)
这个属性用来设定右间隙的宽度。示例如下：
.f2{border-style:solid; border-width:1px; border-color:#ccc; padding-right:1cm; text-align:right; }右侧是1cm->
上间隙属性 下间隙属性类似
间隙属性(padding)
.f3{border-style:solid; border-width:1px; border-color:#ccc; padding:1cm,1cm,1cm,1cm}
八、CSS盒子模式(Box Model)
CSS 中有个重要的概念，就是盒子模式 (Box model)。
胡戈的"一个馒头引发的血案"中有个圆圈套圆圈娱乐城，而这个盒子模式套用这句话来说，就是方块套方块。
先看看下面这个图，黑框包围的一个方块，就是一个盒子 (Box)。
盒子里由外至里依次是：
margin 边距
border 边框
padding 间隙 (也有人称做补丁)
content (内容，比如文本，图片等)
CSS 边距属性 (margin) 是用来设置一个元素所占空间的边缘到相邻元素之间的距离。
CSS 边框属性 (border) 用来设定一个元素的边线。
CSS 间隙属性 (padding) 是用来设置元素内容到元素边框的距离。
CSS 背景属性指的是 content 和 padding 区域。
CSS 属性中的 width 和 height 指的是 content 区域的宽和高。
九、CSS列表样式属性
列表样式类型属性(list-style-type)
列表样式类型属性(list-style-type)
这个属性用来设定列表项标记(list-item marker)的类型。有以下值：
disc (缺省值，黑圆点)
circle (空心圆点)
square (小黑方块)
decimal (数字排序)
lower-roman (小写罗马字排序)
upper-roman (大写罗马字排序)
lower-alpha (小写字母排序)
upper-alpha (大写字母排序)
none (无列表项标记)
列表样式位置属性(list-style-position)
列表样式位置属性(list-style-position)有两个值：
outside (以列表项内容为准对齐)
inside (以列表项标记为准对齐)
列表样式图片属性(list-style-image)
列表项标记可以用图片来表示，用列表样式图片属性(list-style-image)来设定图片。示例代码如下：
.g11 {list-style-image: url(http://www.startseo.cn/themes/Qeeke/style/Qeeke/Novo_Dangos_001.gif) }
列表属性(list-style)
这个属性是设定列表样式的一个快捷的综合写法
.g12 {list-style:circle inside url(http://www.startseo.cn/themes/Qeeke/style/Qeeke/Novo_Dangos_001.gif) }
十、CSS伪类(pseudo-class)
和一般的CSS语法不同(参见CSS语法)，CSS伪类的语法有两种。
第一种： selector:pseudo-class {property: value}
山东网站优化 a:link {color:red} a:visited{color:green} a:hover{color:blue}
例句： a:link {color:red}
第二种： selector.class:pseudo-class {property: value}
济南网站优化 a.c1:link {color:red} a.c1:visited {color:#FFCC00} a.c1:hover {color:blue}
例句： a.c1:link {color:red}
锚(a)伪类
锚(a)伪类是最常用的伪类。例句如下：
a:link {color: #FF0000} /* 未被访问的链接 红色 */
a:visited {color: #00FF00} /* 已被访问过的链接 绿色 */
a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */
a:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */
也可以用HTML的class属性来设定伪类。例句如下：
a.c1:link {color: #FF0000} /* 未被访问的链接 红色 */
a.c1:visited {color: #00FF00} /* 已被访问过的链接 绿色 */
a.c1:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */
a.c1:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */
注：由于CSS优先级的关系(后面比前面的优先级高)，在写a的CSS时，一定要按照a:link， a:visited， a:hover， a:actived的顺序书写
文件下载:CSS基础技术讲解篇
本文来源于君信启航SEO-山东网站优化 http://www.startseo.cn/ , 原文地址：http://www.startseo.cn/post/Website/css-jichu-phpchina/
