CSS笔记

最新推荐文章于 2025-12-09 13:48:31 发布

原创最新推荐文章于 2025-12-09 13:48:31 发布 · 74 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

本文介绍了CSS中的伪元素如`:before`和`:after`，用于在元素前后添加内容。同时讲解了伪类选择器，如`:link`,`:hover`,`:active`和`:visited`的使用顺序。此外，还涵盖了属性选择器、复合选择器的选择优先级规则，以及字体样式的设置，包括`color`,`font-size`,`font-weight`,`font-family`等。

伪元素

通过css设置元素：一般用于要实现某些效果，但是直接添加在html中会打乱结构
::before：在...之前添加元素
::after：在...之后添加元素
注意：伪元素选择器必须与content属性一起使用
display：设置元素的性质
background-color:设置背景颜色
content:设置元素的性质

伪类选择器

：link=>未访问时
：hover=>设置鼠标悬停时的样式，所有元素都可以使用
：active=>鼠标按下未松开，其他元素也可以使用
：visited=>鼠标松开，被访问过
顺序：link>visited>hover>active

鼠标悬停在p，a的字体变成红色

 p:hover>a {
            /* 选择鼠标悬停的对象是p时，设置样式作用的对象是a */
            color: red;
        }

属性选择器

语法：属性[]

p[class=text] {
            color: red;}

<p><a href="#"></a></p>

复合选择器

复合选择器：多个选择器组合来选中一个元素
交集：选择器选中了相同的元素，=》重点优先级
并集：选择器选中的是不同标签，不需要比较优先级，多个用,隔开

优先级：

1 0 0 0 0 =》 !important
1 0 0 0 =》代表行内样式
0 1 0 0 =》有多少个id选择器
0 0 1 0 =》有多少个class选择器
0 0 0 1 =》有多少个标签选择器
0 0 0 0 =》*、继承、兄弟选择器等

.a #f{color: brown;}

ul>#f .a {
            color: red;
        }

最后样式是红色，因为第二个代码选择器多一个

字体样式

color:设置字体颜色

font-size：设置字体大小，单位px、

em、rem....vh
px:像素，常用单位，浏览器默认的字体大小16px
em:当前元素的字体大小
rem:是指html的字体大小,移动端常用
vh:移动端的时候使用
font-weight:设置字体大小
属性值：100~900 整百数
lighter=100代表极细
normal=400代表正常
bold=700代表加粗
100~300一般都是代表极细
400~600一般代表正常
700~900一般代表加粗
font-family:设置文字字体，用户电脑上有该字体，才会有效，
所以一般在后面都要添加一个网页字体五大类中的一种
font-style：设置字体样式
可选值：
normal（默认值，正常显示）
italic(文字斜体显示)
oblique（文字倾斜显示）
一般浏览器不会对斜体和倾斜做区分=》一般使用italic
颜色常识
#代表十六进制0~f
第一个00：代表红色
中间两个00：代表绿色
最后两个00：代表蓝色
#000000=>代表黑色
#fff=>代表白色
color: #ff0000;
rgb(red,green,blue)=>取值是0~255
rgba(red,green,blue,alpha)
alpha:设置元素不透明度取值0~1,0代表全透明，1代表不透明

添加自己创建的字体样式，用户会自动加载这个安装包

@font-face {
            font-family: "写你创建的字体名";
            /* 用src来引进你穿件的字体安装包 */
            src: url();
        }