如果说网页是一幢房子,HTML结构是钢筋混泥土的墙,那么CSS就是装饰材料,是油漆,是用来装饰房子的。一幢房子光有墙肯定是不够的,如果没有任何用来装饰的东西,孤零零的只有内容也是不会被大家所接受的。而一个网页做出来必然是展现给大众访问的,网页的精美与否也就决定了大家对这个网页的看法,没有人会愿意访问一个孤零零只有内容的网页,每个人都希望看到的是一个精美的网页,而绝非仅仅是内容。因此,在一个网页中,用来装饰内容的东西也是必不可少的。我们学习的CSS就充当了装饰的作用,使得我们的网站更加的精美、好看。包括了整个页面的布局,元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。
一条CSS样式规则由两个主要的部分构成:选择器,以{}
包裹的一条或多条声明。在之前HTML的学习中我们学习了许多的标签,在CSS里同样也需要用到这些标签。
h1 {color:red;font-size:12px;}
h1在HTML里表示一级标题,在这个语法中意思为选择了h1这个标题,而其格式为后面用{}包裹的内容。选择器不只是HTML里的标签。还包括id选择器、class选择器。用法为:
id选择器:
#xxx{color: blue;}
<p id="xxx">内容</p>
class选择器:
.x1{text-align: center;}
.x2{font-size: 30px;}
.x3{color: red;}
<p class="x1 x2 x3">内容</p>
在设置id的样式的时候,在我们需要设置的id前加上#即可,对于class选择器来说,我们在设置的时候需要加上.。
设置好样式后我们如何使用我们设置的样式呢?
有两种方法
一是在我们的项目里创建一个css文件,将我们的样式全部设置在以css为后缀的文档中。然后在我们的HTML文档的<head>标签中添加这个css文件,方式为:
<link rel="stylesheet" href="css文件路径">
我们只需要在href中添加我们css文件的路径即可使用我们的css样式。
还有一种是直接在我们的HTML文件的<head>标签内添加我们的样式,用<style></style>来包裹我们的样式即可。
学会了如何设置样式以及如何使用样式,接下来就是学习大概有哪些样式了。
学习了的样式大概有颜色、尺寸、对齐方式、边框与边距、浮动、不透明度等,这些样式使得我们制作的网页更加丰富,更加的赏心悦目。
课程中学习到的CSS大概就是这些,但我知道CSS的内容远不止这些,仍需继续学习。