CSS知识总结
CSS（层叠样式表，Cascading Style Sheets）是一种用于描述网页内容视觉表现的样式语言，与HTML（结构）和JavaScript（行为）共同构成现代Web开发的三大核心技术。
一、基本概念
-
定义：
- CSS 是一种样式表语言，主要用于定义 HTML 或 XML 等文档的呈现方式，包括文档的布局、颜色、字体、大小等外观属性，使网页内容的展示更加丰富和美观。
-
作用：
- 实现了内容与表现的分离，将网页的结构（HTML）与样式（CSS）分开，便于维护和更新网页。同时，通过 CSS 可以轻松地为多个页面应用统一的样式，确保网站风格的一致性。
二、主要组成部分
-
选择器：
- 用于选中要应用样式的 HTML 元素。常见的选择器有标签选择器（如
p）、类选择器（如.classname）、ID 选择器（如#idname）、属性选择器（如[type="text"]）等。 -
属性和值：
- 属性用于指定要设置的样式特性，如
color（颜色）、font-size（字体大小）、width（宽度）等；值则是为属性设定的具体内容，例如color: red中，red就是color属性的值。
三、语法规则
- 基本语法：由选择器和声明块组成，声明块包含在花括号
{}中，内部由一个或多个属性值对组成，每个属性值对之间用分号;分隔。例如：
p {
color: blue;
font-size: 16px;
}四、特性
-
继承性：
- 子元素会继承父元素的某些样式属性，如文本颜色、字体等。但并非所有属性都能继承，例如
width、height等布局相关属性通常不会继承。 -
层叠性：
- 当多个样式规则应用到同一个元素时，会根据一定的规则进行层叠，最终决定元素的实际样式。这些规则包括选择器的权重、样式的定义顺序等。
-
优先级：
- 不同类型的选择器具有不同的优先级，一般来说，内联样式 > ID 选择器 > 类选择器 > 标签选择器。当多个选择器同时选中一个元素时，优先级高的样式会覆盖优先级低的样式。
五、应用方式
CSS 可以通过以下几种方式引入到 HTML 文档中：
1 .内联样式
直接在 HTML 元素的style属性中定义样式。
<p style="color: red; font-size: 16px;">这是内联样式的文本。</p>2.内部样式表
在 HTML 文档的<head>标签内使用<style>标签定义样式。
<head>
<style>
p {
color: blue;
font-size: 14px;
}
</style>
</head>
<body>
<p>这是内部样式表的文本。</p>
</body>3.外部样式表
创建一个独立的 CSS 文件（如 styles.css），然后在 HTML 文档的<head>标签内使用<link>标签引入。
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>这是外部样式表的文本。</p>
</body>六、CSS使用
1. 选择器（Selectors）
1）基础选择器
/* 标签选择器 */
p { color: #333; }
/* 类选择器 */
.title { font-size: 24px; }
/* ID选择器 */
#header { background: #f0f0f0; }2） 组合选择器
/* 后代选择器 */
div p { margin: 10px; }
/* 子元素选择器 */
ul > li { list-style: none; }3）伪类选择器
:nth - child(n)：选中父元素的第 n 个子元素。
li:nth-child(2) {
color: green;
}<ul>
<li>第一项</li>
<li>第二项（绿色）</li>
<li>第三项</li>
</ul>:hover：当鼠标悬停在元素上时应用样式。
a:hover {
text-decoration: underline;
}<a href="#">链接（悬停时出现下划线）</a>
4）属性选择器
/* 匹配具有特定属性的元素 */
a[target="_blank"] { color: red; }
/* 匹配属性值包含指定字符串的元素 */
img[alt~="logo"] { border: 1px solid #ccc; }
/* 匹配属性值以指定字符串开头的元素 */
div[class^="col-"] { float: left; }2. Emmet 语法
Emmet 是一种快速编写 HTML 和 CSS 代码的语法。例如，在 CSS 中，p{text}会自动生成p { text: ; }。在 HTML 中，ul>li*3会生成：
<ul>
<li></li>
<li></li>
<li></li>
</ul>3.字体、文本、背景详解
1）字体属性
font - family指定字体，font - size指定字号，font - weight指定字体粗细。
body {
font - family: Arial, sans - serif;
font - size: 16px;
font - weight: bold;
}2)文本属性
text - align设置文本对齐方式，text - decoration设置文本装饰。
p {
text - align: center;
text - decoration: underline;
}3)背景属性
background - color设置背景颜色，background - image设置背景图片。
body {
background - color: lightblue;
background - image: url('bg.jpg');
}4. CSS 三大特性
1）继承性：
子元素会继承父元素的某些样式，如字体相关样式。
body {
font - family: Arial, sans - serif;
}
p {
/* 会继承body的字体 */
}2) 层叠性
当多个样式规则应用到同一个元素时，会根据权重和顺序来决定最终样式。
p {
color: red;
}
p.special {
color: blue; /* 权重更高，会覆盖上面的红色 */
}3) 优先级
内联样式 > ID 选择器 > 类选择器 > 标签选择器。
5. 盒子模型（Box Model）
-
组成：内容(content) + 内边距(padding) + 边框(border) + 外边距(margin)
-
两种模式：
/* 标准盒模型（默认） */
box-sizing: content-box;
/* IE盒模型（总宽度=width） */
box-sizing: border-box; div {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}6.伪元素
::before和::after用于在元素内容之前或之后插入内容。
p::before {
content: "前缀：";
}<p>这是一段文本。</p>7. 布局技术
1）浮动
使用float属性使元素脱离文档流，如float: left或float: right。
img {
float: left;
margin - right: 10px;
}<img src="image.jpg" alt="">
<p>文字环绕图片。</p>2）定位
position属性有static（默认）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）。
div {
position: absolute;
top: 50px;
left: 100px;
}3） flex 布局
- flex 布局：通过
display: flex将容器设置为弹性布局，可方便地控制子元素的排列和对齐。
.container {
display: flex;
justify - content: space - between;
}<div class="container">
<div>项目1</div>
<div>项目2</div>
<div>项目3</div>
</div>- flex 布局详解：包括
flex - direction（主轴方向）、flex - wrap（换行方式）、align - items（交叉轴对齐方式）等更多属性。
.container {
display: flex;
flex - direction: column;
flex - wrap: wrap;
align - items: center;
}.container {
display: flex;
justify-content: space-between; /* 主轴对齐 */
align-items: center; /* 交叉轴对齐 */
gap: 20px; /* 元素间距 */
}
.item {
flex: 1; /* 弹性扩展 */
}4）Flex布局完整属性
容器属性
.flex-container {
display: flex;
flex-direction: row-reverse; /* 主轴方向 */
flex-wrap: wrap; /* 换行方式 */
justify-content: space-around; /* 主轴对齐 */
align-items: stretch; /* 交叉轴对齐 */
align-content: center; /* 多行对齐 */
gap: 10px; /* 项目间距 */
}项目属性
.flex-item {
flex: 1 0 200px; /* flex-grow | flex-shrink | flex-basis */
order: 2; /* 排列顺序 */
align-self: flex-end; /* 单独对齐 */
}8. Grid网格布局
通过display: grid创建网格容器，使用grid - template - columns和grid - template - rows定义网格结构。
.container {
display: grid;
grid - template - columns: repeat(3, 1fr);
grid - template - rows: auto;
}.grid-container {
display: grid;
grid-template-columns: 1fr 300px; /* 列宽分配 */
grid-template-rows: 100px auto; /* 行高分配 */
grid-template-areas: /* 区域命名 */
"header header"
"main sidebar";
column-gap: 20px;
row-gap: 15px;
}
.header { grid-area: header; }
.main { grid-area: main; }9.单位与颜色
1) 相对单位
.container {
width: 80%; /* 相对于父元素 */
font-size: 2rem; /* 相对于根元素字体大小（通常16px → 32px） */
padding: 2vw; /* 视口宽度的2% */
line-height: 1.5em;/* 相对于当前元素的字体大小 */
}2) 颜色表示法
.color-demo {
color: #FF5733; /* 十六进制 */
background: rgb(255,87,51);
border-color: rgba(255,87,51,0.5); /* 带透明度 */
box-shadow: 0 0 10px hsl(12, 100%, 60%); /* HSL色值 */
}10.动画效果
使用@keyframes定义动画关键帧，通过animation属性应用动画。
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
div {
animation: slide 5s infinite;
infinite：表示动画会无限循环播放，元素会持续不断地旋转。
}@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
animation: rotate 2s linear infinite;
}11.高级视觉特效
1)阴影与渐变
.card {
/* 盒子阴影：X偏移 Y偏移 模糊半径 扩散半径 颜色 */
box-shadow: 2px 4px 12px 0 rgba(0,0,0,0.2);
/* 文字阴影 */
text-shadow: 1px 1px 2px black;
/* 线性渐变背景 */
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
/* 径向渐变 */
background: radial-gradient(circle, #fff 20%, #000 80%);
}2)变形（Transform）
.transform-demo {
transform: rotate(15deg) scale(1.2) translateX(20px);
transition: transform 0.3s ease; /* 平滑过渡 */
}
/* 3D变换 */
.cube {
transform: perspective(1000px) rotateY(45deg);
}3) 复合层与渲染优化
/* 触发GPU加速的属性 */
.optimize {
transform: translateZ(0);
will-change: transform;
backface-visibility: hidden;
}
/* 避免重排的实践 */
.box {
/* 使用transform替代top/left动画 */
transition: transform 0.3s;
}4)高级渲染特性
/* 混合模式与遮罩 */
.overlay {
mix-blend-mode: multiply;
mask-image: linear-gradient(to right, black 80%, transparent);
}
/* 滤镜效果 */
.image-filter {
filter: grayscale(50%) blur(2px);
}
/* 剪切路径 */
.clip-path {
clip-path: polygon(0 0, 100% 0, 50% 100%);
}12.现代CSS特性
1) 变量（CSS Variables）
:root {
--primary-color: #3498db;
}
.box {
background: var(--primary-color);
}2) 网格布局（Grid）
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}4) 响应式设计（Media Queries）
- 媒体查询：根据不同设备的屏幕尺寸应用不同样式。
@media (max-width: 768px) {
.menu { display: none; }
}@media (max - width: 600px) {
body {
font - size: 14px;
}
}/* 设备宽度在600px到900px之间，横屏状态 */
@media screen and (min-width: 600px) and (max-width: 900px) and (orientation: landscape) {
.content { padding: 10px; }
}
/* 高分辨率屏幕 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.logo { background-image: url("logo@2x.png"); }
}响应式图片
<picture>
<source media="(min-width: 1200px)" srcset="large.jpg">
<source media="(min-width: 768px)" srcset="medium.jpg">
<img src="small.jpg" alt="响应式图片">
</picture>七、发展趋势
- 响应式和自适应设计：随着移动设备的广泛使用，CSS 越来越注重响应式和自适应设计，通过媒体查询、弹性布局等技术，使网页能够在不同屏幕尺寸的设备上都能完美显示。
- CSS 预处理器和后处理器：如 Sass、Less 等预处理器和 PostCSS 等后处理器的使用越来越普遍，它们提供了更多的功能和语法糖，如变量、混合、函数等，提高了 CSS 的编写效率和可维护性。
- 新特性和功能的不断推出：CSS 不断发展，新的特性和功能如 CSS Grid、CSS 变量、动画和过渡效果等不断涌现，为网页设计带来更多的可能性和创意空间。