css样式引入

一、HTML引入css样式方法：四种方式

         样式优先级：行内样式>内嵌式（内部样式）>外部样式（链接式+导入式）(后两者是就近原则)

1. 行内样式：在标签中标记style属性

<p  style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>

 2. 内嵌式（内部样式表）：在<head></head>标签对中添加<style></style>标签，然后在<style>标签中写入具体样式

<head>
    <meta charset="utf-8">
    <title>通信类</title>
    <style type="text/css">
      *{
        padding: 0;
        margin: 0;
     }
    </style>
</head>

3. 导入式（外部样式表）：在<head></head>中加<style></style>标签，然后在<style>标签中链入 @import"样式表路径"

1 <head>
2       <meta charset="utf-8" />
3       <title>外部样式表</title>
4       <style type="text/css">
5             @import url("样式表路径");
6       </style>
7 </head>

4. 链接式（外部样式表）：在<head></head>中加<link rel="stylesheet" type="text/css" href="样式表路径">

1 <head>
2       <meta charset="utf-8" />
3       <title>外部样式表</title> 
4       <link rel="stylesheet" type="text/css" href="样式表路径" /> 
5 </head>

 二、外部样式表之间的区别   

　　@import  ↔  导入式，

　　<link type="text/css" rel="stylesheet">  ↔  链接式

     导入式：导入式会在整个网页装载完后再装载CSS文件，所以网页若较大则会先显示无样式的页面，闪烁一下之后，再出现网页的样式。

　　　　  ：属于CSS2.1 

　　　　  ：先加载HTML结构在加载CSS文件

　  链接式：属于XHTML 

　　　　  ：优先加载CSS文件到页面

　　　　  ：若需JavaScrip动态引入CSS文件，只能使用链接式

 三、样式表的生成器

所有的主浏览器支持3种主要雷子那个的样式表（优先级从低到高）

  • 由浏览器自带的样式表
  • 由用户创建的样式表
  • 由网页作者创建的样式表

 

posted @ 2018-03-26 17:45  IT记录  阅读(227)  评论(0)  编辑  收藏  举报