CSS样式
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
h1{font-size:24px;}
h2{font-size:16px;}
h3{font-size:5mm;} p{font-size:10in;}
span{font-size:12pt;}
strong{font-size:13pc;}
字体风格
• font-style属性
– normal、italic和oblique
外层标签
p(父类)
示例
p span {
后代选择器
span(子类= 后代）
内层标签
CSS样式声明; }
交集选择器
• 交集选择器
– 由两个选择器直接连接构成，选中二者各自元素范围的交集
– 第一个必须是标签选择器，第二个必须是类选择器或者ID选择器
– 选择器之间不能有空格，必须连续书写
p.txt{color:blue; line-height:28px;}
示例
body{font-family: Times,"Times New Roman", "楷体";}
经验
当需要同时设置英 文字体和中文字体 时，一定要将英文 字体设置在中文字 体前，否则，英文 字体设置将不起作 用
字体大小
font-size属性
单位：px（像素） in、cm、mm、pt、pc
示例
text-decoration:underline;
text-decoration 设置文本的装饰
文本颜色
• color属性
– 十六进制方法表示颜色 蓝色字体
color:#FFFFFF; color:#000000; color:FF0000; color:#A983D8; color:#95F141; color:#339966; color:#EEFF66; 6位颜色值相邻数
CSS的基本语法结构
• style标签
– 定义HTML文档样式信息
位于head标签中
• style属性
– 用于改变HTML元素的样式
位于HTML标签中
CSS基本选择器
• CSS基本选择器（3种）
– 标签选择器
• HTML标签 • 一条或多条声明
定义之后，将立即对HTML中的标签产生作用
CSS基本选择器
文本样式
• 文本属性
属性 color text-align text-indent 含义 设置文本颜色 color:#00C; 举例
设置元素水平对齐方式 text-align:right; 设置首行文本的缩进 text-indent:20px;百度文库
line-height
设置文本的行高
line-height:25px;
font-style
设置字体风格
font-style:italic;
font-weight:bold; font:italic bold 36px "宋体";
font-weight 设置字体的粗细 font 在一个声明中设置所有 字体属性
字体类型
• font-family属性
p{font-family:Verdana,"楷体";}
CSS的优势
• • • • • 内容与表现分离 网页的表现统一，容易修改 丰富的样式，使得页面布局更加灵活 减少网页的代码量，增加网页的浏览速度，节省网络带宽 运用独立于页面的CSS，有利于网页被搜索引擎收录
CSS的基本语法结构
• CSS的基本语法结构
– 选择器 – 一条或多条声明
经验
CSS的最后一条声明后的“;”可写可不写，但是，基于W3C 标准规范考虑，建议最后一条声明的结束“;” 都要写上
行内样式
使用style属性引入CSS样式
示例
<h1 style="color:red;">style属性的应用</h1> <p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>
HTML中引入CSS样式7-3
内部样式表
CSS代码写在<head>的<style>标签中
第二章
网页样式
本章目标
能够使用CSS美化网页元素 能够使用DIV+CSS布局网页
重点 重点 难点 难点
能够解决CSS相关的浏览器兼容性问题
使用CSS的意义
CSS：层叠样式表（Cascading Style Sheet）
有CSS样式 无CSS样式
网络
示例1：使用CSS的意义
使用CSS的意义
CSS在网页中的应用
红色18px字体 水平线
红色12px字体
黑色12 px字体 示例2：基本选择器案例
练习
练习1—制作《如梦令》
– – – – 使用标签选择器设置标题字体大小为20px 页面中所有段落中的文本字体大小为16px 使用类选择器设置正文和译文内容字体颜色为绿色 使用ID选择器设置译文标题颜色为蓝色
• 需求说明
CSS的继承性
• CSS继承的概念
– 子标签可以继承父标签的样式 – 子标签的样式，不会影响父标签 关键代码
h1 { color:blue; text-decoration:underline; } em {color:red;} li {color:green; font-weight:bold;}
复合选择器案例
• 需求说明
– – – – 图片放在段落标签中，标题放在<h2>标签中 段落标签中的文本大小为12px，标题大小为18px，颜色为红色 CSS样式体现出复合选择器的应用 分别使用行内样式、内部样式和外部样式表的形式制作本页面， 使用链接方式引用外部样式表
示例3：复合选择器案例
小结
• • • • CSS在网页的应用和它的优势。 使用<style>标签引入CSS样式。 CSS选择器分标签选择器、类选择器和ID选择器。 在HTML中引入CSS样式的三种方式分别是行内样式、内 部样式表和外部样式表 • 外部样式表使用<link/>标签链接外部CSS文件，CSS样式 的优先级依据就近原则。 • CSS的复合选择器分为交集选择器、并集选择器和后代选 择器。
• CSS基本选择器（3种） 类选择器
.class 一条或多条声明
需在HTML中为标签添加类选择器，才可生效
CSS基本选择器
• CSS基本选择器（3种） ID选择器
#ID 一条或多条声明
用法与类选择器基本相同
CSS基本选择器案例
• 需求说明
– 标题颜色为红色，字体大小为18px；正文第一段字体大小为12px， 字体颜色为红色，第二段字体颜色为黑色，字体大小为12px
文件路径 使用外部样式表 文件类型 <head> …… <link href="style.css" rel="stylesheet" type="text/css" /> …… </head>
HTML中引入CSS样式7-6
• 外部样式表
– 导入外部样式表 语法
<head> …… <style type="text/css"> <!-@import url("style.css"); --> </style> </head>
并集选择器
• 概念
– 由两个或两个以上选择器，通过逗号连接构成，其结果是同时选 中各个基本选择器所选择的范围
• 特点
– 任何形式的选择器均可作为并集选择器的一部分 – 声明各选择器的相同样式
并集选择器 所选范围
h1
示例
#one
h1,.special, #one{ CSS样式声明; } 3者共同的样式 .style
– background-color
transparent 背景颜色值：十六进制方法表示
• 背景图像
– background-image
优点
方便在同页面中修改样式
缺点
不利于在多页面间共享复用代码及维护，对内容 与样式的分离也不够彻底
HTML中引入CSS样式7-4
外部样式表
CSS代码保存在扩展名为.css的样式表中 HTML文件引用扩展名为.css的样式表，有两种方式
链接式 导入式
HTML中引入CSS样式7-5
• 外部样式表
– 链接外部样式表 语法
全局选择器
• 概念
– 选择器是“*”，该选择器可以为所有HTML标签设置相同样式
• 特点
– 选择范围为全体HTML标签
– 声明所有标签的相同样式
使用“ * ”全局声明，可以大大减少代码量
语法
*{
CSS样式声明;
}
HTML中引入CSS样式7-1
行内样式 内部样式表 外部样式表
HTML中引入CSS样式7-2
文本在网页中的意义
• 有效的传递页面信息 • 使用CSS美化过的页面文本，使页面漂亮、美观，吸引用
户
• 可以很好的突出页面的主题内容，使用户第一眼可以看到 页面主要内容 • 具有良好的用户体验
字体样式
属性名 含义 举例
font-family:"隶书"; font-size:12px; font-family 设置字体类型 font-size 设置字体大小
斜体
正常字体
字体的粗细
• font-weight属性
值 normal
bold bolder
正常粗细
说明 默认值，定义标准的字体。
粗体字体。 更粗的字体。 字体加粗
lighter 100、200、300、400、 500、600、700、800、 900
更细的字体。
定义由细到粗的字体。 400等同于normal，700等同于bold。
背景样式 背景图像
背景颜色
<div>标签
• <div>标签的用法
– 网页布局
– 排版网页内容
语法
<div>网页内容…</div>
#header { 宽 高 } …… <div id="header">网页内容…</div> width:200px; height:280px;
网页背景
• 背景颜色
HTML中引入CSS样式7-7
• 链接式与导入式的区别
– <link/>标签属于XHTML，@import是属于CSS2.1
– 使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示
– 使用@import导入的CSS文件，客户端显示HTML结构，再把CSS 文件加载到网页当中
– @import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说
设置伪类的顺序：a:link->a:visited->a:hover->a:active
示例5：超链接样式
设置鼠标形状
• CSS设置鼠标形状
值 说明 图例
default 默认光标 示例 span{cursor:pointer;} pointer 超链接的指针
wait help text crosshair 指示程序正在忙 指示可用的帮助 指示文本 鼠标呈现十字状
完成时间：5分钟
CSS复合选择器
• 概念
– 由两个或多个基本选择器，通过不同方式连接而成
• 3种常用的复合选择器
– 后代选择器 – 交集选择器
– 并集选择器
后代选择器
• 概念
– 通过嵌套的方式，对特殊位置的HTML标签进行声明
• 特点
– 外层的标签写在前面，内层的标签写在后面，之间用空格分隔
– 内层标签是外层标签的后代
含义 未单击访问时超链接样式 单击访问后超链接样式 鼠标悬浮其上的超链接样式
图片超链接没有边框
示例
a:link{color:#9ef5f9;} a:visited {color:#333;} a:hover{color:#ff7300;
褐色、超接链有下划线
黑色，超链接无下划线
鼠标单击未释放的超链接样式 a:active {color:#999;}
字两两相同时，可
两两缩写为1位
color:#396;
color:#EF6;
文本修饰和垂直对齐
• 文本装饰
– text-decoration属性
• 垂直对齐方式 值
说明
– vertical-align属性：middle、top、bottom none 默认值，定义的标准文本。 underline overline line-through blink 设置文本的下划线。 设置文本的上划线。 设置文本的删除线。 设置文本闪烁。此值只在firefox浏览器中有 效，在IE中无效。
就是无效的。
提问
样式的优先级
• 请说出CSS中3种基本选择器之间的优先级。 ID选择器 类选择 标签选择器
• 请说出CSS中3种样式表之间的优先级。
行内样式
内部样式
外部样式
注意
在同一选择器中，两条声明相同，后一条声明会 覆盖前一条声明
CSS的继承性
• 继承关系树型图
html标签的子标签 title标签的父标签 根
超链接伪类
访问前，蓝色 访问后，紫色
伪类样式
语法
标签名:伪类名{声明;}
图片边超链接 后出现边框
无超链接
a:hover {
color:#B46210;
text-decoration:underline; }
伪类名称 a:link a:visited a:hover a:active
使用CSS设置超链接
h2{font-size:16px;}
h3{font-size:5mm;} p{font-size:10in;}
span{font-size:12pt;}
strong{font-size:13pc;}
字体风格
• font-style属性
– normal、italic和oblique
外层标签
p(父类)
示例
p span {
后代选择器
span(子类= 后代）
内层标签
CSS样式声明; }
交集选择器
• 交集选择器
– 由两个选择器直接连接构成，选中二者各自元素范围的交集
– 第一个必须是标签选择器，第二个必须是类选择器或者ID选择器
– 选择器之间不能有空格，必须连续书写
p.txt{color:blue; line-height:28px;}
示例
body{font-family: Times,"Times New Roman", "楷体";}
经验
当需要同时设置英 文字体和中文字体 时，一定要将英文 字体设置在中文字 体前，否则，英文 字体设置将不起作 用
字体大小
font-size属性
单位：px（像素） in、cm、mm、pt、pc
示例
text-decoration:underline;
text-decoration 设置文本的装饰
文本颜色
• color属性
– 十六进制方法表示颜色 蓝色字体
color:#FFFFFF; color:#000000; color:FF0000; color:#A983D8; color:#95F141; color:#339966; color:#EEFF66; 6位颜色值相邻数
CSS的基本语法结构
• style标签
– 定义HTML文档样式信息
位于head标签中
• style属性
– 用于改变HTML元素的样式
位于HTML标签中
CSS基本选择器
• CSS基本选择器（3种）
– 标签选择器
• HTML标签 • 一条或多条声明
定义之后，将立即对HTML中的标签产生作用
CSS基本选择器
文本样式
• 文本属性
属性 color text-align text-indent 含义 设置文本颜色 color:#00C; 举例
设置元素水平对齐方式 text-align:right; 设置首行文本的缩进 text-indent:20px;百度文库
line-height
设置文本的行高
line-height:25px;
font-style
设置字体风格
font-style:italic;
font-weight:bold; font:italic bold 36px "宋体";
font-weight 设置字体的粗细 font 在一个声明中设置所有 字体属性
字体类型
• font-family属性
p{font-family:Verdana,"楷体";}
CSS的优势
• • • • • 内容与表现分离 网页的表现统一，容易修改 丰富的样式，使得页面布局更加灵活 减少网页的代码量，增加网页的浏览速度，节省网络带宽 运用独立于页面的CSS，有利于网页被搜索引擎收录
CSS的基本语法结构
• CSS的基本语法结构
– 选择器 – 一条或多条声明
经验
CSS的最后一条声明后的“;”可写可不写，但是，基于W3C 标准规范考虑，建议最后一条声明的结束“;” 都要写上
行内样式
使用style属性引入CSS样式
示例
<h1 style="color:red;">style属性的应用</h1> <p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>
HTML中引入CSS样式7-3
内部样式表
CSS代码写在<head>的<style>标签中
第二章
网页样式
本章目标
能够使用CSS美化网页元素 能够使用DIV+CSS布局网页
重点 重点 难点 难点
能够解决CSS相关的浏览器兼容性问题
使用CSS的意义
CSS：层叠样式表（Cascading Style Sheet）
有CSS样式 无CSS样式
网络
示例1：使用CSS的意义
使用CSS的意义
CSS在网页中的应用
红色18px字体 水平线
红色12px字体
黑色12 px字体 示例2：基本选择器案例
练习
练习1—制作《如梦令》
– – – – 使用标签选择器设置标题字体大小为20px 页面中所有段落中的文本字体大小为16px 使用类选择器设置正文和译文内容字体颜色为绿色 使用ID选择器设置译文标题颜色为蓝色
• 需求说明
CSS的继承性
• CSS继承的概念
– 子标签可以继承父标签的样式 – 子标签的样式，不会影响父标签 关键代码
h1 { color:blue; text-decoration:underline; } em {color:red;} li {color:green; font-weight:bold;}
复合选择器案例
• 需求说明
– – – – 图片放在段落标签中，标题放在<h2>标签中 段落标签中的文本大小为12px，标题大小为18px，颜色为红色 CSS样式体现出复合选择器的应用 分别使用行内样式、内部样式和外部样式表的形式制作本页面， 使用链接方式引用外部样式表
示例3：复合选择器案例
小结
• • • • CSS在网页的应用和它的优势。 使用<style>标签引入CSS样式。 CSS选择器分标签选择器、类选择器和ID选择器。 在HTML中引入CSS样式的三种方式分别是行内样式、内 部样式表和外部样式表 • 外部样式表使用<link/>标签链接外部CSS文件，CSS样式 的优先级依据就近原则。 • CSS的复合选择器分为交集选择器、并集选择器和后代选 择器。
• CSS基本选择器（3种） 类选择器
.class 一条或多条声明
需在HTML中为标签添加类选择器，才可生效
CSS基本选择器
• CSS基本选择器（3种） ID选择器
#ID 一条或多条声明
用法与类选择器基本相同
CSS基本选择器案例
• 需求说明
– 标题颜色为红色，字体大小为18px；正文第一段字体大小为12px， 字体颜色为红色，第二段字体颜色为黑色，字体大小为12px
文件路径 使用外部样式表 文件类型 <head> …… <link href="style.css" rel="stylesheet" type="text/css" /> …… </head>
HTML中引入CSS样式7-6
• 外部样式表
– 导入外部样式表 语法
<head> …… <style type="text/css"> <!-@import url("style.css"); --> </style> </head>
并集选择器
• 概念
– 由两个或两个以上选择器，通过逗号连接构成，其结果是同时选 中各个基本选择器所选择的范围
• 特点
– 任何形式的选择器均可作为并集选择器的一部分 – 声明各选择器的相同样式
并集选择器 所选范围
h1
示例
#one
h1,.special, #one{ CSS样式声明; } 3者共同的样式 .style
– background-color
transparent 背景颜色值：十六进制方法表示
• 背景图像
– background-image
优点
方便在同页面中修改样式
缺点
不利于在多页面间共享复用代码及维护，对内容 与样式的分离也不够彻底
HTML中引入CSS样式7-4
外部样式表
CSS代码保存在扩展名为.css的样式表中 HTML文件引用扩展名为.css的样式表，有两种方式
链接式 导入式
HTML中引入CSS样式7-5
• 外部样式表
– 链接外部样式表 语法
全局选择器
• 概念
– 选择器是“*”，该选择器可以为所有HTML标签设置相同样式
• 特点
– 选择范围为全体HTML标签
– 声明所有标签的相同样式
使用“ * ”全局声明，可以大大减少代码量
语法
*{
CSS样式声明;
}
HTML中引入CSS样式7-1
行内样式 内部样式表 外部样式表
HTML中引入CSS样式7-2
文本在网页中的意义
• 有效的传递页面信息 • 使用CSS美化过的页面文本，使页面漂亮、美观，吸引用
户
• 可以很好的突出页面的主题内容，使用户第一眼可以看到 页面主要内容 • 具有良好的用户体验
字体样式
属性名 含义 举例
font-family:"隶书"; font-size:12px; font-family 设置字体类型 font-size 设置字体大小
斜体
正常字体
字体的粗细
• font-weight属性
值 normal
bold bolder
正常粗细
说明 默认值，定义标准的字体。
粗体字体。 更粗的字体。 字体加粗
lighter 100、200、300、400、 500、600、700、800、 900
更细的字体。
定义由细到粗的字体。 400等同于normal，700等同于bold。
背景样式 背景图像
背景颜色
<div>标签
• <div>标签的用法
– 网页布局
– 排版网页内容
语法
<div>网页内容…</div>
#header { 宽 高 } …… <div id="header">网页内容…</div> width:200px; height:280px;
网页背景
• 背景颜色
HTML中引入CSS样式7-7
• 链接式与导入式的区别
– <link/>标签属于XHTML，@import是属于CSS2.1
– 使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示
– 使用@import导入的CSS文件，客户端显示HTML结构，再把CSS 文件加载到网页当中
– @import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说
设置伪类的顺序：a:link->a:visited->a:hover->a:active
示例5：超链接样式
设置鼠标形状
• CSS设置鼠标形状
值 说明 图例
default 默认光标 示例 span{cursor:pointer;} pointer 超链接的指针
wait help text crosshair 指示程序正在忙 指示可用的帮助 指示文本 鼠标呈现十字状
完成时间：5分钟
CSS复合选择器
• 概念
– 由两个或多个基本选择器，通过不同方式连接而成
• 3种常用的复合选择器
– 后代选择器 – 交集选择器
– 并集选择器
后代选择器
• 概念
– 通过嵌套的方式，对特殊位置的HTML标签进行声明
• 特点
– 外层的标签写在前面，内层的标签写在后面，之间用空格分隔
– 内层标签是外层标签的后代
含义 未单击访问时超链接样式 单击访问后超链接样式 鼠标悬浮其上的超链接样式
图片超链接没有边框
示例
a:link{color:#9ef5f9;} a:visited {color:#333;} a:hover{color:#ff7300;
褐色、超接链有下划线
黑色，超链接无下划线
鼠标单击未释放的超链接样式 a:active {color:#999;}
字两两相同时，可
两两缩写为1位
color:#396;
color:#EF6;
文本修饰和垂直对齐
• 文本装饰
– text-decoration属性
• 垂直对齐方式 值
说明
– vertical-align属性：middle、top、bottom none 默认值，定义的标准文本。 underline overline line-through blink 设置文本的下划线。 设置文本的上划线。 设置文本的删除线。 设置文本闪烁。此值只在firefox浏览器中有 效，在IE中无效。
就是无效的。
提问
样式的优先级
• 请说出CSS中3种基本选择器之间的优先级。 ID选择器 类选择 标签选择器
• 请说出CSS中3种样式表之间的优先级。
行内样式
内部样式
外部样式
注意
在同一选择器中，两条声明相同，后一条声明会 覆盖前一条声明
CSS的继承性
• 继承关系树型图
html标签的子标签 title标签的父标签 根
超链接伪类
访问前，蓝色 访问后，紫色
伪类样式
语法
标签名:伪类名{声明;}
图片边超链接 后出现边框
无超链接
a:hover {
color:#B46210;
text-decoration:underline; }
伪类名称 a:link a:visited a:hover a:active
使用CSS设置超链接