码迷,mamicode.com
首页 > Web开发 > 详细

【CSS】CSS样式的三种引用方法

时间:2017-08-22 01:49:08      阅读:300      评论:0      收藏:0      [点我收藏+]

标签:ext   ace   UI   href   port   viewport   内联   添加   init   

  什么是CSS?CSS是 Cascading Style Sheets 的首字母缩写,意思是层叠样式表。有了CSS,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁。为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开。

  那么,怎么在HTML中引入Css?

  第一个方法是:内联式(行间样式):

<body>
    <!--内联式(行间样式)-->
    <div style="color:red">这是第一个div</div>  
</body>

  直接在标签里添加样式,因为这种方式不方便对后期的维护,所以不推荐使用。

  第二种是:内嵌式:

...
<head>
<style type="text/css">
        h3{
            font-size: 40px;
            color: greenyellow;
            }
    </style>

</head>
<body>
    <h3>Css的内嵌式引入方法</h3>
</body>
</html>

  这种方法实在<head></head>标签中间插入,部分推荐使用,在首页使用可以加快页面的加载速度。

  第三种:外联式

  先写一个后缀是.css的文件,例如:style.css文件:

p{
    font-family: ‘Mcrosoft Yahei‘;
    color:aquamarine;
}

  然后在html中,使用link链接,例如:

...
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

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

    <title>Document</title>
</head>
<body>
    
    <p>这是一个段落标签(第三种CSS的引用方法)</p>
    
</body>
</html>

  这种方法方便了后期对网页样式的管理,推荐使用。

  

【CSS】CSS样式的三种引用方法

标签:ext   ace   UI   href   port   viewport   内联   添加   init   

原文地址:http://www.cnblogs.com/sister-wen0318/p/7407296.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!