相关内容
作用:
对页面结构进行修饰的,可以简化页面结构同时实现对应的修饰效果
语法:
选择器{
属性:属性值;
属性:属性值;
属性:属性值
}
选择器:
查找元素的一种方式方法,这种方法有很多,所有可以出现很多选择器
{}:样式规则,用来规定选择器查找到的元素实现何种样
例如:
男生{
T恤:红色;
裤子:紧身裤;
鞋子:豆豆鞋;
}
通过性别这个选择器查找到男生, 然后对男生进行修饰;
语法特点:
{}里面放置的样式规则就是我们的属性和属性值
属性和属性值之间使用冒号(:)链接;
每一组属性和属性值结束后使用分号分隔(;)
最后一组属性和属性值可以带分号,也可以不带分号,推荐你们带上
避免出现增加新的属性修饰的时候,忘记补充分号
-
语法的应用位置:
所有的CSS语法目前必须放在一个独立的以.css为后缀名的文件中
目前CSS和我们的html是没有任何关联的, 如何产生关联呢?
我们需要使用link标签来完成,
link需要放在head标签里面
<link rel="stylesheet" href="路径地址">
基本语法的使用位置(样式表的位置)
a)行内修饰
把对应的CSS语法通过对应的规范,放在标签的开始位置处
基本语法:<div style="属性:属性值;属性:属性值;"></div>
b)内部修饰
把对应的CSS代码放在一个style标签里面,style标签一般要位于head里面显示
基本语法:
<head>
<style>
选择器{样式规则,样式声明}
</stule>
</head>
c)外部修饰
把对应的CSS语法,放在一个独立的以.css为后缀名的文件中
默认两个文件是独立开来的,需要让他们产生联系
基本语法: <link rel="stylesheet" href="路径地址">
优点:
做到了结构样式行为的充分分离
方便维护,易于加载
@import ul();导入样式
注意事项: improt导入的时候,必须放在一个style标签里面
语法结束后必须带分号
6)样式表的优先级:通过两两对比来完成
1)行内和内部
行内>内部
2)内部和外部
内部>外部
(与代码的执行顺序有关系,如果外部样式表位置位于,内部样式位置底部,则实现的是外部)
(但是我们遵循,外部引入的东西全都放在前面)
3)行内和外部
行内>外部
综上: 行内>内部>外部 !important>行内>内部>外部