CSS从入门到精通——基础知识
第1关：初识CSS：丰富多彩的网页样式
任务描述
本关任务：通过编写CSS给网页添加基本的样式。显示效果如下：
为了完成本关的任务，请大家认真阅读相关知识
相关知识
CSS基本概念
CSS(Cascading Style Sheets)即层叠样式表，它是一种用来为结构化文档（例如HTML文档或XML应用）添加样式的计算机语言，目前由W3C定义和维护。
在前端网页开发中，我们使用CSS来定义网页元素的样式，例如背景颜色、字体展示、元素位置、动画效果等等。
所以，HTML 与 CSS 结合，将网页的内容与样式分离，有利于提高开发效率。
基本的CSS语法如同积木一般，通过各种变换设计，构成了丰富多彩的网页世界。
例如，
使用CSS排版清晰的网站：
包含丰富多媒体的网站：
自如运用CSS动画的网站：
一个简单的实例
首先，我们来下一个简单的实例：
显示效果如下：
我们在HTML文档的<head>元素中，加入了<style>元素，设置其属性type为text/css，表示此处内容为CSS。
我们在此CSS代码中，指定了：
-
body背景颜色为蓝绿色(teal)；
-
h1标题的字体颜色为白色(white)，字体大小为36px并且在网页中居中对齐。
CSS基础语法
一般而言，CSS要如何指定HTML元素样式呢？CSS的基础语法是什么的呢？
由上面的实例，我们可以看出CSS语法主要包括两部分：选择器和声明。
基本格式如下：
选择器
选择器是什么呢？
选择器用于指定我们要修改的HTML元素。例如，在上述实例中，body和h1就是选择器。在之后的实训中，我们也会学习使用多种更复杂的选择器。
声明
声明是什么呢？
通过声明，我们定义要改变的元素样式。声明由属性和值构成，包含在花括号中，基本格式如下：
例如，在上述实例中：
这一声明，指定了body元素的背景颜色为蓝绿色(teal)。
同样的，我们对h1添加了多行声明：
在平时开发网站时，建议每个声明通常单独列为一行，有助于阅读。当网站发布时，可以使用工具压缩，将多行声明写在一行，使得CSS文件大小更小，加载速度更快。
提示：
- 语句最后的分号可以不写。如果多个声明写在一行，就必须书写。一般情况下，建议都书写。
编程要求
在右侧编辑器中，补全Begin至end中间的部分，选择index.html文件，设置其CSS样式为：
-
修改h1标题的text-align为居中显示，字体大小为40px；
-
p段落的颜色为灰色:grey,字体大小为18px。
测试说明
在右侧编辑器左上方，点击代码文件，就可以在多个文件直接进行切换。例如，在关卡中含有实例 example.html，你可以点击 example.html 切换到该文件。然后在编辑器中修改任意内容，效果显示便会更新。
具体演示如下：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>Hello World</title><style type="text/css">body {text-align: center;}h1 {/* ********** BEGIN ********** */text-align: center;font-size:40px;/************ END ********** */color: #62A8CB;}img {height: 250px;}p {/* ********** BEGIN ********** */color:grey; font-size:18px;/* ********** END ********** */}</style></head><body><h1>CSS让网页样式更丰富</h1><img src="https://www.educoder.net/attachments/download/189467"><p>使用CSS(Cascading Style Sheets)，可以使网页样式更加的丰富多彩，它解决内容与表现分离的问题，提高了工作效率。</p></body> </html>第2关：CSS样式引入方式
任务描述
本关任务：在上一关中，我们了解了CSS的基础概念。这一关中，我们将要理解CSS继承和多种样式引入方式。
本关任务完成之后的效果图如下：
为了完成本关任务，请大家认真阅读相关知识。
相关知识
样式引入方式
CSS样式有三种引入方式：
内部样式表：如同之前实例中所示，在文档头部中引入；
外部样式表：通过外部文件引入；
内联样式：直接在特定元素中引入。
下面，我们将为大家一一介绍这三种引入方式。
内部样式表
首先，对于内部样式表，书写的方式是直接在HTML文件的头部，添加<style type="text/css"> </style>元素。
具体举例如下：
在之前的实例中，为了方便大家同时看到HTML和CSS代码，我们都是使用的这一种方式。
外部样式表
第二种方式，是将CSS单独书写在文件后缀名为.css的文件中。然后在HTML的<head>中添加CSS文件链接。
属性rel的值stylesheet代表样式表，通常不变。href属性值，代表文件的位置。与图像路径的链接方式类似，href属性值的书写方式要根据具体的CSS文件位置。
例如，当HTML文件与要引入的CSS文件不在同一文件夹时：
可以如下书写：
在实际的项目中，推荐将样式表统一放在CSS文件夹中，使得项目结构更清晰，资源管理更容易。
内联样式
内联样式是指直接在标签内添加样式属性。
举例如下：
显示如下：
通用的书写格式：
使用哪一种样式表？
在实际开发过程中，通常建议使用第二种外联样式表的方式。
主要优点如下：
内容与样式分离；
易于开发和维护样式。
样式易于复用；
可在多个HTML文件中引入相同的样式文件。
加载更快。
如果在不同的页面中引入相同的样式文件。通常浏览器会直接从缓存中读取，而不再需要再一次访问服务器资源。
样式的优先级顺序
三种样式引入的优先级顺序是：
外部样式< 内部样式 < 内联样式
也就是说，如果同时有三种样式的方式作用于同一元素，会优先的使用内联样式。
编程要求
选择index.html文件，完成：
-
引入外部样式表 style.css， 引入的路径为step2/CSS/style.css；(注意路径中CSS是大写)
-
设置 h1 元素内联样式的字体颜色(color)为cornflowerblue；
-
修改 samll 元素内联样式：设置字体大小(font-size)为10px; 颜色(color)为lightslategray。
选择style.css 文件，完成：
- 设置 p 元素的 font-weight 为 粗体(bold)；
测试说明
在右侧编辑器左上方，点击代码文件，就可以在多个文件直接进行切换。例如，在关卡中含有实例 example.html，你可以点击 example.html 切换到该文件。然后在编辑器中修改任意内容，效果显示便会更新。
具体演示如下：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>O Captain! My Captain!</title><!-- ********** BEGIN ********** --><link rel="stylesheet" href="step2/CSS/style.css"><!-- ********** END ********** --><style type="text/css">h1 {color:darkblue;}img {float: left;margin-right: 1em;}</style> </head><body><div><!-- ********** BEGIN ********** --><h1 style="color:cornflowerblue;" >O Captain! My Captain!</h1><!-- ********** END ********** --><img src="https://www.educoder.net/attachments/download/170157" width="300" height="175" alt="Blue Flax (Linum lewisii)" /><p>O Captain! my Captain! our fearful trip is done, The ship has weather’d every rack, the prize we sought is won, The port is near, the bells I hear, the people all exulting, While follow eyes the <em>steady keel</em>, the vessel grim and daring;</p><!-- ********** BEGIN ********** --><p><small style="font-size=10px;color=lightslategray;">© Walt Whitman</small></p><!-- ********** END ********** --></div> </body></html>body {font-family: 'Times New Roman', Times, serif; }div {border: 1px solid #000;overflow: hidden;padding: 0 1em .25em; }h1 {color: green; }p {/* ********** BEGIN ********** */ font-weight:bold;/* ********** END ********** */ }
总结
以上是生活随笔为你收集整理的CSS从入门到精通——基础知识的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 机器学习之最大似然估计（MLE）和最大后
- 下一篇： CSS边框,背景,边距,溢出