CSS 认识一下
1,CSS 的那些事
CSS(Cascading Style Sheets)译「层叠样式表」, 我的理解是: 各种样式叠加的表.
一个网页, 如果没有 CSS, 就是穿着 "国王的新衣", 在裸奔! CSS 的重要性不言而喻!
作为 html 的衣服, CSS 为 HTML 元素提供了一种样式描述, 定义其显示方式, TA 能够对网页中元素进行像素级精确控制.
CSS 的历史不做过多赘述, 先了解几种引入方式以及其区别.
2, 外部样式
外部样式是指单独建立一个扩展名为 .CSS 的样式表, 在 head 标签中采用 link 方式引入, 也可以使用 import 方式引入:
- // link 引入
- <link rel="stylesheet" type="text/css" href="css/style.css" />
- // @import 引入
- <style type="text/css">
- @import url("css/style.css");
- </style>
引入外部样式的好处就是, 一个样式表可以在多个页面中复用, 墙裂建议使用 link 方式引入, import 新手慎用.
3, 内嵌样式
内嵌样式主要通过 <style> 标签在页面中编辑样式:
- <style>
- .title {
- color: red
- }
- </style>
该方法编写的样式仅在当前页面有效, 无法用于其他页面,<style > 标签可以放在任意位置, 建议放在 head 中.
4, 行内样式
行内样式是在 HTML 页面中的某个元素上直接对其直接定义, 以 p 元素为例:
<p style="color: red"></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 名称, 然后编写样式, 在对应的标签中用 class="" 引用.
好比分配一个班级的班干部, 给予他们同一类属性.
例:
- // CSS 样式
- .title{
- background-color: red
- }
- // HTML 页面
- <div class="title">语文课代表</div>
- <div class="title">数学课代表</div>
这里就能把两个课代表的背景颜色都设置成红色, 一对多设置.
5.4 id 选择器
id 选择器以 # 开头, 后面跟上 id 名, 然后书写样式. 在对应的标签中使用 id="" 引用, 其 id 名具有唯一性.
以一个学校为例, 定义校长的属性, 一个学校只有一个校长.
例:
- // CSS 样式
- #title{
- background-color: black
- }
- // HTML 页面
- <div id="title">校长</div>
这里是定义校长的背景颜色为黑色, 虽然说 id 选择器具有唯一性, 如果把几个元素都命名成相同的 id 名字, CSS 选择器还是会把被标记的元素都选中应用样式(和 class 选择器一样).
乍一看, id 选择器的唯一性似乎不存在. 然而, 在 JavaScript 中只会选择具有相同 id 名字元素中的第一个. 所以, 养成一个好习惯, 同一 id 不要在同一页面中出现第二次.
注意, 由于 CSS 的解释是自上而下的, 对于一个元素的相同属性赋值, 下面的属性描述会把上面的覆盖掉, 因此在一定要注意属性的书写顺序.
5.5 后代选择器
后代选择器也称为包含选择器, 用来选择特定元素的后代, 将父元素放在前面, 子元素放在后面, 中间加一个空格分开.
这个应该比较好理解吧, 打个比方, 我是中国人, 我所有的后代都留着中国人的血液.
例:
- // CSS 样式
- .china p {
- background-color: yellow
- }
- // HTML 页面
- <div class="china">
- <p > 儿子</p>
- <p > 女儿</p>
- </div>
这里的儿子和女儿的背景颜色都会是黄色.
后代选择器中的元素不限制两个, 也可适用于多层后代关系, 用多个空格加以分开最大嵌套层数不超过 256 层.
5.6 子代选择器
与后代选择器的不同的是, 子代选择器仅是指 TA 的第一代, 后代选择器通过空格来选择, 子代选择器通过> 选择.
好比我只给我的子女们发红衣服, 其他后代, 例如孙辈, 曾孙辈都不发.
例:
- // CSS 样式
- div> strong {
- color:red
- }
- // HTML 页面
- <div>
- <strong > 儿子</strong>
- <span>
- <strong > 孙子</strong>
- </span>
- </div>
子女的字体颜色是红色的, 而孙辈是默认的颜色.
5.7 组合选择器
对多个不同元素做相同的操作的情况下, 可以共同使用同一样式代码, 元素之间用英文逗号分隔, 这就是组合选择器.
好比给不同身份的人发一个 "感动玖柒十大青年奖", 可以把他们全部叫到一起来颁奖.
例:
- // CSS 样式
- div, p, span, h1 {
- color: red
- }
- // HTML 页面
- <div > 小明</div>
- <p > 小红</p>
- <span > 小刚</span>
- <h1 > 小利</h1>
这里小明, 小红, 小刚和小利的颜色都是红色的, 采用组合选择器最大的好处就是: 简化 CSS 代码, 提高了编码效率.
5.8 相邻兄弟选择器 & 通用兄弟选择器
相邻兄弟选择器还是挺好理解的, MDN 的介绍是: 介于两个选择器之间, 当第二个元素紧跟在第一个元素之后, 并且两个元素都是属于同一个父元素的子元素, 则第二个元素将被选中.
好比皇帝说下一个生的是儿子就当太子, 那就是以当前的最后一个子女为参照物, 下一个儿子就是太子, 如果先生了个女儿, 则不算.
例:
- // CSS 样式
- div + p {
- color: red
- }
- // HTML 页面
- <div > 大儿子</div>
- <span > 二女儿</span>
- <p > 二儿子</p>
- <p > 三儿子</p>
这里都是默认颜色, 因为中间相隔了一个二女儿, 所以二儿子不能当太子了.
相邻兄弟选择器总结起来就两个关键点:
紧接在另一元素后的第一个
二者有相同父元素
通用兄弟选择器类似于相邻兄弟选择器, 但肯定是不一样的, 首先不同的是通用兄弟选择器是用 ~ 连接后面的元素.
继续拿皇帝儿子举例, 皇帝说大儿子之后所有的儿子都封王, 那就是以大儿子为参照, 之后所有的儿子就是王, 如果生了个女儿, 则略过.
例:
- // CSS 样式
- div ~ p {
- color: red
- }
- // HTML 页面
- <div > 大儿子</div>
- <span > 二女儿</span>
- <p > 二儿子</p>
- <p > 三儿子</p>
这里都是你猜一下会是神马样子?
5.9 伪类选择器
伪类选择器通常是用来描述元素在一些特定状态下的样式, 最常见的就是用在 a 元素 (超链接) 中了, 当然其他元素也可以, 只不过相对来说少一些.
就好比拿人来说, 不开心的时候会皱眉, 开心的时候会笑, 发火的时候可能会摔东西, 主要是对不同的状态定义.
例:
- // 没有被访问过 a 标签的样式
- a:link {
- color: black
- }
- // 访问过后 a 标签的样式
- a:visited {
- color: yellow
- }
- // 鼠标悬浮时 a 标签的样式
- a:hover {
- color: red
- }
- // 鼠标摁住的时候 a 标签的样式
- a:active {
- color: blue
- }
伪类选择器我觉得应该是最有趣的选择器了, 试试就知道了.
5.10 媒体查询
媒体查询应该算是选择器吧, 不管那么多我先把 TA 拉进来.
TA 能在不同的条件下使用不同的样式, 使页面在不同在设备下达到不同的渲染效果.
好比一个人在不同的场景下做不同的事, 为父亲的时候教育子女, 为丈夫的时候保护妻子, 为人子的时候照顾父母.
例:
- @media screen and (max-width: 300px) {
- body {
- background-color: red
- }
- }
这里的样式表示如果页面宽度小于 300px 则修改背景颜色为红色, 简单易理解吧.
6, 最后
CSS 的简单复盘就到这里了, 所有的实例都没有用截图展示, 还是希望各位能自己去试一试, 看看效果, 多敲才是正道.
如果有一些地方写的不对, 也欢迎指正, 分享即学习.
公众号「我是玖柒后」首发, 分享即学习!
来源: https://www.cnblogs.com/msunh/p/11996413.html