3.CSS样式的三种使用方式

目录

1.内链样式表

2.嵌入式样式表

3.引入式样式

4.三种样式表总结

---

1.内链样式表

内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：

    
    


    
码海无际

 

2.嵌入式样式表

1. 内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下

2. 语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。

3. type="text/css" 在html5中可以省略， 写上也比较符合规范， 所以这个地方可以写也可以省略。

    
    
    


    
码海无际

 

3.引入式样式

引入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：

先在同级目录下新建一个 test.css 文件，里面写入如下内容

h1{
    color: red;
    font-size: 28px;
}

 在html页面在引入

    
    
    


    
码海无际

 

4.三种样式表总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现样式和结构相分离	较少	控制一个标签（少）
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面（中）
外部样式表	完全实现结构和样式相分离	需要引入	最多，强烈推荐	控制整个站点（多）

    
    
    


    
码海无际