news 2026/10/5 2:31:09

HTML+CSS学习笔记.4

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
HTML+CSS学习笔记.4

1

关于否定伪类,ui伪类和目标伪类:
在使用选择器时于选择器前方加上:not(),用于排除满足括号中条件的元素,通过这种方法可以使值不会作用于某些特定的元素上。


UI伪类里有很多种小类,主要用于根据表单,按钮和输入框的状态自动切换样式。前文说过的hover,active和focus在这里均可使用。checked可以使单选或者复选框处于被勾选状态时,对应样式生效,当取消勾选时,则失效。enabled使元素在没有disabled属性的时候可以点击进行输入,若元素加入了disabled,则无法交互。


target可以通过选中锚点指向的元素,这里不过多介绍。

2

关于伪元素选择器:
伪元素选择器可以用于选中元素中的一些特殊位置。常用的伪元素有很多,比如first-letter可以用于选中元素中第一个文字,详细内容见上图。这里补充几个要点,伪元素选择器通常使用两个“:”,但部分伪元素选择器在只加了一个“:”的情况下是可以正常运行的。这是因为有些伪元素选择器是html5新增的,而大部分html4时期就可以使用的伪元素选择器在当时并没有明文规定使用几个“:”,所以在仅使用一个“:”时,尤其是html5新增的选择器,极容易产生错误。

3

关于选择器的优先级:
前文曾经讨论过给文字”上色“时,优先级带来的影响,即“优先级相同时后来者居上,“优先级高的优先渲染”。在选择器这里也有优先级这一说,不同选择器优先级不同,但是大致遵循这一规律:

行内样式>ID选择器>类选择器>元素选择器>通配选择器


当选择器组合使用时,需要比较选择器的权重,权重以(a,b,c)的形式呈现,a指ID选择器的个数,b指类,伪类,属性选择器的总个数,c指元素,伪元素选择器的总个数,比较规则为先a后b最后c,只有当前一次比较时双方相等的情况下才会进行第二次比较,若一次比较大小时有一方胜出,则不进行后续比较。,当选择器使用!important时,会优先渲染这一个选择器。

4

关于CSS的三大属性:
CSS的三大属性分别为层叠性,继承性和优先级,详细内容见上图。

5

关于颜色的表示:

颜色的表示主要有四种方法,除去直接写颜色名称,还有rgb或rgba,HEX或HEXA,HSL或HSLA,下面我会按照顺序进行大体介绍:


初中物理说过光的三原色为红绿蓝,理论上所有色光都能由这三种颜色混合得到,rgb和后续的HEX都用了这个原理,在rgb中,r指红色(red),g指绿色(green),b指蓝色(blue),rgb通过对这三种颜色的浓度进行划分,以红色举例,0即为白色,255即为纯红色(也可以用百分比表示),其他两个颜色浓度也用相同方法表示后,将三个颜色混合就能得到最终颜色,rgba中的a指透明度,用0~1表示透明度,越接近1越不透明,可以使用小数且小数点前0可省略。


HEXA中的A也指透明度,后续不过多介绍,这一方法与rgb类似,也是三色混合,但是它改用了16进制,6个数字,2个为一组,且不用逗号或者空格隔开,比如用ff代替了255。但还有比较特殊的一点,当每组数字前后位都相同时,可以两个数字省略为一个数字使用,效果不变。

HSLA使用色环来表示颜色,并用色相,饱和度和亮度三个属性来表示颜色。因为这个不太常用,不做过多介绍。

6


关于CSS字体属性:
使用font-size可以更改字体大小,通常使用的单位为像素(px),对于大部分浏览器来说,存在支持的最小像素,谷歌浏览器为12px,有些浏览器为10px,当字体大小小于所支持的最小像素时,字体的大小将不再改变,但当设置大小为0px时,字体将不再显示,同时字体大小也有继承特性。

使用font-family时,还可以对字体的样式进行修改,具体可使用的样式可在电脑的设置中查看(也可以去下载自己想要的字体样式)。字体在输入时,可以直接输入对应的中文名,但一般来说,英文名的兼容性会更好,具体英文可以自行查询。字体分为衬线字体和非衬线字体,主要靠字体有没有棱角分辨,一般非衬线字体在观感上会更加圆滑,现在在制作网页时,非衬线字体往往也会被更多的使用(当输入了一个不存在的字体时,浏览器会自动更换成微软雅黑)。在使用时,可以选择多个字体,渲染时会根据从前到后的优先级渲染,在最后输入“serif”或"sans-seif"时,浏览器会在前方所有字体均不可使用时更换默认的衬线字体或非衬线字体。


font-style可以更改字体的风格,常用的值有三个,分别为normal,italic和oblique,normal为默认字体,italic和oblique为斜体字,但两者存在区别,oblique会在对应字体为设置斜体字的时候强制产生斜体效果,这种写法兼容性差,而且所得字体可能不太美观,所以平时使用相对italic就较少。

font-weight可以改变字体粗细程度,常用的值有lighter,normal,bold和bolder,分别对应细,正常,粗和很粗,但对于一些只设计了三种粗细的字体来说,很粗的实际表现和粗其实是完全一样的,所以bolder这个词也并不常用。除此之外,也可以用树枝代替单词,规则如上图。


使用font属性可以将上述字体复合成一个属性,但要注意的是,字体族必须放在最后一位,大小必须在倒数第二位,其余顺序可随意。

7


关于文本的设置:
文本颜色可以通过color设置,颜色的使用方法同前文所说的内容,包括rgb在内的4种方法都可以使用。

letter-spacing和word-spacing可以控制文本的间距,前者可以调整字母之间的间距,在输入单词和汉字的时候,各个字母和汉字之间都会产生空格(包括原文本中的空格也会被认为是一个字母)。但后者则通过空格识别词,也就是说在纯汉字的情况下,后一种写法是不会产生实际效果的。间距使用的单位为px。


使用text-decoration属性可以对文本进行修饰,通常用于划线,可以为对应的线条施加颜色(不需要写color且没顺序要求)

text-indent可以控制文本缩进,简单的说,就类似于写作文时每一段前两行的空格,这里也同样以像素(px)为单位。

text-align可控制文本的对齐,用法与之前讲表格时的用法类似,不过多介绍。


line-height可控制行高,可选值写法通常有四个,分别为normal,像素值,倍数和百分比。其中最常用的是倍数,由于字体设计的过程比较复杂,导致文字在一行中不是绝对垂直居中,所以一行都是文字时不会太影响观感。行高不能过小,当等于0时,所有行会重叠,小于0时会自动恢复默认值。,同时,行高可以继承,与height也有所关联平时使用时可与height标签配合使用,使观感更舒服,达到更好的视觉效果。

通常来说,文本是默认顶部对齐的,也可以通过单独设置line-height和height进行居中或者沿着底部对其(总感觉好麻烦)。

8

关于vertical-align:
这一属性通常作用域指定同一行元素之间,或表格单元格内文字的垂直对齐方式,常用值有以下几种,也与前文记录表格用法时讲过的内容类似(实际上,valign的v就是选取了vertical的首字母)。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/10/5 2:28:58

AnyJev护城河在校准

抄得走协议,抄不走校准一个开源项目用六天时间证明:决策模型真正的壁垒,不在接口 查证日期:2026-10-01 | AnyJev 数据均为项目自报(GitHub README,Apache 2.0)一、闭源模型被"抄…

作者头像 李华
网站建设 2026/10/5 2:28:55

搞懂打印耗材匹配逻辑,才能避开办公效率陷阱

打印机买回家,为什么越用越糟心? 你是否遇到过这样的情况:新买的打印机用了不到半年,打印模糊、频繁卡纸,换上便宜的兼容硒鼓后甚至直接报错停机?在晋江、石狮这样的电商活跃区域,一家小型外贸公…

作者头像 李华
网站建设 2026/10/5 2:27:19

四年级孩子学信奥,需要刷多少题

四年级零基础学信奥,从入门到稳稳拿到CSP-J2复赛一等奖,总刷题量控制在800~1000道就完全足够,不用盲目追求刷几千道的题海战术,分阶段精准刷题效率最高,完全适配低龄孩子的接受节奏: 📊 分阶段精…

作者头像 李华