首页 > Web开发 > 详细

CSS层叠样式表(Cascading Style sheets)

时间:2019-03-31 23:23:23      阅读:188      评论:0      收藏:0      [点我收藏+]

CSS层叠样式表(Cascading Style sheets)

 

技术分享图片

---------

技术分享图片

----------------

技术分享图片

 

 

-----------

技术分享图片

 

---------------

技术分享图片

-----------

技术分享图片

---------------------

技术分享图片

-------------

技术分享图片

--------------------

不同选择器具有相同的样式我们可以一起写,如下:
<style type="text/css">
        h1,h2,h3,p{
            font-size:30px;
            font-family: "隶书";
        }
 </style>

--------------------

(1)html中代码的注释格式是<!--*****-->;

(2)/*这是注释*/  是css中的注释;

(3)//这是注释   是js代码中的单行注释;

      /*这是注释*/   是js代码的多行注释方式。

--------------------

技术分享图片

-----------------

技术分享图片

---------------------------

技术分享图片

----------------------

下面的HTML注释,是为了防止在低版本浏览器不识别<style>标签,而把h1,h2,h3,p的样式显示在浏览器中。

而高版本的浏览器则会忽略HTML注释的标签,而直接解释相应的样式表。

<style type="text/css">

<!--
        h1,h2,h3,p{
            font-size:30px;
            font-family: "隶书";
        }

-->
 </style>

----------------------

技术分享图片

-------------------

技术分享图片

使用link链入外部样式,页面加载时会同时加载样式

----------------------------------

技术分享图片

CSS导入式有两种,如下写法:

<style type="text/css>

  @import "外部CSS样式";    或者使用  @import url( 外部CSS样式 );

</style>

---------------------------

技术分享图片

-------------

使用外部样式比较多,好处如下;(不过还是要根据具体情况进行选择)

技术分享图片

------------------------

技术分享图片

以上说明1解释如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        @import url(1.css);
        p{color: blue;}
    </style>
    <link rel="stylesheet" type="text/css" href="2.css">  这里 link样式  大于  style里面的样式
</head>
<body>
    <p>我爱你</p>
</body>
</html>

-----------------------

技术分享图片

-----------------------

技术分享图片

-------------------

技术分享图片

---------------

只要使用了类选择器,那么该标签就会使用该类样式。

技术分享图片

----------------

技术分享图片

解析:

p.red{font-size:50px;}  在所有p标签中,设置有class=“red”的p标签,字体才变成50px。

h1.red{font-size:20px} 只有设置了class="red"的h1标签,字体才设置为:20xp。

-----------------------

技术分享图片

------------------

CSS层叠样式表(Cascading Style sheets)

原文:https://www.cnblogs.com/Knowledge-is-infinite/p/10633805.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!