CSS全面知识点及其应用
CSS（Cascading Style Sheets）是一种用于描述网页外观的样式表语言。以下是全面的 CSS 知识点：
一、CSS 基础概念
-
定义：CSS 用于控制 HTML 或 XML 文档的呈现方式，包括布局、颜色、字体、大小等。
-
层叠性和继承性：多个样式规则可以层叠应用于同一元素，同时某些样式属性可以从父元素继承到子元素。
二、CSS 语法
-
选择器：用于指定要应用样式的 HTML 元素。常见选择器有：
- 元素选择器（如
p选择所有<p>元素）。 - 类选择器（以
.开头，如.my-class）。 - ID 选择器（以
#开头，如#my-id）。 - 后代选择器（如
div p选择<div>元素内部的所有<p>元素）。 - 子选择器（如
div > p选择<div>元素的直接子元素<p>）等。
- 元素选择器（如
-
属性和值：指定要设置的样式属性及其值，如
color: red;设置文本颜色为红色。
三、CSS 引入方式
1.内联样式：在 HTML 元素的 style 属性中直接编写 CSS 样式。
<p style="color: blue;">This is blue text.</p>
2.内部样式表：在 HTML 文件的 <head> 标签中使用 <style> 标签定义 CSS 样式。
<head>
<style>
p {
color: green;
}
</style>
</head>
3.外部样式表：将 CSS 代码保存为一个独立的 .css 文件，然后在 HTML 文件的 <head> 标签中使用 <link> 标签引入。
<head>
<link rel="stylesheet" href="styles.css">
</head>
四、CSS 盒模型
- 组成：由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。
div {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid black;
margin: 20px;
}
计算实际尺寸：元素的实际宽度 = 内容宽度 + 左内边距 + 右内边距 + 左边框宽度 + 右边框宽度；实际高度同理。
五、CSS 布局
1.浮动（float）：使元素向左或向右浮动，可用于实现多列布局。
.left-column {
float: left;
width: 30%;
}
.right-column {
float: right;
width: 70%;
}
2.定位（position）：
· 相对定位（relative）：相对于元素在正常文档流中的位置进行定位。
.box {
position: relative;
top: 20px;
left: 20px;
}
- 绝对定位（absolute）：相对于最近的已定位祖先元素进行定位，如果没有已定位祖先元素，则相对于文档的初始包含块进行定位。
.absolute-box {
position: absolute;
top: 50px;
right: 50px;
}
- 固定定位（fixed）：相对于浏览器窗口进行定位。
.fixed-box {
position: fixed;
bottom: 20px;
left: 20px;
}
- 弹性布局（Flexbox）：
- 容器属性：
display: flex;：将容器设置为弹性布局。flex-direction：设置主轴方向（row、column 等）。justify-content：设置主轴上的对齐方式（center、flex-start、flex-end 等）。align-items：设置交叉轴上的对齐方式（center、flex-start、flex-end 等）。
- 项目属性：
flex-grow：定义项目的放大比例。flex-shrink：定义项目的缩小比例。flex-basis：定义项目在主轴上的初始大小。
- 容器属性：
.flex-container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.flex-item {
flex-grow: 1;
}
- 网格布局（Grid）：
- 容器属性：
display: grid;：将容器设置为网格布局。grid-template-columns：定义列的轨道大小和数量。grid-template-rows：定义行的轨道大小和数量。grid-gap：设置网格间隙。
- 项目属性：
grid-column：指定项目在网格中的列位置。grid-row：指定项目在网格中的行位置。
- 容器属性：
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 200px;
grid-gap: 10px;
}
.grid-item {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
六、CSS 文本样式
- 字体属性：
font-family：设置字体。font-size：设置字体大小。font-weight：设置字体粗细。font-style：设置字体样式（normal、italic 等）。
p {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
}
- 文本对齐：
text-align：设置文本的水平对齐方式（left、center、right 等）。vertical-align：设置文本的垂直对齐方式（top、middle、bottom 等）。
.text-center {
text-align: center;
}
img {
vertical-align: middle;
}
- 文本装饰：
text-decoration：设置文本的装饰（underline、overline、line-through 等）。
a {
text-decoration: none;
}
七、CSS 颜色和背景
-
颜色表示：
- 颜色名称（如
red、blue）。 - 十六进制值（如
#ff0000表示红色）。 - RGB 值（如
rgb(255, 0, 0)表示红色）。 - HSL 值（如
hsl(0, 100%, 50%)表示红色）。
- 颜色名称（如
-
背景属性：
background-color：设置背景颜色。background-image：设置背景图片。background-repeat：设置背景图片的重复方式（repeat、no-repeat、repeat-x、repeat-y）。background-position：设置背景图片的位置。background-size：设置背景图片的大小。
.box {
background-color: #f0f0f0;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
八、CSS 过渡和动画
1.过渡（transition）：用于在元素的状态发生变化时实现平滑的过渡效果。
.button {
background-color: blue;
color: white;
transition: background-color 0.5s ease;
}
.button:hover {
background-color: green;
}
2.动画（animation）：可以创建更复杂的动画效果。
@keyframes move {
from {
left: 0;
}
to {
left: 200px;
}
}
.box {
position: relative;
animation: move 5s infinite;
}
九、CSS 响应式设计
1.媒体查询（media query）：根据不同的设备特性（如屏幕宽度、分辨率等）应用不同的样式。
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
}
2.弹性布局和网格布局在响应式设计中的应用：可以根据不同的屏幕尺寸调整布局。
十、CSS 预处理器（如 Sass、Less）
1.变量：可以定义和使用变量来存储颜色、尺寸等常用值。
$primary-color: blue;
.button {
background-color: $primary-color;
}
2.嵌套：可以将 CSS 规则嵌套在其他规则中，提高代码的可读性和组织性。
.nav {
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
}
}
3.混合（mixin）：可以定义可重用的样式块，并在需要的地方调用。
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(10px);
}