CSS 入门完整笔记

一、CSS 三种引入方式

CSS 给页面添加样式共有三种写法，优先级与使用场景各不相同，每种附代码示例。

1. 行内样式

直接在标签 style 属性内书写样式，仅作用于当前单个标签。

复制代码

<div style="width:100px;height:100px;background:red;">行内样式盒子</div>

2. 内部样式

写在页面 <head> 内部的 <style> 标签中，仅当前页面生效。

复制代码

<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="box">内部样式盒子</div>
</body>

3. 外部样式

独立 .css 文件存放样式，通过 link 标签引入，多页面可共用，项目开发主流用法。

引入代码：

复制代码

<link rel="stylesheet" href="css/cssSelect.css">

cssSelect.css 文件内容：

复制代码

.box {
    width: 100px;
    height: 100px;
    background: green;
}

三种样式优先级规则

行内样式 > 内部样式、外部样式

内部与外部样式权重相等，后加载的覆盖先加载的，谁写在页面下方谁生效。

二、CSS 选择器 & 优先级规则

选择器权重优先级规则

基础权重：id选择器 > class选择器 > 元素选择器
叠加规则：选择器层级越长、组合越多，整体优先级越高
同级权重：权重相同时，靠后书写的样式覆盖前面样式

1. 基础选择器

元素选择器

直接写标签名，匹配页面所有同类标签

复制代码

/* 所有div、span标签生效 */
div {
    font-size: 16px;
}
span {
    color: #666;
}

ID 选择器

前缀 #，id 页面唯一，权重最高

复制代码

#demo {
    width: 200px;
}

<div id="demo">id选择器</div>

类选择器

前缀 .，class 可重复复用，开发最常用

复制代码

.text-red {
    color: red;
}

<p class="text-red">红色文字</p>
<span class="text-red">同样变红</span>

属性选择器

根据标签自带属性匹配，格式 [属性=值]

复制代码

/* class完全等于aa */
[class="aa"] {
    background: pink;
}
/* class以aa开头 */
[class^="aa"] {
    border:1px solid #000;
}
/* class以aa结尾 */
[class$="aa"] {
    padding:10px;
}
/* class包含aa字符 */
[class*="aa"] {
    margin:5px;
}

包含（后代）选择器

选择器中间空格，匹配所有后代元素

复制代码

/* div内部所有p标签 */
div p {
    line-height: 1.8;
}

子元素选择器

使用 >，仅匹配直接一级子元素，不包含深层后代

复制代码

/* 只匹配div直接子级p */
div > p {
    font-weight: bold;
}

群组选择器

逗号 , 分隔，多个选择器共用一套样式

复制代码

/* div、p、span统一设置 */
div,p,span {
    margin: 0;
}

通配符选择器 `*`

匹配页面全部元素，常用于初始化清除默认内外边距

复制代码

* {
    margin: 0;
    padding: 0;
}

2. 伪元素选择器（仅支持块级元素）

前缀 ::，创建虚拟元素，不在 HTML 结构内

复制代码

/* 第一个文字 */
div::first-letter {
    font-size: 30px;
}
/* 第一行文本 */
div::first-line {
    color: blue;
}
/* 元素尾部插入内容 */
div::after {
    content: "尾部文字";
}
/* 元素头部插入内容 */
div::before {
    content: "头部文字";
}

3. 伪类选择器

前缀 :，匹配元素特定状态、层级位置

（1）结构性伪类选择器

复制代码

/* 第2个子元素 */
ul li:nth-child(2) {
    color: red;
}
/* 奇数行 odd / 偶数行 even */
ul li:nth-child(odd) {
    background: #eee;
}
/* 第一个子元素 */
ul li:first-child {
    font-weight: bold;
}
/* 最后一个子元素 */
ul li:last-child {
    border-bottom:none;
}
/* 倒数第3个子元素 */
ul li:nth-last-child(3) {
    background: #ccc;
}
/* 同类型第三个标签 */
ul li:nth-of-type(3) {
    font-size: 14px;
}
ul li:first-of-type {}
ul li:last-of-type {}

（2）UI 状态伪类选择器

匹配鼠标、输入框交互状态

复制代码

/* 鼠标悬浮 */
li:hover {
    background: #f5f5f5;
}
/* 单选/复选框选中状态 */
input:checked {
    width:20px;
}
/* 输入框获取焦点 */
input:focus {
    border:1px solid blue;
    outline:none;
}

三、盒子模型

页面所有元素都属于盒子模型，通过 display 区分盒子类型

1. 四种盒子类型

块级盒子 display:block

独占一行，支持宽高；常见标签：h1~h6、ul、li、p、div

div {
display: block;
width: 200px;
height: 100px;
}
行内盒子 display:inline

横向排列、不换行；不支持自定义宽高；代表标签 span

span {
display: inline;
/* width/height 设置无效 */
}
行内块盒子 display:inline-block

横向不换行，同时支持自定义宽高；代表标签 input

input {
display: inline-block;
width: 150px;
height: 30px;
}
弹性盒子 display:flex

父容器开启弹性布局，子元素默认横向排css

.box-wrap {
display: flex;
}

2. 盒子四层组成结构

内容区 content

width、height 控制内容尺寸；box-sizing:border-box 让宽高包含边框 + 内边距

.box {
width: 100px;
height: 100px;
box-sizing: border-box;
}
内边距 padding

内容与边框之间距离，支持简写（上、右、下、左顺时针）

.box {
/* 上下10px，左右20px /
padding: 10px 20px;
/ 单独设置底部 */
padding-bottom: 5px;
}
边框 border

复合属性：宽度、样式、颜色

.box {
border: 2px solid #333;
}
外边距 margin

盒子与其他元素之间距离；margin: 0 auto 实现块级元素水平居中

.box {
margin: 20px auto;
}

四、页面三大布局方案

1. float 传统浮动布局

实现横向排列，父容器添加 overflow:hidden 清除浮动

复制代码

.left {
    float: left;
    width: 200px;
}
.wrap {
    overflow: hidden;
}

2. inline-block 行内块布局

给同级盒子设置 display:inline-block，实现横向排版

复制代码

.item {
    display: inline-block;
    width: 100px;
}

3. Flex 弹性盒子布局（现代主流布局）

给父容器设置 display:flex，通过以下属性控制子元素排版

1）flex-direction：子元素排列方向

复制代码

.wrap {
    display: flex;
    flex-direction: row; /* 默认横向从左到右 */
    /* column 垂直从上到下 */
    /* column-reverse 垂直从下到上 */
}

2）justify-content：主轴对齐方式

控制子元素在水平 / 垂直主轴的分布

复制代码

.wrap {
    display: flex;
    justify-content: center; /* 居中 */
    /* flex-start 默认靠左 */
    /* flex-end 靠右 */
    /* space-between 两端贴边，中间均分空白 */
    /* space-around 两侧留白 */
    /* space-evenly 全部空隙均匀 */
}

3）align-items：单行子元素交叉轴垂直对齐

复制代码

.wrap {
    display: flex;
    align-items: center; /* 垂直居中 */
    /* flex-start 顶部对齐 */
    /* flex-end 底部对齐 */
    /* baseline 文字基线对齐 */
    /* stretch 默认拉伸填满父高度 */
}

4）flex-wrap：子元素是否自动换行

复制代码

.wrap {
    display: flex;
    flex-wrap: wrap; /* 空间不足自动换行 */
}

5）align-content：多行子元素垂直分布

仅在换行生效时使用

复制代码

.wrap {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

6）order：控制单个子元素排序

数值越小，排列越靠前，默认值 0

复制代码

.item1 {
    order: 2;
}
.item2 {
    order: 1;
}

7）flex：子元素拉伸压缩比例

简写属性，包含三个细分属性

复制代码

.item {
    /* flex-grow 拉伸比例 */
    flex-grow: 1;
    /* flex-shrink 压缩比例 */
    flex-shrink: 1;
    /* flex-basis 基准尺寸 */
    flex-basis: 100px;
    /* 简写 */
    flex: 1;
}

flex-grow：父容器剩余空白，按数值比例分给子元素
flex-shrink：子元素总宽度超出父容器时，按比例压缩尺寸
flex-basis：元素基础尺寸，优先级高于 width

本篇小结

CSS 三种引入方式优先级：行内 > 内部 / 外部，后写覆盖先写；项目开发统一使用外部样式表。
选择器核心掌握权重规则，开发优先使用类选择器，id 仅用于唯一标识。
盒子模型是布局基础，border-box 是日常开发高频属性，简化尺寸计算。
Flex 弹性布局替代老旧浮动布局，适配移动端、多栏排版，所有属性需区分主轴、交叉轴。

CSS 入门完整笔记

一、CSS 三种引入方式

1. 行内样式

2. 内部样式

3. 外部样式

三种样式优先级规则

二、CSS 选择器 & 优先级规则

选择器权重优先级规则

1. 基础选择器

元素选择器

ID 选择器

类选择器

属性选择器

包含（后代）选择器

子元素选择器

群组选择器

通配符选择器 *

2. 伪元素选择器（仅支持块级元素）

3. 伪类选择器

（1）结构性伪类选择器

（2）UI 状态伪类选择器

三、盒子模型

1. 四种盒子类型

2. 盒子四层组成结构

四、页面三大布局方案

1. float 传统浮动布局

2. inline-block 行内块布局

3. Flex 弹性盒子布局（现代主流布局）

1）flex-direction：子元素排列方向

2）justify-content：主轴对齐方式

3）align-items：单行子元素交叉轴垂直对齐

4）flex-wrap：子元素是否自动换行

5）align-content：多行子元素垂直分布

6）order：控制单个子元素排序

7）flex：子元素拉伸压缩比例

本篇小结

通配符选择器 `*`