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.外部样式表和内部样式表的优先级根据他们的书写位置有关,谁的位置越靠后,谁的优先级别就越高,遵循就近原则;