常用css 笔记
发布人:shili8
发布时间:2025-03-06 19:55
阅读次数:0
**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的使用和应用。

