CSS应用示例

第3章CSS基础本章学习目标  CSS概念、CSS语法规则  CSS选择器  CSS常用属性与示例调试  CSS应用示例本章首先向读者介绍CSS的概念在页面中引用CSS的方法以及CSS的语法规则，紧接着介绍CSS选择器的相关知识以及常用的CSS属性与示例调试，最后讲解三个简单的CSS应用实例。 3.1CSS概述 CSS(cascading style sheets)是层叠样式表。CSS2规范于1998年2月通过W3C 的审核与推荐。CSS并不是专为XHTML 所设计的，还可以被其他标记语言拿来制作排版样本，如HTML、XML文件都可以用CSS来美化页面的设计。学会了CSS，在HTML、XHTML和XML文件中都可以使用。CSS的功能在于为HTML元素设置样式，构建布局合理、样式美观的页面。 3.1.1CSS简介 1. CSS的产生缘由 HTML标签原本用于定义文档内容，但是浏览器默认的显示样式不美观，不能够满足人们需求。Netscape和IE意图通过不断增加用于定义显示格式的标签和属性来解决显示样式的问题，例如、等格式标签及align、color等属性，结果仍不能满足美观页面的设计需要，反而使得混杂着文档格式标签的页面结构越发复杂，难以维护。为此，W3C在HTML之外创造出了CSS，解决了上述问题。 W3C在HTML4之外创造出了CSS，并废弃了许多用于控制显示格式的标签和属性。标签和属性被废弃就意味着在未来版本的HTML和XHTML中将不再支持这些标签和属性，所以在网页设计中应尽量避免使用这些被废弃的标签和属性。表3.1列出了一些应避免使用的标签和属性，这些标签和属性的功能将由专门应用于文档表现层的CSS替代。比如例230中虽然起到作用了，但不建议使用，推荐使用CSS方法替代。表3.1一些应避免使用的HTML标签和属性类型标签或属性描述标签定义居中的文本内容标签、定义HTML字体标签、定义删除线文本标签定义下画线文本属性align定义文本的对齐方式属性bgcolor定义背景颜色 2. 引用CSS的大体步骤引用CSS的步骤如下所示。 (1) 查看没有使用CSS前元素的默认方式。 (2) 理解要达到的效果，选择合适的CSS属性，必要时修改HTML代码。 (3) 选择恰当的引入方式，检验效果，并考虑设置CSS后对其他相关元素的影响，限定CSS规则的影响范围。CSS的设计如果仅用于一个页面较容易；如果一个CSS文件要在网站的100个页面中使用，又要这100个页面中的HTML相关元素显示效果互不影响就很难了。 0 0 3. CSS语法 CSS语法的基本格式如下，属性和属性值之间以冒号隔开，每条样式规则都要以分号结束：属性1:属性值1; 属性2:属性值2; 这里要特别强调，冒号和分号必须是英文输入法下输入的；属性名是约定好的，不能随意书写，多或者少一个字母是不允许的，一般都是小写的；属性值也是有取值范围的。CSS的属性值没有加双引号，在CSS前期学习中，书写错误会影响学习的进度。 3.1.2CSS的引用方式及特性 CSS的引用方式有内联样式、内部样式、外部样式三种，其CSS语法表现形式略有不同，具体如下。内联样式： style= "属性名1: 属性值1; 属性名2: 属性值2;" 内部样式和外部样式：选择器1{/*选择页面中的元素*/ 属性名1: 属性值1;/*一条样式规则 */ 属性名2: 属性值2;/*又一条样式规则 */ } 其中，选择器用于指定选择哪个或者哪些HTML元素，选择器选中的HTML元素使用花括号中的样式规则； “/*”和“*/”之间的内容是CSS注释。下面通过具体示例进行讲解。 1. 内联样式内联样式又称为行内样式，它定义在HTML元素的开始标签里。使用style属性设置样式规则，并且样式规则仅对当前的HTML元素有效果。【例31】CSS内联样式示例。 01 02 03 04CSS应用示例 05 06 07 08
猴子
09
马
10
牛
11落叶松 12白杨树 13菊花 14荷花 15 16 代码第8行对段落“猴子”设置了样式，效果如图3.1所示。这里color:red表示设置颜色为红色，fontsize:25px表示设置字体大小为25px，textalign:center表示居中对齐。从图中可以看出，仅段落“猴子”为居中、红色，字体比其他文字大，其他文本呈现为默认显示样式。图3.1CSS的内联样式 2. 内部样式内部样式表是指将页面中需要应用的所有样式规则集中定义在页面头部分。使用之间定义样式规则。【例32】CSS内部样式示例。 01 02 03 04CSS内部样式示例 05 06 12 13 14
猴子
15
马
16
牛
17落叶松 18白杨树 19菊花 20荷花 21 22 代码第6～11行的 13 14 15
猴子
16
马
17
牛
18落叶松 19白杨树 20菊花 21荷花 22 23 ch3_03.css文件内容如下： 01p { 02color: blue; 03font-size: 12px; } 04span { 05font-size: 12px; 06color: red; } 例33运行如图3.4所示。ch3_03.html文件代码第6行使用标签引入的外部样式表ch3_03.css，其中href属性指定了要引入的样式表文件的路径。ch3_03.css文件代码第3行fontsize: 12px，ch3_03.html文件代码第9行fontsize: 20px，都设置字体大小，从运行效果看是fontsize: 20px在起作用。试着修改ch3_03.html，把代码第6行移动到代码第12行后，再观察一下运行结果，会发现fontsize:12px在起作用。所以在引入多个CSS文件时，我们要注意CSS文件的先后顺序。图3.4外部样式 4. CSS的特性 CSS有以下两种特性。 (1) 传递(继承性)原则。父元素设置的样式规则会传递给子元素。 (2) 就近原则。如果没有为HTML元素定义任何样式，那么元素将按照浏览器的默认设置显示，如第2章中所有示例都是按照浏览器的缺省设置显示的。事实上，允许同时以上述几种方式规定样式信息。也就是说，样式可以写在单个的HTML元素内，也可以规定在HTML的头部分，或者定义于一个外部的CSS文件中。如果同一个 HTML元素同时通过上述多种方式定义了样式规则，例如在文件ch3_03.html中，我们对段落“猴子”在内联样式中设置了fontsize: 25px，在内部样式中设置了fontsize: 20px，在外部样式ch3_03.css中设置了fontsize: 12px，那么最终呈现在页面上的效果到底是使用的哪一条规则呢？这些层叠的规则一般将会按照就近原则，按从上到下的顺序，离元素最近的起作用。一般情况下，我们要避免在多处对相同的属性名设置不同的属性值，这也是CSS设计的一个难点，需要通过文档来约定。使用Firefox浏览器，按F12键调试可以查看调试CSS，选中段落“猴子”，其调试如图3.5所示，画横线的代码表示该CSS没有起作用。图3.5CSS调试 3.2CSS定义选择器在CSS语法中，“选择器”指明了花括号中所定义的样式规则的作用对象，也就是样式规则对页面中的哪些元素起作用。下面介绍一些常用的CSS选择器。 3.2.1标签选择器标签选择器是对HTML元素标签应用相应的CSS样式。假设对标签
设置CSS，则标签选择器的写法为： p {/*选择页面中所有标签
的元素*/ 属性名1: 属性值1; /*一条样式规则 */ 属性名2: 属性值2; /*又一条样式规则 */ } 在例32中，CSS内部样式采用标签选择器对
设置了样式，具体如下： 07p { 08font-size:20px; 09text-align:center; 10} 其作用范围是所有的标签
。从图3.2可以看出段落“马”和段落“牛”都按标签
选择器设置的CSS显示，段落“猴子”因为设置了内联样式，覆盖了标签
选择器的显示效果。 3.2.2id选择器我们可以对HTML元素定义一个id属性，然后根据属性id选择元素，id属性值就是这个元素的唯一标识符。不允许在一个页面中对多个HTML元素定义相同的id属性值。设某标签元素id="demo"，则其属性值为demo，其id选择器的写法为： #demo {　　/*选择页面中id="demo"的元素*/ 属性名1: 属性值1; 　　/*一条样式规则 */ 属性名2: 属性值2; 　　/*又一条样式规则 */ } 复制ch3_01.html，重命名为ch3_04.html，其内容见例34。代码第14行设置了 id="houzi"来唯一标识段落“猴子”；代码第6～11行为CSS内部样式；第7行“#houzi”定义了id选择器，具体CSS规则不再赘述。其运行效果见图3.1，建议使用id选择器替换内联样式，而不要在标签中设置style属性。【例34】id选择器示例。 01 02 03 04 id选择器示例 05 06 12 13 14
猴子
15
马
16
牛
17落叶松 18白杨树 19菊花 20荷花 21 22 3.2.3class选择器与id属性一样，HTML中的元素可以定义一个class属性。不同的是，多个不同的HTML元素可以定义相同的class属性值。class属性值相同的元素可以由CSS类选择器选取并定义相同的样式规则。设某标签元素class="demo"，则其属性值为demo，其class选择器的写法为： .demo {/*选择页面中class="demo"的元素*/ 属性名1: 属性值1; 　　/*一条样式规则 */ 属性名2: 属性值2; 　　/*又一条样式规则 */ } 假如我们的目标是设置落叶松、白杨树的字体大小为25px，则可以使用class="shu"，把“落叶松”和“白杨树”归到shu类，并进一步设置CSS规则。复制ch3_04.html，重命名为ch3_05.html，其内容见例35。代码第18、19行设置了 class="shu"来标识“落叶松”和“白杨树”，代码第11、12行“.shu”定义了class选择器，具体CSS规则不再赘述，其运行效果见图3.6，这里class选择器选中了两个元素，另外两个元素“菊花”和“荷花”不受影响。class选择器还可以和标签选择器结合使用，用于更精确地选择元素。例如选择器“span.shu”表示选择所有class属性值为shu的元素。【例35】class选择器示例。 01 02 03 04 class选择器示例 05 06 14 15 16
猴子
17
马
18
牛
19落叶松 20白杨树 21菊花 22荷花 23 24 图3.6class选择器 3.2.4后代选择器后代选择器也称为包含选择器，用来选择特定元素或元素组的后代。后代选择器用两个常用选择器中间加一个空格表示，其中前面的常用选择器用于选择父元素，后面的常用选择器用于选择子元素，样式最终会应用于选定的子元素。一般可结合DOM来表示后代选择器。复制ch3_05.html，重命名为ch3_06.html，其内容见例36。在Dreamweaver CC中打开，ch3_06.html对应的DOM见图3.7。结合代码第7行，可知body #houzi的body为父标签，#houzi是在body的子标签层选择的。body span 是典型的写法，是使用Dreamweaver CC设计CSS时的默认写法，表示选择body下的所有span标签。因为body是默认的父标签，所以经常省略。需要特别注意的是父子标签之间有空格，书写时容易出错。例36的运行效果见图3.6。【例36】后代选择器示例。 01 02 03 04 class选择器示例 05 06 15 16 17
猴子
18
马
19
牛
20落叶松 21白杨树 22菊花 23荷花 24 25 图3.7ch3_06.html对应的 DOM 3.2.5分组选择器当几种元素样式属性相同时，可以共同调用一个声明，元素之间用逗号分隔。 ch3_03.css内容如下： 01p { 02color: blue; 03font-size: 12px;} 04span { 05font-size: 12px; 06color: red; } 可以改写为： 01p{ 02color: blue;} 03p,span{font-size: 12px;} 04span{ 05color: red;} 把fontsize: 12px放在“p，span”选择器中，表示
和都使用该样式规则。要注意与后代选择器的区分，用逗号分隔的是分组选择器，表示并列；用空格分隔的是后代选择器，表示父子关系，会进一步限定选择元素的范围。 3.2.6通用选择器通用选择器为“*”，表示选择页面中所有元素。例如： * {/*选择页面中所有元素*/ font-size: 12px; /*设置字体大小为12px */ } 表示选择页面中所有元素，将字体大小都设置为12px。通用选择器“*”的用法一般是设置盒模型的margin、padding属性，以避开不同浏览器的默认值不同，提升显示的一致性。其写法如下： * {/*选择页面中所有元素*/ margin:0px;padding:0px; } 结合DOM图，通用选择器“*”要放在其他选择器的上面，在CSS文件中一般放在最前面。打开ch3_06_bak.html文件，可以观看通用选择器“*”的效果。 3.2.7伪类选择器有时候需要用文档以外的其他条件来应用元素的样式，例如鼠标悬停、鼠标经过某个HTML元素等，这时我们就需要用到伪类选择器。超链接伪类选择器的语法如下： a:link {…} /*选择未被访问的超链接 */ a:visited {…} 　　/*选择已访问的超链接 */ a:hover {…} 　　/*当鼠标移动到超链接上 */ a:active {…} 　　/*已选定的超链接 */ 以上代码分别定义了未被访问的超链接样式、已访问过的超链接样式、鼠标移动到超链接上的样式和选定的超链接样式。之所以称之为伪类，就是说它不是一个真实的类。正常的类是以点开始，后边跟一个类属性值；而它是以a开始后边跟个冒号，再跟状态限定字符。例如在“a:hover”选择器中定义的样式，只有当鼠标移动到该链接上时它才生效，而“a:visited”只对已访问过的超链接生效。使用伪类选择器可以让用户体验大大提高，例如我们可以设置鼠标移动到超链接上时改变颜色或字体大小等属性来告知用户这个是可以单击的。例37设置了鼠标移动到超链接上的样式，在Firefox浏览器中打开文件ch3_07.html，按F12键调试，单击椭圆处的“:hov”切换到伪类选择器调试，页面效果如图3.8所示。当鼠标放在超链接上时，超链接文本的样式发生了相应的变化。【例37】超链接伪类选择器示例。 01 02 03 04 05伪类选择器示例 06 12 13 14百度 15天津理工大学中环信息学院 16 17 图3.8伪类选择器调试读者可以参考https://www.w3school.com.cn/css/css_pseudo_classes.asp了解其他的伪类选择器，例如(:focus)。有些实现也可以借助JavaScript的事件来完成。 3.2.8高级选择器下面介绍的一些选择器在某些低版本的浏览器中可能无效，因为浏览器目前对这些选择器的支持还不太完善，所以网站中功能很重要的元素应该避免使用这些高级选择器。 1. 子选择器子选择器与后代选择器不同，子选择器仅指它的直接后代，或者你可以理解为作用于子元素的直接后代。而后代选择器作用于所有后代元素。后代选择器通过空格来连接两个选择器，而子选择器通过“>”连接两个选择器，即“选择器> 选择器”。读者可以搜索“子选择器”来了解更多的内容。 2. 相邻同胞选择器除了上面的子选择器与后代选择器，有时我们可能还希望找到相邻的两个元素当中的下一个。读者可以搜索“相邻同胞选择器”来了解更多的内容。例如，一个标题h1元素后面紧跟了两个段落元素，想选择位于h1元素之后的第一个段落元素，并对它应用样式，此时就可以使用相邻同胞选择器，代码如下： h1 + p{/*选择紧邻h1元素的p元素*/ font-weight: bold;/*设置字体加粗显示*/ } 3. 属性选择器属性选择器根据元素的属性来匹配选择元素。例如通过判断HTML标签的某个属性是否存在，或者通过判断HTML标签的某个属性是否和某个值相等来选择元素。读者可以搜索“属性选择器”来了解更多的内容。例如，选择具有title属性的超链接和选择title属性值为pic的超链接，代码如下： a［title］ {…}/*选择具有title属性的超链接 */ a［title = "pic"］ {…}/*选择title属性值为"pic"的超链接 */ 3.3CSS的字体属性学习CSS的属性需要查看CSS参考手册，读者可以参考网页http://css.doyoe.com/和https://www.w3school.com.cn/css/css_reference.asp来在线了解有哪些属性名称及属性值的范围，并学习具体案例。这里仅给出常见的属性及其使用方法。 3.3.1字体属性名称及属性值 1. 字体属性概述我们想要学习了解图3.9所示的文字效果是如何形成的，就需要学习字体属性。图3.9CSS的字体属性字体对应font。CSS中常用的字体属性及部分取值如下。 1) 字体属性fontfamily 字体属性fontfamily用于设置文本显示时使用的字体名称，可设置多个字体名称，按优先顺序排列，以逗号隔开。 (1) 语法： fontfamily: 字体名称1, 字体名称2, …; body { font-family: helvetica,verdana, sans-serif; } (2) 属性取值说明。如果字体名称包含空格或中文，则应使用引号括起。 (3) 设置的字体浏览器未必支持，在不影响效果的情况下，要选常见的字体。 2) 字体大小属性fontsize 字体大小属性fontsize用于设置文本字体大小。 (1) 语法： fontsize: xxsmall | xsmall | small | medium | large | xlarge | xxlarge | 长度值 | 百分比; (2) 属性取值说明 ① xxsmall等固定的值：类比于衣服的尺码。 ② 长度值：不允许出现负值，长度常用的单位是px(像素)。 ③ 百分比：百分比取值是基于父对象中字体的尺寸，不允许为负值。 3) 字体样式属性fontstyle 字体样式属性fontstyle用于设置文本显示样式。 (1) 语法： fontstyle: normal | italic; (2) 属性取值说明。 ① normal：用于指定文本字体样式为正常的字体，为默认值。 ② italic：用于指定文本字体样式为斜体。 4) 字体粗细属性fontweight 字体粗细属性fontweight用于设置文本的粗细程度。 (1) 语法： fontweight： normal | bold | bolder | lighter | 整数值(100 | 200 | ... | 900); (2) 属性取值说明： ① normal：表示正常的字体，相当于数字值400。 ② bold：表示粗体，相当于数字值700。 ③ bolder：用于定义比继承值更重的值。 ④ lighter：用于定义比继承值更轻的值。 ⑤ 整数值：用数字表示字体粗细，取值为100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900。 5) 属性fontvariant 属性fontvariant用于设置文本是否为小型的大写字母。 (1) 语法： fontweight: normal |smallcaps; (2) 属性取值说明。 ① normal：表示正常的字体。 ② smallcaps：表示小型的大写字母字体。其他更多的文本类属性请查阅CSS手册。 2. 字体样式示例假设ch3_08.html与demo.css同时存放在ch3_08目录下，其样式示例见例38。【例38】CSS字体样式示例。 ch3_08.html内容如下： 01 02 03 04 05 06CSS字体属性 07 08 09
10
标题：千年古镇杨柳青简介
11
biaoti:qian nian gu zhen yang liu qing jian jie
12
杨柳青镇历史沉积久远，文化底蕴深厚。明清时期，是运河漕运重要枢纽，成为中国北方商贸流通、文化交流集散地。
13
最集中体现古镇传统风格的是南运河民俗文化区。古镇因河而兴，御河(京杭大运河杨柳青河段)给古镇带来了繁荣的商业，孕育了传统文化和民间艺术，是古镇的魂。
14
15 16 demo.css内容如下： 01* { margin:0px;} 02h3 {font-variant:small-caps;} 03#p1{ 04font-family:"隶书","宋体", sans-serif; 05font-size:50%;} 06#p2{ 07font-size:20px; 08font-style:italic; 09font-weight:bold; } ch3_08.html文件代码第5行引入了外部样式表demo.css，ch3_08.html第11行与demo.css第2行通过标签选择器h3关联起来，ch3_08.html第12行与demo.css第3行通过id选择器“#p1”关联起来。在Firefox浏览器中打开ch3_08.html，按F12键，选中第一个段落
，见图3.9。注意图中椭圆处的方框，这里没有选中fontsize:50%，通过单击方框，可以改变选中状态，通过变化我们能加深对该属性的理解。也可在Firefox浏览器调试窗口增删改查属性及取值，观看属性的作用。 3.3.2使用Dreamweaver CC编辑字体属性使用Dreamweaver CC编辑字体属性时，首先复制文件夹ch3_08，重命名为ch3_08_bak，重命名ch3_08.html为ch3_08_bak.html；修改ch3_08_bak.html，删除第5行；删除demo.css。步骤如下。 (1) 打开Dreamweaver CC，打开ch3_08_bak.html，单击“拆分”，上面为设计区，下面为代码区，见图3.10。图3.10CSS设计器创建内部样式 (2) 单击椭圆处的“CSS设计器”，打开CSS设计面板；单击“源”处的按钮，选择“在页面中定义”，在页面中添加内部样式；此时会出现“源 14 15 16 19 22 25 26 例321的页面运行效果如图3.30所示。代码第6～8行引入了相应的CSS、JavaScript文件。 class="btn btndefault btnlg"设置了3个类属性值，通过它们来引入Bootstrap已经为我们设定好的CSS样式，注意这里不是CSS的后代选择器。class="glyphicon glyphiconuser"设置了两个类属性值，来引入字形图标的CSS样式。网页https://www.runoob.com/try/demo_source/bootstrap3glyphicons.htm给出了字形图标对应的class属性值，在需要使用字形图标的HTML标签设置对应的class属性值即可。图3.30使用字形图标习题3 一、简答题 1. 什么是CSS？页面中如何引用CSS文件？ 2. 为什么要使用CSS样式文件？ 3. CSS样式的三种调用方式有什么不同？优先级有什么不同？ 4. CSS样式的语法结构是什么？如何定义一条样式规则？ 5. 如何选择页面中不同的HTML元素?CSS都有哪些选择器？二、操作题 1. 使用CSS设计一个美观的文章显示页面。 2. 使用CSS实现一个二级导航菜单页面。