一:CSS语法组成:
选择符 和声明(声明和声明之间用分号隔开)
声明部分:属性和属性值(用冒号链接)
语法:选择符{
属性1:属性值;
属性2:属性值;
}
所有的CSS语句都要放到样式表了里面
二:CSS新建格式
1.内部样式表(最好放在HEAD描述去内)
2.外部样式表
导入外部样式表
a:<link >
rel="stylesheet"(建立关联性)
href="url"
type="text/css"
b:<style>
@import url();
</style>
2.外部样式表
导入外部样式表
a:<link >
rel="stylesheet"(建立关联性)
href="url"
type="text/css"
b:<style>
@import url();
</style>
link和@import区别
1).本质区别:link属性是html语言,@import是css提供的方法
2).加载顺序:link导入的css是和结构同时加载。@import是等结构加载完成之后再加载css
3).兼容:link无兼容问题。@import IE低版本不能识别
4).js 控制DOM样式的差别。
1).本质区别:link属性是html语言,@import是css提供的方法
2).加载顺序:link导入的css是和结构同时加载。@import是等结构加载完成之后再加载css
3).兼容:link无兼容问题。@import IE低版本不能识别
4).js 控制DOM样式的差别。
3.内联样式表 只作用于当前元素上
样式表的权重:
内联样式表>内部样式表和外部样式表和书写顺序有关,写在后面的会把前面的覆盖掉
注:覆盖只是相同属性,不同属性不覆盖
4.css重叠性:
html结构为:div
当前页面的样式
<style>
div{
600px;
border:10px solid red;
</style>
<link rel="stylesheet" href="style.css">
<div style="border:10px solid yellow;"</div>
提示:style.css里面样式为:div{height:300px;100px;background:pink}
问:当前div在浏览器中解析出来的样式
div{
border:10px solid yellow;
100px;
height:300px;
background:pink
}