css_三种引入方法

CSS是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。

详请：http://www.w3school.com.cn/h.asp

其存在方式有三种：元素内联、页面嵌入和引入外部CSS文件。

核心语法为：style="key1:value1;key2:value2"

1、元素内联：在标签中直接使用样式语法 style="key1:value1"

<body>
        <div style="background-color: #0095bb">这是第二种方法</div>
</body>

View Code

2、页面嵌入：在页面中嵌入样式块 <style type="text/css"></style>块，样式块中间罗列样式，样式块一般放在head中

<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style type="text/css">
        div{
            background-color: #4cae4c;
        }
    </style>
</head>
<body>
        <div>这是第二种方法</div>
</body>

View Code

问题：第一种及第二种方法同时存在了，怎么办？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style type="text/css">
        div{
            background-color: green;
        }
    </style>
</head>
<body>
        <div style="background-color: red">第一种方法为红色，第二种方法为绿色</div>
</body>
</html>

View Code

3、引入外部CSS文件

　　1、创建外部CSS文件，其中直接写样式，如div标签

　　2、将CSS文件引入到HTML中

<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <link rel="stylesheet" type="text/css" href="ctest.css">
</head>
<body>
        <div>这是第三种方法啦</div>
</body>

View Code

　　3、检查样式产生的效果