项目四 CSS 基础知识

04CSS基础知识203任务1制作开心餐厅网页任务2制作课程介绍网页204制作开心餐厅网页任务1205●1.掌握CSS的基本语法。●2.了解在html中引入CSS样式表的方式。●3.熟悉CSS常用的选择器。206本任务主要使用html定义网页的结构，用CSS样式来制作完成开心餐厅网页。开心餐厅网页效果如图所示。207开心餐厅网页效果208步骤一：在项目下新建html文件，在p标签中加入4张图片和文字内容，并使用width属性和height属性为图片设置宽度和高度，p标签内的文字内容需要换行的地方使用br标签换行，标题文字使用h2标签环绕，代码如图所示。209不加样式开心餐厅网页代码210不加样式开心餐厅网页代码211不加样式开心餐厅网页代码212此时网页效果如图所示。不加样式开心餐厅网页效果213步骤二：接下来要新建一个CSS外部样式表，对网页的文字内容进行样式设置。首先设置p标签中的文字字体大小为12像素，接着设置h2标签中的文字字体大小为18像素，颜色为红色，然后使用类选择器.green、.blue将其中两个不同段落中的文字颜色分别设置为绿色和蓝色，最后使用id选择器#first将第一处标题文字设置为24像素，颜色为绿色。CSS代码如图所示。外部样式表代码214步骤三：开心餐厅网页通过使用link标签引入CSS外部样式表，link标签一般放置在网页文档的head标签内，当前外部样式表的文件命名为style.css。通过href属性设置好文件路径后，网页文件就能够成功引入CSS外部样式表，代码如图所示。引入外部样式表与标签命名代码215CSS（cascadingstylesheet）中文称为层叠样式表，其文件扩展名为.css。CSS是用于增强或控制网页样式，并允许将样式信息与网页内容分离的一种标记性语言。引用样式表的目的是将“网页结构代码”和“网页样式风格代码”分离开，从而使网页设计者可以对网页布局进行更多的控制。利用样式表，可以将整个站点上的所有网页都指向某个CSS文件，然后设计者只需要修改CSS文件中的某一行，整个网站上对应的样式就都会随之发生变化。216一、CSS样式规则使用CSS对网页进行修饰，首先需要了解CSS样式规则，其基本语法格式如下。在上述样式规则中，选择器用于指定CSS样式作用的html对象，大括号{}内是对该对象设置具体样式。217初学者在书写CSS样式时，除了要遵循CSS样式规则外，还需要注意以下几个问题。1.CSS样式中的选择器严格区分大小写，属性和属性值不区分大小写，按照书写习惯一般将选择器、属性和属性值都采用小写的形式。2.如果属性值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的双引号。3.为了提高代码的可读性，书写CSS代码时，通常会加上CSS注释。4.在CSS代码中，空格是不被解析的，大括号以及分号前后的空格可有可无。因此，可以使用空格键、Tab键、回车键等对样式代码进行排版，以提高代码的可读性。218二、引入CSS样式表1.行内式行内式是通过标签的style属性设置元素的样式，其基本语法格式如下。语法中style是标签的属性，实际上任何html标签都拥有style属性，用来设置行内式，其中属性和属性值的书写规范与CSS样式规则相同。行内式只对其所在的标签及嵌套在其中的子标签起作用。219下面通过一个案例来演示使用行内式引入CSS样式的方法，如图所示。在图中，通过使用行内式CSS样式，分别设置两个p标签的字号和颜色。行内式代码220此时网页效果如图所示。通过上图可以看出，行内式也是通过标签的style属性来控制样式的，并没有做到结构与表现的分离，所以一般很少使用。通常，只有在样式规则较少且只在该元素上使用一次，或者需要临时修改某个样式规则时使用。行内式网页效果2212.内嵌式内嵌式是将CSS代码集中写在html文档的head头部标签中，并且用style标签定义，其基本语法格式如图所示。在该语法中，style标签一般位于head标签中的title标签之后，也可以把它放在html文档的任何地方。内嵌式代码222下面通过一个案例来演示内嵌式CSS样式的用法，如图所示。内嵌式代码223此时网页效果如图所示。内嵌式CSS样式只对其所在的html页面产生作用，因此，当网站是一个单网页时，使用内嵌式是个不错的选择。当网站是由多个网页组成时，不建议使用这种方式，因为此时采用内嵌式会使CSS代码产生大量冗余。内嵌式网页效果2243.外部式外部式是将所有的样式放在一个或多个以“CSS”为扩展名的外部样式表文件中，通过link标签将外部样式表文件引入到html文档中，其基本语法格式如下。225在该语法中，link标签需要放在头部标签head中，同时设置link标签的相关属性，具体如下。（1）href：定义外部样式表文件的URL。（2）type：定义所链接文档的类型，指定为“text/css”，表示链接的外部文件为CSS样式表。（3）rel：定义当前文档与被链接文档之间的关系，指定为“stylesheet”，表示被链接的文档是一个样式表文件。226三、CSS常用的选择器根据选择器类型不同，CSS选择器可分为基础选择器和复合选择器。基础选择器是由单个选择器组成的，包括标签选择器、类选择器、多类名选择器、id选择器和通配符选择器。而复合选择器可以更准确、更高效地选择目标元素（标签）。复合选择器是由两个或多个基础选择器通过不同的方式组合而成的。常用的复合选择器包括交集选择器、并集选择器、后代选择器、伪类选择器等。2271.标签选择器标签选择器是指用html标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下。该语法中，所有的html标签名都可以作为标签选择器，例如body、h1、p、strong等。用标签选择器定义的样式对页面中该类型的所有标签都产生效果。2282.类选择器类选择器使用“.”（英文点号）表示，后面紧跟类名，其基本语法格式如下。该语法中类名即为html元素的class属性值，大多数html元素都可以定义class属性。类选择器最大的优势是可以为网页元素对象定义单独或相同的样式。229下面通过一个案例来学习类选择器的应用，如图所示。类选择器代码230在上图中，对h2标题标签应用class="red"，通过类选择器设置文本颜色为红色。对第一个p段落标签应用class="green"，将其文本颜色设置为绿色。对第二个p段落标签应用class="font22"，通过类选择器设置文本字号为22像素。此时网页效果如图所示。类选择器效果2313.多类名选择器在多类名选择器中，一个标签的class值中可能包含多个类名，每个类名之间用空格分开。在使用场景中通常把多个标签相同的样式放在一个类中定义，独有的样式用其他类分开定义，使用时将标签的class值设置为多个类名组合来达到聚合不同样式集的目的，其基本语法格式如下。232这里的语法格式是在标签中的书写，在CSS中跟类选择器的写法相似。多类选择器代码233在上图中，对两个p段落标签分别进行了多个名字的命名，对类名red设置文本颜色为红色，此时两行文本变为红色。对类名font2设置上画线，对类名bold设置下画线，然后单独将类名为redbold的文本设置字体加粗。此时页面的显示效果如图所示。多类名选择器效果2344.id选择器id选择器使用“#”表示，后面紧跟id名，其基本语法格式如下。该语法中，id名即为html元素的id属性值，大多数html元素都可以定义id属性，网页元素的id值是唯一的，同一个网页中的id值不能重复。235下面通过一个案例来学习id选择器的使用，如图所示。id选择器代码2365.交集选择器交集选择器就是在两个标签相交的部分，也就是交集修改格式。交集选择器可以与id选择器和类选择器共同使用。其基本语法格式如下。6.并集选择器如果某些选择器定义的样式完全相同或部分相同，就可以利用并集选择器，并集选择器是各选择器通过英文逗号（,）连接而成的，任何形式的选择器都可以作为并集选择器的一部分。其基本语法格式如下。2377.通配符选择器通配符选择器用“*”号表示，它是作用范围最广的选择器，能匹配页面中所有元素。其基本语法格式如下。8.后代选择器后代选择器用于选择一个元素的后代元素，它使用空格分隔两个元素。其基本语法格式如下。238除了上述讲解到的标签选择器、类选择器、多类名选择器、id选择器、交集选择器、并集选择器、通配符选择器、后代选择器之外，后面的项目中还会使用到伪类选择器，待后面详细讲解。内嵌式选择器的优先级（1000）>id选择器的优先级（100）>类选择器和伪类选择器的优先级（10）>元素选择器的优先级（1）>通配符选择器的优先级（0），即内嵌式选择器优先级最高，其次是id选择器，以此类推，优先级最小的为通配符选择器。制作课程介绍网页任务2

239●1.熟练掌握CSS字体样式的设置。●2.熟练掌握CSS文本外观的设置。●3.熟练掌握CSS背景颜色的设置。●4.熟练掌握div标签和span标签的用法。240学习html时，可以使用文本标签及其属性控制文本的显示样式，但是这种方式比较烦琐且不利于代码的共享和移植。为此，CSS提供了相应的文本样式属性，可以更轻松方便地控制文本样式。241242本任务主要讲解如何通过CSS字体样式属性、CSS文本外观属性、CSS背景颜色属性对Android课程介绍网页进行美化。本任务制作的Android课程介绍网页使用了line-height属性对文本的行间距进行设置，使用了color属性对文本的颜色进行设置，使用了background-color属性对该网页中元素的背景颜色进行设置。Android课程介绍网页效果如图所示。Android课程介绍网页效果243步骤一：在项目下新建html文件，在body中定义整个页面的结构，一个div标签中包含两个p标签和两个子div标签，两个p标签中分别放入两个课程标题图片，两个div标签中分别放入两段课程文字内容，代码如图所示。244添加标签并输入内容245步骤二：给需要设置样式的标签设置id属性值和class属性值，注意取名字的时候尽量使用英文，且具有真实意义。代码如图所示。引入外部样式表和标签定义选择器246引入外部样式表和标签定义选择器247运行上图中的代码，效果如图所示。设置相关属性值248步骤三：在CSS文件中设置Android课程介绍网页中元素的样式属性，这里多处用到了后代选择器，后代选择器可以选择某元素下所有的子元素，在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。每个空格结合符可以解释为“……作为……的后代”，但是要求必须从右向左读选择器。代码如图所示。249设置样式属性250设置样式属性251步骤四：在head标签中使用“<linkhref="css/course.css"rel="stylesheet"type="text/css"/>”引入外部样式表，运行html代码，加入样式属性效果如图所示。Android课程介绍网页效果252一、CSS字体样式属性1.font-sizefont-size属性用于设置字号，该属性值可以使用相对长度单位，也可以使用绝对长度单位，具体见表。其中，相对长度单位比较常用，推荐使用像素单位px；绝对长度单位使用较少。253CSS长度单位及说明2542.font-familyfont-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如，将网页中所有段落文本的字体设置为宋体，可以使用图所示的CSS样式代码。设置字体255使用font-family设置字体时，需要注意以下几点。（1）各种字体之间必须使用英文状态下的逗号隔开。（2）中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前，如图所示。（3）如果字体名中包含空格、#、¥等符号，则该字体必须加英文状态下的单引号或双引号，如图所示。（4）尽量使用系统默认字体，以保证网页在任何用户的浏览器中都能正确显示。256设置字体书写方式加英文状态引号2573.font-weightfont-weight属性用于定义字体的粗细，其属性值及其描述见表。在实际工作中，常用的font-weight属性值为normal和bold。font-weight的属性值及其描述2584.font-variantfont-variant属性用于设置变体（字体变化），一般用于定义小型大写字母，仅对英文字符有效。其可用属性值如下。（1）normal：默认值，浏览器会显示标准的字体。（2）small-caps：浏览器会显示小型大写的字体，即所有的小写字母均会转换为大写。但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。2595.font-stylefont-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下。（1）normal：默认值，浏览器会显示标准的字体样式。（2）italic：浏览器会显示斜体的字体样式。（3）oblique：浏览器会显示倾斜的字体样式。其中italic和oblique都用于定义斜体，两者在显示效果上并没有本质区别，但实际工作中常使用italic。2606.fontfont属性用于对字体样式进行综合设置，其基本语法格式如下。使用font属性时，必须按上面语法格式中的顺序书写，各个属性以空格隔开，其应用示例如图所示。综合设置字体样式261下面使用font属性对字体样式进行综合设置，如图所示。font属性代码262在上图中定义了两个段落，同时使用font属性分别对它们进行相应的设置。其中，由于第二个段落省略了font-family属性，这时font属性不起作用。运行上图中的代码，效果如图所示。使用font属性综合设置字体样式263二、CSS文本外观属性1.colorcolor属性用于定义文本的颜色，其取值方式有如下三种。（1）预定义的颜色值，如red、green、blue等。（2）十六进制，如#FF0000、#FF6600、#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。（3）RGB代码，如红色可以表示为rgb（255，0，0）或rgb（100%，0%，0%）。2642.letter-spacingletter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的值，允许使用负值，默认值为normal。3.line-heightline-height属性用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px、相对值em和百分比%，实际工作中使用最多的是像素px和相对值em。2654.text-transformtext-transform属性用于转换英文字符的大小写，其可用属性值如下。（1）none：不转换（默认值）。（2）capitalize：首字母大写。（3）uppercase：全部字符转换为大写。（4）lowercase：全部字符转换为小写。2665.text-decorationtext-decoration属性用于设置文本的下画线、上画线、删除线等装饰效果，其可用属性值如下。（1）none：没有装饰（正常文本默认值）。（2）underline：下画线。（3）overline：上画线。（4）line-through：删除线。text-decoration后可以赋多个值，用于给文本添加多种显示效果，例如，若需要文字同时有下画线和删除线效果，就可以将underline和line-through同时赋给text-decoration。2676.text-aligntext-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下。（1）left：左对齐（默认值）。（2）right：右对齐。（3）center：居中对齐。2687.text-indenttext-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值如像素值（px）、字符宽度的倍数（em）、相对于浏览器窗口宽度的百分比（%），允许使用负值，建议使用em作为设置单位。269下面来学习text-indent属性的应用，如图所示。首行缩进代码270首行缩进代码271三、CSS背景颜色属性在CSS中，网页元素的背景颜色使用background-color属性来设置，其属性值与文本颜色的取值一样，可使用预定义的颜色值、十六进制#RRGGBB或RGB代码rgb（r,g,b）。background-color的默认值为transparent，即背景透明，这时子