CSS基础教程：选择器、数值与盒模型解析-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_53968665/article/details/122019583

本文介绍了CSS的基础知识，包括CSS的作用、如何关联HTML、选择器的使用，如标签选择器、ID选择器和类选择器。接着详细讲解了CSS中的数值，如长宽高、颜色和文字样式，并探讨了背景、矩形圆角和阴影的设置。还深入讨论了盒模型，以及块级元素和内联元素的区别。最后提到了一些进阶布局技术，如display属性和不同的布局模式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.认识CSS

CSS（Cascade Style Sheet）层叠样式表，)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

就像它的名字一样，CSS类似于绘图时有很多的图层，通过这些对图层的元素绘制得到了一个最终的图像。CSS中的图层，即层级，在HTML中通过<div>实现。

CSS属于声明式语言（与SQL类似），只声明结果，不考虑过程。

HTML如何关联CSS呢？

内部样式：通过<style>标签
外部样式：把CSS专门写到另外的资源中（CSS文件），通过<link>来引入
内联样式：直接放在元素的style属性中，不需要跟选择器

二.选择器

基础的选择器：

标签选择器：从整个HTML文件中选择，选择的是所有符合条件的元素。
id选择器：通过一个元素的id选择某个元素
类选择器：通过类名选择元素

进阶的选择器：

组合选择器：就是几种基础选择器的组合使用
通配符选择器：使用*，选取所有标签
子孙选择器：选择子孙（包括孩子及孩子的孩子）元素
直系孩子选择器：选择孩子元素
:focus伪类选择器：focus就是焦点，某个元素获得焦点时，（鼠标点击该元素，通过tab切换焦点），该选择器生效
链接伪类选择器：

a:link 选择未被访问过的链接

a:visited 选择已经被访问过的链接

a:hover 选择鼠标指针悬停上的链接

a:active 选择活动链接(鼠标按下了但是未弹起)

样式应用覆盖：

越精确的选择器，优先级越高
同等优先级，后面的选择器样式会覆盖前面的
某些样式，自动带有继承功能，即设置其父元素的样式，其子孙元素也默认继承这一样式

/* 标签选择器 */
body {
    background-color: blue;
}
/* id选择器 */
#hello {
    background-color: yellow;
}
/* 类选择器 */
.yellow {
    background-color: yellow;
}
/* 通配符选择器 */
 * {
            font-size: 40px;    
            color:      blue;   
            font-weight: normal;  /* 取消字体加粗和斜体 */
        }
/* 子孙后代选择器 */
  ol > li {
            color: pink;
        }

三.CSS中一些常见数值

1.长宽高

绝对值：px

相对值：em（2em，相当于当前字体的两倍）

百分比：100%（一般是相对于其父元素，相对的基准点可以设置）

2.颜色

颜色	RGB(红，绿，蓝)	16进制
红色	（255，0，0）	#FF0000
绿色	（0，255，0）	#00FF00
蓝色	（0，0，255）	#0000FF
黑色	（0，0，0）	#000
白色	（255，255，255）	#FFF

rgba:(1-100,透明-不透明)

hsl(色调，饱和度，亮度)

3.文字相关

字体font：

font-family：字体（多个字体用逗号分开，空格用引号包住）
font-size:字体大小（单位px，标题标签需要单独指定大小）

文字颜色color：

color

文本对齐text-align：

left（左对齐）
right（右对齐）
center（居中对齐）

文本装饰text-decoration：

underline 下划线
none 啥都没有（可以给 a 标签去掉下划线）
overline 上划线
line-through 删除线

文本缩进text-indent：

控制段落的首行缩进
格式text-indent: 数值+单位
单位有px,em
缩进可以为负，表示向左缩进

4.背景

背景颜色background-color:颜色
背景图片background-image:url(...)
背景尺寸background-size

可以是具体的数值，也可以是百分比（相对于父元素）
cover:把背景图放的足够大，使背景图覆盖整个背景区域，可能会使得部分背景图显示不出
contain:把背景图放大到它的宽高适应背景区域

背景平铺background-repest:平铺方式

repeat: 平铺
no-repeat: 不平铺
repeat-x: 水平平铺
repeat-y: 垂直平铺

5.矩形圆角

格式：border-radius: length
length 是内切圆的半径. 数值越大, 弧线越强烈
可以用圆角工具生成圆形：length的值为正方形宽度的一半
可以对四个角分别设置圆角大小：

border-radius: 10px 20px 30px 40px

等价于

border-top-left-radius:10px;

border-top-right-radius:20px;

border-bottom-right-radius:30px;

border-bottom-left-radius:40px；

6.阴影

格式：box-shadow: 3px 3px 5px 5px rgba(0, 0, 0, .7);

四.盒模型

每个HTML元素就相当于一个矩形盒子
盒子构成：边框 border，内容 content ，内边距 padding ，外边距 margin
真正的可视大小：bprder+content+padding
边框属性：

边框类型border-style（double双划线；solid实线；dotted点线；dashed虚线）
边框颜色border-color
边框粗细border-width
使用示例(可以四个边分开写)：
border: 1px solid red;
border-top: 30px double #000;
border-bottom: 30px solid #000;
border-left: 30px dotted #000;
border-right: 30px dashed #000;