CSS样式大全
=========
CSS（层叠样式表）是用于描述HTML或XML（包括如SVG、MathML等派生语言）文档样式的样式表语言，CSS描述了如何在屏幕、纸质、音频等媒体上呈现元素，CSS旨在分离文档的内容（written in HTML or a similar markup language）与文档的呈现样式（written in CSS），CSS使样式和内容分离，所以HTML和CSS文件可以由不同的人在不同的地方进行编写，只要他们之间有良好的沟通。
以下是一些常见的CSS样式及其用法：
1. 字体样式
--------
CSS `font-family` 属性用于设置字体类型，`font-size` 属性用于设置字体大小，`font-weight` 属性用于设置字体粗细，`font-style` 属性用于设置字体风格。
p {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: bold;
font-style: italic;
}
2. 文本样式
CSS `color` 属性用于设置文本颜色，`text-align` 属性用于设置文本对齐方式，`text-decoration` 属性用于设置文本装饰效果。
p {
color: red;
text-align: center;
text-decoration: underline;
}
3. 背景样式
CSS `background-color` 属性用于设置背景颜色，`background-image` 属性用于设置背景图片，`background-repeat` 属性用于设置背景图片是否重复。
body {
background-color: #f0f0f0;
background-image: url('background.jpg');
background-repeat: no-repeat;
}
4. 边框样式
CSS `border-style` 属性用于设置边框样式，`border-width` 属性用于设置边框宽度，`border-color` 属性用于设置边框颜色。
div {
border-style: solid;
border-width: 2px;
border-color: #000000;
}
5. 定位样式
CSS `position` 属性用于设置元素的定位方式，`top`、`right`、`bottom` 和 `left` 属性用于设置元素的定位偏移量，`static` 是默认的定位方式，元素按照正常的文档流进行定位；`relative` 是相对定位，元素按照正常的文档流进行定位，然后根据 top、right、bottom 和 left 属性的值进行偏移；`absolute` 是绝对定位，元素从文档流中移除并放置在相对于最近的非 static 定位的父级元素的位置；`fixed` 是固定定位，元素从文档流中移除并放置在相对于浏览器窗口的位置；`sticky` 是粘性定位，元素在滚动超过特定位置之前为相对定位，然后为固定定位。
6. 动画和过渡样式
-------------
CSS `animation` 属性用于设置动画效果，包括动画名称、动画时长、动画次数等；`transition` 属性用于设置过渡效果，包括过渡名称、过渡时长、过渡函数等。
