在html文本中，引入CSS，进行显示效果的渲染，有四种方式：

一、直接在标签中，添加属性style

　　只能渲染指定的一个标签

二、使用标签选择器，添加在head标签中

　　只适用于当前文档，不能跨文档使用

三、使用@import方式，导入CSS文件，

　　可跨文档使用同一CSS式样，

　　同一文件也可以同时导入多个CSS，但是数量有所限制，

　　先加载web页面内容，后加载CSS效果，当web页面或CSS文档较大时，会出现闪烁，

四、使用link方式，导入CSS文件，推荐使用

　　可跨文档使用同一CSS式样，

　　同时导入多个CSS文档，数量无限制，

　　边加载页面、边加载CSS，

注意：同一标签添加多层CSS效果时，以最内层的优先级最高；

　　添加选择器或导入CSS文件，都可以使用标签名或者id；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css_test</title>
    <style>
        div{
        background-color:aqua;color:blue;
        }
        p{background-color:purple;color:red;
        }
        @ import"myCSStest.css"
    </style>
    <link href="myCSStest.css" type="text/css" rel="stylesheet">

</head>
<body>
    <p><input type="button" name="我们" value="we are ..."></p>
    <p style="background-color:aqua;color:red;">第一种CSS引入方式：标签中添加style<input type="button" name="我们" value="we are ..."></p>
    <div>
        第二种CSS引入方式
        <div>在head标签中添加标签选择器，并指定渲染方式</div>
        <p>多层标签嵌套时，优先使用内层标签的渲染</p>
    </div>
    <div>
        <ul id="forth">
            <li>第四种CSS引入方式，推荐使用</li>
            <li>CSS文本导入link</li>
            <li>rel属性不能省，css文档的数量不限制</li>
            <li>web页面加载过程中，同步加载CSS</li>
        </ul>
        <ul id="third">
            <li>第三种CSS引入方式，不推荐使用</li>
            <li>CSS文本导入@import</li>
            <li>css文档的数量有限制</li>
            <li>web页面先加载，后加载CSS</li>
            <li>当CSS文档较大时，会出现闪烁</li>
        </ul>
        <ol>
            第三种和第四种加载方式，都可以使用id或直接使用标签名
        </ol>
    </div>
</body>
</html>
View Code
#third{
color:black;}
#forth{
color:yellow;}
ol{
background-color:yellow;color:green;}
View Code