CSS 使用方法

最新推荐文章于 2024-03-23 01:00:00 发布

a965666292

最新推荐文章于 2024-03-23 01:00:00 发布

阅读量374

点赞数

原文链接：http://www.cnblogs.com/lyw-hunnu/p/lyw_cssusage.html

版权

引入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 文件之后再加载，如果网页加载比较慢，那么后者可能会出现无样式的情况。

六、优先级

　　行内样式 > 内部样式 > 外部样式（但是最后定义的优先级最高，及最近原则）

　　css2.css 文件

p{color:#f2f2f2; /*灰色*/ }

　　css3.css 文件

p{color:blue; /*蓝色*/ }

html 文件

　　1. 显示红色（行内样式 > 内部样式 > 外部样式）

<head>
    <link href="css3.css" rel="stylesheet" type="text/css"/> <!--蓝色-->
    <style type="text/css">
        p{color:green;} /*绿色*/
        @import url(css2.css); /*灰色*/
    </style>
</head>
<body>
    <p style="color:red;">CSS 优先级</p>   <!--红色-->
</body>

　　2. 显示绿色

<head>
    <link href="css3.css" rel="stylesheet" type="text/css"/> <!--蓝色-->
    <style type="text/css">
        p{color:green;} /*绿色*/
        @import url(css2.css); /*灰色*/
    </style>
</head>
<body>
    <p>CSS 优先级</p> 
</body>

　　3. 显示灰色（内部样式 > 外部样式）

<head>
    <link href="css3.css" rel="stylesheet" type="text/css"/> <!--蓝色-->
    <style type="text/css">
        @import url(css2.css); /*灰色*/
    </style>
</head>
<body>
    <p>CSS 优先级</p> 
</body>

　　4. 显示蓝色（外部样式 > 内部样式）

<head>
    <style type="text/css">
        @import url(css2.css); /*灰色*/
    </style>
    <link href="css3.css" rel="stylesheet" type="text/css"/> <!--蓝色-->
</head>
<body>
    <p>CSS 优先级</p> 
</body>

　　所以总的来说，最后定义的优先级最高，及最近原则。

转载于:https://www.cnblogs.com/lyw-hunnu/p/lyw_cssusage.html

a965666292

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS 使用方法

引入CSS样式有四种方法：　　1. 行内样式（内联样式）　　2. 内部样式表（嵌入样式）　　3. 外部样式（LInk 链入）　　4. 导入式一、行内样式（内联式）<p style="color:red;">CSS 使用方法</p>二、内部样式表（嵌入样式）　　将 CSS 内容放在 style 标签中，同时 style 标签放...
复制链接

扫一扫