CSS 认识一下
1、CSS 的那些事CSS(Cascading Style Sheets)译「层叠样式表」,我的理解是:各种样式叠加的表。
一个网页,如果没有 CSS,就是穿着“国王的新衣”,在裸奔!CSS 的重要性不言而喻!
作为 HTML 的衣服,CSS 为 HTML 元素提供了一种样式描述,定义其显示方式,TA 能够对网页中元素进行像素级精确控制。
CSS 的历史不做过多赘述,先了解几种引入方式以及其区别。
2、外部样式外部样式是指单独建立一个扩展名为 .css 的样式表,在 head 标签中采用 link 方式引入,也可以使用 import 方式引入:
// link 引入 <link type="text/css" href="http://www.likecs.com/css/style.css" /> // @import 引入 <style type="text/css"> @import url("http://www.likecs.com/css/style.css"); </style>引入外部样式的好处就是,一个样式表可以在多个页面中复用,墙裂建议使用 link 方式引入,import 新手慎用。
3、内嵌样式内嵌样式主要通过 <style> 标签在页面中编辑样式:
<style> .title { color: red } </style>该方法编写的样式仅在当前页面有效,无法用于其他页面,<style>标签可以放在任意位置,建议放在 head 中。
4、行内样式行内样式是在 HTML 页面中的某个元素上直接对其直接定义,以 p 元素为例:
<p></p>行内样式只对其所在的标签生效,实际上写页面时建议少用或者不用。
引用样式最好是采用第一种 link 方式引入,分离 HTML 页面代码与 CSS 样式,方便项目的维护管理,以及提高 CSS 样式的复用性。
其他两种方法少用或者不用,尽量降低页面的的复杂性。
5、CSS 选择器HTML 页面中的元素样式大多是通过 CSS 选择器进行控制的。
要想用 CSS 对 HTML 页面中的元素实现一对一,一对多或者多对一的控制,离不开 CSS 选择器。
CSS 的选择器大概有这些:
通用选择器
标签选择器
class 选择器(类选择器)
id 选择器
后代选择器
子代选择器
组合选择器
相邻兄弟选择器
伪类选择器
媒体查询(姑且也算吧)
还有一些可能漏掉了,欢迎留言补充,先复盘一些常见选择器。
5.1 通用选择器通用选择器用 * 开头,后面直接跟上样式,作用于所有标签,表示通用定义。
就好比定义所有正常人:一个头、两只手、两条腿。
例:
* { font-size: 18px; color: red }这里表示所有标签中的字体大小为 18px,颜色为红色。
5.2 标签选择器标签选择器可以选中所有的同类标签元素,标签后面直接跟上样式。
好比规定学生穿校服,不同工厂的工人有对应的工服。
例:
p { font-size: 16px; color: blue }这里表示所有 p 标签中的字体大小为 16px,颜色为蓝色。
5.3 class 选择器(类选择器)class 选择器可以选中带有特定类名的标签进行样式定义,也就是一对多,书写时以 . 开头,跟上 class 名称,然后编写样式,在对应的标签中用 引用。
好比分配一个班级的班干部,给予他们同一类属性。
例:
// css 样式 .title{ background-color: red } // html 页面 <div>语文课代表</div> <div>数学课代表</div>这里就能把两个课代表的背景颜色都设置成红色,一对多设置。
5.4 id 选择器id 选择器以 # 开头,后面跟上 id 名,然后书写样式。在对应的标签中使用 引用,其 id 名具有唯一性。
以一个学校为例,定义校长的属性,一个学校只有一个校长。
例:
// css 样式 #title{ background-color: black } // html 页面 <div>校长</div>这里是定义校长的背景颜色为黑色,虽然说 id 选择器具有唯一性,如果把几个元素都命名成相同的 id 名字,CSS 选择器还是会把被标记的元素都选中应用样式(和 class 选择器一样)。
乍一看,id 选择器的唯一性似乎不存在。然而,在 javascript 中只会选择具有相同 id 名字元素中的第一个。所以,养成一个好习惯,同一 id 不要在同一页面中出现第二次。
注意,由于 CSS 的解释是自上而下的,对于一个元素的相同属性赋值,下面的属性描述会把上面的覆盖掉,因此在一定要注意属性的书写顺序。
5.5 后代选择器后代选择器也称为包含选择器,用来选择特定元素的后代,将父元素放在前面,子元素放在后面,中间加一个空格分开。
这个应该比较好理解吧,打个比方,我是中国人,我所有的后代都留着中国人的血液。
例:
// css 样式 .china p { background-color: yellow } // html 页面 <div> <p>儿子</p> <p>女儿</p> </div>这里的儿子和女儿的背景颜色都会是黄色。
后代选择器中的元素不限制两个,也可适用于多层后代关系,用多个空格加以分开最大嵌套层数不超过 256 层。
5.6 子代选择器与后代选择器的不同的是,子代选择器仅是指 TA 的第一代,后代选择器通过空格来选择,子代选择器通过 > 选择。
好比我只给我的子女们发红衣服,其他后代,例如孙辈,曾孙辈都不发。