第1章 CSS样式设计基础 CSS+DIV网页样式与布局从入门到精通
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1.5.2 对代码进行注释
1. 添加结构性注释 2. 自我提示 3. 模块注释 4. 删除注释和优化样式表
1.5.3 样式文档
样式文档是帮助多人维护或实现网站的好方法。通过制定一些简单的原 则，可以促使网站的开发以可控制的方式进行，同时防止样式随着时间 的推移变得散乱。
1.5.4 组织样式表以便简化维护
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.5.2 对代码进行注释
在单行内添加注释。例如： .p {
color: #ff7000; /* 字体颜色设置 */ height：30px; /* 段落高度设置 */ } 添加多行注释。例如： /* 网页布局 包括头部和尾部宽度设置 */ .head{width:960px;} .footer{width:960px;} /* end */
属性选择器 CSS2
（Attribute Selectors）
包含选择器 CSS1
（Descendant Selectors）
分组选择器 （Grouping）
通用选择器
CSS1 CSS2
IE兼容性 IE4+ IE4+ IE4+ IE7 IE7 IE7 IE4+ IE4+ IE4+
语法
说明
e1
以文档对象类型的元素作为选择器，如p、div、span等。
#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;}。 确定文档中的所有类型元素作为选择器，表示该样式适用所有网页元
width:100%; }
1.4 CSS基本特性
1.4.1 层叠和特殊性
层叠采用以下重要度次序： 1. 标为!important 的用户样式。 2. 标为!important 的作者样式。 3. 作者样式。 4. 用户样式。 5. 浏览器/用户代理应用的样式。
1.4.1 层叠和特殊性
1. 特殊性 根据CSS规则，一个简单的选择器，如h2，具有特殊 性1， 类选择器具有特殊性10，ID选择器具有特殊性 100。如果一个选择器是由多个选择器组合而成，则 它的特殊性就为这些选择器的分配值之和。 2. 在样式表中使用特殊性 3. 在主体标签上添加类或ID
1.2.2 CSS基本语法
选择符 样式分隔符
声明
body
font-size : 14px;
网页标签名
属性 属性值
声明
样式分隔符
color :#000;
属性 属性值
1.2.3 设计第一个示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> div { width:200px; height:200px; border:solid 2px blue; float:left; margin:4px; } .green { background-color: red; } .red { background-color: green; } </style> <title>上机练习</title> </head> <body> <div class="red"></div> <div class="green"></div> </body> </html>
布局使用，比较常用
布局使用，比较常用
个别属性有用，IE支持不够好
修饰使用，IE支持，其它浏览器不支持 打印使用，浏览器支持不好 特殊显示使用，浏览器支持不好 特效使用，浏览器支持不错
1.6.1 CSS属性
简写代码量，提高代码可读性: •颜色的缩写 •单位值的省略 •内外边距的简写 •边框的简写 •背景的简写 •字体的简写 •列表的简写
第1章 CSS样式设计 基础
学习要点
•设计良好的HTML结构。 •恰当选用HTML标签。 •了解CSS基本语法和用法。 •熟练使用CSS选择器。 •理解CSS基本特性。 •了解CSS属性和属性值。
1.1 设计良好的网页结构
1.2 初识CSS
1.2.1 为什么学习CSS
• 避免使用不必要的标签和属性 • 更有效的控制页面结构、页面布局 • 提高开发和维护效率
1.6.2 CSS单位
1. 绝对单位 2. 相对单位 3. 百分比 4. URL
1.6.2 设置颜色
4
设置对象的内边距（内容与边框之间的距离），包括全部和四个方向外 5
边距设置
设置列表项，包括列表样式、图像样式、显示位置等
5
设置表格，包括单元格边的显示方式、空隙，标题、是否隐藏空单元格、 6
表格解析方式等
设置滚动条，包括滚动条的不同区域颜色
8
设置打印，包括打印页面、页眉、页脚、打印尺寸、元素等
7
设置声音，主要为特殊设置显示使用，方便残疾人浏览网页
1.3.2 标签选择器
p {color:black} a {text-decoration:underline;} h1 {font-weight:bold;} 使用标签选择器时，应该考虑该类型选择器的优势和 缺陷。 •优点：能够快速为页面中同类型的标签统一样式。 •缺点：不能够设计差异化样式，有时候会相互干扰 。
10
布局网页，包括定位方式、定位坐标
6
设置对象的大小，包括宽、高、最大宽高、最小宽高
6
布局网页，包括清除、浮动、裁切、显示方式、是否可见、伸缩滚动
8
设置对象的外边距（边框外的空隙），包括全部和四个方向外边距设置
5
设置对象的轮廓，包括轮廓的样式、颜色和宽
4
设置对象的边框，包括边线样式、颜色、宽度
20
设置对象的内容，包括插入内容、元素，自动化等
1.3 CSS选择器
1.3.1 CSS选择器概述
选择器 标签选择器 （Type Selectors）
ID选择器 （ID Selectors）
CSS版本 CSS1
CSS1
类选择器 CSS1
（Class Selectors）
子选择器 CSS2
（Child Selectors）
相邻选择器 CSS2
（Adjacent Sibling Selectors）
1.6 CSS属性和属性值
1.6.1 CSS属性
分类 字体
文本
背景 定位
尺寸
布局 外边距
轮廓 边框 内容
内边距
列表
表格
滚动条 打印 声音 其它
说明 定义字体属性，包括字体基本属性、行距、字距和文字修饰、大小写等 属性
属性数目 16
定义段落属性，如缩进、文本对齐、书写方式、换行、省略等
25
设置对象的背景，如背景色、背景图像及其显示位置
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.10 包含选择器
包含选择符名 选择符
声明
div span
font-size : 12px;
包含选择符标识符 被包含选择符名 属性 属性值
1.3.11 分组选择器
h1,h2,h3,h4,h5,h6,p{/*定义所有级别的标题和段落行 高都为字体大小的1.6倍*/
line-height:1.6em; }
1.4.2 继承
下面属性就不具有继承性： •边框属性 •边界属性 •补白属性 •背景属性 •定位属性 •布局属性 •元素宽高属性
1.5 样式表规划、 组织和维护
1.5.1 对文档应用样式
1. 内联样式 2. 内部样式 3. 外部样式 <link href="/css/basic.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-@import url("/css/basic.css"); --> </style>
对于简单的网站，可以只使用一个CSS文件。对于大型的复杂网站，对 样式表进行分割以便简化维护是一种好做法。如何分割样式表是需要仔 细考虑的。一般用一个CSS文件处理基本布局，用另一个文件处理版式 和设计修饰。这样的话，在布局确定之后，就很少需要修改布局样式表 。这可以防止布局样式表被意外地改动或破坏。
18
一些特殊设置，包括鼠标样式、行为、特效、对象缩放
4
使用评价
排版使用，美化文本比较有用
排版使用，部分属性比较实用，有些比较 专业生僻，浏览器支持不是太好 修饰使用，比较常用 布局使用，比较常用 布局使用，比较常用，IE6及更低版本对最 小或最大宽和高支持不好 布局使用，比较常用，技巧比较大 布局使用，比较常用 修饰使用，如同外阴影，浏览器支持不好 布局或修饰使用，比较常用 不好用，支持也不好
1.3.3 ID选择器
选择符
#box
ID 选择符前缀 ID 名称
声明
width : 100px;
属性 属性值
声明
height : 100px;
属性 属性值
1.3.4 类选择器
选择符
. red
类选择符前缀 类名
声明
color : red;
属性 属性值
1.3.5 伪类和伪对象选择器
指定标签名 选择符
声明
div:hover
font-size : 12px;
伪类或伪元素标识符 伪类或伪元素名 属性 属性值
1.3.6 子选择器
父级选择符名 选择符
声明
div > span
font-size : 12px;
子选择符标识符 子级选择符名 属性 属性值
1.3.7 相邻选择器
前一个选择符名 选择符
声明
div + span