本小节基本要求：
会简单使用html编辑页面文字要点：
具有相同点的样式，该怎么做，不同点的样式，该怎么做。学会抽离共同点，达到复用目的。CSS的简单使用，逃离“丑”页面<a></a>简称a标签，它的作用href属性的简单认识目前样式
目标样式
网站地址：https://ypt.ink/blog/index
Step1->a标签的使用
继续编辑上一篇的html代码，在其中加入a标签，并且a标签要将文字包围。
a标签在网站中的重要作用就是为了实现页面的跳转，这一篇文章暂时不做延伸，用到它的时候再说，这里用a标签的目的就是埋一个页面跳转功能的伏笔。
Step2->掌握整体架构
看左边“得之我幸”与右边文字的区别与共同点。
区别：
左边字体比右边大
左边字体加粗，右边没有加粗
左边只有一个词语，右边有一排，而且它们之间都有一小段间隔
共同点：
字体都是白色
Step3->开始搭建css
抽离共同点，字体颜色。
为了更好地显示页面，这里我会将字体颜色设置成别的颜色。(因为页面是白色，字体也是白色，那么字体就显示不出来了。)
打开header.css文件，写入如图所示代码：
解释：
nav ul li a 是指： nav标签下的 ul标签，li标签，a标签上篇提到，标签之间是有父子关系的，这段关系可以这么理解：
nav标签是祖父ul标签是爷爷li标签是父亲a标签是儿子但是我们实际开发的时候是不这么叫的，一般只说父子关系。
所以，比如说a标签，我们就说，a标签的父标签的li，a标签没有子标签。
当说li标签的时候，我们说，li的父标签是ul，子标签是a
*{margin: 0;padding: 0;} 这段代码可以忽略，这是细节，我们不扣。
nav ul li a {color: green;}这整段代码的含义：nav标签下的所有a标签，它们的字体颜色都设置成green(绿色)。
Step4：在header.html文件中引入刚刚写好的header.css文件
看我左边的目录结构，最好要和我一样。
打开html文件，在<head></head>标签中引入header.css文件：
<link rel=“stylesheet” type=“text/css” href=“../css/header.css”>解析一下这段代码：
link的英文含义就是链接的意思， 所有link标签的作用也是用来作页面互链的。rel 属性是来指定你要链接的文件与本文件的关系， 这里要链接的是css文件，这个css文件是用于本html文件的，所以指定stylesheet参数，stylesheet参数就代表将css文件当做本文件的外部样式表。type 属性是指本文件要链接的文件是什么类型的，我们要链接的是css文件，所以指定参数为text/css。href属性就是css文件的路径，我们的css文件的路径在，css文件夹下，所以指定参数css/header.css。../ 就代表ypt-web 这个目录， 这样可以省略写。
右键run一下，看效果：
下一篇，调节文字的大小与位置：
https://mp.toutiao.com/profile_v4/graphic/preview?pgc_id=6962313752469406247声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。