CSS 选择器的常见用法

最新推荐文章于 2024-04-29 13:37:01 发布

达斯米奇430

最新推荐文章于 2024-04-29 13:37:01 发布

阅读量1.4k

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_66530223/article/details/131026841

版权

观前提示:本篇博客演示使用的 IDEA 版本为2021.3.3版本,使用的是Java8(又名jdk1.8)

前端使用VSCode(Visual Studio Code1.78.2)

电脑使用的操作系统版本为 Windows 10

CSS 基本语法规则

选择器 + 若干属性

选择器: 指定要应用样式的HTML元素

属性: 表示要应用的样式

此处代码的 P 标签就是选择器,选择所有 P 标签

大括号就是说明要对 P 标签干什么, 设置成什么属性

<!-- style 标签可以放在代码的任意位置-->
    <style>
        p{
            
        }
    </style>

大括号里面的 CSS 属性,可以写成一个或多个, 每个属性都是一个键值对,

键和值之间使用 : 分割

键值对之间使用 ; 分割

每个键值对可以独占一行,也可以不独占(一般独占,为了好看)

使用 CSS 可以修改字体的颜色,大小等

CSS 引入方式

CSS 有三种书写方式

1. 内部样式

2. 内联样式

3. 外部样式

1. 内部样式

使用 style 标签,直接把 CSS 写到 html 文件中.此时的 style 标签可以放到任何位置, 一般建议放到 head 标签里面

2. 内联样式

使用 style 属性, 针对制定的元素设置样式.(此时不需要写选择器,直接写属性键值对), 这个时候只是针对当前元素生效

很明显,他只影响 "这是一段演示用的文字" 的字体的大小和颜色, 并不影响 "这是第二段演示用的文字" 的字体的大小和颜色

如果内联样式和内部样式同时使用,就能发现 内联样式的优先级比内部样式高

3. 外部样式

把 CSS 代码单独作为一个 .CSS 文件, 在通过 link 属性, 让 html 引入该 css 文件

在 hello 文件夹下面建立一个 .css文件, 然后把调整字体颜色和大小的元素设置样式写在里面

.html 文件里面放两段演示用的文字

此时看网页,会发现并没有什么变化

当使用 Link 把 .css 文件引入 .html 文件以后,就会看到发生了变化

CSS 选择器

1. 标签选择器

在 {} 前面写标签名字, 此时意味着选中当前页面中所有的指定标签

可以看出只影响 P 标签里面的字体,并不影响 div 标签里面的字体

2. 类选择器

更好的选择器,可以创建 CSS 类,手动指定哪些元素应用这个类

此处说的类, 和 Java 中的面向对象的类无关

CSS 所谓的类, 就是把一组 CSS 的属性起了个名字,方便别的地方引用

注意: 此处定义了一个 CSS 类, 名字叫做 one, CSS 类定义的时候需要使用 . 开头

定义类需要使用 . 开头

引用这个类的时候, 通过 class 属性 = "类名" 即可.不需要带 .

一个类, 可以被一个元素引用, 也可以被多个元素引用

一个元素, 可以引用一个类, 也可以引用多个类

理解"层叠"

CSS 中文名: 层叠样式表

一个元素, 是可以被应用多层样式的, 这些样式就好像一层一层的叠加上去的

按下 F12 打开开发者工具

然后点击左边的箭头,再点击第一段演示文字, 然后看右边

3. ID 选择器

html 页面中的每个元素, 都是可以设置一个唯一的 id 的, 作为元素的身份识别

给元素安排 id 之后, 就可以通过 id 来选中对应的元素

类选择器, 可以让多个元素应用到同一个类

id 选择器, 只能针对唯一的元素生效,因为一个页面里面,id 是唯一的

4. 后代选择器

上面的三个选择器,是简单的选择器,CSS 还支持更复杂的选择器. 复合选择器

后代选择器: 把多个简单的基础的选择器组合一下(可以是标签,类,id 选择器的任意组合)

先找页面中所有的 ul, 然后在 ul里面找到 li, 把 li 里面的元素变成红色

注意: li 只要是 ul 的后代即可, 不一定非要是子元素,也可以是孙子元素, 重孙子元素......

5. 子选择器

也是把多个简单的基础选择器组合(标签, 类, id 选择器任意组合)

只是找匹配的子元素, 不找孙子元素之类的

只找 .one 里面的 li

这就是典型的子选择器

这就是典型的后代选择器

6. 并集选择器

这是不用并集选择器的写法

这是并集选择器的写法

7. 伪类选择器

前面的选择器是选中某个元素,伪类选择器选中某个元素的某个特定状态

: hover 鼠标悬停时候的状态

:active 属性按下时候的状态

CSS 常用属性

具体的样式的设置

样式涵盖很多方面的内容，包括但不限于大小，位置，颜色，形状，边距，边框，特殊滤镜，过度效果，动画......
和样式相关的属性非常的多，本篇博客只介绍一些常用的，其他的需要的时候再去查

字体属性

1. 设置字体家族

font-family

当前使用那种字体来显示

这个属性指定的字体, 必须是系统已经安装的, 如果你要指定一些特殊的字体, 系统上没有的, 则不能正确显示

这种情况一般是需要通过浏览器对应的服务器, 获取到指定的字体文件, 才能设置

2. 设置字体大小

font-size

浏览器的每个文字都可以视为一个"方框", 如果是阿拉伯数字或者英文,方框比较窄, 如果是中文,一般是一个正方形

设置 font-size: 20px, 文字框高度 20px

可以使用 QQ截图对文字的尺寸进行测量,可能会发现实际的尺寸和你设置的尺寸并不一致

如果不一样,注意你的浏览器的缩放设置和显示器的缩放设置

这个是调整完浏览器缩放的, 看起来差不多是50

查看显示器的缩放设置

40px * 125% = 50px

3. 字体粗细

font-weight

实际设置的时候,有两种典型的设置风格

1.使用单词

2.使用数字

使用单词

使用数字

4. 字体倾斜

font-style

让文字倾斜

文本属性

1. 字体颜色

color

光的三原色是红、绿、蓝。它们是通过不同的波长和频率混合而成的，可以产生各种颜色的可见光。这种混合方式被称为加性混色。在彩色显示器和电视等电子设备中，使用这种混合方式来显示图像和视频。

美术的三原色是红、黄、蓝。这种说法源自于16世纪荷兰画家鲁本斯所使用的色彩理论，他认为这三种颜色可以混合出所有其他颜色。

计算机表示颜色,是一种经典的 RGB(红、绿、蓝) 的表示方式

前端中, 给 RGB 各分配一个字节,每个字节的范围 0-255 / 00-FF(计算机的典型表示)

通过这三个分量不同比例的搭配,就可以调和出不同的颜色

三个拉满

三个归零

此处的颜色也可以使用十六进制的表示方式

也可以缩写, 如果每个分量的两个十六进制数字相同,那么就可以把6位十六进制缩写成3位十六进制

例如: AABBCC 缩写 ABC

#ff000000 缩写 #f00

颜色也可以使用单词直接表示: red(红色), orange(橙色), yellow(黄色), green(绿色), blue(蓝色)

不仅是 color 会遵守这套规则,其他的和颜色相关的属性,也是这样表示颜色的

2. 文本对齐

text-align

3. 文本装饰

text-decoration

none:无任何装饰效果。
underline:下划线。
overline:上划线。
line-through:删除线。

4. 文本缩减

text-indent

每个段落,首行缩进两个文字

px 相当于是 "绝对的量"

em 则是 "相对的量" 是以文字尺寸为基础来进行设置的

假设文字大小是40px

1 em => 40

2 em => 80

0.5 em => 20

文本缩进的值可以是负数(往左缩进)

5. 行高

行高 = 文字高度 + 行间距

上一行的顶线到下一行的顶线,就是行高(类似于数学的火车过山洞问题,头对头,尾对尾)

行高为 60px

背景属性

1. 背景颜色

background-color

2. 背景图片

background-image:url(图片路径)

3. 背景平铺

当引入背景图片之后,默认情况下是平铺的

4. 背景位置

如果不想平铺

background-repeat:no-repeat

禁止平铺,图片会出现在左上角

居中

background-position:center center;

这是像素设置

这是单词设置

5. 背景尺寸

background-size

cover 伸长图片

contain 填满页面

调整图片单个数据,可以只设置一个,也可以两个都设置

圆角矩形

html 元素默认都是矩形, 有的时候需要"带有圆角" 的矩形

这是不带有圆角的矩形

这是带有圆角的矩形

矩形的内切圆半径 10px, 越小越不明显

元素的显示模式

Display

1. 块级元素

display: block

2. 行内元素

display: inline

任何一个HTML标签的显示模式都是可以设置的

3. 块级元素和行内元素的区别

1.块级元素会独占一行。行内元素不独占一行
2.块级元素高度，宽度，内外边距都是可以设置的。行内元素高度，宽度，行高无效，内边距有效，外边距有时候有效，有时候无效
3.块级元素默认宽度是和父元素一样宽。行内元素默认宽度是和里面的内容一样宽

盒模型

描述了 html 元素的基本布局

任何一个 html 元素都是一个矩形的盒子,盒子里面可以放内容(文本,其他元素)

1. 边框

border 属性. 直接设置了四个方向

还可以使用

border-left

border-right

border-top

border-bottom

设置边框要设置三个方面的细节

1. 边框的粗细

2. 边框的颜色

3. 边框的风格(实线,虚线,其他线)

可以看到,尺寸发生了改变,原设定是200px * 100px的,变成了209px * 109px, 扩大了接近 10px

得出结论: 边框会撑大盒子

但是,很多时候并不想撑大盒子, 可以使用专门的属性防止盒子被撑大

box-sizing: border-box

现在就是标准的 200*100

2. 内边距

padding:10px 四个方向的边距都是 10px

padding:10px 20px 上下边距10px, 左右边距20px

padding:10px 20px 30px 40px 上右下左(顺时针)

<body>
    <style>
        .one {
            width: 200px;
            height: 100px;
            background-color: orange;
            color: #fff;
            text-align: left;
            line-height: 100px;
            box-sizing: border-box;
            border-radius: 10px;
            border: 10px rgb(0, 128, 50) solid;
            padding-left: 10px;
        }
    </style>
    <div class="one">
        演示文字
    </div>
</body>