也讲了这么多了，我们要做练习了。我知道你们可能还觉得云里雾里，现在说做练习有点不知从何入手啊。其实练习就是拨云见日的过程，做过练习才会真正理解这些理论。（多年学生党表示拒绝相信，23333
我们就先做一个很简单的首页，别管这页面是干嘛的，反正都是基本的布局，页头、导航、海报、列表、页尾，嗯，差不多就这样吧。嘿，别愣神啦，不懂也跟着我走，原地打转就没机会弄明白了哦。
刚才列了一堆，那我们先干什么？
先建立文件啊喂，这是三年级到脑筋急转弯了，要是还能答错……呼呼，还真年轻！
我们这次的练习十分简单，所以只需要两个文件，一个 index.html，一个 style.css。反正名字你随便取，不过 Html 文件最好还是叫 index 吧，没别的，就是我看着舒服。因为结构太简单，两个文件就放在一起好了，一会可能再给它们身边放几个漂亮的……图片。
然后写下基本结构，index.html 里面：
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>排版练习</title><link rel="stylesheet" href="style.css"></head><body></body></html>记得引入 CSS 文件，否则定义样式不起作用可别问我是怎么回事哦。CSS 文件建立之后先空着就好，或者这么写：
/*有时候我们会在 CSS 文件的最开始写一些关于这个样式表，或者这个项目的说明，以及作者，写作日期什么的。我们这里要求大家都写上下面的 内容，这样可以让你的代码少出 bug，当然，心诚则灵哟~我郑重的承诺，这句话是我发自内心的，真诚的，诚恳的，滚烫的，是真的——稻米鼠长得超级帅！天下第一！宇宙无敌！*/好了，这就准备好了。这些部分后面我就不写了，因为太占用篇幅，大家知道我们后面的代码都该放在什么地方就好。
现在来写页头，想想页头好像有个什么标签来表示的，对，header，这就简单了。页头里面打算放什么内容？标题和副标题（或者描述），这是最基本的结构，就是最俗套的那种。
<header><h1>这里是标题</h1><h2>这里是副标题</h2></header>结果文字在最左边，不喜欢，让它居中吧，想想我们在讲文字相关的那些属性的时候有没有讲过文字的对齐方式？能想起来就好，那我们开始用吧。写 CSS，就是谁，长什么样，这么两个问题。先写选择器，header 试试：
header {text-align: center;}刷新一下页面，成功了！点赞哦~这是因为两个标题在对齐方式上都会继承父元素的设置，所以 header 文字居中，里面的标题也就跟着居中了。这叫做继承，写作 inherit，元素的大部分属性默认都会继承父元素。
当然你把选择器写下面这样也都可以：
/* 用后代选择器 */header h1 {text-align: center;}header h2 {text-align: center;}/* 用子元素选择器 */header>h1 {text-align: center;}header>h2 {text-align: center;}/* 写一起 */header>h1,header>h2 {text-align: center;}/* 所有子元素 */header>* {text-align: center;}如果排列组合一下，我可以举例满满一页。上面写法虽然意义不同，但是最后都达到了类似的效果，所以，这并不容易出错的喵~你还紧张什么。
不过我们可能需要进一步定义，比如标题默认又黑又粗就不好看，我希望字大就行了，就别加粗了，甚至可以细一点。这时候我在构思中主标题和副标题是不一样的，那就是分开设置，那我就选择上面比较适合我需求的写法：
header>h1 {text-align: center;font-weight: 400;}header>h2 {text-align: center;font-weight: 200;}这就很好看了！简单吧，就是把我们学过的东西组合一下，你先思考想要什么，再想应该如何选择你要描述的元素，然后说清楚这个元素长什么样子就好了。
但是字体我们可能不太喜欢，那就设置一下字体。不过想想我们这个页面应该都希望用自定义的字体，而不是默认设置。那就别一个元素一个元素去设置了，直接定义所有元素就好。
像这种全局的、通用的样式定义，我们一般放在 CSS 文件的最开始，所以在最前面写上：
* {font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;}啊，怎么这么长？去看 第三十五章 字体，这是我早就给了你们的一个比较舒适的字体设置，没啥特别的需求就照抄就行了。
暂无评论内容