菜鸟高飞尽之CSS-CSS样式表

CSS 语句要写在样式表里

一、行内样式表（内联样式表）

语法：

<div style=" css语句 "></div>

说明：

1.style="" 属性是html属性，直接添加在html标签上；

2.style="" 添加在哪个标签上，就表示给哪个标签设置样式；

3.行内样式表的作用域：只针对当前标签起作用；

4.样式是直接写在结构标签上的，没有实现结构和表现相分离，耦合性极高，不建议使用，在需要的时候使用；

5.行内样式表的优先级很高；

二、内部样式表

语法：

<style type="text/css">
    css语句
</style>

说明：

1.type="text/css" 定义文本类型为css，可写可不写；

2.建议把style标签创建在html的head区域内；

3.作用域：只针对当前页面html页面起作用；

4.实现了结构和表现相分离，但是分离的不够彻底，耦合性相对较低；

5.不建议使用，在css代码量很少的时候，或者在写案例时，在学习的过程中可以使用；

三、外部样式表（外链式样式表）

先要创建一个独立的css文件，然后关联样式表；

方法一：（推荐使用）

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

说明：

1.link标签是html的标签，要写在html结构里，建议写在head区域内；

2.属性：

        rel="stylesheet" 关联样式表

        rel : relation 关联，关系，联系

        stylesheet : 样式表

        href="" 连接目标文件

        type="text/css" 定义文本类型为css，可写可不写

3.作用域：可以应用在多个页面内；

4.一个HTML里，可以设置多个link标签，也就是可以引入多个css文件

5.真正实现了结构和表现相分离，耦合性极低

6.推荐使用外部样式表

方法二：（了解即可）

<style>
    @import url(目标文件地址)；
</style>

说明：

1.是属于css提供的一种连接外部样式表的方法；

2.@import 只能连接外部样式表；

3.@import 是css2.1提出的，老版本的浏览器不兼容；

4.如果想通过js去改变css样式，通过@import的方法是改变不了的

四、样式表的优先级

1.行内样式表的优先级别做高；

2.外部样式表和内部样式表的优先级根据他们的书写位置有关，谁的位置越靠后，谁的优先级别就越高，遵循就近原则；