下载掌阅APP，畅读海量书库
立即打开
任务分析是网页开发的前提与基础，任务分析重点要解决“做什么”，分成哪些模块，需要哪些技能点。图2-1为主题页面效果。
图2-1 主题页面效果
（网页素材来源：1.中国日报网；2 .“学习强国”网）
1.准备工作与页面布局
（1）准备工作
在HBuilderX中建立项目，命名为project -2，将图片素材拷贝到项目的img文件夹中。
具体步骤：
打开HBuilderX软件，新建项目。常用的方法有两种：一是利用“文件”菜单的“新建”选项中的“项目”菜单；二是在主界面中心的快捷菜单中选“新建项目”，如图2 -2所示。
图2-2 新建项目（1）
在弹出的对话框中，选择“普通项目”，输入项目名称“project-2”，自定义存放的路径，在“选择模板”中选择“基本HTML项目”，点击“创建”按钮即可，如图2-3所示。
图2-3 新建项目（2）
在左侧的任务窗格中就能看到创建好的项目文件了，如图2-4所示。
图2-4 新建项目（3）
然后将网页图片素材拷贝到“img”文件夹中，双击“index．html”，在打开的编码区域准备书写网页代码，如图2-5所示。
图2-5 拷贝图片素材
（2）页面布局分析
根据网页效果图，可以将“厉害了，我的国”主题页从上到下分为5个模块——头部模块、标题模块、三军风采模块、兵器大观模块和页脚模块，如图2-6所示。
图2-6 页面布局分析
2.知识准备
本次主题网页的训练重点是掌握CSS样式规则，掌握CSS复合选择器，可以快捷选择页面中的元素，理解CSS层叠性、继承性与优先级，学会高效控制网页元素。
（1）CSS样式规则
选择器｛属性1：属性值1；属性2：属性值2；属性3：属性值3；｝
在上面的样式规则中，选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。其中，属性和属性值以“键值对”的形式出现，用英文“：”连接，多个“键值对”之间用英文“；”进行区分。图2-7为CSS样式表基本规则。
图2-7 CSS样式表基本规则
（2）HTML页面中引入CSS样式表的方式
•行内式：也称为内联样式，直接在HTML标签中添加style属性来定义元素的样式。
语法格式：
＜标记名style=＂ 属性1：属性值1；属性2：属性值2；属性3：属性值3； ＂＞内容＜／标记名＞
例1：
•内嵌式：将CSS代码集中写在HTML文档的＜head＞头部标记中，并且用＜style＞标记定义，之后在整个HTML文件中直接调用该样式的标记。
语法格式：
例2：
•链入式
将所有的样式放在一个或多个以．css为扩展名的外部样式表文件中，通过＜link／＞标记将外部样式表文件链接到HTML文档中。
语法格式：
链入式需要先建立css文件，在文件中书写css样式代码，再在HTML文档中链入css文件。在HBuilderX中的操作步骤如图2-8所示。
图2-8 新建css文件1
在弹出的对话框中为css文件命名，如图2-9所示。
图2-9 新建css文件2
在css文件中编写css样式代码，保存css文件，如图2-10所示。
图2-10 新建css文件3
在HTML文档中链入css文件。
例3：
（3）CSS基础选择器
要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器。
•标记选择器
标记选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS样式。
语法格式：
标记名｛属性1：属性值1；属性2：属性值2；属性3：属性值3；｝
例4：
在这个例子中，使用了标记选择器p，定义css样式为颜色并设为蓝色，这让正文中所有＜p＞标记作用的文字变成蓝色。
•类选择器
类选择器使用“．”（英文点号）进行标识，后面紧跟类名。
语法格式：
．类名｛属性1：属性值1；属性2：属性值2；属性3：属性值3；｝
例5：
在这个例子中，使用了类选择器．p1，定义css样式为颜色并设为红色，这让正文中所有引用了p1选择器的标记作用的文字变成红色。
•id选择器
id选择器使用“＃”进行标识，后面紧跟id名。
语法格式：
＃id名｛属性1：属性值1；属性2：属性值2；属性3：属性值3；｝
例6：
在这个例子中，使用了id选择器．p1，定义css样式为颜色并设为灰色，这让正文中所有引用了p2选择器的标记作用的文字变成灰色。
•通配符选择器
通配符选择器用“∗”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。
语法格式：
∗｛属性1：属性值1；属性2：属性值2；属性3：属性值3；｝
例7：
在这个例子中，使用了通配符选择器∗，定义css样式为颜色并设为绿色，这让正文中所有文字标记作用的文字变成绿色。
（4）CSS控制文本样式常用属性
•font-size属性用于设置字号，最常用的单位为px，也可以用em、pt等单位。
例8：
•font-family属性用于设置字体，定义几种不同的字体，并用逗号隔开，当浏览器找不到字体一时，将会用字体二代替，以此类推。当浏览器完全找不到字体时，则使用默认字体（宋体）。
例9：
•font-weight属性用于定义字体的粗细，常见取值有：normal（默认值）、bold（加粗）、bolder（更粗）、lighter（更细）、100 ～ 900（100的整数倍）。其中400等同于normal，700等同于bold，值越大字体越粗。
例10：
•font-style属性用于定义字体风格。常见取值有：normal（默认值，浏览器显示一个标准的字体样式）、italic（浏览器会显示斜体的字体样式）、oblique（浏览器会显示倾斜的字体样式）。
例11：
•font属性用于对字体样式进行综合设置，可设置的属性是（按顺序）：＂ font-style font-variant font-weight font-size/line-height font-family＂。font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。注意：line - height属性设置行与行之间的空间。
例12：
•color属性用于定义文本的颜色，其取值方式为：有颜色英文单词、十六进制、RGB代码。
例13：
•letter-spacing属性用于定义字间距。字间距是指字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。
例14：
•line-height属性用于设置行间距。行间距是指行与行之间的距离，即字符的垂直间距，一般称为行高。常用的属性值单位有三种，分别为像素（px）、相对值（em）和百分比（％），实际工作中使用最多的是像素（px）。
例15：
•text-align属性用于设置文本内容水平对齐，相当于HTML中的align对齐属性。常用属性值有left（左对齐）、right（右对齐）、center（居中对齐）。
例16：
•text-decoration属性用于设置文本的下划线、上划线、删除线等装饰效果。常用取值有：none（默认值，没有装饰）、underline（下划线）、overline（上划线）、line-through（删除线）。
例17：
•text-indent属性用于设置首行文本的缩进。其属性值可为不同单位的数值、字符宽度的倍数（em），或相对于浏览器窗口宽度的百分比（％）。允许使用负值，建议使用em作为设置单位。
例18：
•background-color属性，用于定义背景颜色，取值为有颜色英文关键字、RGB值。transparent表示透明，也是浏览器的默认值。
例19：
（5）CSS常用复合选择器
•标记指定选择器
标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格，如h3. special或p＃one。
例20：
思考：仔细观察正文三段文字颜色，想想为什么是这个颜色？
•后代选择器
后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。
例21：
•并集选择器
并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器都可以作为并集选择器的一部分。若某些选择器定义的样式完全或部分相同，可利用并集选择器为它们定义相同的样式。
例22：
（6）CSS高级特性
层叠性和继承性是CSS的基本概念，深入理解和熟练运用它们可以帮助开发者更好地掌握CSS编程。
•层叠性（Cascade）
层叠性指的是当多个选择器同时应用于同一个元素时，CSS规定了一套层叠规则来确定哪个样式优先级更高，从而决定最终应用于元素的样式。
层叠规则包括选择器的特殊性（specificity）、重要性（！important）和源顺序（source order）等因素。通过计算这些因素，CSS会按照一定的优先级顺序应用样式，最终得到应用于元素的样式。
一般情况下，特殊性优先级最高，其次是重要性，最后是源顺序。但在实际应用中，应当尽量避免过度使用重要性，保持源顺序的一致性。
例23：
•继承性（Inheritance）
继承性指的是元素会从父元素继承某些样式属性的值。具体来说，某些CSS属性的值会被传递给其子元素。
样式属性的继承性是由CSS规范来定义的，例如color、font-family、text-align等属性具有继承性，而width、height、border等属性则不具有继承性。
父元素的样式只有在子元素没有自己定义相同属性的样式的情况下才会被继承。
可以使用inherit关键字来显式地指定某个属性的值从父元素继承。
例24：
在上面的例子中，父元素＜div＞引用了类名为＂ parent＂的样式，设置了颜色为蓝色和字体大小为20像素。子元素＜p＞引用了类名为＂ child＂的样式，没有定义颜色和字体大小属性，但继承了父元素的颜色和字体大小，因此它的文字颜色将是蓝色，字体大小是20像素。子元素自身设置了字体加粗的样式，所以文字将会显示为加粗字体。
通过这个示例可以看到，子元素的样式继承了父元素的相关样式属性，这体现了CSS的继承性特点。
（7）CSS优先级
CSS优先级按从高到低的顺序排列：
•！important：使用！important声明的样式具有最高优先级，并会覆盖任何其他规则。
•内联样式：直接在HTML元素的style属性中定义的样式具有较高的优先级。
•id选择器：使用id选择器（如＃id）指定的样式具有比类选择器和标签选择器更高的优先级。
•类选择器、属性选择器和伪类选择器：使用类选择器（如． class）、属性选择器（如［attribute］）和伪类选择器（如：hover）指定的样式具有比标签选择器更高的优先级。
•标签选择器：使用标签选择器（如p、div）指定的样式是最基本的选择器，具有较低的优先级。
•通配符选择器：使用∗指定的样式具有较低的优先级。
当多个规则应用于同一个元素时，CSS会根据这些规则的优先级来决定最终应用哪个样式。如果多个规则具有相同的优先级，则会根据源顺序来决定应用哪个样式。
需要注意的是，尽管！important具有最高优先级，但过度使用！important会导致样式表的维护困难，不易于重写和扩展。因此，应谨慎使用！important，并尽量遵循良好的CSS编码习惯。
制作主题页面的头部模块，主要训练点包括页面中引入CSS文件，CSS选择器的选择与定义，CSS控制文本样式。
1.新建css文件
在css文件夹上右击鼠标，在快捷菜单中选择“新建”，选择联级菜单中的“css文件”，命名为style．css，点击“创建”按钮，如图2-11、图2-12所示。
图2-11 新建css文件1
图2-12 新建css文件2
2.公共样式定义
本主题页的页面背景颜色为＃ededed，段落文字颜色为＃696969、16px，这些可以通过CSS公共样式定义。在style．css文件中定义公共样式，参考代码如下：
3.制作头部模块，效果如图2-13所示。
图2-13 头部模块样图
其HTML参考代码如下：
头部div的CSS样式选择器名为．header，样式包括：
（1）设置div宽度为980px，高度为86px；
（2）居中，与下方元素间距为7px；
（3）行间距86px；
（4）文字居中对齐；
（5）文字颜色：＃006400。
标题文字“厉害了，我的国”的CSS样式包括：
（1）取消加粗效果；
（2）字号30px。
标题文字“军事专区”的CSS样式包括：
（1）取消加粗效果；
（2）取消倾斜效果；
（3）字号14px。
其CSS参考代码如下：
使用链入式将CSS引入HTML文档中：
在HTML的标记中引用CSS选择器套用CSS样式：
1.使用margin属性可以设置div与其他元素之间的间距，比如margin：0 auto 7px；可以让div在区域内居中，与上方元素间距为0，与下方元素间距为7px，这是CSS的盒子模型中的知识。
2.颜色值的缩写。十六进制颜色值是由＃开头的6位十六进制数值组成，每2位为一个颜色分量，分别表示颜色的红、绿、蓝3个分量。当3个分量的2位十六进制数都各自相同时，可使用CSS缩写，例如＃FF6600可缩写为＃F60，＃FF0000可缩写为＃F00，＃FFFFFF可缩写为＃FFF。使用颜色值的缩写可简化CSS代码。
3.使用CSS样式既可以给HTML标记添砖加瓦，也可以修改其本身的样式，比如＜h1＞标记带有文字加粗效果，在本例中通过font-weight：normal；取消了文字加粗。希望大家多观察，多感受，在实践中增强对CSS的理解。