（2）css语法和使用方式

最新推荐文章于 2023-09-11 12:14:48 发布

泽哥ins

最新推荐文章于 2023-09-11 12:14:48 发布

阅读量643

点赞数

分类专栏： CSS3 文章标签：前端 css css3

本文链接：https://blog.csdn.net/qq_36213140/article/details/121473201

版权

CSS3 专栏收录该内容

53 篇文章 5 订阅

订阅专栏

一、css规则

CSS 规则由两个主要的部分构成：选择器，CSS声明。

选择器通常是您需要改变样式的 HTML 元素。 CSS声明总是以分号(;)结束，以大括号({})括起来每条声明由一个属性和一个值组成。属性是您希望设置的样式属性。每个属性有一个值。属性和值被冒号分开。

二、css使用方式

使用CSS样式表的方法有四种：外部样式表、内部样式表、内联样式、导入式。

1.内联样式

内联样式：也被习惯叫做行内样式，内联样式将表现和内容混杂在一起，会损失掉样式表的许多优势，请慎用这种方法。要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。

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

内联样式的缺点：

a、内联式必须写在标签上，没有完全脱离 HTML 标签。

b、 css 样式代码让标签结构繁重，不利于 HTML 结构的解读。

c、一个内联式的 css 代码，只能给一个标签使用，如果多个标签有相同的样式，同样的 css 代码需要书写多次，增加代码量。

d、样式越多越不容易阅读，也不容易维护，看着不美观，代码乱。

因此，实际工作中不会使用内联式（行内式）编写 css 代码。

2.内部样式

当单个HTML文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css引入方式2：内部样式</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>div盒子</div>
</body>
</html>

内部样式的优点：

a、实现了结构和样式的初步分离，css 只负责样式，HTML 负责结构。

b、多个标签可以利用一段代码设置相同的样式，节省代码量。

内部样式的缺点：

a、结构和样式并没有完全分离，代码依旧书写在 HTML 文件的<style>标签内部。

b、css 样式只能给一个 HTML 文件使用，不能够被多个 HTML 文件同时利用。

c、在 HTML 中如果 css 代码太多，会造成文件头重脚轻。

3.外部样式

外联式 CSS，也可以叫做外链式 CSS、外部 CSS。书写位置：在一个单独的扩展名为 .css 的文件中。书写语法：内部代码与内嵌式样式表中 <style> 标签内部的代码一样的。需要通过选择器去选中标签，添加对应的样式。注意：在 .css 文件中书写时，不需要再加 <style> 标签。

外部样式的引入方式：在 HTML 中的 <head> 标签内部使用 <link> 标签进行引入。

link标签的常用属性：

外联式优点:

①实现了 HTML 和 css 完全分离。

②多个 HTML 文件可以共用一个 css 文件，便于提取公共 css，减少代码量。

③可以实现一个 css 变化，多个 HTML 页面同时变化，减少工作量。

④一个 HTML 文件可以引入多个 css 文件，可以实现同一个页面中 css 代码分层。

4.导入式

书写位置：在内嵌式样式表 <style> 标签内部，或者在外联式样式表内部，导入其他的外部的 .css 文件。

导入方式：利用一条 @import url(路径) 语句进行引入。

导入式缺点：

导入式样式表的作用与外联式样式表基本相同。但是由于导入式在浏览器中加载时，会在 HTML 结构加载完毕后再进行编译，如果网速比较慢时，会导致网页出现没有 css 样式的效果，给用户的体验不好。实际工作中，较少使用导入式，推荐使用外联式样式表。

三、css使用方式实际应用场景

小型练习demo案例：可以使用内嵌式（即为内部样式） CSS。

实际企业工作、大型网站项目：推荐使用外联式（即为外部样式） CSS。

泽哥ins

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
（2）css语法和使用方式

一、css规则CSS 规则由两个主要的部分构成：选择器，CSS声明。选择器通常是您需要改变样式的 HTML 元素。 CSS声明总是以分号(;)结束，以大括号({})括起来每条声明由一个属性和一个值组成。属性是您希望设置的样式属性。每个属性有一个值。属性和值被冒号分开。二、css使用方式使用CSS样式表的方法有四种：外部样式表、内部样式表、内联样式、导入式。1.内联样式内联样式：也被习惯叫做行内样式，内联样式将表现和内容混杂在一起，会损失掉样式表的许多优势，请慎用这种方法。
复制链接

扫一扫