精通CSS+DIV网页样式与布局 曾顺 人民邮电出版社
1. CSS引入方式
行内样式 : 标签添加style属性，如<font style=""></font>
内嵌样式 : 在<head></head>之间用<style type="text/css"></style>进行声明
链接样式 : <link href="***/1.css" type="text/css" rel="stylesheet">
导入样式 : 在<style type="text/css"></style>@import url("")/@import ""
各种样式的优先级 : 行内样式，<link>标记，<style></style>标记，@import
link 和 @import的区别 : <link>是在html的标记需要格式时才加载，@import在html文件初始化时就会加载，作为文件的一部分。
<style></style>之间常用<!--和-->将CSS代码包含其中，这是为避免老式浏览器不支持CSS将CSS代码直接显示在浏览器上而设置的注释。
2.CSS选择器及声明
选择器
标记选择器 : 使用html标记进行定义，如 table{****}
类别选择器 : .class{****}; 一个标记可以同时使用多个类别选择器，以空格分隔，如<p class="one two"></p>
ID选择器 : #id{****}
声明
集体声明 : 以逗号分隔，如h1,h2,p,#id{****}
嵌套声明 : 以空格分隔，如 p b{****}表示p标记下的b标记使用该CSS
全局声明 : * {****}
3. 文字效果
字体 : html中字体设置方式<font face=""></font>，在CSS中用font-family属性来控制
如 p{ font-family:黑体,Arial,宋体,sans-serif;}
font-family可以声明任意种字体，之间用逗号分隔，对于含有空格的字体描述，如 Times New Roman要加双引号。浏览器会按照声明顺序在计算机中寻找字体，直到找到为止。当找不到时，会使用本机上的默认字体。
文字大小 : font-size: 1in/cm/mm/pt/pc 这些单位都是绝对大小，px是相对的
如，p.two span{font-size:200%} /*在父标记的基础上乘以200%*/
p.two span{ font-size: 0.5em} /*在父标记的基础上乘以0.5*/
文字颜色 : color:#FFFFFF color:rgb(255,0,0)
文字粗细 : font-weight:lighter/100-900/bold/normal
斜体 : font-style:italic(斜体)/normal(标准风格)/oblique
文字下划线、顶划线、删除线 : text-decoration:underline/overline/line-through/blink(闪烁)，可以同时赋值给text-decoration多个值，以空格分隔。
英文字母大小写 : text-transform:capitalize(首字母大写)/uppercase/lowercase
字符间距 : p{letter-spacing:2px}
行间距 : line-height:8px;行间距的值表示的是两行文字之间基线的距离，基线就是文字加上下划线的位置
段落文字对齐方式 : 水平对齐text-align:left/right/center/justify，垂直对齐: vertical-align:top/bottom/middle
4. 图片效果
图片边框:
<img>的border属性: <img src="" border="0/1/2/3/d">
img{ border-style:dotted(点画线)/dashed(虚线)/solid(实线);}
img{border-left/right/top/bottom-style:solid;(左/右/上/下实线)}
img{border[-left/right/top/bottom]-color:blue;(定义左右山下边框的颜色)}
img{border[-left/right/top/bottom]-width:1px;(定义左右上下边框的粗细)}
border属性的各个值写在同一语句中:
img{border:1px solid #FF00DD}
图片缩放:
img{width:50%}宽度会根据浏览器的大小进行缩放，没有指定高度，图片会自动等纵横比例缩放
img{width:50%;height:110px}浏览器大小变化时，高度固定不变
图片对齐:
水平对齐:
不能直接设置图片的text-algin属性，需要设置父元素的该属性来实现，如:
<td style="text-algin:left"><img src=""></td>
垂直对齐:
可直接设置图片的vertical-align属性:<img src="" style="vertical-algin:sub/top/text-top">
图文混排:
文字环绕:img{float:left/right}
5. 背景设置
滤镜效果只适合IE？
filter:alpha(opacity=100,finishopacity=0,style=2)
4688
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
