课03.美丽的外衣CSS

项目下载地址:前往GitHub

03.美丽的外衣CSS——大纲

HTML和CSS的关系

水立方

北京的水立方你应该看过,夜景非常漂亮。我为什么要和你说这个,当然和我们今天要谈的CSS和HTML的关系有关。

如果我们把一张网页想象成是一座水立方,那HTML就是水立方内部的钢架结构,撑起了整个水立方。所以HTML就是网页的骨架。而CSS就好比是水立方那层漂亮的外表。为HTML进行了装饰,让这个页面变得美观,好的骨架结构,加上美丽的装饰,这就是HTML和CSS的关系。

本次的视频我们从美化一个博客页面开始,简单使用一些样式来修饰页面。

类样式是CSS样式中的一种,也是最常见的一种CSS样式。你可以把类样式简单理解成一类样式,就像你开了一个印刷厂,在开始往纸上印刷之前,你要先制版。有了印刷模板,然后你就可以成批成批地印刷了。

要让我们的标签应用类样式,首先我们需要定义这个类样式(这个类似于制版),然后才是在标签上使用类样式(成批开始印刷)。

类样式的定义

<style>
  .title {
    color: blueviolet;
  }
</style>
1
2
3
4
5

首先在<style>标签里,定义我们的.title类样式,这里我们把标题的文字颜色替换为blueviolet颜色。需要注意的是类样式的写法,样式名前面要加一个点.后面是样式名称。所有的样式属性,写在一对{}花括号中,每一条样式属性都是属性名:属性值;这样的写法。

类样式的使用

 



<h1 class="title">
  idev365——为自学编程而生!
</h1>
1
2
3

CSS里的类样式,直接在标签上应用一个class属性名,后面附上一个我们自己定义的类样式名称。比如我们这里的title

CSS中的标签样式

上面我们学习了类样式的应用,下面我们看一下标签样式。

和类样式不同,标签样式只需要定义好样式,不需要像类样式那样,定义好了还要到对应的标签上去使用class="title"那样进行应用。标签样式在定义的时候就已经告诉浏览器,这个样式需要应用在哪个标签上。

所以标签样式只需要定义,不用像类样式那样再去应用。

<style>
  p {
    background-color: #58bfff;
    font-size: 14px;
  }
</style>
1
2
3
4
5
6

background-color: #58bfff;

上面就是一个对<p>标签定义的标签样式,这相当于告诉浏览器遇到这张网页里所有的<p>标签,把这些标签元素都加上一个#58bfff的背景色。

这里,如果你是第一次看到#58bfff可能会有些陌生。这是定义一个颜色的一种写法。开头用一个#井号后面跟着6个16进制的数,这6个数字,每两个一组,分别表示,红色(Red),绿色(Green)和蓝色(Blue)的颜色值,最少是0,最大是ff(换算成十进制就是255)。上面这个颜色中,红色的值是58,绿色的值是bf,蓝色的值是ff。RGB三种颜色分量组合在一起就形成了我们想要的任何颜色。

font-size: 14px;

这一行是定义<p>标签的字号使用14像素的文字大小。

font-size属性翻译成中文就是字体-大小也就是字号。

14px这个属性值中14是一个字号大小的值,后面的px是一个单位,这也是一个英文缩写pixel中提取了px两个字母。意思是像素。14px就是14像素,1px就是屏幕上的一个点的大小。我们这里的14px就是定义这个文字大小是14像素。

仔细观察,你会发现,这些CSS里的属性名称的命名规则,都是单词和单词之间通过一个-号连接。

常用的CSS样式属性

为了装饰好我们的页面,CSS为我们提供了丰富的属性,这里我列举一些最最常用的CSS属性。

属性 描述
color 文字颜色
font-size 文字大小
background-color 背景颜色
line-height 文字行高
text-align 文字水平对齐
margin 外边距
padding 内间距
border 边框
border-style 边框样式
border-width 边框宽度
border-color 边框颜色

上面是一些我们平常经常会用到的一些CSS属性,这里你先大致了解一些。随着课程的进一步学习,慢慢你都会掌握,所以现在先有一些了解即可。

本课小结

本节课,我们重点学习了下面这些内容:

  • 两种样式定义的写法:
    • 类样式
    • 标签样式
  • CSS中样式内部的属性如何书写
  • 了解一些常用的CSS样式属性

课后练习

结合前两次课学习的HTML标签和本节课学习的CSS样式,你能否为你之前的一些HTML小练习加入一些好看的样式。

对于将来需要找工作的同学,可以动手制作一份用CSS装饰的HTML版简历。

你也可以试着把之前写过的博客文章用CSS样式再造一版。