css引入页面的三种方法

程序员文章站 2022-03-24 10:57:18

1.内联式：直接在标签上写样式如上面的代码所示，在div标签内直接通过styl属性直接写样式。那么这里我们设置了字体的颜色为红色，字体大小为50px。看一下显示出来的效果。这种方法在开发中是最不常用的一种，因为在标签内写方法会让代码看起来很乱，而且也不利于管理和查找，所以只有在某些情况下才会使 ......

1.内联式：直接在标签上写样式

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>css页面引入方法</title>
 6 </head>
 7 <body>
 8     <div style="color: red ;font-size:50px">css页面引入方法</div>
 9 </body>
10 </html>

　　如上面的代码所示，在div标签内直接通过styl属性直接写样式。那么这里我们设置了字体的颜色为红色，字体大小为50px。

看一下显示出来的效果。

css引入页面的三种方法

　　　　这种方法在开发中是最不常用的一种，因为在标签内写方法会让代码看起来很乱，而且也不利于管理和查找，所以只有在某些情况下才会使用这种方式来写样式。

2.嵌入式：通过style标签来写样式

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>css页面引入方法</title>
    <style type="text/css">
        div{
            color: green;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div>css页面引入方法</div>
</body>
</html>

　　可以看到我在head中用style标签写了一个样式出来，通过选择器选择器来将样式加入到页面中。看一下效果。

css引入页面的三种方法

　　　这种方法是比较常用的一种，一般在写首页的时候通常会用到这种方式，因为网站首页加载快慢会直接影响用户的体验，所以网页的加载速度就要快。那么这种方式不会影响加载速度，又将样式整合到了标签中，所以是比较适用的。但是也不会大量的使用。最后一种才是我们经常用的方式。

3.外联式：通过link标签将样式添加到页面上

main.css

1 div{
2     font-size: 50px;
3     color: blue;
4 }

code.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>css页面引入方法</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div>css页面引入方法</div>
</body>
</html>

　　我们可以看到这次用了两个文件，一个是css文件，一个是html文件。css文件里写的东西和style标签中的写法是一模一样的。只是单独写在一个文件中。然后通过link标签将css样式文件引入到页面。rel里面的东西我们不用管，herf中的路径就是css文件的逻辑路径。我们看一下效果。

css引入页面的三种方法