H5学习笔记——CSS

最新推荐文章于 2022-10-09 16:48:55 发布

你的背影_

最新推荐文章于 2022-10-09 16:48:55 发布

阅读量423

点赞数

分类专栏： H5

本文链接：https://blog.csdn.net/qq_34765552/article/details/79614781

版权

H5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Cascading Style Sheets——层叠样式表，简称CSS

如果说HTML是决定页面写什么内容的话，那么CSS就是控制这些内容如何显示与表现的。

CSS与HTML结合的三种形式如下：

内联式
嵌入式
外链式

一、内联式

直接在标签内部利用style属性来表示。
例子如下：

<div style="color:red;font-size:20px;line-height:30px">
    超文本标记语言定义了多种数据类型的元素内容，如脚本数据和样式表的数据，和众多类型的属性值，包括ID、名称、URI、数字、长度单位、语言、媒体描述符、颜色、字符编码、日期和时间等。所有这些数据类型都是专业的字符数据。
<div>

效果如下：
这里写图片描述

这种方法是比较直观，但是如果两段文字甚至更多段文字都需要设置相同的style属性，会不会造成过多冗余呢？

于是有了嵌入式；

二、嵌入式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style type="text/css">
        div{
            color:red;
            font-size:20px;
            line-height:30px;
            font-family: '幼圆';
        }
    </style>
</head>
<body>
    <div>
        超文本标记语言定义了多种数据类型的元素内容，如脚本数据和样式表的数据，和众多类型的属性值，包括ID、名称、URI、数字、长度单位、语言、媒体描述符、颜色、字符编码、日期和时间等。所有这些数据类型都是专业的字符数据。
    <div>
</body>
</html>

在head中有个style标签

div是个选择器（后面会具体讲），body中凡是被div标签内的内容全部会变成这个样式。

而在实际开发中，我们更偏向于把html和css分离成两个文件，就引出第三种方式，外链式；

三、外链式

这时候，我们要把在head中的样式放在单个文件中，

HTML文件内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <link rel="stylesheet" type="text/css" href="CSS文件路径">
</head>
<body>
    <div>
        超文本标记语言定义了多种数据类型的元素内容，如脚本数据和样式表的数据，和众多类型的属性值，包括ID、名称、URI、数字、长度单位、语言、媒体描述符、颜色、字符编码、日期和时间等。所有这些数据类型都是专业的字符数据。
    <div>
</body>
</html>

CSS文件内容：

div{
    color:red;
    font-size:20px;
    line-height:30px;
    font-family: '幼圆';
}

以上三种方式，
嵌入式一般用在首页，提高显示出来的速度。
外链式是推荐使用的。

你的背影_

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
H5学习笔记——CSS

Cascading Style Sheets——层叠样式表，简称CSS如果说HTML是决定页面写什么内容的话，那么CSS就是控制这些内容如何显示与表现的。CSS与HTML结合的三种形式如下：内联式嵌入式外链式一、内联式直接在标签内部利用style属性来表示。例子如下：&lt;div style="color:red;font-size:20px;line-h...
复制链接

扫一扫

专栏目录