精通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)