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

上回我们已经完成了我们的第一个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的使用方式全都有了，尽快发挥你的想象，创建一个漂亮的网站吧！

html a4页面样式_前端零基础入门（五）：如何在页面当中引用css样式相关推荐

罗马音平假名中文可复制_日语零基础入门五十音，日语零基础五十音图表
日语零基础入门五十音,日语入门的最基本要求就是记住五十音图,但是这个记住不仅是你能背下来或是默写下来.而是你需对号入座! 下面是一张五十音图表. 即每个假名单独拿出来你要立马反应出来怎么读.其重要性甚 ...
【慕课网】前端零基础入门---步骤二：页面化妆师CSS---02-CSS文本样式
02-CSS文本样式第1章字体样式 1-1 字体属性(font-family) 因此,标题可以使用Serif字体集,大段文字可以使用Sans Serif. 注意:使用常用的字体,而不要将自己安装的 ...
Web前端零基础入门——HTML5
[尚硅谷]Web前端零基础入门HTML5+CSS3基础教程丨初学者从入门到精通 html入门 index1 > <html><head><title>我是谁? ...
前端零基础入门（八）：background的妙用_css精灵
在前面我们已经了解到了网页当中背景的基本用法了,包括: 背景颜色,背景图片,背景图片是否重复,背景图片是否平铺等等基础样式. 今天要和大家讨论的是背景图的一个稍微高级一点的用法:图片精灵(也叫:雪碧图 ...
【尚硅谷】Web前端零基础入门HTML5+CSS3基础教程
[尚硅谷]Web前端零基础入门HTML5+CSS3基础教程学习视频来源:哔哩哔哩弹幕网(https://www.bilibili.com/video/BV1XJ411X7Ud?spm_id_from ...
web前端零基础入门（一）
web前端零基础入门 01. 网页简介 02. 网页简史 03. HTML简介 04. 编写第一个网页 06. 安装notepad++ 07. 自结束标签和注释 07. 标签中的属性 08. 文档声明 ...
人工智能python零基础入门教程_人工智能零基础入门视频教程
该楼层疑似违规已被系统折叠隐藏此楼查看此楼人工智能零基础入门视频教程 100天人工智能工程师学习计划 -- 全程实战案例,从机器学习原理到推荐系统实现,从深度学习入门到图像语义分割及写诗机器人,再 ...
web前端零基础入门学习！前端真不难！
现在互联网发展迅速,前端也成了很重要的岗位之一,许多人都往前端靠拢,可又无能为力,不知所措,首先我们说为什么在编程里,大家都倾向于往前端靠呢?原因很简单,那就是,在程序员的世界里,前端开发是最最简单的 ...
朋友圈加粗字体数字_报名 | 零基础入门brush lettering英文花式字体
Brush lettering 是英文书法的一种书写形式,并非一种固定的字体,换而言之,每个人写出的brush lettering都有自己的特色,大家可以根据自己喜欢的风格来变换书写形式,并且可以把这 ...

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

html a4页面样式_前端零基础入门（五）：如何在页面当中引用css样式相关推荐

最新文章

热门文章