css样式
css样式
前端数据分为三个部分:框架(html)、表现(css样式)和行为(javascript)。css样式一共分为四种内联式、内部式、外部链接式和外部导入式。
1、内联式:直接写在html标签内部 写法:
<标签名 style="样式名1:样式值1;样式名2:样式值2;"> </标签名>
复制代码
2、内部式:使用选择器 样式块 比较方便
写法:
<style>
选择器{
样式名1:样式值1;
样式名2:样式值2;
}
</style>
复制代码
3、外部链接式:把css样式写在另外的文件里用 link 将其引用过来
写法:
<link rel="stylesheet" href="url地址">
复制代码
4、外部导入式:
写法:
<style>
@import url("url地址");
</style>
复制代码
css样式优先级:行业样式(内联式)>内部样式(内部式)>外联样式(外部链接式和外部导入式)
选择器
css样式中内部式需要用到选择器。选择器就是在代码段中通过标记的办法快速选择一个地方然后给他加上css样式。
选择器分为:常用选择器、关系选择器、属性选择器、伪类选择器和伪元素选择器。
1.标签选择器
标签名{属性:值}
对一类标签进行样式的设置
复制代码
2.类选择器
.类名{属性:值}
对同一类名的标签进行设置,一个标签可以有多个类名。
复制代码
3.id选择器
#id名{属性:值}
id最好不要重复,因为后面dom要通过id获取节点。
复制代码
4.后代选择器
选择器1 选择器2{属性:值}
表示对选择器1中的标签后代(不仅仅是直接子元素,也可以是其子元素的子元素)中所有满足选择器二的标签进行样式设置
复制代码
5.子代选择器
选择器1>选择器2{属性:值}
表示对选择器1中标签的直接子元素中所有满足选择器2的标签进行样式设置。
复制代码
6.交集选择器
选择器1选择器2{属性:值}
两个选择器之间没有空格,表示对既满足选择器1,又满足选择器2的标签进行样式设置。
复制代码
7.并集选择器
选择器1,选择器2{属性:值}
表示对只要满足选择器1和选择器2任一选择器的标签进行样式设置。