运用你的新知识

通过在前几节课程中学到的知识,你应该学会了用CSS组织一个简单的文本文件,并且在其中添加自己的CSS样式。本节中你将实现这一功能。

先决条件:

基本熟悉使用计算机,基本工作环境的设置,基本的文件处理知识,基本的HTML知识(在HTML概述中学习)和CSS基础(查看本模块其他内容)

目标:

尝试使用一些CSS的新玩法并检验新的知识

让我们来学一些CSS样式

The following live example shows a biography, which has been styled using CSS. The CSS properties that I have used are as follows — each one links to its property page on MDN, which will give you more examples of its use.

I have used a mixture of selectors, styling elements such as h1 and h2, but also creating a class for the job title and styling that.

Try using CSS to change how this biography looks by changing the values of the properties I have used, removing some rules, or adding your own. Then try looking up some properties not mentioned on this page in the MDN CSS reference and get adventurous!

举例来说,你可以:

  • 修改颜色。
  • 修改标题的大小 
  • Style the ul and change the way the list of contact details displays.
  • 为某些元素增加一些亮色的背景和边框。
  • 当鼠标在某些HTML元素上悬停时增加动画 (推荐改变颜色和字体)。
  • 增加倾斜度和阴影。

记住这里没有错误的答案——在这个阶段你可以在学习中娱乐一下。

 

接下来是什么?

恭喜你完成了第一个模块的学习。现在你应该对CSS有了一个大致的了解 并且能够了解在样式表中发生的大多数事情。在下一个模块CSS构建中,我们将对一些关键区域进行深入的学习。

本章目录

  1. 什么是CSS?
  2. CSS入门
  3. CSS是如何构成的
  4. CSS是如何工作的
  5. 运用你所学的知识