CSS 使用方法

引入CSS样式有四种方法：

　　1. 行内样式（内联样式）

　　2. 内部样式表（嵌入样式）

　　3. 外部样式（LInk 链入）

　　4. 导入式

一、行内样式（内联式）

<p style="color:red;">CSS 使用方法</p>

二、内部样式表（嵌入样式）

　　将 CSS 内容放在 style 标签中，同时 style 标签放在 head 标签中。

<head>
    <style type="text/css">
        p{color: blue;}
    </style>
</head>

<body>
    <p>CSS 使用方法</p>
</body>

　　有些浏览器版本过低无法解析 <style> 标签，就有可能在页面中显示 CSS 样式的内容。在开发中可以使用下列写法,

<head>
    <style type="text/css">
       <!-- p{color: blue;} -->
    </style>
</head>

　　如果浏览器不能解析 <style> 标签，就会忽略 p{color: blue;} 不会将其打印出来，如果可以解析 <style> 标签，就会正常显示。

三、外部样式（Link 链入）

　　CSS 样式放在的内容放在后缀为 css 的文件中，再在 html 文件中使用 link 标签将 CSS 文件链入html 文件中。

　　link 标签放在 head 标签中，link 标签有三个属性，

　　　　href ="CSS 文件的路径"

　　　　rel="stylesheet" 表示被链接的文档是一个样式表

　　　　tyle="text/css"

　　css.css 文件

p{
    color:blue;
}

　　css_test.html 文件

<head>
    <link href="css.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <p>CSS 使用方法</p>
</body>

四、导入式

　　依旧是使用外部 CSS 文件，但是不使用 link 标签，而是使用 import ，放在 style 标签中。

　　css_test.html 文件

<head>
    <style type="text/css">
        @import "css.css"         /*两者选择其中一种*/
        @import url(css.css);    /*两者选择其中一种*/

    </style>
</head>
<body>
    <p>CSS 使用方法</p>
</body>

五、比较四种使用方法

　　外部样式和导入式使用效果是一样的，只是在加载时不同。外部样式在页面加载时，同时加载 CSS 样式，导入式在读取玩 html 文件之后再加载，如果网页加载比较慢，那么后者可能会出现无样式的情况。

猜你喜欢