CSS的引入方式

CSS又叫做样式层叠表,它是来给HTML打扮的,也就是给HTML穿上个花里花俏的衣服。

CSS的引入

在HTML中CSS总共有三种引入方式

行内样式

利用元素的style属性,标签也叫元素。

<p style="color:red;">
    这段文字是红色的
</p>

内联样式

利用style标签,写在head标签里

<!doctype html>
<html>
   	<head>
        <title></title>
        <meta charset="utf-8">
        <style>
            p{
                color: red;
            }
            div{
                color: blue;
            }
        </style>
    </head>
    <body>
        <p>
            我是红色的
        </p>
        <div>
            我是蓝色的
        </div>
    </body>
</html>

外联样式

在外部建立一个css文件,比如Index.css,然后引用它

<!doctype html>
<html>
   	<head>
        <title></title>
        <meta charset="utf-8">
       	 <link rel="stylesheet" type="text/css" href="./index.css">
    </head>
    <body>
        <p>
            我是红色的
        </p>
        <div>
            我是蓝色的
        </div>
    </body>
</html>

以下是Index.css文件的内容

p{
    color: red;
}
div{
    color: blue;
}

推荐使用外联样式

CSS的写法

相信聪明的你,已经从上面猜到CSS的基本语法了

选择器{
    属性1:值;
    属性2:值;
}

CSS的注释

/*
写在这里面的都是CSS的注释

*/
posted @ 2019-12-18 12:45  司徒炼  阅读(206)  评论(0编辑  收藏  举报