第6章Div标签与CSS样式表(4)-CSS语法
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
因此，概括来说，CSS就是由3个基本部分组成 的——“对象”、“属性”和“值”。
CSS是一种用来装饰HTML的标记集合。
CSS优点
❖ 其优点包括：
▪ 1：表现和内容相分离 将设计部分剥离出来放在一个独立样式文
件中，HTML文件中只存放文本信息。这样的页 面对搜索引擎更加友好。
▪ 2：简化了网页的格式代码，外部的样式表还会 被浏览器保存在缓存里，加快了下载显示的速 度，也减少了需要上传的代码数量 。
▪ 3：易于维护和改版 只要修改保存着网站格式的CSS样式表文件
就可以改变整个站点的风格特色。
❖ 级联样式表（CSS）里用到的许多CSS属性都与HTML 属性用法相似。
❖ 例：要用红色作为网页的背景色：
❖ 用HTML表达：
❖
<body bgcolor=“#FF0000”>
❖ 用CSS表达：
❖ body {background-color:#FF0000;}
❖ 常用的HTML标记： ❖ body ❖p ❖ table ❖ tr ❖ h1等
1.2 类别选择符
类别名称 .class 类别选择器
声明
声明
color: green;
font-size: 20px;
属性
值
属性
值
图2 类别选择器
class选择符-类选择符
❖ class选择符：在一个文档中可以为不同类型的元素定义相同的类 名，class可以实现把相同样式的元素统一为一类，使用class选择 符时要先为每个元素定义一个class属性：
❖ 通过CSS选择符来指定此HTML标签使用此CSS样式。 ❖ 选择符语法：一个CSS选择符就定义了一个样式 ❖ 选择符名称 ❖{ ❖ 声明 ; ❖}
选择符示例
❖p
❖{
❖
font-size:12px;
❖}
❖ .dreamolor:blue;
❖}
❖ #dreamdured
❖{
❖
color:red;
❖}
❖ P、dreamdublue、dreamdured都是选择符。
选择符命名规则
❖ CSS选择符可以使用英文字母的大写与小写，数字，连字号，下划 线，冒号，句号。
❖ 英文字母大写与小写 A-Z a-z ❖ 数字 0-9 ❖ 连字号 ❖ 下划线 _ ❖ 冒号 : ❖ 句号 . ❖ 注：CSS选择符只能以字母开头。
transform ❖ 本章重点：掌握在网页中使用CSS的方法 ❖ 本章难点：文本属性，字体属性
CSS—基本概念
❖ CSS：Cascading Style Sheets--级联样式表，又叫层叠样 式表。用于为HTML文档定义布局。
❖ CSS涉及字体、颜色、边距、高度、宽度、背景图像、 高级定位等方面，现在所有浏览器都支持CSS 。
❖ 使用class选择符时，需要使用英文.（点）进行标识： ❖ .red{ ❖ Color:red ; ❖}
❖ 类选择符在网页中被调用的语法： ❖ <div class=”red”></div> ❖ <span class=”red”></span> ❖ <p class=”red”></p> ❖ 注意事项： ❖ （1）类选择符名称的定义必须以“.”开始，但在使用时只需要写名称
}
2级标题{ 字体：宋体； 大小：15像素； 颜色：红色； 装饰：下划线
}
h2{ font-family: 宋体; font-size:15px; color: red; text-decoration: underline;
}
CSS的思想就是首先指定对什么“对象”进行 设置，然后指定对该对象的哪个方面的“属性” 进行设置，最后给出该设置的“值”。
body { background-color:#FF0000;} H1 { font-size: 40px; color: red } H2 { font-size: 40px; color: blue }
CSS选择符
❖ CSS选择符：就是CSS样式的名字，当在HTML文档中表现一个 CSS样式的时候，就要用到一个CSS。
第6章 Div标签与CSS样式表
CSS语法与选择器
本章目标
❖ 目标：掌握在网页中使用CSS的方法 ❖ 熟悉CSS的不同选择器的使用方法 ❖ 熟悉字体属性：font-family, font-size, font-style, font-weight ❖ 熟悉文本属性：text-align, text-indent, text-decoration, text-
CSS语法
❖selector {property:value；property:value；……}
选择器：表明 花括号中的属 性设置将应用 于哪些HTML 元素，如 “body”
属性:例如用于背 景颜色的属性 “backgroundcolor”等
值： background-color 属性的值是“#FF0000” 代表红色
，而不需要“.”。 ❖ （2）定义多个属性需要用“；”隔开。
1.3 ID选择符
#id ID 选择器
声明
声明
color: yellow;
属性
值
font-size: 30px;
属性
值
图3 ID选择器
id选择符
❖ id选择符：它是唯一的，不同元素的id值是不能重复的，id选择符 为每个元素的具体对象定义不同的样式，方便用户更加精细的控 制页面。使用id选择符时要先为每个元素定义一个id属性。
❖ HTML用于结构化内容，Tag主要用于定义网页的内容 ❖ CSS用于格式化结构化的内容，告知网页如何显示内容 ❖ CSS是Web设计界的一次革命。
在具体使用CSS之前，请看一个生活中的例子，通常 我们描述一个人可以为这个人列一张表：
张飞{ 身高：185cm； 体重：105kg； 性别：男； 性格：暴躁； 民族：汉族；
1. CSS选择符分类
❖ CSS选择符可以分为很多类： ❖ 标记选择符 ❖ class选择符 ❖ id选择符 ❖ 通用选择符 ❖ 分组选择符 ❖ 包含选择符
1.1 标记选择符
h1 选择器
声明
声明
color: red;
font-size: 25px;
属性
值
属性
值
图1 CSS标记选择器
标记选择符
❖ 标记选择符就是HTML网页中标记本身，定义时直接使用标记名称。 ❖ Body{ ❖ /*定义页面属性*/ ❖} ❖ h1{ ❖ color:red ; ❖}
CSS是一种用来装饰HTML的标记集合。
CSS优点
❖ 其优点包括：
▪ 1：表现和内容相分离 将设计部分剥离出来放在一个独立样式文
件中，HTML文件中只存放文本信息。这样的页 面对搜索引擎更加友好。
▪ 2：简化了网页的格式代码，外部的样式表还会 被浏览器保存在缓存里，加快了下载显示的速 度，也减少了需要上传的代码数量 。
▪ 3：易于维护和改版 只要修改保存着网站格式的CSS样式表文件
就可以改变整个站点的风格特色。
❖ 级联样式表（CSS）里用到的许多CSS属性都与HTML 属性用法相似。
❖ 例：要用红色作为网页的背景色：
❖ 用HTML表达：
❖
<body bgcolor=“#FF0000”>
❖ 用CSS表达：
❖ body {background-color:#FF0000;}
❖ 常用的HTML标记： ❖ body ❖p ❖ table ❖ tr ❖ h1等
1.2 类别选择符
类别名称 .class 类别选择器
声明
声明
color: green;
font-size: 20px;
属性
值
属性
值
图2 类别选择器
class选择符-类选择符
❖ class选择符：在一个文档中可以为不同类型的元素定义相同的类 名，class可以实现把相同样式的元素统一为一类，使用class选择 符时要先为每个元素定义一个class属性：
❖ 通过CSS选择符来指定此HTML标签使用此CSS样式。 ❖ 选择符语法：一个CSS选择符就定义了一个样式 ❖ 选择符名称 ❖{ ❖ 声明 ; ❖}
选择符示例
❖p
❖{
❖
font-size:12px;
❖}
❖ .dreamolor:blue;
❖}
❖ #dreamdured
❖{
❖
color:red;
❖}
❖ P、dreamdublue、dreamdured都是选择符。
选择符命名规则
❖ CSS选择符可以使用英文字母的大写与小写，数字，连字号，下划 线，冒号，句号。
❖ 英文字母大写与小写 A-Z a-z ❖ 数字 0-9 ❖ 连字号 ❖ 下划线 _ ❖ 冒号 : ❖ 句号 . ❖ 注：CSS选择符只能以字母开头。
transform ❖ 本章重点：掌握在网页中使用CSS的方法 ❖ 本章难点：文本属性，字体属性
CSS—基本概念
❖ CSS：Cascading Style Sheets--级联样式表，又叫层叠样 式表。用于为HTML文档定义布局。
❖ CSS涉及字体、颜色、边距、高度、宽度、背景图像、 高级定位等方面，现在所有浏览器都支持CSS 。
❖ 使用class选择符时，需要使用英文.（点）进行标识： ❖ .red{ ❖ Color:red ; ❖}
❖ 类选择符在网页中被调用的语法： ❖ <div class=”red”></div> ❖ <span class=”red”></span> ❖ <p class=”red”></p> ❖ 注意事项： ❖ （1）类选择符名称的定义必须以“.”开始，但在使用时只需要写名称
}
2级标题{ 字体：宋体； 大小：15像素； 颜色：红色； 装饰：下划线
}
h2{ font-family: 宋体; font-size:15px; color: red; text-decoration: underline;
}
CSS的思想就是首先指定对什么“对象”进行 设置，然后指定对该对象的哪个方面的“属性” 进行设置，最后给出该设置的“值”。
body { background-color:#FF0000;} H1 { font-size: 40px; color: red } H2 { font-size: 40px; color: blue }
CSS选择符
❖ CSS选择符：就是CSS样式的名字，当在HTML文档中表现一个 CSS样式的时候，就要用到一个CSS。
第6章 Div标签与CSS样式表
CSS语法与选择器
本章目标
❖ 目标：掌握在网页中使用CSS的方法 ❖ 熟悉CSS的不同选择器的使用方法 ❖ 熟悉字体属性：font-family, font-size, font-style, font-weight ❖ 熟悉文本属性：text-align, text-indent, text-decoration, text-
CSS语法
❖selector {property:value；property:value；……}
选择器：表明 花括号中的属 性设置将应用 于哪些HTML 元素，如 “body”
属性:例如用于背 景颜色的属性 “backgroundcolor”等
值： background-color 属性的值是“#FF0000” 代表红色
，而不需要“.”。 ❖ （2）定义多个属性需要用“；”隔开。
1.3 ID选择符
#id ID 选择器
声明
声明
color: yellow;
属性
值
font-size: 30px;
属性
值
图3 ID选择器
id选择符
❖ id选择符：它是唯一的，不同元素的id值是不能重复的，id选择符 为每个元素的具体对象定义不同的样式，方便用户更加精细的控 制页面。使用id选择符时要先为每个元素定义一个id属性。
❖ HTML用于结构化内容，Tag主要用于定义网页的内容 ❖ CSS用于格式化结构化的内容，告知网页如何显示内容 ❖ CSS是Web设计界的一次革命。
在具体使用CSS之前，请看一个生活中的例子，通常 我们描述一个人可以为这个人列一张表：
张飞{ 身高：185cm； 体重：105kg； 性别：男； 性格：暴躁； 民族：汉族；
1. CSS选择符分类
❖ CSS选择符可以分为很多类： ❖ 标记选择符 ❖ class选择符 ❖ id选择符 ❖ 通用选择符 ❖ 分组选择符 ❖ 包含选择符
1.1 标记选择符
h1 选择器
声明
声明
color: red;
font-size: 25px;
属性
值
属性
值
图1 CSS标记选择器
标记选择符
❖ 标记选择符就是HTML网页中标记本身，定义时直接使用标记名称。 ❖ Body{ ❖ /*定义页面属性*/ ❖} ❖ h1{ ❖ color:red ; ❖}