第1章 CSS样式设计基础 CSS+DIV网页样式与布局从入门到精通

声明
div:hover
font-size : 12px;
伪类或伪元素标识符 伪类或伪元素名 属性 属性值
1.3.6 子选择器
父级选择符名 选择符
声明
div > span
font-size : 12px;
子选择符标识符 子级选择符名 属性 属性值
1.3.7 相邻选择器
前一个选择符名 选择符
声明
div + span
1.3.2 标签选择器
p {color:black} a {text-decoration:underline;} h1 {font-weight:bold;} 使用标签选择器时，应该考虑该类型选择器的优势和 缺陷。 •优点：能够快速为页面中同类型的标签统一样式。 •缺点：不能够设计差异化样式，有时候会相互干扰 。
1.6.2 CSS单位
1. 绝对单位 2. 相对单位 3. 百分比 4. URL
1.6.2 设置颜色
1.5.2 对代码进行注释
在单行内添加注释。例如： .p {
color: #ff7000; /* 字体颜色设置 */ height：30px; /* 段落高度设置 */ } 添加多行注释。例如： /* 网页布局 包括头部和尾部宽度设置 */ .head{width:960px;} .footer{width:960px;} /* end */
}
1.3.10 包含选择器
包含选择符名 选择符
声明
div span
font-size : 12px;
包含选择符标识符 被包含选择符名 属性 属性值
1.3.11 分组选择器
h1,h2,h3,h4,h5,h6,p{/*定义所有级别的标题和段落行 高都为字体大小的1.6倍*/
line-height:1.6em; }

1.3.3 ID选择器
选择符
#box
ID 选择符前缀 ID 名称
声明
width : 100px;
属性 属性值
声明
height : 100px;
属性 属性值
1.3.4 类选择器
选择符
. red
类选择符前缀 类名
声明
color : red;
属性 属性值
1.3.5 伪类和伪对象选择器
指定标签名 选择符
10
布局网页，包括定位方式、定位坐标
6
设置对象的大小，包括宽、高、最大宽高、最小宽高
6
布局网页，包括清除、浮动、裁切、显示方式、是否可见、伸缩滚动
8
设置对象的外边距（边框外的空隙），包括全部和四个方向外边距设置
5
设置对象的轮廓，包括轮廓的样式、颜色和宽
4
设置对象的边框，包括边线样式、颜色、宽度
20
设置对象的内容，包括插入内容、元素，自动化等
#id .classname
e1 > e2 e1 + e2 e1[attr] e1 e2 e1,e2,e3
*
以作为元素对象的唯一标识符id属性作为选择器，例如在<div><p id=" first" ><span ></span></p></div><p></p>结构中，#first选择器可以定 义第一个p元素的样式，但不会影响最后一个p元素对象。 以 作 为 元 素 对 象 分 类 的 class属性作为选择器，例如在<div><p class="red" ><span class="red" ></span></p></div><p></p>结构 中，.red选择器可以定义第一个p元素和span元素的样式，但不会影响 最后一个p元素对象。 选 择 所 有 作 为 e1子对象的e2元素元素对象，例如在 <div><p><span></span></p></div>结构中，div>p子选择器可以定义p 元素的样式，但不能使用div>span子选择器。 选 择 紧 跟 在 元 素 对 象 e1之后的所有e2元素对象，例如在 <div><p><span></span></p></div><p></p>结构中，div+p相邻选择器 可以定义最后一个p元素的样式，但不会影响其内部的p元素对象。 选 择 具 有 attr属性的e1对象，例如在<div><p id=" first" ><span ></span></p></div><p></p>结构中，p[id]属性选择器可以定义第一个 p元素的样式，但不会影响最后一个p元素对象。 选 择 所 有 被 e1包含的e2元素对象，例如在 <div><p><span></span></p></div>结构中，div span包含选择器可以 定义span元素的样式。 将定义了具有相同样式的多个选择器合并为一个样式，并以逗号分隔 的方式表示，例如在<div><p><span ></span></p></div><p></p>结构 中，如果定义div和p元素对象宽度都为774px，则可以合并为一组 div,p{width:774px;}。 确定文档中的所有类型元素作为选择器，表示该样式适用所有网页元
4
设置对象的内边距（内容与边框之间的距离），包括全部和四个方向外 5
边距设置
设置列表项，包括列表样式、图像样式、显示位置等
5
设置表格，包括单元格边的显示方式、空隙，标题、是否隐藏空单元格、 6
表格解析方式等
设置滚动条，包括滚动条的不同区域颜色
8
设置打印，包括打印页面、页眉、页脚、打印尺寸、元素等
7
设置声音，主要为特殊设置显示使用，方便残疾人浏览网页
18
一些特殊设置，包括鼠标样式、行为、特效、对象缩放
4
使用评价
排版使用，美化文本比较有用
排版使用，部分属性比较实用，有些比较 专业生僻，浏览器支持不是太好 修饰使用，比较常用 布局使用，比较常用 布局使用，比较常用，IE6及更低版本对最 小或最大宽和高支持不好 布局使用，比较常用，技巧比较大 布局使用，比较常用 修饰使用，如同外阴影，浏览器支持不好 布局或修饰使用，比较常用 不好用，支持也不好
布局使用，比较常用
布局使用，比较常用
个别属性有用，IE支持不够好
修饰使用，IE支持，其它浏览器不支持 打印使用，浏览器支持不好 特殊显示使用，浏览器支持不好 特效使用，浏览器支持不错
1.6.1 CSS属性
简写代码量，提高代码可读性: •颜色的缩写 •单位值的省略 •内外边距的简写 •边框的简写 •背景的简写 •字体的简写 •列表的简写
1.6 CSS属性和属性值
1.6.1 CSS属性
分类 字体
文本
背景 定位
尺寸
布局 外边距
轮廓 边框 内容
内边距
列表
表格
滚动条 打印 声音 其它
说明 定义字体属性，包括字体基本属性、行距、字距和文字修饰、大小写等 属性
属性数目 16
定义段落属性，如缩进、文本对齐、书写方式、换行、省略等
25
设置对象的背景，如背景色、背景图像及其显示位置
第1章 CSS样式设计 基础
学习要点
•设计良好的HTML结构。 •恰当选用HTML标签。 •了解CSS基本语法和用法。 •熟练使用CSS选择器。 •理解CSS基本特性。 •了解CSS属性和属性值。
1.1 设计良好的网页结构
1.2 初识CSS
1.2.1 为什么学习CSS
• 避免使用不必要的标签和属性 • 更有效的控制页面结构、页面布局 • 提高开发和维护效率
属性选择器 CSS2
（Attribute Selectors）
包含选择器 CSS1
（Descendant Selectors）
分组选择器 （Grouping）
通用选择器
CSS1 CSS2
IE兼容性 IE4+ IE4+ IE4+ IE7 IE7 IE7 IE4+ IE4+ IE4+
语法
说明
e1
以文档对象类型的元素作为选择器，如p、div、span等。
font-size : 12px;
相邻选择符标识符 后一个选择符名 属性 属性值
1.3.8 属性选择器
属性所属标签名 选择符
声明
di v[i d="h e ade r"]
font-size : 18px;
属性选择符标识符 属性表达式
属性 属性值
1.3.9 通用选择器
*{ padding:0; margin:0;
1.3.11 分组选择器
h1,h2,h3,h4,h5,h6,p{/*定义所有级别的标题和段落行 高都为字体大小的1.6倍*/
line-height:1.6em; }
1.3.12 指定选择器
span.red{/*定义span元素中class为red的元素的颜色为红色*/ color:Red;
} div#top{/*定义div元素中id为top的元素的宽度为百分之百*/
1.3 CSS选择器
1.3.1 CSS选择器概述
选择器 标签选择器 （Type Selectors）