目录
CSS基础知识
前言
本系列博客将分享层叠样式表(CSS)有关的知识点。
作为本系列的第二篇,本文主要讲解选择器的组合,链接、列表、表格的属性,以及背景属性。
不是专业的科普博主,主打一个分享知识,写的不好,多多包涵(哈哈)。
准备工作
软件:【参考版本】Visual Studio Code
插件(扩展包):Office Viewer(Markdown Editor)
浏览器版本:Chrome
系统版本: Win10/11/其他非Windows版本
*我的电脑是Win10的版本,仅供参考*
选择器的组合
盒模型
盒模型就是一个几乎没有任何基础样式的块元素标签——div。它自带的样式如下:
就像span标签,实质上就是一个几乎没有任何基础样式的行内元素标签。
其实,所有的标签都只不过是有预设样式的块标签或者行内标签罢了。
关于div的内容暂时了解这么多就可以了,下一期本系列的博客将分享div的相关使用。
示例网页代码
本节中用到的案例的初始主体标签中的代码(无CSS样式的):
<div class="d1">
<p class="p1">第一段落</p>
<p class="p2">第二段落</p>
<p class="p3">第三段落</p>
<span class="sp1">第一个文本</span><br />
<span class="sp2">第二个文本</span><br />
<span class="sp3">第三个文本</span><br />
<div class="d2">
<p class="p4">第四段落</p>
<p class="p5">第五段落</p>
<p class="p6">第六段落</p>
</div>
</div>
后代选择器
选择器之间以 空格 分隔,选择所有后代(可以隔代)选择器。
选择案例中class="d1"(以下简称d1,其余同理)的全部后代p标签,可以使用如下代码:
.d1 p {
font-size: large;
font-weight: 700;
color: aqua;
}
运行之后的效果如下:
可以看到,d1所有的p后代都被设置了样式。
亲代选择器
选择器之间以 > 分隔,选择当前元素的直接子代选择器。
如果只想设置d1的直接(第一级)子代,则可以使用如下代码:
.d1>p {
font-size: large;
font-weight: 700;
color: aqua;
}
运行之后的效果如下:
这样就不会影响d2的效果了。
相邻兄弟选择器
选择器之间以 + 分隔,选择某元素同亲代、向后相邻的同标签元素。
比如,选择p1的下一个同级的p标签p2设置样式,代码如下:
.p1+p {
font-size: large;
font-weight: 700;
color: aqua;
}
运行之后的效果如下;
后续兄弟选择器
选择器之间以 ~ 分隔,选择某元素同亲代、同级的所有同标签元素。
比如,选择d1的子代一级中p1之后的所有p标签,代码如下;
.p1~p {
font-size: large;
font-weight: 700;
color: aqua;
}
运行之后的效果如下;
多个元素选择器
选择器之间以 , 分隔,选择多个元素。
比如,设置d1中的所有p标签和span标签样式,使用如下代码:
.d1>p,
.d1>span {
font-size: large;
font-weight: 700;
color: aqua;
}
运行之后的效果如下:
通配符选择器
格式是一个单独的 * ,选中所有元素,用于清除元素的默认样式(预设为自定义的样式)。
比如,浏览器中默认的字体大小为16px,黑色,无加粗,现在利用通配符将它们设置为我想要的默认样式:
* {
font-size: large;
font-weight: 700;
color: aqua;
}
那么,如果不设置其他属性,那么在示例网页中显示的文本样式默认为:
优先级
对于组合选择器,取对应的选择器类型的权重相加之后再进行比较。
比如,对于下面这两段代码:
.d1 .sp1 {
font-size: large;
font-weight: 700;
color: aqua;
}
.d1>span {
font-size: small;
font-weight: 400;
color: chartreuse;
}
同样设置了sp1的样式,那么最后到底会显示aqua(天蓝色) 还是chartreuse(亮黄色)的效果呢?
我们知道,类选择器的权重值为10,标签选择器的权重值为1。
那么,第一段样式代码的权重值就是10+10=20,第二段为10+1=11,显然,前者的权重值之和较大,所以最后显示的效果如下:
显然,sp1应用了权重值之和较大的样式。
那么,如果权重值之和相同,呢?比如,将上面的代码改成:
div>.sp1 {
font-size: large;
font-weight: 700;
color: aqua;
}
.d1>span {
font-size: small;
font-weight: 400;
color: chartreuse;
}
此时它们的权重值之和均为11,显示结果如下:
显然,天蓝色被亮黄色覆盖了,说明权重值之和相同时,将按照解析顺序,下面的样式向上覆盖。
同级的非组合选择器会出现下覆盖上的现象的原因和这里是相同的,都是由权重值决定了优先级。
其他应用
组合选择器还可以类比应用于HTML编写快捷输入操作。
比如,如果要快速输入下面这段代码,在VS code中可以怎么做呢?
<div>
<p></p>
<p></p>
<p></p>
<div>
<p></p>
<p></p>
<p></p>
</div>
</div>
方法是,类似亲代选择器,使用最外层div选择直接子代,再由内层div选择直接子代。在子代数量不为1时,需要使用乘号(*)乘以数量。
这样一来,快速生成上面的代码的快捷输入就是(输完直接按回车确认):
div>p*3div>p*3
类似的,也可以用相同的方式快速生成表格、列表等嵌套形式的HTML结构。
该方法在HBuilderX中也可以使用,其他的我没试过,诸位可以自行尝试。
伪类
伪类也是选择器的一种,格式是选择器加伪类名。
常见的伪类写法如下:
伪类 | 作用 |
---|---|
:link | 常见于锚链接,设置未访问时的属性 |
:visited | 常见于锚链接,设置访问之后的属性 |
:hover | 设置鼠标悬浮(移入)时的属性(所有元素可用) |
:active | 设置元素激活时的属性(所有元素可用) |
emmm,除了锚链接,使用active设置激活状态在这里暂时不好举例,之后可以利用JS将某个元素直接置换为常态激活状态,如一些小图标的激活效果等。
这里举一个:hover的例子吧,我现在拿出我的头像,初始HTML代码如下:
<img src="https://profile-avatar.csdnimg.cn/4b2a87ef8c5d4789a6b8fb88457350a2_zc13786305863.jpg!1" alt="H2O2的头">
设置初始状态和鼠标悬浮状态的CSS代码如下:
img {
width: 80px;
height: 80px;
}
img:hover {
width: 160px;
height: 160px;
}
鼠标未移入图片和移入图片的效果对比如下:
其实,伪类还有更多的形式,这里主要是为了引出锚链接而拓展的一小部分内容,更多伪类的使用可能会在CSS进阶篇或JS系列博客去分享。
锚链接的属性
锚链接的默认样式如下:
状态 | 样式 |
---|---|
未访问/光标移入 | 蓝色,下划线 |
访问后 | 紫色,下划线 |
光标点击(激活) | 红色,下划线 |
由于锚链接有不同的实时状态,所以可以使用伪类选择器对每个状态的样式进行单独设置。
但是,需要注意的是,由于伪类选择器之间是同类选择器,解析有自上而下的顺序。
所以当伪类:hover(移入)和:active(激活)同时设置样式时,注意要先设置:hover再设置:active,否则:hover将覆盖:active的属性效果。
特别的,visited在访问后将保持该状态。即使刷新界面也不会重置这个状态。
列表的属性
列表的属性为list-style,按顺序依次简写下面三个属性的属性值,以空格分开:
list-style-type
该属性用于设置列表的标记。
什么是标记呢?还记得HTML入门中提到过的ul和ol的type属性吗,与这个属性的功能是相同的。
来看list-style-type的常见属性以及对应样式描述或举例:
属性值 | 样式 | 举例 |
---|---|---|
none | 无 | \ |
disc | 实心圆 | \ |
circle | 空心圆 | \ |
square | 实心方块 | \ |
decimal | 标记为数字 | 1 2 3 4 |
decimal-leading-zero | 0开头的数字标记 | 01 02 03 |
upper-roman | 大写罗马数字 | I II III IV V |
lower-roman | 小写罗马数字 | i ii iii iv v |
upper-alpha | 大写英文字母 | A B C D |
lower-alpha | 小写英文字母 | a b c d |
lower-greek | 小写希腊字母 | alpha, beta, gamma |
lower-latin | 小写拉丁字母 | a, b, c |
upper-latin | 大写拉丁字母 | A, B, C, D |
hebrew | 传统的希伯来编号方式 | \ |
armenian | 传统的亚美尼亚编号方式 | \ |
georgian | 传统的乔治亚编号方式 | an, ban, gan |
cjk-ideographic | 简单的表意数字 | \ |
hiragana | 日文平假名字符 | a, i, u, e, o, ka, ki |
katakana | 日文片假名字符 | A, I, U, E, O, KA, KI |
hiragana-iroha | 日文平假名序号 | i, ro, ha, ni, ho, he, to |
katakana-iroha | 日文片假名序号 | I, RO, HA, NI, HO, HE, TO |
对HTML中的type而言,ul的标记只能是实心圆点、实心方块和实心圆圈等图形,且各li的图形相同;ol的标记只能是数字、英文大小写和罗马数字大小写等序号。
现在,我们可以将两类形式混合使用了。只需要单独定义li元素的list-style-type即可。
list-style-position
该属性用于定义列表项目标记放置位置,默认标记位置在文本以外。
该属性的值和对应的含义如下:
属性值 | 含义 |
---|---|
outside | 默认 标记在文本外 |
inside | 标记在文本内 |
用于比较两种效果的代码如下:
<ul>
<li>我的标记在文本外</li>
<li style="list-style-position: inside;">我的标记在文本内</li>
</ul>
在浏览器中显示的效果如下:
看起来,设置了值inside的列表项比默认的情况稍稍后移了一些。
想要知道他们的区别,则需要使用F12快速检查代码。
可以看出两个列表项的文本内容的区别,后者的标记确实包含在文本中了:
list-style-image
该属性用于插入图片作为列表项目标记。
如果觉得列表的标记不太好看,种类不够丰富,那么就可以使用图片作为列表项的标记了。
默认值为none,即不引入图片。
或者使用url("图像的地址/路径")的方式引入图片,注意这里的图片不能自定义大小,需要提前调整好图片的大小再引入。
伪元素
如果想调整图片的大小,其实也是有办法的,这个时候就需要提出一个新的CSS3中的概念——伪元素。
之所以称之为“伪”,是因为它实质上是在浏览器渲染CSS时才加上的。
在W3C文档中,为了区别伪元素和伪类,将伪元素规范为以 :: 开头的形式。
常见的两个伪元素是::before和::after,分别用于将伪元素的内容添加至当前元素之前或之后。
伪元素必须指定内容属性content,否则将不起作用。可以为空。
具体的内容就不展开说了,这里只讲述如何调整图片大小。
比如,默认字体大小为16px,我们利用::before将图片缩小到16*16的大小放到列表项之前。
*注意把ul自带的标记给设置为none!*
CSS代码如下:
ul {
list-style-type: none;
}
ul li::before {
content: '';
background-image: url("https://profile-avatar.csdnimg.cn/4b2a87ef8c5d4789a6b8fb88457350a2_zc13786305863.jpg!1");
background-size: 100% 100%;
background-repeat: no-repeat;
display: inline-flex;
width: 16px;
height: 16px;
}
HTML代码如下:
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
在网页中的效果如下:
display属性暂时不需要了解,background相关的属性将在背景属性中讲述。
表格的属性
border
该属性按顺序依次简写下面三个属性的属性值:
border-weight
该属性用于设置表格的边框宽度,常用单位为px,%,rem,em,和其他使用这些单位的使用方法类似,不再赘述。
border-style
该属性用于设置表格的边框样式,类似text-decoration-style,不再赘述。
border-color
该属性用于设置表格的边框颜色,常用形式为颜色名、十六进制、rgb表示和rgba表示,类似text-decoration-color,不再赘述。
border-collapse
该属性用于设置表格的内外边框之间的间距,一般对table标签使用,类似于已经弃用的cellspacing属性。
它的属性值和对应的含义如下:
属性值 | 含义 |
---|---|
separate | 默认值 内外边框分离 |
collapse | 内外边框合并(塌陷) |
可能有朋友注意到,我使用了类似这个词,说明其实这两者之间还是有一些差别的。
比如,对于两个完全相同的、规格为3*3且边框粗2px的表格来说,使用collapse的效果和使用cellspacing的效果对比如下:
可以看到后者比前者稍粗一些,这是因为前者是将内外边框完全合并,而后者只是将内外边框的间距设置为0罢了。
caption-side
该属性用于设置表格标题的位置,也就是caption标签元素的位置。
它的属性值和对应的效果如下:
属性值 | 效果 |
---|---|
top | 默认值 标题在表格顶部 |
bottom | 标题在表格底部 |
table-layout
该属性用于设置表格单元格的列宽的展现方式。
它的属性值和对应的含义如下:
属性值 | 含义 |
---|---|
auto | 默认 自动由内容撑开 由当前列最宽的单元格决定列宽 |
fixed | 各个单元格的列宽独立设定且为固定值,与内容无关 |
利用这个属性,我们再想实现HTML入门章节中说过的列对齐不规则表格,就十分简单了。只需要给每一行的列设置独立的width即可,不再需要繁琐的列合并操作。
背景属性
背景属性使用的是background系列的属性,该属性在CSS3中出现,这里仅供了解。具体有下面几种:
background-color
该属性的作用是定义背景色。
除了常规的使用颜色名、十六进制、rgb和rgba四种属性值之外,还可以设置transparent,即透明效果。
不设置前四种属性,则默认为透明颜色。
background-image
该属性的作用是将图像设置为元素背景。
默认值为none(无效果),也可以使用ul("路径")调用图片。
background-repeat
该属性的作用是设置背景图片是否重复。
默认为repeat重复,可以设置为no-repeat不重复。
还可以单独设置repeat-x和repeat-y,即仅在水平或者仅在垂直方向重复。
出现在图片不足以覆盖所在元素背景的情况。
background-position
该属性用于设置背景图像的起始位置。
默认的位置是左上角。
该属性有两个值,分别对应水平位置和垂直位置,对应属性值如下:
水平位置 | 垂直位置 |
---|---|
left/center/right | top/center/bottom |
px(左上角为原点,x轴正方向向右) | px(左上角为原点,y轴正方向向下) |
%(50%为相对背景居中) | %(50%为相对背景居中) |
注意,如果只设置一个属性值,另一个值将默认为center。
background-size
该属性用于设置背景图片的大小。
填数值时,由水平尺寸和垂直尺寸组成,单位为px或%。只设置一个,另一个等比变化(auto)。
不填数值,则为单属性,属性值和含义如下:
属性值 | 含义 |
---|---|
cover | 覆盖,最小边占满背景,最大边会超出 |
contain | 容器,最大边占满背景,最小边会压缩 |
特别的,对于cover属性,可以设置overflow属性,值为hidden(隐藏),将超出父元素的部分隐藏起来。
background-attachment
该属性用于设置背景图片是否伴随滚动。
它的属性值和对应的效果如下:
属性值 | 效果 |
---|---|
scroll | 默认值 背景图像随页面滚动而滚动 |
local | 背景图像随内容滚动而滚动 |
fixed | 背景图像相对背景静止 |
平时我们看到的背景图不动的网页,很多都可以由fixed完成。
预告和回顾
在下一期博客中,我将会开始写CSS的盒模型的具体内容。
对CSS文件感兴趣的朋友,可以看下面的CSS专栏,当前为第二期:
专栏 | CSS入门http://t.csdnimg.cn/4bvCJ当然,也欢迎对全栈项目感兴趣的朋友查看我的其他专栏。
后话
在全栈领域,博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历,然后把自己领悟到的一些东西总结一下,分享给大家。
文章全篇的操作过程都是笔者亲自操作完成的,一些定义性的文字加入了笔者自己的很多理解在里面,所以仅供参考。如果有说的不对的地方,还请谅解。
==期待与你在下一期博客中再次相遇==
——疑似有点缺氧的【H2O2】