第7讲 CSS样式设计
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
型是文本类型的 • 属性href：用于指定所链接的CSS文件
4.导入式
• 该方式通过在头部区域的style标记对之间 使用@import引入外部样式表，例如：
<style> @import url(‘mycss.css’); </style>
• 优点：
– 将CSS代码和HTML代码分离，便于日后的维护 – 可统一设置多个网页的格式
可以对任何对象使用 cursor CSS属性来改变移动到对象上 的鼠标样式
属性 cursor
属性值 pointer crosshair text wait default help e-resize ne-resize n-resize nw-resize w-resize sw-resize s-resize se-resize
• 内联式示例
2.内嵌式
• 该方式在头部区域内使用style标记将样式 表嵌入到HTML文档中，例如：
<style> h1{text-align:center;color:blue} </style> • 优点：有利于统一设置单个网页的格式
• 缺点：不便统一设置多个网页的格式
• 内嵌式示例
示例说明：
描述 设置鼠标为手形状 设置鼠标为十字交叉形状 设置鼠标为文本选择形状 设置鼠标为Windows的沙漏形 设置鼠标为默认的形状 设置鼠标为带问号的形状 设置鼠标为指向东的箭头 设置鼠标为指向东北的箭头 设置鼠标为指向北的箭头 设置鼠标为指向西北的箭头 设置鼠标为指向西的箭头 设置鼠标为指向西南的箭头 设置鼠标为指向南的箭头 设置鼠标为指向东南的箭头
• 鼠标属性示例
• 6. 盒子模型及其属性
请参见下一讲
7.3 CSS关联HTML文档的方式
• 内联式 • 内嵌式 • 链接式 • 导入式
1.内联式
• 该方式通过在主体区域内使用HTML 标记的style属性设置样式，例如：
<p style=“text-align:center”>
• 优点：可单独设置某个标记的样式 • 缺点：没有发挥CSS统一设置格式的优势
• 并集选择器是由任何形式的多个选择器通过逗 号连接而成的，用于声明这些选择器的公共格式。
• 语法格式：
选择器1,选择器2,选择器3,…{属性名1:属性值1;…}
并集选择器示例
3.后代选择器
例如：当标记发生嵌套时，内层 的标记就成为外层标记的后代
•后代选择器用于对嵌套选择器的格式进行声 明。声明方法是：外层选择器写在前面，内层 选择器写在后面，之间用空格分隔
• 优点：
– 将CSS代码和HTML代码分离，便于日后的维护 – 可统一设置多个网页的格式 – 常用于网站
• 链接式示例
示例说明：
• <link>标记用于链接一个样式表文件 • 属性rel=“stylesheet”：用于定义链接
的文件和HTML文档之间的关系 • 属性type=“text/css”：定义文件的类
注意：1.最后必须加上分号，否则无效 2.在<style>标记对中，导入语句必须出现在所有样
式定义语句的前面
• 导入式示例
链接式和导入式的区别
1.link所有的浏览器都支持，@import部分 版本低的IE不支持
2.@import是等HTML加载完成后加载， link是执行到该语句就加载
3.@import不支持JS动态修改；
7.2 定义CSS样式
• 基本语法:
指定了对哪些网页元 素进行设置
选择器{属性名1:属性值1; 属性名
2:属性值2; …}
每一对属性及其值实现对网页元 素进行某种特定格式的设置
选择器类型
• 基本选择器 • 复合选择器
（一）基本选择器
• HTML标记 • 自定义的类 • 自定义的ID • 伪类
1. HTML标记选择器
HTML标记的缺点：
优点
•格式和结构混合，维护困难 •标记对格式的控制能力有限 •网页过“胖” •定位困难
• 将格式和结构分离
格式和结构的分离，有利于格式的重用及网页的 修改维护
• 以前所末有的能力控制页面布局
能够对网页的布局、字体、颜色、背景等图文效 果实现更加精确的控制
优点
• 制作体积更小、下载更快的网页
第7讲 CSS层叠样式表
• 7.1 CSS概述 • 7.2 定义CSS样式表 • 7.3 CSS常用属性 • 7.4 CSS关联HTML文档的方式 • 7.5 在HTML文档中应用CSS • 7.6 CSS的冲突
7.1 CSS概述
CSS（Cascading Style Sheet，层 叠样式表）是一种格式化网页的标准方 式，它扩展了 HTML 的功能，使网页设 计者能够以更有效的方式设置网页格式。
• HTML标记选择器重新定义了HTML标记 的显示效果。
• 语法格式：
标记名{属性名1:属性值1;属性名2:属性值2;…}
• 例如： h1{font-size:25px;color:red}
2.自定义的类与ID
• 使用自定义类或ID，可以定义一个通用的样 式，以便应用到任何需要的地方。它们的应用 需要分别使用到class和id属性
CSS只是简单的文本，使用它可以减少表格 标记、图像用量及其他加大HTML体积的代码。
• 可以实现许多网页同时更新
利用CSS样式表，可以将站点上的所有网页 都指向同一个CSS文件。
CSS的编辑
• 记事本或Sublime等文本编辑工具 • Dreamweaver等可视化图形工具
应用CSS的步骤
• 定义样式表 • 把样式表关联到HTML文档 • 在HTML文档中应用样式表
7.5 在HTML文件中应用CSS
• 在HTML文件中应用CSS随样式表定义的选择器 以及关联方式不同而不同
• 当关联方式为内联式时，当前标记直接应用样式 • 当选择器是HTML标记或伪类时，HTML文件在
使用该选择器标记的时就直接应用样式表 • 当选择器是自定义的类或ID时，在HTML文档
中应分别在需使用它们的地方的标记中使用属性 class=“类名”或id=“ID名”来应用自定义的 类和ID
• 语法格式示例： 类选择器
.classname{属性名1:属性值1;属性名2:属性值2;…}
#idname{属性名1:属性值1;属性名2:属性值2;…}
• 例如：
ID选择器
.text2{color:red;font-size:25px;}
#text1{color:red;font-size:25px;}
• 在HTML文件中应用CSS示例
7.6 CSS的冲突
• 当对同一段文本应用多个CSS样式时， 这些样式之间可能存在一定的矛盾，从 而产生CSS冲突。
• 为解决CSS冲突问题，浏览器在显示 CSS样式时，一般遵循下页所列出的几 个冲突解决规则
冲突解决规则：优先级规则
• 样式表的优先级规则：
– 内联式>内嵌式>外部样式 – 在多个同方式定义的样式中，后出现的样式
• 交集选择器是由两个选择器直接连接构成，其 中第一个选择器必须是标记选择器，第2个必须 是类选择器或者ID选择器 • 语法格式：
标记选择器.classname{属性名1:属性值1;…}
或：
标记选择器#idname{属性名1:属性值1;…}
交集选择器示例
2.并集选择器
如果某些选择器的格式是相同的， 或者部分相同，就可以利用并集选 择器来共同声明这些相同的格式
的优先级高于先出现的样式 – 选择器样式的优先级：ID样式>class样式
>标记样式
CSS冲突示例
• <style>标记用于定义HTML文档内 的样式表区域
• 属性type=“text/css”：定义文件 的类型是样式表文本
• <!-- -->：用于对不支持样式的浏 览器隐藏样式表内容
3.链接式
• 在头部区域内使用link标记链接CSS文件， 例如：
<link rel=“stylesheet” type=“text/css” href=“stylesheet.css”>
•语法格式：
来自百度文库
选择器1 选择器2{属性名1:属性值1;…}
后代选择器示例
7.3 CSS常用属性
• 1.字体属性及其属性值
字体属性示例
• 2.文本属性及其属性值
文本属性示例
• 3.颜色和背景属性及其属性值
• 颜色和背景属性示例
• 4.列表属性及其属性值
列表属性示例
• 5.鼠标属性及其属性值
样式定义示例一
3.伪类选择器
• 伪类是一种特殊的选择器，用于向某些选择器 添加特殊的效果，如设置超链接不同状态的样 式以及元素第一个子对象的样式等等。
• 语法格式：
选择器:伪类{属性名1:属性值1;属性名2:属性值2;…}
• 使用伪类定义超链接不同状态下样式： • a:link 设置未访问过的超链接格式 • a:visited 设置已访问过的超链接格式 • a:hover 设置悬停状态的超链接格式 • a:active 设置活动超链接格式
样式定义示例（二）
注意：使用时请按上述 顺序定义各状态样式
（二） 复合选择器
• 复合选择器就是两个或多个基本选择器， 通过不同方式连接而成的选择器，为元素 的样式定义提供更加精确的控制。 • 复合选择器类型
–交集选择器 –并集选择器 –后代选择器
1.交集选择器
注意：两个选择器之间必 须连续写，不能有空格
4.导入式
• 该方式通过在头部区域的style标记对之间 使用@import引入外部样式表，例如：
<style> @import url(‘mycss.css’); </style>
• 优点：
– 将CSS代码和HTML代码分离，便于日后的维护 – 可统一设置多个网页的格式
可以对任何对象使用 cursor CSS属性来改变移动到对象上 的鼠标样式
属性 cursor
属性值 pointer crosshair text wait default help e-resize ne-resize n-resize nw-resize w-resize sw-resize s-resize se-resize
• 内联式示例
2.内嵌式
• 该方式在头部区域内使用style标记将样式 表嵌入到HTML文档中，例如：
<style> h1{text-align:center;color:blue} </style> • 优点：有利于统一设置单个网页的格式
• 缺点：不便统一设置多个网页的格式
• 内嵌式示例
示例说明：
描述 设置鼠标为手形状 设置鼠标为十字交叉形状 设置鼠标为文本选择形状 设置鼠标为Windows的沙漏形 设置鼠标为默认的形状 设置鼠标为带问号的形状 设置鼠标为指向东的箭头 设置鼠标为指向东北的箭头 设置鼠标为指向北的箭头 设置鼠标为指向西北的箭头 设置鼠标为指向西的箭头 设置鼠标为指向西南的箭头 设置鼠标为指向南的箭头 设置鼠标为指向东南的箭头
• 鼠标属性示例
• 6. 盒子模型及其属性
请参见下一讲
7.3 CSS关联HTML文档的方式
• 内联式 • 内嵌式 • 链接式 • 导入式
1.内联式
• 该方式通过在主体区域内使用HTML 标记的style属性设置样式，例如：
<p style=“text-align:center”>
• 优点：可单独设置某个标记的样式 • 缺点：没有发挥CSS统一设置格式的优势
• 并集选择器是由任何形式的多个选择器通过逗 号连接而成的，用于声明这些选择器的公共格式。
• 语法格式：
选择器1,选择器2,选择器3,…{属性名1:属性值1;…}
并集选择器示例
3.后代选择器
例如：当标记发生嵌套时，内层 的标记就成为外层标记的后代
•后代选择器用于对嵌套选择器的格式进行声 明。声明方法是：外层选择器写在前面，内层 选择器写在后面，之间用空格分隔
• 优点：
– 将CSS代码和HTML代码分离，便于日后的维护 – 可统一设置多个网页的格式 – 常用于网站
• 链接式示例
示例说明：
• <link>标记用于链接一个样式表文件 • 属性rel=“stylesheet”：用于定义链接
的文件和HTML文档之间的关系 • 属性type=“text/css”：定义文件的类
注意：1.最后必须加上分号，否则无效 2.在<style>标记对中，导入语句必须出现在所有样
式定义语句的前面
• 导入式示例
链接式和导入式的区别
1.link所有的浏览器都支持，@import部分 版本低的IE不支持
2.@import是等HTML加载完成后加载， link是执行到该语句就加载
3.@import不支持JS动态修改；
7.2 定义CSS样式
• 基本语法:
指定了对哪些网页元 素进行设置
选择器{属性名1:属性值1; 属性名
2:属性值2; …}
每一对属性及其值实现对网页元 素进行某种特定格式的设置
选择器类型
• 基本选择器 • 复合选择器
（一）基本选择器
• HTML标记 • 自定义的类 • 自定义的ID • 伪类
1. HTML标记选择器
HTML标记的缺点：
优点
•格式和结构混合，维护困难 •标记对格式的控制能力有限 •网页过“胖” •定位困难
• 将格式和结构分离
格式和结构的分离，有利于格式的重用及网页的 修改维护
• 以前所末有的能力控制页面布局
能够对网页的布局、字体、颜色、背景等图文效 果实现更加精确的控制
优点
• 制作体积更小、下载更快的网页
第7讲 CSS层叠样式表
• 7.1 CSS概述 • 7.2 定义CSS样式表 • 7.3 CSS常用属性 • 7.4 CSS关联HTML文档的方式 • 7.5 在HTML文档中应用CSS • 7.6 CSS的冲突
7.1 CSS概述
CSS（Cascading Style Sheet，层 叠样式表）是一种格式化网页的标准方 式，它扩展了 HTML 的功能，使网页设 计者能够以更有效的方式设置网页格式。
• HTML标记选择器重新定义了HTML标记 的显示效果。
• 语法格式：
标记名{属性名1:属性值1;属性名2:属性值2;…}
• 例如： h1{font-size:25px;color:red}
2.自定义的类与ID
• 使用自定义类或ID，可以定义一个通用的样 式，以便应用到任何需要的地方。它们的应用 需要分别使用到class和id属性
CSS只是简单的文本，使用它可以减少表格 标记、图像用量及其他加大HTML体积的代码。
• 可以实现许多网页同时更新
利用CSS样式表，可以将站点上的所有网页 都指向同一个CSS文件。
CSS的编辑
• 记事本或Sublime等文本编辑工具 • Dreamweaver等可视化图形工具
应用CSS的步骤
• 定义样式表 • 把样式表关联到HTML文档 • 在HTML文档中应用样式表
7.5 在HTML文件中应用CSS
• 在HTML文件中应用CSS随样式表定义的选择器 以及关联方式不同而不同
• 当关联方式为内联式时，当前标记直接应用样式 • 当选择器是HTML标记或伪类时，HTML文件在
使用该选择器标记的时就直接应用样式表 • 当选择器是自定义的类或ID时，在HTML文档
中应分别在需使用它们的地方的标记中使用属性 class=“类名”或id=“ID名”来应用自定义的 类和ID
• 语法格式示例： 类选择器
.classname{属性名1:属性值1;属性名2:属性值2;…}
#idname{属性名1:属性值1;属性名2:属性值2;…}
• 例如：
ID选择器
.text2{color:red;font-size:25px;}
#text1{color:red;font-size:25px;}
• 在HTML文件中应用CSS示例
7.6 CSS的冲突
• 当对同一段文本应用多个CSS样式时， 这些样式之间可能存在一定的矛盾，从 而产生CSS冲突。
• 为解决CSS冲突问题，浏览器在显示 CSS样式时，一般遵循下页所列出的几 个冲突解决规则
冲突解决规则：优先级规则
• 样式表的优先级规则：
– 内联式>内嵌式>外部样式 – 在多个同方式定义的样式中，后出现的样式
• 交集选择器是由两个选择器直接连接构成，其 中第一个选择器必须是标记选择器，第2个必须 是类选择器或者ID选择器 • 语法格式：
标记选择器.classname{属性名1:属性值1;…}
或：
标记选择器#idname{属性名1:属性值1;…}
交集选择器示例
2.并集选择器
如果某些选择器的格式是相同的， 或者部分相同，就可以利用并集选 择器来共同声明这些相同的格式
的优先级高于先出现的样式 – 选择器样式的优先级：ID样式>class样式
>标记样式
CSS冲突示例
• <style>标记用于定义HTML文档内 的样式表区域
• 属性type=“text/css”：定义文件 的类型是样式表文本
• <!-- -->：用于对不支持样式的浏 览器隐藏样式表内容
3.链接式
• 在头部区域内使用link标记链接CSS文件， 例如：
<link rel=“stylesheet” type=“text/css” href=“stylesheet.css”>
•语法格式：
来自百度文库
选择器1 选择器2{属性名1:属性值1;…}
后代选择器示例
7.3 CSS常用属性
• 1.字体属性及其属性值
字体属性示例
• 2.文本属性及其属性值
文本属性示例
• 3.颜色和背景属性及其属性值
• 颜色和背景属性示例
• 4.列表属性及其属性值
列表属性示例
• 5.鼠标属性及其属性值
样式定义示例一
3.伪类选择器
• 伪类是一种特殊的选择器，用于向某些选择器 添加特殊的效果，如设置超链接不同状态的样 式以及元素第一个子对象的样式等等。
• 语法格式：
选择器:伪类{属性名1:属性值1;属性名2:属性值2;…}
• 使用伪类定义超链接不同状态下样式： • a:link 设置未访问过的超链接格式 • a:visited 设置已访问过的超链接格式 • a:hover 设置悬停状态的超链接格式 • a:active 设置活动超链接格式
样式定义示例（二）
注意：使用时请按上述 顺序定义各状态样式
（二） 复合选择器
• 复合选择器就是两个或多个基本选择器， 通过不同方式连接而成的选择器，为元素 的样式定义提供更加精确的控制。 • 复合选择器类型
–交集选择器 –并集选择器 –后代选择器
1.交集选择器
注意：两个选择器之间必 须连续写，不能有空格