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

青旅半醒 2022-06-03 02:46 157阅读 0赞

学习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>
        <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]  **

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

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

[Css]: http://www.w3school.com.cn/css/index.asp