您的位置：首页 > Web前端 > CSS

B/S开发之路，如何学习Css

2017-12-15 14:54 134 查看

学习Css我就不画结构图了，因为它比较简单，不是很复杂的知识结构。

之前的文章解释过，Css即层叠样式表。

Css是用来给HTML“搞装修”的，前面文章说过Css的作用。

那么Css是怎么装修HTML的呢？

Css“装修”HTML方式一

上一篇文章我们介绍了HTML以及HTML的学习方法，我们讲过HTML每个标签都有它的标签属性以及属性值对吧！那么现在告诉大家，有个属性是所有HTML标签都有的属性，这个属性就是style属性

<html>
<body style="background-color:yellow;">
<h1 style="color:red;">我的第一个标题</h1>
<p style="font-size:14px;color:blue;">我的第一个段落。</p>
</body>
</html>

上方代码框中的蓝色字体就是标签的style属性了，style英文翻译就是样式、风格的意思。所以style的属性值就是用来设置样式的
比如第2行代码中，我给body标签的style属性的属性值是background-color（背景颜色），背景色为 yellow，那么这个网页的背景颜色就会变成黄色（默认白色）。

再比如第3行代码中，我给h1标签的style属性的属性值是color（字体颜色），字体颜色为 red ，那么“我的第一个标题”这几个字将变为红色。

还有第4行代码，我给p标签的style属性的属性值有两个，一个font-size，一个color ，style有多个属性值的时候我们把每个属性值用英文分号隔开，那么“我的第一个段落”这几个字将变为blue（蓝色）并且字体大小会变为14px （网页中的单位）。

没错，相信你看出来了，css就是通过设置每个标签的style属性来“装修”HTML的，那么这么写好吗？实际开发中不仅仅只有字体大小字体颜色等几个样式，而是可能有许许多多的样式，那么写在style属性中会有太多太多不方便阅读代码等缺点。

Css“装修”HTML方式二

每个HTML标签都有style属性，那么它还有其他属性没呢？

肯定是有的，每个HTML标签还有另外一个叫class的属性。class 类选择器属性，与class类似的还有一个id属性

而我们的方式二就是依靠class属性和id属性展开讲解。

先观察下方代码框

<html>
<head&
4000
gt;
<title></title>
<style>
.h1Cls {
color: red; /*红色字体*/ /*这是注释，注释的内容浏览器不会执行*/
}
#pId {
color: blue; /*蓝色字体*/
}
</style>
</head>
<body>
<h1 class="h1Cls">这是一个标题</h1>
<p id="pId">这是一个段落</p>
</body>
</html>

我给h1标签设置了class属性，并且属性值为 h1Cls ，那么这么做有什么用吗？当然没用，大家发现我的这个段代码中多个style标签了吗？之前我们讲过style属性，而现在上面出现了style标签，大家有没有引发上面思考呢？
而且我的style标签中统样有 color:red;这样的样式

再看，我们h1标签的class属性的属性值为 h1Cls ，而style标签中有一个“.h1Cls”，别忽略了前面那个点。对了，这样的作用就是为了把h1标签的class和上方style标签的 .h1Cls{ }中的样式关联起来

直接点说就是： 我的h1标签使用的是 style标签中的.h1Cls{ }花括号中的样式

同理，我的p标签的id属性，就是为了让这个p标签使用style标签中的 #pId{ }花括号中的样式

class和id属性都是选择器，前者叫“类选择器”，在style标签中使用“ . ”标记，后者叫“ID选择器”，在style标签中使用“ # ”标记。

大家以为这样写又很好了吗？其实不然，由于分离原则，HTML和Css应该分离开，不然混合着写会影响阅读，代码看上去也乱糟糟一团。请继续往下看，接下来才是开发中常用的

Css“装修”HTML方式三

按照分离原则，我们应该吧Css代码写在另外一个文件中，而不是写在HTML文件中，写法和在style标签中一样，而标签上的选择器也支持class和id选择器，下面直接给示例吧

Css文件文件名 index.css

.h1Cls{
color:red;
}
#pId{
color:yellow;
}

HTML文件文件名 index.html
<html>
<head>
<title></title>
</head>
<body>
<h1 class="h1Cls">这是一个标题</h1>
<p id="pId">这是一个段落</p>
</body>
</html>看着这段HTML代码大家是不是有什么问题呢？它怎么知道我需要关联的Css文件是哪个呢？所以这个代码是达不到效果的，应该是下面这样
<html>
<head>
<title></title>
<link href="index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1 class="h1Cls">这是一个标题</h1>
<p id="pId">这是一个段落</p>
</body>
</html>蓝色加粗部分就是引入Css文件的link标签，href属性值为index.css的文件路径

Css也是有常用样式的，常用样式你可以参考 Css常用样式

好了，以上就是学习Css的分享，希望能给初学者一个方向——致曾经埋头瞎J8折腾的我们！

如果有漏掉的请在下面评论区留言，我好补上。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航