Dev_Nick

导航

css（一）-- 概述以及引入方式

概述

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

简单的来说：css在一个网页中负责页面数据的样式，从而使得页面的结构和表现分离。

引入方式

css引入到html中的方式一共分为三种：

1、内部样式：在style标签中编写css代码。此种引入方式只能作用于本页面，复用性不强。

格式：

　　 <style type="text\css">
                编写css的代码。
        </style>

代码示例

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <style type="text/css">
 7         a{
 8             color: red;
 9             font-size: 20px;
10         }
11         </style>
12     </head>
13     
14     <body>
15         <a href="http://www.baidu.com">百度</a><br />
16         <a href="http://www.aiqiyi.com">爱奇艺</a><br />
17         <a href="http://www.youku.com">优酷</a><br />
18     </body>
19 </html>

2、外联样式：可以引入外部的css文件。 推荐使用。

css文件代码

1 a{
2     color: red;
3     font-size: 20px;
4     text-decoration: none;
5 }

外联样式的格式分为两种：

格式一：使用link标签。   推荐使用...

具体格式：

　　<link href="css文件的路径" rel="stylesheet">

代码示例：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <link href="css/1.css" rel="stylesheet" />
 7     </head>
 8     
 9     <body>
10         <a href="http://www.baidu.com">百度</a><br />
11         <a href="http://www.aiqiyi.com">爱奇艺</a><br />
12         <a href="http://www.youku.com">优酷</a><br />
13     </body>
14 </html>

格式二：使用<style>引入

具体格式：

　　<style type="text/css" >
             @import url("css的路径");
      </style>

代码示例：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <style type="text/css">
 7             @import url("css/1.css");
 8         </style>
 9     </head>
10     
11     <body>
12         <a href="http://www.baidu.com">百度</a><br />
13         <a href="http://www.aiqiyi.com">爱奇艺</a><br />
14         <a href="http://www.youku.com">优酷</a><br />
15     </body>
16 </html>

link和@import引入外部样式的区别：
(1)、隶属上的差别
     link属于HTML标签，而@import完全是CSS提供的一种方式。
(2)、@import次数限制
    @import只能引入31次css文件。
(3)、加载顺序的不同
     当页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式，然后突然样式会出现，网速慢的时候还挺明显。
(4)、兼容性上的差别
     由于@import是CSS2.1提出的，@import只有在IE5以上的才能识别，而link标签无此问题
(5)、使用DOM控制样式时的差别
     当使用javascript控制DOM(document.styleSheets)去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

 

3、行内样式：直接在html标签使用style属性编写。    只能用于本标签中，复用性较差。 不推荐使用。

代码示例：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         
 7     </head>
 8     
 9     <body>
10         <a href="http://www.baidu.com" style="color: black; text-decoration: none;">百度</a><br />
11         <a href="http://www.aiqiyi.com">爱奇艺</a><br />
12         <a href="http://www.youku.com">优酷</a><br />
13     </body>
14 </html>

css中的注释格式：/* css的注释 ..*/

注意：注释不可以嵌套。

 

posted on 2017-01-15 14:57  Dev_Nick  阅读(246)  评论(0)  编辑  收藏  举报