欢迎光临
我们一直在努力

CSS | CSS使用方法(引用方法)

CSS共有四种引用方法,分别为

  • 行内样式(内敛样式)
  • 内部样式表(嵌入样式)
  • 外部样式表
  • 导入式

CSS行内样式为直接在开始标签内添加style样式属性,如下面为p标签下的文字添加颜色属性和字体大小属性

<p style="color:red;font-size:30px;">文字部分</p>

CSS内部样式为把CSS样式代码写在style标签内(style标签放在head标签内),下面是一个通过内部样式修改样式的案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css样式基础</title>
        <style type="text/css">
            p{font-size: 30px;color: blue;font-family: "隶书";}
            h1,h2,h3{font-size: 30px;color: rebeccapurple;} /*为多个元素设置相同属性*/
        </style>
    </head>
    <body>
        <h1>css层叠样式</h1>
        <h2>css层叠样式</h2>
        <h3>css层叠样式</h3>
        <p>用于定义HTML内容在浏览器中的显示样式</p>
    </body>
</html>

因为部分低版本浏览器可能不适用CSS内部样式,我们可以在style内添加html的注释,这样低版本浏览器就不会运行这些样式代码,高版本浏览器正常运行,正如下面所示

<style type="text/css">
  <!--
  这里写CS样式
  -->
</style>

css外部样式指把CSS样式代码写在一个独立的文件中,文件拓展名为.css

引用外部样式表的方法为通过下面的代码,这段代码同样放在head标签内

<link href="xxx.css" rel="stylesheet" type="text/css">
  • href用于引用文件的路径(相对路径或绝对路径)
  • rel的值定义链接和文档的关系,值是stylesheet
  • type属性值声明了文件的类型

下面是通过css外部样式的案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css样式基础</title>
        <link href="css_1.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <h1>css层叠样式</h1>
        <h2>css层叠样式</h2>
        <h3>css层叠样式</h3>
        <p>用于定义HTML内容在浏览器中的显示样式</p>
    </body>
</html>
p{font-size: 30px;color: blue;font-family: "隶书";}
h1,h2,h3{font-size: 30px;color: rebeccapurple;} 

CSS导入式方法基本语法结构为 @import url(外部样式地址);

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css样式基础</title>
        <style type="text/css">
            @import url(css_1.css);
        </style>
    </head>
    <body>
        <h1>css层叠样式</h1>
        <h2>css层叠样式</h2>
        <h3>css层叠样式</h3>
        <p>用于定义HTML内容在浏览器中的显示样式</p>
    </body>
</html>

CSS使用方法区别

在实际开发时,我们最常用的是链入外部样式。

赞(0) 打赏
未经允许不得转载:散人研 » CSS | CSS使用方法(引用方法)
分享到: 更多 (0)

评论 抢沙发

5 + 9 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏