CSS基本选择器..
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
在CSS的3个组成部分中，“对象”是很重要的， 它指定了对哪些网页元素进行设置，因此，它有一 个专门的名称——选择器（selector）。
1.2.1
标记选择器
标记选择器中的“标记”指XHTML中的标记。 CSS可以定义几乎所有HTML标记中内容的样式。例如body、h1-h6、 p、a、div、ul等。 例：对HTML语言中的分段标记P进行字体定义： p { font-family: "宋体"; }
再进一步，如果把上面的表格用英语写出来： h2{
Hale Waihona Puke Baidu
font-family: 宋体; font-size:15px; color: red; text-decoration: underline;
}
CSS的思想就是首先指定对什么“对象”进行 设置，然后指定对该对象的哪个方面的“属性”进 行设置，最后给出该设置的“值”。 因此，概括来说，CSS就是由3个基本部分—— “对象”、“属性”和“值”组成的。
• CSS的标准 目前有三个CSS标准。CSS1、CSS2和CSS3。CSS1于 1996年12月通过，CSS2则于1998年5月通过。CSS3在 CSS2的基础上增加了很多新的样式和效果。但现在 支持CSS3的浏览器版本要求较高。 • CSS文档中大小写不敏感
1.1 CSS的概念和语法
在介绍CSS语法之前，先思考一个生活中的问
<html> <head> <title>class选择器</title> <style type="text/css"> .red{ color:red; font-size:18px; }
/* 红色 */ /* 文字大小 */
.green{ color:green; font-size:20px; } </style> </head>
* { font-family: "宋体"; }
1.3 在HTML中使用CSS的方法 1.3.1 行内式
在HTML标记中使用style属性，直接写入需要定义的样式。 例如： <p style="color:Blue; font-size:large" >内嵌样式 表<p> 其中各个属性之间用“;”隔开，属性与属性值之间 用“:”隔开。
<p style="color:#FF0000; font-size:20px; textdecoration:underline;">正文内容1</p> <p style="color:#000000; font-style:italic;">正文内容 2</p> <p style="color:#FF00FF; font-size:25px; fontweight:bold;">正文内容3</p> </body> </html>
网站前台布局与设计
项目一：制作个人主页
项目描述： 为了展示自己的才艺，记录自己的心事，分享自己的兴 趣爱好，某同学决定制作一个个人网站。 项目目标：
• • • 能够使用（X）HTML搭建网页的结构； 学会在HTML中引入CSS； 能够对文字和图片进行简单的修饰。
项目任务：
任务1－－－编写网站首页结构 任务2－－－超链接到其它页面 任务3－－－实现网站首页的文字效果 任务4－－－实现首页和二级页面的背景效果
任务三：实现个人主页的文字效果
• 技能目标： 1、能够在html页中以多种方式引入CSS； 2、能够对文本进行修饰 知识目标： 1. 了解CSS的概念； 2. CSS引入网页的方法 3. CSS语法规则，命名规则 4. 与文字相关的CSS属性名、属性值
•
相关知识：
1.1 1.2 CSS的概念和语法 基本CSS选择器 在HTML中使用CSS的方法
1.2.2 类别选择器
表示方法：在字符的前面加前缀句点“.”来表示类别选择器。 引用方法：在此处定义的类名在页面中的元素用class属性的值来 引用。 例：定义了一个类选择器title1，用来定义字体的大小： .title1 { font-size:12px;} 在页面中使用定义的样式： <div class="title1">学校网站开发</div> 注意：类名不能以数字开头。CSS的类名只能包含字母和数字。
题。
张飞 {
身高:185cm; 体重:105kg; 性别:男; 性格:暴躁; 民族:汉族; }
这个表实际上是由3个要素组成的，即姓名、 属性和属性值。
CSS的作用就是设置网页的各个组成部分的表 现形式。 因此，如果把上面的表格换成描述网页上一个 标题的属性表，可以设想应该大致如下：
2级标题{ 字体:宋体; 大小:15像素; 颜色:红色; 装饰:下划线 }
练习： 若html中有如下代码： <div id=“head”>我是页页头部</div> <div id=“cont”>我是正文部分</div> 若想将以上文字的颜色设置为红色，则需要怎样设置 选择器？
1.2.4
通用选择器
表示方法： * 作用：指定的样式可应用在页面里的所有元素。
例如：把页面中所有支持字体属性的样式都设为“宋体”：
/* 绿色 */ /* 文字大小 */
<body> <p class="red">class选择器1</p> <p class="green">class选择器2</p> <h3 class="green">h3同样适用</h3> </body> </html>
1.2.3
ID选择器
表示方法：字符前加“#”。 引用方法：在元素的id属性中引用。 例如： ＃title2 { font-size:larger; fontweight:bold;} 这个CSS规则只能用在具有这个id属性的元素上， <div id="title2">学校网站开发</div>
1.1 CSS的概念和语法
• CSS基本语法
注意冒号和分号
选择符{属性名1: 属性值1; 属性名2: 属性值2; …} • 选择符：指被设样式的对象 • { }：表示此符号内的一组样式是对指定对象设置的。 • 属性名: 属性值 ：具体的样式 • CSS注释：/* 被注释内容 *／
1.2 基本CSS选择器
1.3
1.4 1.5
复合选择器 CSS的继承特性
1.1 CSS的概念和语法
• CSS概念 Cascading Style Sheet层叠样式表。 • CSS作用 在网页中实现网页结构内容和表现形式的分离，将原 来由HTML语言所承担的一些与结构无关的功能剥 离出来，改由CSS来完成。
1.1 CSS的概念和语法
1.2.1
标记选择器
标记选择器中的“标记”指XHTML中的标记。 CSS可以定义几乎所有HTML标记中内容的样式。例如body、h1-h6、 p、a、div、ul等。 例：对HTML语言中的分段标记P进行字体定义： p { font-family: "宋体"; }
再进一步，如果把上面的表格用英语写出来： h2{
Hale Waihona Puke Baidu
font-family: 宋体; font-size:15px; color: red; text-decoration: underline;
}
CSS的思想就是首先指定对什么“对象”进行 设置，然后指定对该对象的哪个方面的“属性”进 行设置，最后给出该设置的“值”。 因此，概括来说，CSS就是由3个基本部分—— “对象”、“属性”和“值”组成的。
• CSS的标准 目前有三个CSS标准。CSS1、CSS2和CSS3。CSS1于 1996年12月通过，CSS2则于1998年5月通过。CSS3在 CSS2的基础上增加了很多新的样式和效果。但现在 支持CSS3的浏览器版本要求较高。 • CSS文档中大小写不敏感
1.1 CSS的概念和语法
在介绍CSS语法之前，先思考一个生活中的问
<html> <head> <title>class选择器</title> <style type="text/css"> .red{ color:red; font-size:18px; }
/* 红色 */ /* 文字大小 */
.green{ color:green; font-size:20px; } </style> </head>
* { font-family: "宋体"; }
1.3 在HTML中使用CSS的方法 1.3.1 行内式
在HTML标记中使用style属性，直接写入需要定义的样式。 例如： <p style="color:Blue; font-size:large" >内嵌样式 表<p> 其中各个属性之间用“;”隔开，属性与属性值之间 用“:”隔开。
<p style="color:#FF0000; font-size:20px; textdecoration:underline;">正文内容1</p> <p style="color:#000000; font-style:italic;">正文内容 2</p> <p style="color:#FF00FF; font-size:25px; fontweight:bold;">正文内容3</p> </body> </html>
网站前台布局与设计
项目一：制作个人主页
项目描述： 为了展示自己的才艺，记录自己的心事，分享自己的兴 趣爱好，某同学决定制作一个个人网站。 项目目标：
• • • 能够使用（X）HTML搭建网页的结构； 学会在HTML中引入CSS； 能够对文字和图片进行简单的修饰。
项目任务：
任务1－－－编写网站首页结构 任务2－－－超链接到其它页面 任务3－－－实现网站首页的文字效果 任务4－－－实现首页和二级页面的背景效果
任务三：实现个人主页的文字效果
• 技能目标： 1、能够在html页中以多种方式引入CSS； 2、能够对文本进行修饰 知识目标： 1. 了解CSS的概念； 2. CSS引入网页的方法 3. CSS语法规则，命名规则 4. 与文字相关的CSS属性名、属性值
•
相关知识：
1.1 1.2 CSS的概念和语法 基本CSS选择器 在HTML中使用CSS的方法
1.2.2 类别选择器
表示方法：在字符的前面加前缀句点“.”来表示类别选择器。 引用方法：在此处定义的类名在页面中的元素用class属性的值来 引用。 例：定义了一个类选择器title1，用来定义字体的大小： .title1 { font-size:12px;} 在页面中使用定义的样式： <div class="title1">学校网站开发</div> 注意：类名不能以数字开头。CSS的类名只能包含字母和数字。
题。
张飞 {
身高:185cm; 体重:105kg; 性别:男; 性格:暴躁; 民族:汉族; }
这个表实际上是由3个要素组成的，即姓名、 属性和属性值。
CSS的作用就是设置网页的各个组成部分的表 现形式。 因此，如果把上面的表格换成描述网页上一个 标题的属性表，可以设想应该大致如下：
2级标题{ 字体:宋体; 大小:15像素; 颜色:红色; 装饰:下划线 }
练习： 若html中有如下代码： <div id=“head”>我是页页头部</div> <div id=“cont”>我是正文部分</div> 若想将以上文字的颜色设置为红色，则需要怎样设置 选择器？
1.2.4
通用选择器
表示方法： * 作用：指定的样式可应用在页面里的所有元素。
例如：把页面中所有支持字体属性的样式都设为“宋体”：
/* 绿色 */ /* 文字大小 */
<body> <p class="red">class选择器1</p> <p class="green">class选择器2</p> <h3 class="green">h3同样适用</h3> </body> </html>
1.2.3
ID选择器
表示方法：字符前加“#”。 引用方法：在元素的id属性中引用。 例如： ＃title2 { font-size:larger; fontweight:bold;} 这个CSS规则只能用在具有这个id属性的元素上， <div id="title2">学校网站开发</div>
1.1 CSS的概念和语法
• CSS基本语法
注意冒号和分号
选择符{属性名1: 属性值1; 属性名2: 属性值2; …} • 选择符：指被设样式的对象 • { }：表示此符号内的一组样式是对指定对象设置的。 • 属性名: 属性值 ：具体的样式 • CSS注释：/* 被注释内容 *／
1.2 基本CSS选择器
1.3
1.4 1.5
复合选择器 CSS的继承特性
1.1 CSS的概念和语法
• CSS概念 Cascading Style Sheet层叠样式表。 • CSS作用 在网页中实现网页结构内容和表现形式的分离，将原 来由HTML语言所承担的一些与结构无关的功能剥 离出来，改由CSS来完成。
1.1 CSS的概念和语法