css全部知识点整理

文章目录隐藏

1. CSS 基础

1.1. CSS 语法

selector {
    property: value;
}

1.2. 选择器

元素选择器：element
```
p {
    color: blue;
}
```

类选择器：.class

.my-class {
    font-size: 16px;
}

ID选择器：#id

#my-id {
    background-color: yellow;
}

属性选择器：[attribute]

[type="text"] {
    border: 1px solid black;
}

伪类选择器：:pseudo-class
```
a:hover {
    color: red;
}
```

伪元素选择器：::pseudo-element

p::first-line {
    font-weight: bold;
}

2. CSS 盒模型

2.1. 盒模型概述

每个元素都被表示为一个矩形的盒子，这个盒子包括内容、内边距（padding）、边框（border）和外边距（margin）。

2.2. 盒模型属性

/* 内容区 */
width: 100px;
height: 100px;

/* 内边距 */
padding: 10px;

/* 边框 */
border: 1px solid black;

/* 外边距 */
margin: 10px;

3. 文本和字体

3.1. 文本属性

color: #333;
text-align: center;
text-decoration: underline;
text-transform: uppercase;
letter-spacing: 2px;
line-height: 1.5;

3.2. 字体属性

font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;

4. 布局

4.1. 显示与可见性

display: block;  /* or inline, inline-block, flex, grid, none */
visibility: hidden;

4.2. 定位

position: static; /* or relative, absolute, fixed, sticky */
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
z-index: 1;

4.3. 浮动和清除

float: left;  /* or right, none */
clear: both;  /* or left, right, none */

4.4. Flexbox

display: flex;
flex-direction: row;  /* or column */
justify-content: center;  /* or flex-start, flex-end, space-between, space-around */
align-items: center;  /* or flex-start, flex-end, stretch */

4.5. 网格布局（Grid）

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
grid-gap: 10px;

5. 背景和边框

5.1. 背景属性

background-color: #f0f0f0;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;

5.2. 边框属性

border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.5);

6. 变换、过渡和动画

6.1. 变换

transform: translateX(50px) rotate(45deg) scale(1.5);

6.2. 过渡

transition: all 0.3s ease-in-out;

6.3. 动画

@keyframes my-animation {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.element {
    animation: my-animation 2s infinite;
}

7. 响应式设计

7.1. 媒体查询

@media (max-width: 600px) {
    .container {
        width: 100%;
    }
}

8. CSS 方法论

8.1. BEM（Block Element Modifier）

.block {
    /* styles */
}
.block__element {
    /* styles */
}
.block--modifier {
    /* styles */
}

8.2. OOCSS（Object Oriented CSS）

.card {
   /* common styles */
}
.card--primary {
   /* variant styles */
}

9. CSS 预处理器

9.1. Sass/SCSS

$primary-color: #333;

body {
    color: $primary-color;

    .container {
        margin: 0 auto;
        padding: 20px;
    }
}

9.2. Less

@primary-color: #333;

body {
    color: @primary-color;

    .container {
        margin: 0 auto;
        padding: 20px;
    }
}

10. CSS 框架

10.1. Bootstrap

使用Bootstrap类来快速设计响应式页面。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="col-md-6">左侧列</div>
        <div class="col-md-6">右侧列</div>
    </div>
</div>

10.2. Tailwind CSS

使用Tailwind类来设计自定义样式。

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<div class="container mx-auto">
   <div class="grid grid-cols-2 gap-4">
       <div class="bg-blue-500 p-4">左侧列</div>
       <div class="bg-green-500 p-4">右侧列</div>
   </div>
</div>

通过掌握这些CSS知识点，您可以编写功能强大且美观的网页样式。希望这些信息对您有所帮助！