资源简介

(共78张PPT)
04CSS 基础知识任务 1 制作开心餐厅网页任务 2 制作课程介绍网页制作开心餐厅网页任务 1● 1. 掌握 CSS 的基本语法。● 2. 了解在 html 中引入 CSS 样式表的方式。● 3. 熟悉 CSS 常用的选择器。本任务主要使用 html 定义网页的结构，用 CSS 样式来制作完成开心餐厅网页。开心餐厅网页效果如图所示。开心餐厅网页效果步骤一：在项目下新建 html 文件，在 p 标签中加入 4 张图片和文字内容，并使用 width 属性和height 属性为图片设置宽度和高度，p 标签内的文字内容需要换行的地方使用 br 标签换行，标题文字使用 h2 标签环绕，代码如图所示。不加样式开心餐厅网页代码不加样式开心餐厅网页代码不加样式开心餐厅网页代码此时网页效果如图所示。不加样式开心餐厅网页效果步骤二：接下来要新建一个 CSS 外部样式表，对网页的文字内容进行样式设置。首先设置 p 标签中的文字字体大小为 12 像素，接着设置 h2 标签中的文字字体大小为 18 像素，颜色为红色，然后使用类选择器 .green、.blue 将其中两个不同段落中的文字颜色分别设置为绿色和蓝色，最后使用 id 选择器 # rst 将第一处标题文字设置为 24 像素，颜色为绿色。CSS 代码如图所示。外部样式表代码步骤三：开心餐厅网页通过使用 link 标签引入 CSS 外部样式表，link 标签一般放置在网页文档的head 标签内，当前外部样式表的文件命名为 style.css。通过 href 属性设置好文件路径后，网页文件就能够成功引入 CSS 外部样式表，代码如图所示。引入外部样式表与标签命名代码CSS（cascading style sheet）中文称为层叠样式表，其文件扩展名为 .css。CSS 是用于增强或控制网页样式，并允许将样式信息与网页内容分离的一种标记性语言。引用样式表的目的是将“网页结构代码”和“网页样式风格代码”分离开，从而使网页设计者可以对网页布局进行更多的控制。利用样式表，可以将整个站点上的所有网页都指向某个 CSS 文件，然后设计者只需要修改 CSS 文件中的某一行，整个网站上对应的样式就都会随之发生变化。一、CSS 样式规则使用 CSS 对网页进行修饰，首先需要了解 CSS 样式规则，其基本语法格式如下。在上述样式规则中，选择器用于指定 CSS 样式作用的 html 对象，大括号 { } 内是对该对象设置具体样式。初学者在书写 CSS 样式时，除了要遵循 CSS 样式规则外，还需要注意以下几个问题。1. CSS 样式中的选择器严格区分大小写，属性和属性值不区分大小写，按照书写习惯一般将选择器、属性和属性值都采用小写的形式。2. 如果属性值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的双引号。3. 为了提高代码的可读性，书写 CSS 代码时，通常会加上 CSS 注释。4. 在 CSS 代码中，空格是不被解析的，大括号以及分号前后的空格可有可无。因此，可以使用空格键、Tab 键、回车键等对样式代码进行排版，以提高代码的可读性。二、引入 CSS 样式表1. 行内式行内式是通过标签的 style 属性设置元素的样式，其基本语法格式如下。语法中 style 是标签的属性，实际上任何 html 标签都拥有 style 属性，用来设置行内式，其中属性和属性值的书写规范与 CSS 样式规则相同。行内式只对其所在的标签及嵌套在其中的子标签起作用。下面通过一个案例来演示使用行内式引入 CSS 样式的方法，如图所示。在图中，通过使用行内式 CSS 样式，分别设置两个 p 标签的字号和颜色。行内式代码此时网页效果如图所示。通过上图可以看出，行内式也是通过标签的 style 属性来控制样式的，并没有做到结构与表现的分离，所以一般很少使用。通常，只有在样式规则较少且只在该元素上使用一次，或者需要临时修改某个样式规则时使用。行内式网页效果2. 内嵌式内嵌式是将 CSS 代码集中写在 html 文档的 head 头部标签中，并且用 style 标签定义，其基本语法格式如图所示。在该语法中，style 标签一般位于 head 标签中的 title 标签之后，也可以把它放在 html 文档的任何地方。内嵌式代码下面通过一个案例来演示内嵌式 CSS 样式的用法，如图所示。内嵌式代码此时网页效果如图所示。内嵌式 CSS 样式只对其所在的 html 页面产生作用，因此，当网站是一个单网页时，使用内嵌式是个不错的选择。当网站是由多个网页组成时，不建议使用这种方式，因为此时采用内嵌式会使 CSS 代码产生大量冗余。内嵌式网页效果3. 外部式外部式是将所有的样式放在一个或多个以“ CSS”为扩展名的外部样式表文件中，通过link 标签将外部样式表文件引入到 html 文档中，其基本语法格式如下。在该语法中，link 标签需要放在头部标签 head 中，同时设置 link 标签的相关属性，具体如下。（1）href：定义外部样式表文件的 URL。（2）type：定义所链接文档的类型，指定为“ text/css”，表示链接的外部文件为 CSS 样式表。（3）rel：定义当前文档与被链接文档之间的关系，指定为“ stylesheet”，表示被链接的文档是一个样式表文件。三、CSS 常用的选择器根据选择器类型不同，CSS 选择器可分为基础选择器和复合选择器。基础选择器是由单个选择器组成的，包括标签选择器、类选择器、多类名选择器、id 选择器和通配符选择器。而复合选择器可以更准确、更高效地选择目标元素（标签）。复合选择器是由两个或多个基础选择器通过不同的方式组合而成的。常用的复合选择器包括交集选择器、并集选择器、后代选择器、伪类选择器等。1. 标签选择器标签选择器是指用 html 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。其基本语法格式如下。该语法中，所有的 html 标签名都可以作为标签选择器，例如 body、h1、p、strong 等。用标签选择器定义的样式对页面中该类型的所有标签都产生效果。2. 类选择器类选择器使用“.”（英文点号）表示，后面紧跟类名，其基本语法格式如下。该语法中类名即为 html 元素的 class 属性值，大多数 html 元素都可以定义 class 属性。类选择器最大的优势是可以为网页元素对象定义单独或相同的样式。下面通过一个案例来学习类选择器的应用，如图所示。类选择器代码在上图中，对 h2 标题标签应用 class="red"，通过类选择器设置文本颜色为红色。对第一个 p 段落标签应用 class="green"，将其文本颜色设置为绿色。对第二个 p 段落标签应用 class="font22"，通过类选择器设置文本字号为 22 像素。此时网页效果如图所示。类选择器效果3. 多类名选择器在多类名选择器中，一个标签的 class 值中可能包含多个类名，每个类名之间用空格分开。在使用场景中通常把多个标签相同的样式放在一个类中定义，独有的样式用其他类分开定义，使用时将标签的 class 值设置为多个类名组合来达到聚合不同样式集的目的，其基本语法格式如下。这里的语法格式是在标签中的书写，在 CSS 中跟类选择器的写法相似。多类选择器代码在上图中，对两个 p 段落标签分别进行了多个名字的命名，对类名 red 设置文本颜色为红色，此时两行文本变为红色。对类名 font2 设置上画线，对类名 bold 设置下画线，然后单独将类名为 red bold 的文本设置字体加粗。此时页面的显示效果如图所示。多类名选择器效果4. id 选择器id 选择器使用“#”表示，后面紧跟 id 名，其基本语法格式如下。该语法中，id 名即为 html 元素的 id 属性值，大多数 html 元素都可以定义 id 属性，网页元素的 id 值是唯一的，同一个网页中的 id 值不能重复。下面通过一个案例来学习 id 选择器的使用，如图所示。id 选择器代码5. 交集选择器交集选择器就是在两个标签相交的部分，也就是交集修改格式。交集选择器可以与 id选择器和类选择器共同使用。其基本语法格式如下。6. 并集选择器如果某些选择器定义的样式完全相同或部分相同，就可以利用并集选择器，并集选择器是各选择器通过英文逗号（,）连接而成的，任何形式的选择器都可以作为并集选择器的一部分。其基本语法格式如下。7. 通配符选择器通配符选择器用“ *”号表示，它是作用范围最广的选择器，能匹配页面中所有元素。其基本语法格式如下。8. 后代选择器后代选择器用于选择一个元素的后代元素，它使用空格分隔两个元素。其基本语法格式如下。除了上述讲解到的标签选择器、类选择器、多类名选择器、id 选择器、交集选择器、并集选择器、通配符选择器、后代选择器之外，后面的项目中还会使用到伪类选择器，待后面详细讲解。内嵌式选择器的优先级（1 000）>id 选择器的优先级（100）> 类选择器和伪类选择器的优先级（10）> 元素选择器的优先级（1）> 通配符选择器的优先级（0），即内嵌式选择器优先级最高，其次是 id 选择器，以此类推，优先级最小的为通配符选择器。制作课程介绍网页任务2● 1. 熟练掌握 CSS 字体样式的设置。● 2. 熟练掌握 CSS 文本外观的设置。● 3. 熟练掌握 CSS 背景颜色的设置。● 4. 熟练掌握 div 标签和 span 标签的用法。学习 html 时，可以使用文本标签及其属性控制文本的显示样式，但是这种方式比较烦琐且不利于代码的共享和移植。为此，CSS 提供了相应的文本样式属性，可以更轻松方便地控制文本样式。本任务主要讲解如何通过 CSS 字体样式属性、CSS 文本外观属性、CSS 背景颜色属性对 Android 课程介绍网页进行美化。本任务制作的 Android 课程介绍网页使用了 line-height 属性对文本的行间距进行设置，使用了 color 属性对文本的颜色进行设置，使用了background-color 属性对该网页中元素的背景颜色进行设置。Android 课程介绍网页效果如图所示。Android 课程介绍网页效果步骤一：在项目下新建 html 文件，在 body 中定义整个页面的结构，一个 div 标签中包含两个 p标签和两个子 div 标签，两个 p 标签中分别放入两个课程标题图片，两个 div 标签中分别放入两段课程文字内容，代码如图所示。添加标签并输入内容步骤二：给需要设置样式的标签设置 id 属性值和 class 属性值，注意取名字的时候尽量使用英文，且具有真实意义。代码如图所示。引入外部样式表和标签定义选择器引入外部样式表和标签定义选择器运行上图中的代码，效果如图所示。设置相关属性值步骤三：在 CSS 文件中设置 Android 课程介绍网页中元素的样式属性，这里多处用到了后代选择器，后代选择器可以选择某元素下所有的子元素，在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。每个空格结合符可以解释为“……作为……的后代”，但是要求必须从右向左读选择器。代码如图所示。设置样式属性设置样式属性步骤四：在 head 标签中使用“ <link href="css/course.css" rel="stylesheet" type="text/css"/>”引入外部样式表，运行 html 代码，加入样式属性效果如图所示。Android 课程介绍网页效果一、CSS 字体样式属性1. font-sizefont-size 属性用于设置字号，该属性值可以使用相对长度单位，也可以使用绝对长度单位，具体见表。其中，相对长度单位比较常用，推荐使用像素单位 px；绝对长度单位使用较少。CSS 长度单位及说明2. font-familyfont-family 属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如，将网页中所有段落文本的字体设置为宋体，可以使用图所示的 CSS 样式代码。设置字体使用 font-family 设置字体时，需要注意以下几点。（1）各种字体之间必须使用英文状态下的逗号隔开。（2）中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前，如图所示。（3）如果字体名中包含空格、#、 等符号，则该字体必须加英文状态下的单引号或双引号，如图所示。（4）尽量使用系统默认字体，以保证网页在任何用户的浏览器中都能正确显示。设置字体书写方式加英文状态引号3. font-weightfont-weight 属性用于定义字体的粗细，其属性值及其描述见表。在实际工作中，常用的 font-weight 属性值为 normal 和 bold。font-weight 的属性值及其描述4. font-variantfont-variant 属性用于设置变体（字体变化），一般用于定义小型大写字母，仅对英文字符有效。其可用属性值如下。（1）normal：默认值，浏览器会显示标准的字体。（2）small-caps：浏览器会显示小型大写的字体，即所有的小写字母均会转换为大写。但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。5. font-stylefont-style 属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下。（1）normal：默认值，浏览器会显示标准的字体样式。（2）italic：浏览器会显示斜体的字体样式。（3）oblique：浏览器会显示倾斜的字体样式。其中 italic 和 oblique 都用于定义斜体，两者在显示效果上并没有本质区别，但实际工作中常使用 italic。6. fontfont 属性用于对字体样式进行综合设置，其基本语法格式如下。使用 font 属性时，必须按上面语法格式中的顺序书写，各个属性以空格隔开，其应用示例如图所示。综合设置字体样式下面使用 font 属性对字体样式进行综合设置，如图所示。font 属性代码在上图中定义了两个段落，同时使用 font 属性分别对它们进行相应的设置。其中，由于第二个段落省略了 font-family 属性，这时 font 属性不起作用。运行上图中的代码，效果如图所示。使用 font 属性综合设置字体样式二、CSS 文本外观属性1. colorcolor 属性用于定义文本的颜色，其取值方式有如下三种。（1）预定义的颜色值，如 red、green、blue 等。（2）十六进制，如 #FF0000、#FF6600、#29D794 等。实际工作中，十六进制是最常用的定义颜色的方式。（3）RGB 代码，如红色可以表示为 rgb（255，0，0）或 rgb（100%，0%，0%）。2. letter-spacingletter-spacing 属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的值，允许使用负值，默认值为 normal。3. line-heightline-height 属性用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height 常用的属性值单位有三种，分别为像素 px、相对值 em 和百分比 %，实际工作中使用最多的是像素 px 和相对值 em。4. text-transformtext-transform 属性用于转换英文字符的大小写，其可用属性值如下。（1）none：不转换（默认值）。（2）capitalize：首字母大写。（3）uppercase：全部字符转换为大写。（4）lowercase：全部字符转换为小写。5. text-decorationtext-decoration 属性用于设置文本的下画线、上画线、删除线等装饰效果，其可用属性值如下。（1）none：没有装饰（正常文本默认值）。（2）underline：下画线。（3）overline：上画线。（4）line-through：删除线。text-decoration 后可以赋多个值，用于给文本添加多种显示效果，例如，若需要文字同时有下画线和删除线效果，就可以将 underline 和 line-through 同时赋给 text-decoration。6. text-aligntext-align 属性用于设置文本内容的水平对齐，相当于 html 中的 align 对齐属性。其可用属性值如下。（1）left：左对齐（默认值）。（2）right：右对齐。（3）center：居中对齐。7. text-indenttext-indent 属性用于设置首行文本的缩进，其属性值可为不同单位的数值如像素值（px）、字符宽度的倍数（em）、相对于浏览器窗口宽度的百分比（%），允许使用负值，建议使用 em 作为设置单位。下面来学习 text-indent 属性的应用，如图所示。首行缩进代码首行缩进代码三、CSS 背景颜色属性在 CSS 中，网页元素的背景颜色使用 background-color 属性来设置，其属性值与文本颜色的取值一样，可使用预定义的颜色值、十六进制 #RRGGBB 或 RGB 代码 rgb（r, g, b）。background-color 的默认值为 transparent，即背景透明，这时子元素会显示父元素的背景。为了了解背景颜色属性 background-color，下面来演示其用法，如图所示。背景颜色代码四、div 标签和 span 标签1. div 标签div 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，且不使用任何格式与其关联。div 元素是通用的块元素，内部可以包含其他各种元素（包括其他 div 元素），并且可以通过 CSS 设置样式来完成复杂的页面布局。其语法形式如下。html 中的元素可分为两种类型：块级元素和行内元素。块级元素显示在一块内，会自动换行，元素会从上到下垂直排列，各自占一行，如前面所讲过的 p、h1、div 等标签元素。行内元素在一行内水平排列，高度由元素的内容决定，height（高度）属性不起作用，如后面要讲的 span、a 等元素。下面通过一个案例来具体演示 div 标签的使用，如图所示。div 标签的使用运行上图中的代码，效果如图所示。div 标签的使用效果2. span 标签span 标签用来组合文档中的行内元素。span 标签没有固定的表现形式，当对它应用样式时，它才会产生视觉上的变化。span 标签可在行内定义区域，也就是一行可以被 span 划分成多个区域，从而实现某种特定效果。span 标签本身没有任何属性。其语法形式如下。span 标签与 span 标签之间只能包含文本和各种行内标签。与 div 标签相比，通常可以通俗地理解为 div 为大容器，span 为小容器，大容器内可以放置小容器。下面通过一个案例来具体演示 span 标签的使用，如图所示。span 标签的使用span 标签的使用在上图中，在 div 标签中嵌套多组 span 标签，每组 span 标签包含一些文字信息，然后使用 CSS 分别设置这些文字信息的样式。运行上图中的代码，效果如图所示。span 标签的使用效果

展开更多......

收起↑