前端零基础入门（五）：如何在页面当中引用css样式

最新推荐文章于 2021-10-29 15:49:30 发布

/*----无忧----*/

最新推荐文章于 2021-10-29 15:49:30 发布

阅读量1k

点赞数 2

分类专栏：前端零基础入门文章标签： css html

本文链接：https://blog.csdn.net/q213546879/article/details/78003963

版权

前端零基础入门专栏收录该内容

12 篇文章 0 订阅

订阅专栏

上回我们已经完成了我们的第一个HTML页面了，但是这个HTML页面是不完整的，或者说仅仅只是一个页面而已，没有任何的样式，没有任何的修饰，也没有任何的功能。那么如何给页面加上一些修饰性的东西呢？

就如同HTML最开始免费使用的时候一样，对页面的修饰需求越来越多，我们只能通过css来改变HTML的外观，让我们的网页更加美观，这样消费者才会买账。

那么在HTML页面当中使用css一共有三种方式，第一种叫做行间样式，估计很多写后端的同学会比较熟悉
就像这样：

<div style="width:100px;height:100px;background:#f00;"></div>

        就这样直接把css样式写在标签的style属性里面就好了。
        这行代码里面，div是一个HTML页面中最常见的标签之一，后面的style就是标签的属性，任何写在标签括号里面，跟在标签名后面，用一个空格和标签分开的全部都是属性，属性有很多，有ID属性，有clsss属性等等,以后我们会再细说。
        这行代码里面写在style属性后面用“”号包起来的全部都叫做属性值。这里是属性值就是css样式。
        这里一共有三条css样式，分别是width宽度、height高度以及background背景。前面的宽度和高度分别都给了一个100px；
        px像素,是一个单位，和我们日常生活中的cm厘米，mm毫米一样。只不过在屏幕上不能用cm或者mm来作为单位，屏幕是由像素组成的，所以网页以像素为单位。用眼睛仔细看我们的电脑屏幕，可以看到一些小小的发光点，一个发光点，差不多就是一个像素。你的屏幕有多少个像素点取决于你的分辨率，比如我现在的分辨率是1920*1080。那么也就代表了我的屏幕从左到右是1920个像素点，从上到下是1080个像素点。
        再往后面，在background里面我写了一个代码“#f00”。这个f00其实是颜色的一个表示方法，在网页当中我们有四种表示颜色的方法，分别是：
                 一，英文关键词，如“red”,“green”, “blue”等等，那么也就是说在这里我可以把background里面的值写成ren:background:red;
                  二，十六进制代码，比如：ff0000;这就是一个十六进制的代码，这个代码代表红色，这串代码一共可以分为三组，ff,00,00 分别代表三原色：红绿蓝。第一组代表红，第二组代表绿，第三组代表蓝，十六进制的数字一共是从0到f。也就是说分别是：0，1，2，3，4，5，6，7，8，9，a，b，c，d，e，f。最小为0，最大为f。再回到这一组数字:ff0000，在这里，红色为最大值，绿色和蓝色都为最小值，所以这一组数字代表红色，当然，如果每一组数字都是重复的，则可以缩写，这个数字就可以缩写为：f00,也就是我在代码里面用到的那个值。
                  三，rgb()方法。其实从这几个字母应该就能看出来，rgb代表的就是三原色，三原色一组合，就可以表示任意颜色。在rgb方法里面接收三个数字，这三个数字的取值范围是0-255。和前面十六进制一样，第一个数字代表红色，第二个数字代表绿色，第三个数字代表蓝色。如果想要用rgb方法表示红色？相信你们心中已经有了答案：background:rgb(255,0,0)
                  四，rgba()方法。这个方法是基于rgb方法来的，后面多了一个a是用来控制透明度的，它的取值范围是0~1。比如rgba(255,255,255,0.5)；这就表示一个半透明的白色。当a的值为1的时候颜色是不透明的，0的时候完全透明。

有了这么一行代码，我们就已经在页面上画好了一个宽100像素，高100像素，背景颜色为红色的一个盒子了。这也是引用css的第一种方式——行间样式

第二种叫做内联样式，它不再写在行间了，而是写在页面的头部，也就是head标签里面，看下面的代码：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
        #box{
            width:100px;
            height:100px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

这样，我就引用好了一个内联样式表了

        首先我在页面的body标签里面写了一个div标签，并且写了一个id属性，属性的值是“box”。这里面，id属性的值可以随便写，只要遵循命名规则就可以了：
                    1，字母开头
                    2，字母数字下划线组合
                    3，区分大小写

不过还有一些不成文的规定，比如说尽量语义化之类的，以后我们再一一来讨论

在这一段代码里面，我把css样式写在了head标签里面，并且用style标签包起来了，注意！这里的style是一个标签，而不是一个属性了！

style标签里面首先写了一个“#box{}”，这个#号和后面的box组成了一个选择器，这个选择器叫做id选择器。意思就是选择一个id值为box的元素，为其加上相应的样式。因为在body标签里面的div我给的id的值是box，所以这里也要写box，对应上之后才能为div加上相应的样式。

第三种叫做外联样式表，顾名思义，这个样式表一定不会再写在HTML页面中了，而是单独新建一个css文件，如下图：
这里写图片描述

这张图片里面一共存在两个文件，一个是HTML文件，一个是css文件，这是HTML页面代码

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <div id="box"></div>
</body>
</html>

首先来分析一下HTML页面中的代码，这个代码和内联样式的代码差不多，都是在body标签中放了一个id属性为box的盒子。但是样式并不在页面当中。而是多出来了一个link标签，在标签里面有两个属性，分别是href 和 rel。href 代表的是超文本引用的意思，是Hypertext Reference的缩写，在href里面写了一个style.css和外面的css文件的名字是一样的，那么这样就把style.css这个文件引用到这个页面当中来了。后面的rel属性是relation的缩写，关系的意思，在这里要描述一个引用文件的类型，这个从后面rel的值stylesheet中也能看出来。

再来看看style.css是什么样子

#box{
    width:100px;
    height:100px;
    background: red;
}

style.css文件里面就写了这个么一个选择器，和一堆的样式，没什么可说的。
那么现在，css的使用方式全都有了，尽快发挥你的想象，创建一个漂亮的网站吧！

/*----无忧----*/

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端零基础入门（五）：如何在页面当中引用css样式

上回我们已经完成了我们的第一个HTML页面了，但是这个HTML页面是不完整的，或者说仅仅只是一个页面而已，没有任何的样式，没有任何的修饰，也没有任何的功能。那么如何给页面加上一些修饰性的东西呢？就如同HTML最开始免费使用的时候一样，对页面的修饰需求越来越多，我们只能通过css来改变HTML的外观，让我们的网页更加美观，这样消费者才会买账。那么在HTML页面当中使用c
复制链接

扫一扫