CSS在HTML中的使用方法

最新推荐文章于 2023-12-15 20:57:39 发布

分解机226

最新推荐文章于 2023-12-15 20:57:39 发布

阅读量1.1k

点赞数 6

分类专栏：前端网页开发文章标签： css html 前端

转载请标明出处

本文链接：https://blog.csdn.net/qq_64281750/article/details/124842432

版权

前端网页开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

行内样式

这种方法是直接在HTML的代码行中添加CSS代码，以<style>作为标志，这样的方法在做局部的样式设计时比较好用但是在需要做大量的样式设计的时候就会显得很鸡肋。

嵌入样式

嵌入样式是将样式定义为网页代码的一部分，放在文档的<head>和</head>之间，通过<style>和</style>标记声明。它与行内样式的区别在于嵌入样式的作用域是整个HTML文档。行内样式的作用域是一句语句。

看看例子

<!--demo0305.html-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/CSS">
        p
        {
            text-indent: 2em;
        }
        </style>
    </head>
    <body style="background-color: #CCC;color:#F00"><!--行内样式-->
    <p>
        计算机编程语言
    </p>
    <p>
        计算机编程语言是程序设计的最重要的工具，它是指计算机能够接受和处理的、具有一定语法规则的语言。<br>
        从计算机诞生，计算机语言经历了机器语言、汇编语言和高级语言几个阶段。
    </p>
    <p>
        在所有的程序设计语言中，只有机器语言编制的源程序能够被计算机直接理解和执行，<br>
        用其它程序设计语言编写的程序都必须利用语言处理程序“翻译”成计算机所能识别的机器语言程序。
    </p>
    </body>
</html>

嵌入样式，浏览器在整个页面中都会执行该样式规则，这里的<style>是HTML标签，它是告诉浏览器里面的是CSS代码。

使用嵌入样式的好处在于方便用户调试当前页面，但是在网站维护上就会很麻烦。我们来看下一个方法。

链接样式

链接样式是CSS使用频率最高的方法，它很好的体现了页面内容和样式的独立。实现了描述和CSS代码的分离。

链接样式首先要定义一个扩展名为.css的文件。这就像C++语言中的头文件一样是与程序分离的，该文件不能包含其他的HTML代码，创建号文件后就可以将其与HTML链接起来，当我们要修改网页的样式的时候就可以直接在该文件里面进行修改。

链接样式的方法就是在HTML代码的<head>部分添加代码

rel属性表示链接类型，定义链接的文件和HTML文档之间的关系就设为stylesheet。

type属性指明了链接样式的语言。

herf就是链接样式文件的地址。

来看一个例子

<!--demo0305.html-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="C:\Users\dell\Desktop\1111.css" type="text/css" rel="styplesheet"/>
    </head>
    <body ><!--行内样式-->
    <p id="first">
        计算机编程语言
    </p>
    <p id="second">
        计算机编程语言是程序设计的最重要的工具，它是指计算机能够接受和处理的、具有一定语法规则的语言。<br>
        从计算机诞生，计算机语言经历了机器语言、汇编语言和高级语言几个阶段。
    </p>
    <p>
        在所有的程序设计语言中，只有机器语言编制的源程序能够被计算机直接理解和执行，<br>
        用其它程序设计语言编写的程序都必须利用语言处理程序“翻译”成计算机所能识别的机器语言程序。
    </p>
    </body>
</html>

在link语句处引入了css文件。

导入样式

导入样式和链接样式类似，语法是在<style>标签中使用@import “css文件地址”。

样式的优先级

所谓优先级就是在样式有冲突时，那个样式先执行的问题，

行内优先级>嵌入式优先级>链接优先级>导入优先级。

分解机226

关注

6
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
5
评论
CSS在HTML中的使用方法

行内样式这种方法是直接在HTML的代码行中添加CSS代码，以<style>作为标志，这样的方法在做局部的样式设计时比较好用但是在需要做大量的样式设计的时候就会显得很鸡肋。嵌入样式嵌入样式是将样式定义为网页代码的一部分，放在文档的<head>和</head>之间，通过<style>和</style>标记声明。它与行内样式的区别在于嵌入样式的作用域是整个HTML文档。行内样式的作用域是一句语句。看看例子...
复制链接

扫一扫