CSS:页面美化和布局控制
1、概念:Cascading Style Sheets 层叠样式表
层叠:多个样式可以作用在同一个html样式上,同时生效
2、好处:
1、功能强大
2、将内容展示和样式控制分离
降低耦合度,解耦
让分工协作更容易
提高开发的效率
3、CSS的使用:CSS和html结合方式
1、内联样式
在标签内使用style属性指定CSS代码(作用域当前标签)
如:<div style="color:red;">hello css<div/>
2、内部样式
在head标签内,定义style标签,style标签的标签体内容就是css代码(作用域当前页面)
如:<head>
<style>
div{
color:blue;
}
<style/>
<head/>
<div>hello css<div/>
3、外部样式
1、定义css资源文件
2、在head标签内,定义link标签,引入外部的资源文件(作用域)
在<link>标签中,“rel=stylesheet”,rel是关联的意思,关联的是一个样式表(stylesheet)文档,它表示这个link在文档初始化时将被使用。rel="stylesheet" type="text/css" 是固定写法,不可修改,rel是relationship的英文缩写,也就是“关系”,stylesheet中style是样式的意思,sheet是表格之意,总起来是样式表的意思,rel="stylesheet" 的意思就很明显了:描述了当前页面与href所指定文档的关系。即说明的是,href连接的文档是一个新样式表。
如:(1)a.css文件
div{color:blue;}
(2)<link rel="stylesheet" href="css/a.css">
<div>hello css<div/>
注意:
1,2,3三种方式,css作用范围越来越大
1方式不常用,后期常用2,3
3种格式可以写为:
<style>
@import"css/a.css";
<style/>