温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css折叠样式(2)——定义样式表

发布时间:2020-08-04 01:35:19 来源:网络 阅读:340 作者:MK先生 栏目:开发技术


 css折叠样式(2)——定义样式表



第一样式表可用(1)嵌入式样式表(2)引入式样式表,两种方式来实现,

如下我便以代码的形式放在下面:

(1)嵌入式样式表

demo.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS样式使用</title>
    <style type="text/css">

        div{background:red;font-size:20px} <!--HTML标记定义 -->
        .div1{background-color:green;font-size:20px;}  <!--class定义样式 -->
        #divid{background-color:blue;font-size:20px;}  <!--id定义样式 -->  

        <!---组合选择器不能与其他选择器共存-->
        p,h2,h3,.p1,#pid {color:red;font-size:20px;} <!--组合定义样式 -->
    
        a:link { color:red; }       
        a:hover { color:green; }
        a:active { color:yellow; }
        a:visited { color:blue; }
        
    </style>
</head>
    
<body>
    <div class="div1" id="divid">css定义样式</div>
    
    <h2>这是定义样式1</h2>
    <h3>这是定义样式2</h3>
    <p>这是定义样式3</p>
    <p class="p1">这是定义样式4</p>
    <p id="pid">这是定义样式5</p>
    
    
    <a href="http://www.baidu.com/1" target="_blank">百度1</a>
    <a href="http://www.baidu.com/2" target="_blank">百度2</a>
    <a href="http://www.baidu.com/3" target="_blank">百度3</a>
    <a href="http://www.baidu.com/4" target="_blank">百度4</a>
    <a href="http://www.baidu.com/5" target="_blank">百度5</a>
</body>

</html>



(2)引入式样式表

demo.html

<!doctype html>
<html>
<head>
    <title>Css样式使用</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h2>css样式使用</h2>
    <a href="http://www.baidu.com/1" target="_blank">百度1</a>
    <a href="http://www.baidu.com/2" target="_blank">百度2</a>
    <a href="http://www.baidu.com/3" target="_blank">百度3</a>
    <a href="http://www.baidu.com/4" target="_blank">百度4</a>
    <a href="http://www.baidu.com/5" target="_blank">百度5</a>
    <br>
    <h2>这是定义样式1</h2>
    <h3>这是定义样式2</h3>
    <p>这是定义样式3</p>
    <p class="p1">这是定义样式4</p>
    <p id="pid">这是定义样式5</p>
    <div>css的html定义样式</div>
    <div class="div1">css的class定义样式</div>
    <div id="divid">css的id定义样式</div>
    <div class="div1" id="divid">css定义样式的优先级:id > class >HTML 样式</div>
</body>

</html>


style.css

body{
    background-color:yellow;
    color:#fff  
}


p,h2,h3,.p1,#pid {color:red;font-size:20px;}  /* 组合样式定义*/

a:link { color:red; }   /* 显示红色*/
a:hover { color:green; } /* 鼠标移动至该处变绿色*/
a:active { color:yellow; } /* 鼠标点击该处时变×××*/
a:visited { color:blue; } /* 鼠标点击该处后变蓝色*/

div{background:red;font-size:20px}  /* HTML样式定义   */
.div1{background-color:green;font-size:20px;}  /* class样式定义   */
#divid{background-color:blue;font-size:20px;}  /* id样式定义   */


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI