《商务网页设计与制作 (21).pdf》由会员分享，可在线阅读，更多相关《商务网页设计与制作 (21).pdf（6页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、CSS（Cascading Style Sheets），即层叠样式表，是一种描述HTML文档样式的语言，描述应该如何显示HTML元素，是为了解决结构与表现分离的问题。CSS是开放网络的核心语言之一，用以实现跨浏览器的标准化显示。样式可以保存在外部的.css文件中，同时控制多个网页的布局外观，节省了大量工作。随着现代网络技术的发展，CSS标准也经历了多次更新，目前最新的版本是CSS3。丆CSS诳泛丆CSS诳泛CSS规则由两个主要的部分构成：选择器，以及一条或多条声明：1.选择器指向需要设置样式的HTML元素。2.在选择器后面的一对大括号（）内部定义一个或多个声明。3.每条声明都包含一个属性和一个
2、值，以冒号（:）分隔，以分号（;）结束，不同的CSS属性对应不同的合法值。1CSS桂引匜1CSS桂引匜合理的使用空格缩进及换行，以增加CSS代码的可读性。例如将之前的规则改写为以下格式：h1 color:blue;font-size:20px;1.拥有多条声明时，可将每个声明单独放在一行。2.只有一条声明时，可将声明与选择器放在一行。3.冒号后可以添加空格，以区分属性和值。4.值与单位之间不能有空格，例如20px不可以写成20 px。2CSS泮釐2CSS泮釐CSS注释用于为代码添加额外的解释，或者用于阻止浏览器解析特定区域内的CSS代码。其语法格式为/*注释的内容*/，示例如下：1/*这是一个
3、单行注释 */*这是一个多行注释*/h1 color:blue;/*注释可以写在样式表中任意允许空格的位置 */font-size:20px;/*下面的注释用于禁用特定的样式 */*h1 color:blue;font-size:20px;*/互CSS侅甮互CSS侅甮在HTML文档中使用CSS有3种方式：1夜郮栽引衮1夜郮栽引衮外部样式表是指将CSS编写在扩展名为.css的样式表文件中，并在HTML文档的元素部分使用元素引用。如下所示：商务网页设计与制作在使用元素引用样式表文件时，需要定义其rel属性为stylesheet，href属性定义被链接文件的路径。使用外部样式表，可以将样式表文件链接
4、到多个HTML页面，从而只需通过一个样式表文件即可改变整个网站的外观，是最常见和最高效的方法。2冋郮栽引衮2冋郮栽引衮内部样式表是指将CSS编写在HTML文档的元素部分内的元素中，仅对当前HTML页面有效。如下所示：商务网页设计与制作 p color:red;23冋聚栽引3冋聚栽引内联样式是指将CSS编写在HTML元素的style属性之中，仅对其应用的元素有效。如下所示：我的第一个网页内联样式在正式开发中不被推荐使用，因为不仅难以维护（无法批量更改样式），而且将文档的结构和表现混在一起，不符合Web标准中的结构、表现和行为相分离。丏CSS透拯噮丏CSS透拯噮每个CSS规则都以一个选择器或一组选
5、择器为开始，去告诉浏览器这些规则应该应用到哪些元素上。通常CSS选择器分为5类：1.简单选择器（根据名称、id、类来选取元素）2.组合器选择器（根据元素之间的关系来选取元素）3.伪类选择器（根据特定状态选取元素）4.伪元素选择器（选取元素的一部分并设置其样式）5.属性选择器（根据属性或属性值来选取元素）下面开始学习一些最基本的CSS选择器。1光紦透拯噮1光紦透拯噮元素选择器又称为类型选择器，根据元素名称来选择元素。p color:red;2id透拯噮2id透拯噮id选择器使用HTML元素的id属性中的值来选择元素。?id用于定义唯一的标识符，在整个HTML文档中它的值必须是唯一的。?每个元素只
6、能有一个id属性。?id属性值必须由字母开头。要选择具有特定id值的元素，使用“井号（#）+该元素的id值”。HTML我的第一个网页CSS#info color:red;3粁透拯噮3粁透拯噮3类选择器使用HTML元素的类（class）属性中的值来选择元素。?类属性值可以在多个元素中使用。?每个元素可以有多个类属性值，之间用空格分隔。?类属性值不能以数字开头。要选择具有特定class值的元素，使用“点号（.）+该元素的class值”。HTML商务网页设计与制作我的第一个网页CSS.info color:red;.text-center text-align:center;4造甮透拯噮4造甮透拯噮
7、通用选择器使用星号（*）选择所有的HTML元素。*color:red;5刌绊透拯噮5刌绊透拯噮分组选择器选取所有具有相同样式定义的HTML元素。对选择器进行分组，使用逗号来分隔每个选择器。p color:red;.info color:red;/*对选择器进行分组，可以缩减代码量*/p,.info color:red;6吔仩透拯噮6吔仩透拯噮后代选择器又称为包含选择器，使用空格分隔两个元素，作用于指定元素下的所有后代元素。HTML 子元素 1 子元素 2 孙元素 1 孙元素 2 CSS/*使用后代选择器，类属性值为parent的元素下的所有后代元素，字体样式都为斜体。*/.parent p f
8、ont-style:italic;47孖仩透拯噮7孖仩透拯噮子代选择器使用大于号（）分隔两个元素，大于号两边可以有空格，作用于指定元素下的直接后代元素。CSS/*使用子代选择器，类属性值为parent的元素下的直接后代元素，字体样式为斜体。*/.parent p font-style:italic;囡CSS牿怭囡CSS牿怭1屈另怭1屈另怭层叠是CSS的一个基本特性，定义了如何合并来自多个源的属性值的算法，在CSS中处于核心地位，CSS的全称“层叠样式表”正是强调了这一点。简单而言，CSS规则的顺序很重要：当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。/*元素的文本颜色最
9、终显示为蓝色*/h1 color:red;h1 color:blue;2续抅怭2续抅怭继承是一种规则，允许样式不仅应用于特定的HTML元素，而且还可以应用于其后代元素，但并不是所有设置在父元素上的CSS属性都可以被子元素继承的。HTML我的第一个网页CSSp color:red;这个示例中，如果在不单独设置元素字体颜色的情况下，元素字体颜色将继承父元素的字体颜色，同样是红色。3伞兎纭3伞兎纭优先级是基于不同种类选择器组成的匹配规则。浏览器通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。1.1.堀朲透拯噮皊伞兎纭堀朲透拯噮皊伞兎纭id选择器 类选择器 元素选择器。HT
10、ML商务网页设计与制作CSS/*因为id选择器的优先级最高，元素的文本颜色最终显示为红色*/#h1 color:red;.h1 color:green;h1 color:blue;2.!important2.!important觊刟觊刟5当在一个样式声明中使用一个!important规则时，此声明将覆盖任何其他声明。!important与优先级无关，与最终的结果直接相关。/*元素的文本颜色最终显示为蓝色*/#h1 color:red;.h1 color:green;h1 color:blue!important;3.3.夠釓栽引伞兎纭夠釓栽引伞兎纭当某些属性在不同的样式表中被同样的选择器定义时，一般而言，其优先级如下：内联样式（HTML元素内）内部样式表（HTML文档内）外部样式表（HTML文档链接的.css文件）浏览器默认样式如果外部样式表放在内部样式表的之后，则外部样式表将覆盖内部样式表。6