山地人

课08.初步认识CSS

山地人
山地人
2021-05-13

项目下载地址:前往GitHub

课08.初步认识CSS——大纲

在之前的课03.美丽的外衣CSS一课里,我们已经初步接触了一些CSS样式的用法和概念。今天这节课,我们继续来讲CSS。

首先让我们来看看,我们平常写代码的时候,有几种添加CSS样式的方法。

CSS的三种样式

标题部分已经回答了之前的问题,他们分别是:

  • 行内样式
  • 内部样式
  • 外部样式

行内样式

所谓行内样式,其实很好理解,就是直接把样式写在CSS的标签上。这么说,可能并不直观,我们直接看例子:

<h1 style="color:#5e72e4;">
课8.初步认识CSS
</h1>

上面这个写在<h1>标签的style属性里的color:#5e72e4;就是一个行内样式的写法。你可能会说这种方法好,非常直观,哪里要用,就直接在哪个标签上写个行内样式就好了。

确实,对于我们初学HTML和CSS样式的小伙伴,会比较喜欢写这种行内样式,简单直接。但是,你仔细想想,其实这种写法也有一些弊端,比如:

  • 行内样式,没有复用性。

你看,如果你页面上有很多h1标签,如果你想让这些h1标签都使用同样的颜色。那你用行内样式就得为每一条h1写上一句style="color:#5e72e4;"

  • 没有复用性,带来的第二个问题,可维护性变差。

这个怎么理解呢,如果你很有耐心把所有的页面的h1标签都加上了style="color:#5e72e4;",然后高高兴兴去找你的老板看效果,老板说,小张,你把标题颜色换一个颜色,另外,字体改调大一点。这下好了,页面上有20处h1标签,然后你要重新把所有的行内样式,都改成style="color:blue;font-size:24px"。另外你还要小心,不要漏改了。这样的维护性,是不是很差呢!

当然,行内样式,也不是一无是处。如果你要对某个特定的标签,做一个特殊处理,这种情况下,简单使用一下行内样式,也不是不可以。所以,一切都是灵活的,具体情况,具体应对。

内部样式

关于内部样式,我们之前其实一直使用的都是内部样式的写法。不信,你看下下面的例子:

<html>
<head>
<style>
.title {
color:#5e72e4;
}
</style>
</head>
<body>
<h1 class="title">
课8.初步认识CSS
</h1>
</body>
</html>

上面这个例子中我们先在style中定义了一个title的类样式,然后在当前的h1标签上使用class="title"应用了这个title样式。

这个样式定义在当前文件的style标签内的写法,我们就称之为内部样式。说白了,就是写在这个当前使用的HTML文件里的样式,但是又不像行内样式那样,直接在某个标签上写样式。

如果你现在是小张,页面上有20处h1使用了title。老板刚才的那个需求,你花1分钟时间就可以搞定了。

<style>
.title {
color:blue;
font-size:24px;
}
</style>

你也不用担心存在哪里漏改的问题,是不是工作效率显著提升了呢!

外部样式

有的时候,我们希望书写的一套样式,不仅能在一个页面里应用。比如你定义了一套非常漂亮的样式。你希望在网站的所有页面,都应用这套样式风格。这时,你会发现之前的那两种样式的写法,不管是行内样式,还是内部样式好像都不能跨越不同文件。这时就需要请出我们的第三种样式写法,也就是这里的外部样式

我们把上面的那个例子里的style部分的样式拿出来,保存到一个单独的文件中去。比如放到下面这个default.css

.title {
color:#5e72e4;
}

定义好外部的css文件后,我们需要在HTML文件中引入外部的这个样式。

<html>
<head>
<link href="default.css" rel="stylesheet">
</head>
<body>
<h1 class="title">
课8.初步认识CSS
</h1>
</body>
</html>

第三行的写法,就是一个引入外部样式的写法。这里我简单解释一下link标签。

<link href="default.css" rel="stylesheet">

link在英文中有链接的含义。

后面的href属性我们在学超链接a标签的时候已经用过。就是指向一个外部的资源。在a标签里,href是指向一个要跳转的URL网址。在这里href是指向一个我们要引入的default.css的路径。

后面的rel属性,英文全称是relation意思是关系。在link标签中,是用来指示我们的href所引用的文件和当前页面是什么关系,rel="stylesheet"意思是我们引入的这个default.css是一个样式表文件。

课程小结

本节课我们重点讲了,CSS样式的三种定义写法:

  • 行内样式

  • 内部样式

  • 外部样式

相同通过本节课视频和教程结合起来学习后,你应该能够区分什么场景下应该使用行内样式,什么情况下使用内部样式,什么情况下需要使用外部样式了。

课后练习

学完这一课,你可以试着把你之前写过的一些小例子,进行一些合适的样式调整。

另外把上节课的仿百度的小例子拿出来再次改造一下,定制一套自己喜欢的样式风格。

学完本篇互动教程,如果你觉得体验不错,可以把网页链接发送给你的小伙伴,让他/她也来感受一下。当然,你也可以继续看看网站上其他的的互动教程,希望`idev365`能够给你带来收获。

学习教程的过程中碰到了问题,或者对idev365有什么改进意见和想法,欢迎加入idev365微信内测群,和山地人交流你的想法。