0CSS样式表与HTML结合的方法

从此王子和公主幸福的生活在了一起:)

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

一、外部样式表(常用)

　　通过 <link />标签引入样式表：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>外联样式</title>

        <link rel="stylesheet" type="text/css" href="style.css" media="all" />

        <!--在link标记中rel和href属性是必须的，type属性和media属性可省略-->

        <link rel="stylesheet" href="style.css" />

    </head>

    <body>

    </body>

</html>

注意：1)在link标记中rel和href属性是必须的，type属性和media属性可省略；

　　 2)样式表中不能包含HTML标记语言，只能有CSS规则和CSS注释，否则导致在该标记后面的CSS样式将无法被识别。

二、内联样式表

　　1、通过 <style></style>标签引入样式表：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>内联样式</title>

        <style>

            body{

                background-color: blue;

            }

        </style>

    </head>

    <body>

    </body>

</html>

　　2、通过@import指令引入样式表：

<!DOCTYPE html>

    <html>

    <head>

        <meta charset="UTF-8">

        <title>@import</title>

        <style>

            /*将@import放置在CSS规则前*/

            @import url(style.css);

            body {

                background-color: blue;

            }

        </style>

    </head>

    <body>

    </body>

</html>

注意：1)将@import url(style.css);写在<style>标签内；

　　 2)@import放置在CSS规则之后将不起使用。

三、行间样式

　　写在某个元素自身的样式，使用HTML的style属性实现。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>行间样式</title>

    </head>

    <body>

        <div style="background-color: red; width:100px;height:100px;" style="background-color: yellow;"></div>

    </body>

</html>

注意：行间样式若存在多个style属性，只能识别第一个。

巴特西

0CSS样式表与HTML结合的方法

一、外部样式表(常用)

二、内联样式表

三、行间样式

最新文章

热门文章