HTML-CSS极简入门教程1：了解CSS

最新推荐文章于 2024-11-11 17:37:15 发布

温带烧烤

最新推荐文章于 2024-11-11 17:37:15 发布

阅读量344

点赞数 5

文章标签： html 前端 css

本文链接：https://blog.csdn.net/Minecraftable/article/details/130433612

版权

快速读完这篇文章，你将了解：

一，学会在HTML中使用CSS

1，内联样式

内联样式也叫行内样式，优先级最高（可以覆盖内部样式表和外部样式表的效果）

优点：方便快捷，直接

缺点：大量使用内联样式会让你的代码看起来乱透了！而且在HTML中大量混用CSS代码，会让浏览器工作效率下降不少。他们不能被重复利用，做大型项目是不利于后期维护

使用方法：

<p style = "color:grey;">内联样式示例：修饰文本颜色</p>

运行结果：

2，内部样式表

内部样式表也叫“页顶样式表”，通常是在HTML代码文件的上层，定义全部的CSS样式，CSS代码的作用范围是他所在的整个HTML文件，优先级低于内联样式

优点：作用范围更大，比内联样式更具有可读性

缺点：在一个文件中用内部样式表定义过多样式同样会造成文件过大，加载卡顿，对于后期维护方面也没有外部样式表方便

使用方法：先用选择器选择要修饰的元素，再在<style>标签中进行样式修改

<heml>
    <head>
        <title></title>
        <style>
            p{
                color:green;
            }
        </style>
    </head>
    <body>
        <p>内部样式表修饰</p>
    </body>
</heml>

运行效果：

3，外部样式表

外部样式表也叫外联样式表，先把CSS代码全部定义在一个.css文件中，在在HTML文件中使用<link>标签导入

优点：实现CSS代码与HTML代码的分离，可读性更强，利于开发维护，可以复用

缺点：大量使用外部样式表也会减慢加载速度

使用方法：.html中的代码：

<heml>
    <head>
        <title>网页标题</title>
        <link rel = "stylesheet" type = "text/css" href = "./style.css">
    </head>
    <body>
        <p>外部样式表修饰</p>
    </body>
</heml>

style.css中的代码：

p{
    color:red
}

输出结果：

二，CSS基本语法

1，注释语法

在HTML中，常用来注释掉某一个元素：

<!--这段内容不会显示-->
<!--p>你要这样打注释也没意见</p-->

css代码块则使用/*注释内容*/来进行。当然，如果你使用内部样式表，也可以直接把<style>元素注释掉

p{
    /*color:red*/
    color:red
}

2，样式优先等级（属性覆盖）

当一个元素被定义多个样式，会优先显示内联样式，如何到内部样式表，再到外部样式表

3，提升样式权重

使用关键字： !important 来提升元素的权重，使其不会被覆盖

<heml>
    <head>
        <title></title>
        <style>
            p{
                color: green !important;;
            }
            p{
                color:red;
            }
        </style>
    </head>
    <body>
        <p>文本</p>
    </body>
</heml>

如果我们不使用!important，第二个“red”的样式将会覆盖住第一个“green”的样式，文本最后显示为红色。添加了!important，该样式不会被覆盖，文本最后显示绿色