1.3 CSS的引入方式

最新推荐文章于 2024-09-17 22:59:44 发布

.弗兰克

最新推荐文章于 2024-09-17 22:59:44 发布

阅读量50

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/z2768557792/article/details/129333201

版权

文章介绍了CSS样式的三种形式：行内样式（用于单个元素样式设置）、内部样式（在HTML文档<head>中定义，适用于整个页面）和外部样式（通过链接CSS文件实现，适用于多个页面，实现结构与样式的彻底分离）。外部样式表在实际开发中更为常见，具有较高的控制范围和可维护性。

摘要由CSDN通过智能技术生成

引入CSS样式表可以分为3类

行内样式表（行内式）
内部样式表（嵌入式）
外部样式表（链接式）

行内样式表

行内样式表：是在元素标签内部的style属性中设定CSS样式

一般配合js使用

只能设置单行CSS样式

<p style="color: blue;"></p>

内部样式表

内部样式表：是将CSS代码放在<style>标签中，一般放在头部标签中
一般用于练习使用

    <style>

        p {

            color: blueviolet;

            font-size: 35px;

        }

    </style>

外部样式表

实际开发一般用外部样式表，样式写在CSS文件中引入使用，与HTML文件分离

引入CSS文件

p {

    color: blue;

    font-size: 16px;

    font-family: 'Courier New', Courier, monospace;

    font-style: italic;

    font-weight: 700;

    text-align: center;

    text-decoration: underline;

}

<!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>Document</title>

  

<link rel="stylesheet" href="./1.css">

 </head>

<body>

    <p>我是外部css文件设置后的p</p>

</body>

</html>

总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	权位重	结构样式混写	较少	控制一个标签
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面
外部样式表	结构和样式分离	需要引入	最多	控制多个页面