常用css 笔记

**CSS 常用笔记**

CSS（层叠样式表）是网页设计中一个非常重要的方面。它允许我们控制网页元素的外观、布局和行为。以下是一些常用的 CSS 笔记，包括代码示例和注释。

###1.选择器选择器是CSS中用来选取HTML元素的关键字。常见的选择器有：

* **元素选择器**：使用HTML元素名称作为选择器，如`h1、p、div等`
* **类选择器**：使用点号(.)和类名作为选择器，如`.header、.footer等`
* **ID选择器**：使用井号(#)和ID名作为选择器，如`#header、#footer等`
* **通配符选择器**：使用星号(*)作为选择器，如`* { background-color: #f2f2f2; }`

示例代码：

css/* 元素选择器 */
h1 {
 color: #333;
}

/* 类选择器 */
.header {
 background-color: #f2f2f2;
}

/* ID选择器 */
#footer {
 position: fixed;
 bottom:0;
}

/* 通配符选择器 */
* {
 box-sizing: border-box;
}

###2.盒模型盒模型是CSS中一个非常重要的概念。它描述了HTML元素在页面中的布局结构。

* **内容区域**：元素的内容部分* **内边距区域**：元素与内容区域之间的空白部分* **边框区域**：元素的边框部分* **外边距区域**：元素与其他元素之间的空白部分示例代码：

css/* 内容区域 */
.content {
 width:100px;
 height:100px;
}

/* 内边距区域 */
.padding {
 padding:20px;
}

/* 边框区域 */
.border {
 border:1px solid #ccc;
}

/* 外边距区域 */
.margin {
 margin:10px;
}

###3.颜色和背景CSS中可以使用各种颜色和背景来美化网页。

* **颜色**：使用十六进制代码或RGB值表示颜色，如`#333、rgb(255,0,0)等`
* **背景颜色**：使用背景属性设置元素的背景颜色，如`background-color: #f2f2f2;`
* **背景图像**：使用背景图片属性设置元素的背景图像，如`background-image: url('image.jpg');`

示例代码：

css/* 颜色 */
.color {
 color: #333;
}

/* 背景颜色 */
.background-color {
 background-color: #f2f2f2;
}

/* 背景图像 */
.background-image {
 background-image: url('image.jpg');
}

###4.字体和文本CSS中可以使用各种字体和文本样式来美化网页。

* **字体**：使用font-family属性设置元素的字体，如`font-family: 'Arial', sans-serif;`
* **字号**：使用font-size属性设置元素的字号，如`font-size:16px;`
* **文本对齐方式**：使用text-align属性设置元素的文本对齐方式，如`text-align: center;`

示例代码：

css/* 字体 */
.font {
 font-family: 'Arial', sans-serif;
}

/* 字号 */
.size {
 font-size:16px;
}

/* 文本对齐方式 */
.align {
 text-align: center;
}

###5.布局和定位CSS中可以使用各种布局和定位方式来控制网页元素的位置。

* **块级元素**：使用display属性设置元素为块级元素，如`display: block;`
* **行内元素**：使用display属性设置元素为行内元素，如`display: inline;`
* **绝对定位**：使用position属性设置元素的绝对定位，如`position: absolute;`

示例代码：

css/* 块级元素 */
.block {
 display: block;
}

/* 行内元素 */
.inline {
 display: inline;
}

/* 绝对定位 */
.absolute {
 position: absolute;
}

###6.动画和过渡CSS中可以使用各种动画和过渡效果来美化网页。

* **关键帧**：使用@keyframes规则定义动画的关键帧，如`@keyframes animate { ... }`
* **动画**：使用animation属性设置元素的动画，如`animation: animate2s;`
* **过渡**：使用transition属性设置元素的过渡效果，如`transition: all1s ease-in-out;`

示例代码：

css/* 关键帧 */
@keyframes animate {
 from { transform: rotate(0deg); }
 to { transform: rotate(360deg); }
}

/* 动画 */
.animate {
 animation: animate2s;
}

/* 过渡 */
.transition {
 transition: all1s ease-in-out;
}

以上就是CSS常用笔记的内容。这些笔记涵盖了CSS中各种重要的方面，包括选择器、盒模型、颜色和背景、字体和文本、布局和定位、动画和过渡等。通过学习这些笔记，你可以更好地掌握CSS的使用和应用。