css:
作用:渲染网页
css: 层叠样式表
最新的版本 : css3.0(在之前的基础上增加了一些内容)
为什么要用css?
相比html操作元素的样式更加的便利,功能性更强。
有利于维护。(结构和表现的分离)
css的语法:
选择符{属性:属性值;}
比如:div{width:300px;}
css语法说明:
1:选择符选择的是html标签
2:所有的css声明都要放在大括号里面
3:css声明 包括 属性 和 属性值
4:css的属性和属性值使用冒号进行连接
5:每条声明的后面必须用分号结尾。
6:如果一个属性有多个属性值的时候,属性值和属性值之间用空格隔开。
注:所有的css代码 都要放在css样式表里面!!
css的样式表
1、内部样式表
2、外部样式表
3、内联样式表
1:内部样式表:
<style type="text/css">
css内部样式表
</style>
注:内部样式表,尽量放在head描述区里面。
2:外部样式表:
创建一个后缀名为.css的文件。
外部样式表的导入:
第一种方法:
<link rel="stylesheet" href="css样式表的url(路径)">
href="" 外部样式的连接路径
rel="stylesheet" 与外部css文件建立关联性!
第二种方法:
<style>
@import url(""); (注:基本不用这种方法,作为了解)
</style>
3: 内联样式表(行间样式、行内样式):
<标签 style="内联样式"></标签>
比如:<div style="width:300px;height:300px;"></div>
注:link 和 @import 区别:
1:本质区别:
link 属于html一个标签。
@import 属于css提供的一个方法。
2:加载顺序:
link导入的css 和 html结构同时加载。
@import 先加载结构 后加载样式。
3:兼容性的差别:
link兼容性更好一些。
4:js操作DOM样式的差别。
@import导入的css是无法通过js做动态样式的修改。