css_三种引入方法

时间:2022-11-12 08:31:17

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

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

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

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

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

css_三种引入方法css_三种引入方法
<body>
        <div style="background-color: #0095bb">这是第二种方法</div>
</body>
View Code

css_三种引入方法

 

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

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

css_三种引入方法

问题:第一种及第二种方法同时存在了,怎么办?

css_三种引入方法css_三种引入方法
<!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

css_三种引入方法

 

3、引入外部CSS文件

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

  css_三种引入方法

  2、将CSS文件引入到HTML中

   css_三种引入方法css_三种引入方法
<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、检查样式产生的效果

  css_三种引入方法