CSS 笔记

目录

一、选择器

注：以下 CSS 代码和 HTML 标签不在同一代码块下

1.1 全局选择器

1
* { /* 属性 */ }

作用于所有标签

1.2 元素选择器

1
p { /* 属性 */ }

作用于所有 p 标签

1.3 类选择器

1
2
.oneclass { /* 属性1 */ }
.twoclass { /* 属性2 */ }
1
2
3
<p class="oneclass">属性1生效</p>
<p class="twoclass">属性2生效</p>
<p class="oneclass twoclass">属性1和属性2都生效</p>

作用于带特定 class 属性的元素，多个 class 用空格分隔

1.4 ID 选择器

1
#text { /* 属性 */ }
1
<p id="text"></p>

作用于唯一的 id 属性元素

1.5 合并选择器

1
2
p, h3 { /* 属性 */ }
.class, #text { /* 属性 */ }

用逗号分隔多个选择器

1.6 选择器优先级

类型 权重
元素选择器 1
类选择器 10
ID 选择器 100
内联样式 1000

优先级顺序： 内联 > ID > 类 > 元素

二、字体属性

2.1 color

1
2
3
4
color: blue;
color: #0000ff;
color: rgb(0,0,0);
color: rgba(0,0,0,0.5);

rgba() 的 a 表示透明度，范围 0~1

2.2 font-size

1
font-size: 12px;

最小支持 12px

2.3 font-weight

1
font-weight: normal;

normal 默认（400）
bold 粗体（700）
bolder 更粗
lighter 更细
100~900 自定义

2.4 font-style

1
font-style: normal;

normal 默认
italic 斜体

2.5 font-family

1
font-family: "微软雅黑";

三、背景属性

3.1 background-color

设置背景色，类似 color

3.2 background-image

1
background-image: url("图片地址");

3.3 background-repeat

1
background-repeat: no-repeat;

图片重复方式：
repeat-x 横向重复
repeat-y 纵向重复
no-repeat 不重复

3.4 background-size

1
background-size: 100% 100%;

设置背景图片大小
length 指定数值
percentage 百分比
cover 保持比例填满容器（可能裁剪）
contain 保持比例最大化（不裁剪）

3.5 background-position

1
background-position: left top;

设置图片起始位置，默认 0% 0%
常用值：left top、center center、right bottom
也可自定义：x% y% 或 xpos ypos

四、文本属性

4.1 text-align

文本水平对齐方式：left 左对齐、right 右对齐、center 居中

4.2 text-decoration

文本修饰：underline 下划线、overline 上划线、line-through 删除线

4.3 text-transform

控制文本大小写：capitalize 首字母大写、uppercase 全部大写、lowercase 全部小写

4.4 text-indent

首行缩进，可为负值

五、表格属性

5.1 border

1
table, td { border: 1px solid red; }

边框：大小、线条、颜色

5.2 border-collapse

collapse 折叠边框，合并双边框

5.3 width height

设置表格宽度和高度

5.4 text-align

表格内文本水平对齐：left、right、center

5.5 vertical-align

单元格内文本垂直对齐：top、bottom、middle

5.6 padding

单元格内文本与边框的距离

六、关系选择器

6.1 后代选择器

1
ul li { /* 属性 */ }
1
2
3
4
5
<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</ul>

选择 ul 内所有 li 标签，语法：E F {}

6.2 子代选择器

1
div > p { /* 属性 */ }
1
2
3
4
5
6
<div>
    <p>选中</p>
    <ul>
        <li><p>未选中</p></li>
    </ul>
</div>

选择 div 的直接子元素 p，语法：E > F {}

6.3 相邻兄弟选择器

1
h1 + p { /* 属性 */ }
1
2
3
4
<p>未选中</p>
<h1>XXXX</h1>
<p>选中</p>
<p>未选中</p>

选择紧跟在 h1 后的第一个 p，语法：E + F {}

6.4 通用兄弟选择器

1
h1 ~ p { /* 属性 */ }
1
2
3
4
5
<p>未选中</p>
<h1>XXXX</h1>
<h2>未选中</h2>
<p>选中</p>
<p>选中</p>

选择 h1 后所有兄弟 p，语法：E ~ F {}

七、盒子模型

所有 HTML 元素都可视为盒子
盒模型包括：margin 外边距、border 边框、padding 内边距、content 内容区

  • 两个值时，第一个为上下，第二个为左右
  • 可用 -left、-right、-top、-bottom 单独设置方向

八、弹性盒子模型

8.1 容器属性

  • display: flex 启用弹性盒子布局
  • flex-direction 元素排列方向（row/row-reverse/column/column-reverse）
  • justify-content 主轴对齐方式（flex-start/center/space-between 等）
  • align-items 交叉轴对齐方式（flex-start/center/stretch 等）

8.2 子元素属性

  • flex 子元素伸缩比例，设置后宽度不再生效

九、浮动

9.1 设置浮动

  • float: left/right/none/inherit
    使元素脱离文档流，向左或右浮动

9.2 清除浮动

  • clear: left/right/both 控制元素与浮动元素的布局
  • overflow: hidden/auto/scroll 创建 BFC，清除浮动影响

9.3 伪元素清除浮动

1
2
3
4
5
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

十、定位

10.1 相对定位

1
2
3
position: relative;
top: 0;
left: 0;

相对于自身原位置偏移，仍占原空间

10.2 绝对定位

1
2
3
position: absolute;
top: 0;
left: 0;

脱离文档流，相对于最近的定位父元素定位

10.3 固定定位

1
2
3
position: fixed;
top: 0;
left: 0;

脱离文档流，固定在浏览器窗口

10.4 堆叠顺序

1
z-index: 1;

控制元素堆叠顺序，仅对定位元素有效

十一、CSS3 新特性

11.1 圆角

1
border-radius: 10px;

可设置单值、两个值、三个值、四个值或百分比

11.2 阴影

1
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

设置阴影的水平/垂直偏移、模糊半径、颜色
可设置多个阴影，inset 表示内阴影

11.3 透明度

1
opacity: 0.5;

十二、动画

12.1 @keyframes 关键帧动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@keyframes animation-name {
    0% { background-color: red; }
    50% { background-color: blue; }
    100% { background-color: red; }
}
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: animation-name 2s linear 0s infinite normal;
}
div:hover {
    animation-play-state: paused;
}

animation: name duration timing-function delay iteration-count direction;

  • name 动画名称
  • duration 持续时间
  • timing-function 速度曲线（ease、linear、ease-in、ease-out、ease-in-out）
  • delay 延迟时间
  • iteration-count 循环次数
  • direction 方向（normal、reverse、alternate）

十三、媒体查询

根据设备特性应用不同样式

13.1 设置 meta 标签

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

13.2 语法

1
2
3
@media media-type and (condition) {
    /* CSS 规则 */
}

13.3 示例

1
2
3
4
5
6
7
8
9
10
11
@media screen and (max-width: 768px) {
    body { background-color: lightblue; }
} /* 手机屏幕 */

@media screen and (min-width: 769px) and (max-width: 996px) {
    body { background-color: lightgreen; }
} /* 平板屏幕 */

@media screen and (min-width: 997px) {
    body { background-color: lightcoral; }
} /* 电脑屏幕 */

根据屏幕宽度设置不同背景色

十四、CSS Sprite

将多个图像合并为一个，减少 HTTP 请求，提高加载速度。通过 background-image 和 background-position 显示不同部分。

1
2
3
4
5
6
7
8
.sprite {
    background-image: url('sprite.png');
    width: 100px;  /* 单个图像宽度 */
    height: 100px; /* 单个图像高度 */
}
.icon1 { background-position: 0 0; }
.icon2 { background-position: -100px 0; }
.icon3 { background-position: -200px 0; }

.sprite 定义精灵图和尺寸，.icon1、.icon2、.icon3 定位不同图像

十五、字体图标

1
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

在 <head> 标签中引入 Font Awesome

1
2
3
<i class="fa fa-camera-retro"></i> <!-- 相机图标 -->
<i class="fa fa-heart"></i>        <!-- 心形图标 -->
<i class="fa fa-star"></i>         <!-- 星形图标 -->