【案例引入】
从文明之火初燃的那一刻起，数学就与人类相伴。芝加哥科学技术博物馆列出了88位古今数学伟人，华罗庚就位列其中。1910年11月12日，华罗庚生于江苏省金坛县。他家境贫穷，决心努力学习。全身心地钻到数学里攻克数学难题成了他最大的乐趣。为了抽出时间学习，他经常早起点着油灯看书。伏天，他在蚊子嗡嗡叫的小店里学习；严冬，他常常把砚台放在脚炉上，一边磨墨一边用毛笔蘸着墨汁做习题。每逢年节，也埋头在家里读书。华罗庚19岁那年，染上了极其可怕的伤寒病，从此因病左腿残疾。在逆境中，他顽强地与命运抗争，1930年，华罗庚在《科学》杂志上发表了一篇论文《苏家驹之代数的五次方程式解法不能成立的理由》，被清华大学数学系主任熊庆来教授请到清华大学学习和工作。华罗庚在清华大学的4年中，在数论方面发表了十几篇论文，自修了英、法、德语。25岁时，他已成为蜚声国际的青年学者。1936年，华罗庚26岁，由清华保送到英国留学，就读于著名的剑桥大学。他提出的一个理论被数学界称为“华氏定理”，改进了哈代的结论，华罗庚被认为是“剑桥的光荣”！关于“他利问题”“奇数的哥德巴赫问题”写了18篇论文，先后发表在英、苏、印度、法、德等国的杂志上，其中包括《论高斯的完整三角和估计问题》这篇著名的论文。1938年，抗日战争正进行得如火如荼，他毅然放弃在英国的一切回到祖国，到西南联大与同胞们共患难。他把自己毕生的精力投入到祖国发展的科学事业特别是数学研究事业之中。他一生为我们留下了200余篇学术论文，10部专著，其中8部在国外翻译出版，有些已列入本世纪数学经典著作，撰写了10余部科普作品。他的名字已载入国际著名科学家的史册。他是中国科学界的骄傲，是中华民族的骄傲。
【案例分析】
CSS样式的编写以HTML语言为基础，与数学有异曲同工之处，都需要投入巨大的精力，希望同学们能够学习华罗庚严谨务实的治学态度，刻苦钻研、细心、耐心的优良品德，顽强、拼搏的精神。
【主要知识点】
微课8.1 CSS3基础知识
8.1.1 CSS3简介
1）CSS3概念
CSS（Cascading Style Sheet）又叫层叠样式表，是对HTML标记的内容进行更加丰富的装饰，并将网页表现样式与网页结构分离的一种样式设计语言。可以使用CSS控制HTM页面中的文本内容、图片外形以及版面布局等外观的显示样式。CSS3样式是CSS2.0的升级版，只需要短短几行代码就可以实现以前需要使用图片和脚本才能实现的效果，比如圆角、图片边框、文字阴影和盒阴影等。CSS3不仅能简化前端开发工作人员的设计过程，还能加快页面载入速度。绝大多数浏览器对CSS3都有很好的支持，但各个浏览器对CSS3很多细节的处理上存在差异。现在的网页制作迎来的是HTML5+CSS3时代，这两者相辅相成，使互联网进入一个崭新的时代。
2）CSS3样式的功能
CSS3样式的功能，一般可以归纳为以下几点：
①能够灵活控制网页中文本的字体、大小、颜色、间距、格式及位置。
②能够为网页中的元素（如表格、图片、文字块等）设置各种效果的边框。
③能够为网页中的元素设置不同的背景颜色、背景图像及平铺方式。
④能够控制网页中各元素的位置，使元素浮动在网页中。
⑤能够与JS等脚本语言结合使用，使网页中的元素产生各种动态效果。
8.1.2 CSS3文件的编辑和浏览
CSS3文件与HTML文件一样，都是纯文本文件，因此一般的文字处理软件都可以对CSS3进行编辑。记事本和UltraEdit等最常用的文本编辑工具对CSS3的初学者都很有帮助。
Dreamweaver CC代码模式下同样对CSS3代码有着非常好的语法着色以及代码提示功能，对CSS3的学习很有帮助。
1）手工编写CSS3文件
使用记事本编写CSS3文件的具体步骤操作如下：
①单击Windows桌面上的“开始”按钮，选择“所有程序”→“附件”→“记事本”命令，打开一个记事本，在记事本中输入以下HTML代码。
案例【8.1.1】手工编写CSS3文件
②添加CSS代码，修饰HTML元素，在<Head></Head>标记中间添加一对<style></style>CSS样式标记，在style标记中间对样式进行设定，就能对页面内容起到修饰作用。
③单击“保存”按钮，保存文件。按F12键在浏览器中预览，效果如图8.1.1所示。
图8.1.1 手工编写CSS3
2）用DreamWeaver CC编写CSS3文件
在DreamWeaver CC中，可以用两种方式创建CSS样式表，一种是利用“CSS设计器”，在可视化操作环境中进行创建；一种是在“代码”视图中直接编写相关代码，可以任选一种进行操作。
①利用“CSS设计器”创建、编辑CSS样式文件。
启动DreamWeaver CC进入操作界面，单击菜单栏“窗口”里的“CSS设计器”，CSS设计器出现在右侧的命令面板上：单击【添加CSS源】按钮，弹出的菜单中分别有“创建新的CSS文件”“附加现有的CSS文件”“在页面中定义”。
单击“源”中的<style>，接着单击选择器的“+”添加按钮，添加CSS样式，在跳出“添加CSS样式”窗口输入样式文件名，即可创建样式文件，如图8.1.2所示。同时，创建的样式文件名出现在CSS设计器面板里面“源”的下面，利用其下面的选择器可以新建各种样式。选择所建的样式名，点选下面的属性，去掉显示集前面的钩，就可以设置该样式的各种属性。效果如图8.1.3所示。
图8.1.2 创建新的CSS文件
图8.1.3 新建样式文件后的CSS设计器
②在DreamWeaver CC中的“代码”视图中创建、编辑CSS样式文件。启动Dream-Weaver CC进入操作界面，选代码视图，进行代码编写，如图8.1.4所示。
图8.1.4 在DW CC中的“代码”视图中编写代码
注意：本书以后所有涉及CSS样式的案例都可以用这两种编写CSS样式的方法来进行（后面不再进行提醒）。
8.1.3 CSS3语法
1）CSS3规则
CSS格式规则由两部分组成：选择器和声明（为包含多个声明的代码块，是选择器的属性和值）。选择器是标识已设置格式元素的术语（如p、h1、类名称或ID），而声明块则用于定义样式属性。在下面的示例中，p是选择器，样式声明写在一对大括号“{}”中；color和background都是“属性”，不同属性之间用“；”分隔。“#ff0000”和“#000000”是属性的值。
案例【8.1.2】CSS选择器
效果如图8.1.5所示。
图8.1.5 CSS选择器
2）选择器的分组
可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。（有助于优化样式表，提高效率）
案例【8.1.3】选择器分组
在此案例中，我们将
图8.1.6 选择器分组
写成了：h1，h2，h3{color：green；}，效果如图8.1.6所示。
3）CSS的继承问题
一般CSS子元素从父元素继承属性，如：body{font-family：Verdana，sans-serif；}
根据上面这条规则，站点的body元素将使用Verdana字体通过CSS继承，子元素将继承最高级元素（在本例中是body）所拥有的属性（这些子元素诸如p，td，ul，ol，ul，li，dl，dt和dd），如果你不希望“Verdana，sans-serif”字体被所有的子元素继承，又该怎么做呢？比方说，你希望段落的字体是Times。
我们可以这样写：p{font-family：Times，Times New Roman，serif；}
4）CSS样式的优先级
当同一个HTML元素被不止一个样式定义时，会使用哪个样式呢？这就要知道CSS样式的优先级别了。
CSS样式的优先级顺序由高到低排列如下：
！important>行内样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认样式。
8.1.4 CSS3的常用选择器
选择器（Selecter）也被称为选择符，所有HTML5语言中的标记都是通过不同的CSS3选择器进行控制的。选择器不只是HTML5文档中的元素标记，它还可以是类、ID或元素的某种状态。根据CSS选择符的用途，可以把选择器分为标签选择器、类选择器、全局选择器、ID选择器和伪类选择器等。
1）标签选择器
选择器的名字代表html页面上的标签，是针对一类标签起作用，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”，如P选择器的声明将会对页面上的所有段落起作用。所有的标签都可以是选择器，比如ul、li、label、dt、dl、input、div等。(www.daowen.com)
案例【8.1.4】标签选择器的使用
效果如图8.1.7所示。
图8.1.7 标签选择器的使用
2）id选择器
id选择器针对某一个特定的标签使用，为标有特定id的HTML元素指定特定的样式，只能使用一次。id选择器以“#”来定义。
案例【8.1.5】id选择器的使用
效果如图8.1.8所示。
图8.1.8 id选择器的使用
3）类选择器
类选择器使用“.”（英文点号）进行标识。类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。同一个页面允许多次用到类选择器，用class定义后面紧跟类名即可，其基本语法格式如下：
.类名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
标签调用的时候用class=“类名” 即可。
注意：类名的第一个字符不能使用数字。
案例【8.1.6】类选择器的使用
效果如图8.1.9所示。
图8.1.9 类选择器的使用
8.1.5 在网页中加入CSS
一般可以使用四种方法将样式表加入网页中，每种方法都有其不同的优点。
1）将样式表加入HTML文件行中
如果要指定网页内的某一小段文字的显示风格，可以直接在HTML代码行中加入样式规则，但利用这种方法定义样式时，效果只可以控制该标签，其语法如下：
2）将样式表嵌入HTML文件的文档头中
在文档头嵌入样式表规则，浏览器在整个HTML网页中都执行该规则。如果想对网页一次性加入样式表，就可采用该方法。
这种方法就是将所有的样式表信息都列于HTML文档的头部，基本语法如下：
说明：
①<style>标签用来说明所要定义的样式。type属性是指定<style>标签以CSS的语法定义。
②样式表基本格式中的type=text/css用于说明这是一段CSS规则代码。
③为了防止不支持CSS的浏览器将<style>…</style>标签间的CSS规则当成普通字符串而显示在网页上，应将CSS的规则代码插入<！--和-->标签之间。
④选择符1至选择符n：选择符就是样式的名称，选择符可以使用HTML标签的名称，所有HTML标签都可以作为CSS选择符。
⑤样式属性：定义样式的属性名称。
3）将一个外部样式表链接到HTML文件上
如果想要达到集中管理网站网页样式的目的，就必须将样式定义在独立的CSS文件中，并将该文件链接或输入要运用样式的HTML文件。这种方法可将多个HTML文件都链接到一个样式表文件中，这个外部的样式表将设定所有网页的规则。如果改变样式表文件中的某一个细节，所有网页都会随之改变。
它的使用方法是：创建一个普通的网页，但不使用<style>规则，而是在HTML文档头部使用<link>标签。
基本语法如下：
说明：
①∗.css为预先编写好的样式表文件。
②外部样式表文件中不能含有任何像<head>或<style>这样的HTML标签。样式表仅仅由样式表规则或声明组成。
③在href属性中可以使用绝对URL或者相对URL。
④外部样式表文件中，可不使用注释标签。
⑤如同发布HTML文件那样将这个CSS文件发布到服务器中。网页被打开时，浏览器将依照链接标签将含有链接外部样式表文件的HTML网页按照样式表规则显示。
4）将一个外部样式表输入HTML文件
输入样式表的方法同链接到外部样式表文件类似。其语法如下：
说明：
①import语句后的“；”号是必要的。
②样式表文件的扩展名为.css。
以上四种方法，可分成内部样式表（前两者）及外部样式表（后两者）两类。当这四种方法同时出现时，浏览器会以哪种方法为优先使用呢？答案是在行内直接加入样式的顺序为最高，其他三种方法的顺序则是一样的。如果其他三种方法同时出现，且各方法定义的样式又都不同时，浏览会选择较后定义的样式来显示。
【课程育人】
通过对案例引入与CSS样式基础知识，包括CSS样式类型、CSS选择器、CSS在网页中的应用等知识点的融合学习，我们注意到CSS样式类型、CSS选择器、CSS在网页中的应用等CSS样式基础知识是以HTML语言为基础，在编写时也需要与华罗庚研究数学一样投入巨大的精力。努力学习，细心严谨，踏踏实实，为制作精美的网页打好扎实的基础。
【课堂互动】
1.CSS的全称和中文译作（ ）。
A.cading style sheet，层叠样式表 B.cascading style sheet，层次样式表
C.cascading style sheet，层叠样式表 D.cading style sheet，层次样式表
2.下面说法错误的是（ ）。
A.CSS样式表可以将格式和结构分离
B.CSS样式表可以控制页面的布局
C.CSS样式表可以使许多网页同时更新
D.CSS样式表不能制作体积更小下载更快的网页
3.CSS样式表不可能实现（ ）功能。
A.将格式和结构分离 B.一个CSS文件控制多个网页
C.控制图片的精确位置 D.兼容所有的浏览器
4.下面不属于CSS插入形式的是（ ）。
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
