当前位置：文档之家 › HTML5+CSS3网页设计基础 第五章 CSS3选择器

HTML5+CSS3网页设计基础 第五章 CSS3选择器

  • 格式：pptx
  • 大小：130.08 KB
  • 文档页数：28

下载文档原格式

  / 28

合集下载

网页设计与制作案例教程(HTML5+CSS3)第5章使用CSS设置图像样式

网页设计与制作案例教程(HTML5+CSS3)第5章使用CSS设置图像样式

规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。
默认。背景颜色为透明。 规定应该从父元素继承 background-color 属性的设置。
WEB
32
5.4 知识库：CSS背景样式
5.4.2 背景图像样式
第5章 使用CSS 设置图像样式
5.1 基础项目1：制作“李彦宏——众里寻他千百 度”网页 5.2 知识库：CSS图像样式
目录
5.3 基础项目2：制作“少年中国说”网页 5.4 知识库：CSS背景样式 5.5 提高项目：制作“低碳生活 从我做起”网页 5.6 拓展项目：制作“春节民俗”网页
WEB
2
background-color属性可用于设置图像或其它网页元素的背景颜色。其可 能的属性值如下：
属性值
color_name hex_number
描述
规定颜色值为颜色名称的背景颜色（比如 red）。 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。
rgb_number
transparent inherit
name属性或id属性相关联，创建图像与映射之间的联系。具体
是name属性还是id属性由浏览器决定，所以应同时向<map>标 签添加name和id两个属性。
5.2.3 图像映射
<area>标签永远嵌套在<map>标签内部。<area>标签 定义图像映射中的区域，其属性及属性值如下：
必需的属性 属性 alt 属性 coords href nohref shape 值 text 描述 定义此区域的替换文本。
效果
5.2.2 CSS常用图像样式
提示： 当vertical-align的值为bottom或者sub时，IE与Firefox 的显示结果是不一样的，它们无所谓谁对谁错。在工作中，建 议尽量少地使用浏览器间显示效果不一样的属性值。

20第5章 CSS3高级选择器

20第5章 CSS3高级选择器

德才兼备 知行合一
17
5.2.3 结构化伪类选择器
3、 :empty选择器
:empty选择器用于来选择没有内容的元素。
德才兼备 知行合一
18
5.2.3 结构化伪类选择器
4、 :target选择器
:target选择器可用于选取当前活动的目标元素。当用户单击了超链接， 而且此链接地址为本页面内的目标位置，:target选择器样式起作用。
德才兼备 知行合一
13
5.2.2 关系选择器
子代选择器（>）
相邻兄弟选择器（+）和 普通兄弟选择器（~）
德才兼备 知行合一
14
5.2.3 结构化伪类选择器
CSS3常用的结构化伪类选择器有: root选择器、:not选择器、:empty选择器、 :target选择器、:only-child选择器、 :first-child选择器、:last-child选择器、 :nth-child（n）选择器、:nth-last-child（n）选择器、 :nth-of-type（n）选择器、:nth-last-of-type（n）选择器。
:first-child选择器和:last-child选择一个子元素。如果父元素内子元素较多，我们可以用:nth-child（n）
选择器和:nth-last-child（n）选择器分别来选择第n个或者倒数第n个元素。
n可以为数值，也可以为odd（奇数）或even（偶数），odd和even分别
E[att^=val]属性选择器 E[att$=val]属性选择器 E[att*=val]属性选择器
德才兼备 知行合一
10
5.2.2 关系选择器
本节介绍3个关系选择器，分别是子代选择器（>）、 相邻兄弟选择器（+）、普通兄弟选择器（~）。

CSS3：：selection选择器

CSS3：：selection选择器

CSS3：：selection选择器⼀、介绍之前看到有些⽹站选中内容的颜⾊和背景⾊都不是平时看到的蓝⾊和⽩⾊。

今天有兴趣查看了⼀下，原来是⼀个很简单的CSS3的选择器::selection的⽤法。

上例⼦：<style>.selectColor::selection{color:#fff;background:pink;}.selectColor::-moz-selection{color:#fff;background:pink;}.selectColor::-webkit-selection{color:#fff;background:pink;}</style><body><p>普通⽂本，不设置::section,选中时⽂本的颜⾊为⽩⾊，背景⾊为蓝⾊</p><p class="selectColor">选择⽂本的颜⾊为⽩⾊，背景⾊为粉⾊</p></body>Note:只能向::selection选择器应⽤少量CSS属性：color、background、cursor以及outline。

浏览器⽀持：IE9+、Opera、Google Chrome 以及 Safari 中⽀持 ::selection 选择器。

Firefox ⽀持替代的 ::-moz-selection。

⼆、应⽤举例看过djagno⽂档的都知道，它的页⾯风格是这样的我选中⼀部分⽂字，效果是这样的可以看出，整体风格很统⼀，选中⽂字背景的浅绿⾊也让⼈感觉很舒服，这种细节的考虑⽆疑会提升⽤户体验。

它的样式也很简单，就⼀⾏我的博客现在也应⽤了这个样式，哈哈^_^。

css3选择题使用方法详解

css3选择题使用方法详解

css3选择题使用方法详解css3选择题使用方法详解一通用选择器1 *{}通配选择符(CSS2)：适合所有元素对象。

2 E类型(HTML)选择符（CSS1）：以文档语言对象类型DOM作为选择符。

3 E#myid是id选择符（CSS1）：以唯一标识符id属性等于myid 的E对象作为选择符。

4 E.myclass是类class选择符(CSS1)：以class属性包含myclass 的E对象作为选择符。

5 E F：包含选择符(CSS1)：选择所有被E元素包含的F元素。

CSS3新增的通用选择器：同级元素通用选择器：1 通用选择器E~F{}：匹配的是E元素之后的同级F元素匹配E后边所有的F，EF同级。

只要F在E的后边，E只是作为一个参考。

E~F { background:#ff0; }2 临近(相邻)选择器(css2)：E+F{}：EF元素相邻，即选择紧贴在E 元素之后F元素。

3 包含（子）选择器(css2)：E>F{}：EF不可以隔代，E只能匹配到下一个相邻辈F。

二属性选择器1．E[att^="val"]：选择具有att属性且属性值为以val开头的字符串的E元素。

2．E[att$="val"]：选择具有att属性且属性值为以val结尾的字符串的E元素。

3．E[att*="val"]：选择具有att属性且属性值为包含val的字符串的E元素。

4．E[att|="val"] 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

5．E[att] 选择具有att属性的E元素。

6．E[att="val"]选择具有att属性且属性值等于val的E元素。

7．E[att~="val"]选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。

HTML5+CSS3网站设计CSS3选择器

HTML5+CSS3网站设计CSS3选择器

第4章￿CSS3选择器《HTML5+CSS3网站设计基础教程》学习目地/Target掌握CSS3新增加地属性选择器,能够运用属性选择器为页面地元素添加样式。

理解关系选择器地用法,能够准确判断元素与元素间地关系。

掌握常用地结构化伪类选择器,能够为相同名称地元素定义不同样式。

掌握伪元素选择器地使用,能够在页面插入所需要地文字或图片内容。

掌握CSS伪类,会使用CSS伪类实现超链接特效。

章节概述/￿Summary选择器是CSS3一个重要地内容,使用它可以大幅度提高开发员书写与修改样式表地效率。

实际上,在上一章已经介绍过一些常用地选择器,这些选择器基本上能够满足Web设计师常规地设计需求。

本章将向读者介绍CSS3新增地多种选择器。

通过本章地学习,读者可以更轻松地控制网页元素。

/Contents01 02属性选择器关系选择器03结构化伪类选择器/Contents04链接伪类05伪元素选择器06阶段案例—制作网页设计软件列表01属性选择器属性选择器可以根据元素地属性及属性值来选择元素。

CSS3新增了3种属性选择器:E[att^=value],E[att$=value]与E[att*=value]￿,本节将详细介绍这3种选择器。

掌握E[att^=value]￿属性选择器地用法,能够选择包含指定前缀字符地字符串。

学习目地1.￿E[att^=value]￿属性选择器1.￿E[att^=value]￿属性选择器E[att^=value]￿属性选择器是指选择名称为E地标记,且该标记定义了att属性,att属性值包含前缀为value 地子字符串。

E是可以省略地,如果省略则表示可以匹配满足条件地任意元素。

掌握E[att$=value]￿属性选择器地用法,能够选择包含指定后缀字符地字符串。

学习目地2.￿E[att$=value]￿属性选择器2.￿E[att$=value]￿属性选择器E[att$=value]￿属性选择器是指选择名称为E地标记,且该标记定义了att属性,att属性值包含后缀为value 地子字符串。

HTML5+CSS3网页制作智慧树知到答案章节测试2023年海南职业技术学院

HTML5+CSS3网页制作智慧树知到答案章节测试2023年海南职业技术学院

第一章测试1.HTML是（）。

A:超文本传输协议B:超文本标记语言C:其余都不是D:可扩展标记语言答案:B2.浏览器标题栏里显示的文本在（）元素中输入。

A:h1B:titleC:PD:body答案:B3.下面哪个不是HTML标签。

（）A:B:C:D:答案:C4.在浏览器客户区中显示的文本在（）元素中输入。

A:headB:bodyC:metaD:title答案:B5.head元素和body元素的父元素必须是（）元素A:pB:htmlC:titleD:meta答案:B6.HTML文档被浏览器解析后呈现为网页。

（）A:对B:错答案:A7.超文本是指页面内可以包含图片、链接、音乐、视频、程序等非文本元素。

（）A:对B:错答案:A8.所有的浏览器都支持HTML5的网页。

（）A:错B:对答案:A9.HTML5是HTML语言的新版本。

（）A:对B:错答案:A10.HTML负责网页的表现，CSS负责网页的结构。

（）A:对B:错答案:B11.记事本不可以用于编辑网页。

（）A:对B:错答案:B12.HTML标签是指由一对尖括号包围的HTML关键词。

（）A:错B:对答案:B13.<!DOCTYPE>属于单标签元素。

（）A:对B:错答案:A14.在带Emmet插件的编辑器中输入html:5，按TAB键，可以快速生成HTML文档的基本结构。

（）A:对B:错答案:A15.“开始标签”、“结束标签”，以及它们所包围的内容，代表一个完整的内容，叫做双标签元素。

（）A:对B:错答案:A第二章测试1.下列HTML元素中，哪个不是单标签元素。

（）。

A:imgB:hrC:brD:h1答案:D2.最大的标题是（）。

A:h2B:h5C:H6D:h1答案:D3.自定义列表用（）元素表示。

A:ddB:ulC:dlD:ol答案:C4.HTML5表格用（）元素表示。

A:inputB:formC:tableD:lable答案:C5.从一个网页跳转到另一个网页可以用（）元素。

CSS3中的子元素选择器

CSS3中的⼦元素选择器⽬录：1.⼦元素选择器>，⽤来选中某个元素的第⼀级⼦元素，也就是⼉⼦元素<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">/* ⼦代选择器,只对⼉⼦元素有效 */p>strong{color: red;}</style></head><body><p>这是p标签，<strong>表⽰⼀个段落</strong></p><p>这是p标签，嵌套了<i>b标签和<strong>i标签</strong></p></body></html>2.兄弟选择器+，两个元素有同⼀个⽗元素，只对邻近的第⼀个元素起作⽤<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">/* 兄弟选择器,只对相邻的⼀个元素起作⽤ */h3+p{color: #008000;font-size: 18px;font-family: "楷体";}</style></head><body><h3>望庐⼭瀑布</h3><p>⽇照⾹炉⽣紫烟，遥看瀑布挂前川。

</p><p>飞流直下三千尺，疑是银河落九天。

HTML5+CSS3 使用选择器来插入文字

HTML5+CSS3 使用选择器来插入文字
在CSS 3中，可以使用before在标签前面插入内容，使用after选择器在标签后面插入内容，然后使用选择器中的content属性设置要插入的内容。

在上述代码中，使用before标签在p标签前插入内容，使用after标签在p标签后插入内容，使用content属性设置插入内容。

before元after元
从上述代码可以看出，在页面中为P标签使用after和before选择器，所以该页面上如果有多个p标签，则所有p标签前面或后面会被插入内容。

如果要解决这个问题，可以在content属性中追加一个none属性值。

属性值设定为“none”。

这时，该标签将不在插入内容。

设置content属性值为none
在CSS 3中，除了none属性值外，还为content属性添加一个“normal”属性值，其作用与使用none属性值的方法相同。

css3多类选择器用法

css3多类选择器用法================CSS3的出现，无疑为网页设计带来了更多的可能性。

其中，多类选择器（MultipleClassSelectors）是一种非常实用的新特性，它允许我们在同一个元素上应用多个类。

这对于那些需要动态改变样式，或者需要在不同的地方使用同一元素的不同样式的情况来说，是非常有用的。

###多类选择器的定义和用法在CSS中，类选择器以点（.）开始，后面跟着的是类的名称。

多类选择器允许你在一个元素上应用多个类。

只需在类名之间用空格分隔即可。

例如，假设我们有一个div元素，我们希望根据其内容和状态应用不同的样式：```html<divclass="class1class2class3">我是一个div元素</div>```我们可以在CSS中使用多类选择器来为这个元素应用不同的样式：```css.class1{color:red;}.class2{background-color:yellow;}.class3{font-size:20px;}```这样，当这个div元素的类为"class1"时，它的文字颜色会是红色；当它的类为"class2"时，背景色会变成黄色；当它的类为"class3"时，字体大小会变为20px。

###多类选择器的优势使用多类选择器，你可以在一个元素上应用多个样式，而无需为每个样式创建单独的元素。

这大大提高了代码的效率和可读性，也使得网页布局更加灵活和动态。

此外，多类选择器还允许你在不同的地方使用同一元素的不同样式，这在响应式设计中尤其重要。

###多类选择器的限制和注意事项虽然多类选择器非常有用，但也有一些限制和注意事项：1.类的数量：理论上，你可以在同一个元素上应用无限个类，但是这可能会影响网页的性能，因为每个额外的类都需要额外的CSS规则和渲染成本。

css3中选择器的基本概念

css3中选择器的基本概念CSS3中选择器是用来选取HTML文档中的元素的一种方式。

选择器允许开发者根据元素的标签名、类名、ID等属性来选择特定的元素，然后对其应用样式。

在CSS3中，选择器的基本概念包括以下几种：1. 元素选择器（Element Selector），通过元素的标签名来选择元素。

例如，p选择器将选择所有的段落元素。

2. 类选择器（Class Selector），通过元素的class属性值来选择元素。

类选择器以英文句点（.）开头，后面跟着类名。

例如，.red将选择所有class属性值为red的元素。

3. ID选择器（ID Selector），通过元素的id属性值来选择元素。

ID选择器以井号（#）开头，后面跟着id名。

例如，#header将选择id属性值为header的元素。

4. 属性选择器（Attribute Selector），通过元素的属性值来选择元素。

属性选择器以方括号（[]）包裹属性名和属性值。

例如，[type="text"]将选择所有type属性值为text的元素。

5. 后代选择器（Descendant Selector），通过元素的嵌套关系来选择元素。

后代选择器使用空格来表示元素之间的嵌套关系。

例如，div p将选择所有嵌套在div元素内部的段落元素。

6. 相邻兄弟选择器（Adjacent Sibling Selector），通过元素之间的相邻关系来选择元素。

相邻兄弟选择器使用加号（+）表示两个元素之间的相邻关系。

例如，h1 + p将选择紧接在h1元素后面的段落元素。

7. 伪类选择器（Pseudo-class Selector），通过元素的特定状态或行为来选择元素。

伪类选择器以英文冒号（:）开头，后面跟着伪类名。

例如，:hover将选择鼠标悬停在元素上的状态。

8. 伪元素选择器（Pseudo-element Selector），通过元素的特定部分来选择元素。

  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

HTML5+CSS3网页设计基础
第5章 CSS3选择器
第22页
5.3.4 案例制作

制作完成演示案例:超链接按钮设计。 参考代码 5-3.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第23页
5.4 链接伪类
本节主要内容：


案例分析
案例制作
HTML5+CSS3网页设计基础
第5章 CSS3选择器

使用:first-child和:last-child选择器，可以选择父元素中第 一个或最后一个元素。但如果想选择其他位置的元素就不 行了。为此，CSS3中引入了:nth-child(n)和:nth-lastchild(n)选择器，用来选择父元素的第n个或倒数第n个子元 素。使用:nth-last-child(1)和:last-child实现的功能相同。
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第14页
5.2.4 :nth-of-type(n)和:nth-last-of-type(n) 选择器


使用:nth-of-type(n)和:nth-last-of-type(n) 选择器可以选 择父元素中特定类型的第n个和倒数第n个子元素，而使用 :nth-child(n)和:nth-last-child(n)选择器选择父元素中的第 n个和倒数第n个子元素时，与元素类型无关。 参考代码：5-2-2.html
第24页
5.4.1 案例分析


【案例展示】网页底部导航的设计。 【知识要点】文本样式定义、链接伪类的应用。 【学习目标】掌握链接伪类的作用和用法。 参考代码：5-4.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第25页
5.4.2 案例制作

制作完成演示案例:网页底部导航的设计。 参考代码 5-4.html
第5章 CSS3选择器


HTML5+CSS3网页设计基础
第3页
主要内容
5.1 属性选择器 5.2 伪类选择器
5.3 伪元素选择器
5.4 链接伪类 5.5 实训 5.6 本章小结
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第4页
5.1 属性选择器
本节主要内容：

案例分析


E[attribute^=value]选择器


:nth-child(n)和:nth-last-child(n)选择器
:nth-of-type(n)和:nth-last-of-type(n) 选择器
:empty选择器
:target选择器 案例制作
第5章 CSS3选择器
HTML5+CSS3网页设计基础
第11页
5.2.1 案例分析

HTML5+CSS3网页设计基础
第5章 CSS3选择器
第7页
5.1.3 E[attribute$=value]选择器

E[attribute$=value] 选择器匹配属性值以指定值value结尾 的每个元素。即选择名称为E的标签，且该标签定义了 attribute属性，attribute属性值包含后缀为value的字符串 。E可以省略，省略时表示匹配满足条件的任意元素。
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第17页
5.2.7 案例制作

制作完成演示案例:动态新闻列表局部页面。 参考代码 5-2.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第18页
5.3 伪元素选择器
本节主要内容：


案例分析
:before选择器


:after选择器
E[attribute$=value]选择器 E[attribute*=value]选择器 案例制作
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第5页
5.1.1 案例分析点】CSS3属性选择器[attribute^=value]、 [attribute$=value]和[attribute*=value]的功能、选择元 素的方法。 【学习目标】掌握CSS3属性选择器的作用并灵活应用。 参考代码：5-1.html
第五章 CSS3选择器
本章概述 本章的学习目标 主要内容
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第1页
本章概述

选择器是一种模式，用于选择需要添加样式的元 素。网页设计时使用选择器选择某些元素进行样 式定义，实现灵活的样式控制。本章将具体介绍 常用的CSS3选择器的功能和用法。
HTML5+ห้องสมุดไป่ตู้SS3网页设计基础


【案例展示】动态新闻列表局部页面的设置。 【知识要点】字体类型、大小、颜色、对齐方式、行间距 、结构化伪类选择器等。 【学习目标】掌握CSS文本修饰的常用属性和伪类选择器 的作用并灵活应用。 参考代码：5-2.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第12页
5.2.2 :first-child和:last-child选择器
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第15页
5.2.5 :empty选择器

:empty 选择器匹配没有子元素或文本内容为空的每个元素。 参考代码：5-2-3.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第16页
5.2.6 :target选择器


:target 选择器用于选取当前活动的目标元素，为页面上的 某个target元素（该元素的id被用做页面中超链接的锚记名 称来是先用）指定样式。当目标元素的id和:target伪选择 器指定的id匹配上时，它的样式就会在这个id元素上生效， 即只有当用户单击了页面上的超链接，并且跳转到目标元 素后，:target选择器所设置的样式才会起作用。 参考代码：5-2-4.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第9页
5.1.5 案例码 5-1.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第10页
5.2 伪类选择器
本节主要内容：


案例分析
:first-child和:last-child选择器


:first-child 选择器用于选取属于其父元素的首个子元素。 :last-child 选择器用于选择属于其父元素的最后一个子元 素。 参考代码：5-2-1.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第13页
5.2.3 :nth-child(n)和:nth-last-child(n)选择器
第5章 CSS3选择器
第20页
5.3.2 :before选择器



:before 选择器实现在被选元素的内容前面插入内容。 格式： E:before{ content:”文字”/url(); } content属性来指定要插入的内容，可以是用双引号括起来 的文本或用url()指定路径的图片。 参考代码：5-3-1.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第21页
5.3.3 :after选择器




:after 选择器实现在被选元素的内容后面插入内容。 格式： E: after { content:”文字”/url(); } content属性用法同:before 选择器中的content。 参考代码：5-3-2.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第8页
5.1.4 E[attribute*=value]选择器

[attribute*=value] 选择器匹配属性值包含指定值value的 每个元素。即选择名称为E的标签，且该标签定义了 attribute属性，attribute属性值包含value的字符串。E可 以省略，省略时表示匹配满足条件的任意元素。
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第26页
5.5 实训

用CSS样式及属性选择器的知识设计客户案例展 示局部页面。 参考代码 5-5.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第27页
5.6 本章小结

本章介绍了常用的CSS3选择器，包括新增的3种属性选 择器、伪类选择器、微元素选择器和链接伪类等各种选择 器的功能和用法，并结合实例介绍了应用各种选择器对页 面元素进行样式定义的方法。
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第6页
5.1.2 E[attribute^=value]选择器

E[attribute^=value]选择器匹配属性值以指定值value开头 的每个元素。即选择名称为E的标签，且该标签定义了 attribute属性，attribute属性值包含前缀为value的字符串 。E可以省略，省略时表示匹配满足条件的任意元素。
第5章 CSS3选择器
第2页
本章的学习目标

掌握CSS3中新增属性选择器的用法，能运用属 性选择器选择页面上的元素添加样式。

掌握常用的伪类选择器的用法，能够为名称相同 或类型相同的子元素定义不同的样式。