CSS常用样式总结

**CSS 常用样式总结**

CSS（Cascading Style Sheets）是网页设计中一个非常重要的方面。它可以帮助我们美化网页，提高用户体验。以下是一些常用的 CSS 样式总结。

###1. 基础样式####1.1 文字样式* **font-family**: 设置文本的字体。

css .text {
 font-family: Arial, sans-serif;
 }
 

* **font-size**: 设置文本的大小。

css .text {
 font-size:16px;
 }
 

* **color**: 设置文本的颜色。

css .text {
 color: #333;
 }
 

* **line-height**: 设置行高。

css .text {
 line-height:1.5;
 }
 

####1.2 背景样式* **background-color**: 设置背景颜色。

css .bg {
 background-color: #f7f7f7;
 }
 

* **background-image**: 设置背景图片。

css .bg {
 background-image: url(' /> }
 

* **background-repeat**: 设置背景重复方式。

css .bg {
 background-repeat: no-repeat;
 }
 

####1.3 布局样式* **display**: 设置元素的显示方式。

css .container {
 display: flex;
 }
 

* **flex-direction**: 设置flex容器的排列方向。

css .container {
 flex-direction: column;
 }
 

* **justify-content**: 设置flex容器的水平对齐方式。

css .container {
 justify-content: space-between;
 }
 

###2. 布局样式####2.1 Flex布局* **flex-wrap**: 设置flex容器是否换行。

css .container {
 flex-wrap: wrap;
 }
 

* **align-items**: 设置flex容器的垂直对齐方式。

css .container {
 align-items: center;
 }
 

####2.2 Grid布局* **display**: 设置元素的显示方式为grid。

css .container {
 display: grid;
 }
 

* **grid-template-columns**: 设置grid容器的列数和宽度。

css .container {
 grid-template-columns:1fr2fr;
 }
 

* **grid-gap**: 设置grid容器之间的间距。

css .container {
 grid-gap:10px;
 }
 

###3. 动画样式####3.1 CSS动画* **animation-name**: 设置动画名称。

css .animate {
 animation-name: animate;
 }
 

* **animation-duration**: 设置动画持续时间。

css @keyframes animate {
0% {
 transform: scale(1);
 }
100% {
 transform: scale(2);
 }
 }
 

####3.2 CSS转换* **transform**: 设置元素的位置和尺寸。

css .rotate {
 transform: rotate(45deg);
 }
 

* **transition**: 设置元素的过渡效果。

css .hover {
 transition: background-color0.5s;
 }
 

###4. 响应式样式####4.1 媒体查询* **@media**: 设置媒体类型和样式。

css @media (max-width:768px) {
 .responsive {
 display: none;
 }
 }
 

* **max-width**: 设置最大宽度。

css @media (max-width:768px) {
 .responsive {
 max-width:100%;
 }
 }
 

####4.2 flex布局* **flex-basis**: 设置flex项的初始大小。

css .flex-item {
 flex-basis:33.33%;
 }
 

* **order**: 设置flex项的顺序。

css .flex-item {
 order:2;
 }
 

###5. 其他样式####5.1 盒模型* **box-sizing**: 设置盒模型类型。

css .box {
 box-sizing: border-box;
 }
 

* **padding**: 设置内边距。

css .box {
 padding:10px;
 }
 

####5.2 背景* **background-clip**: 设置背景裁剪方式。

css .bg {
 background-clip: content-box;
 }
 

* **box-shadow**: 设置阴影效果。

css .shadow {
 box-shadow:0px0px10px rgba(0,0,0,0.5);
 }
 

以上就是CSS常用样式总结。这些样式可以帮助你美化网页，提高用户体验。