CSS 属性大全

1. CSS简介

CSS（层叠样式表）是一种用于描述文档如何在屏幕、纸张等媒体上进行展示的语言。它通过为 XHTML、HTML 或 XML（或其他基于 XML 的语言）文档添加样式信息，使其具有更好的可读性和视觉效果。

CSS基本语法规则：

属性和值之间用冒号（:）分隔；
每条属性和值对之间用分号（;）分隔；
在大括号（{}）中声明一组属性和值对。

2. CSS属性分类

CSS属性可以分为以下几类：

选择器相关属性

这些属性用于作为选择器来选择特定的元素。

class：给元素添加一个或多个类。
id：给元素添加一个唯一的标识符。
:hover：鼠标悬浮时的样式。
:active：点击时的样式。

示例代码：

<style>
    .highlight {
        color: red;
    }
    #title {
        font-size: 24px;
    }
    p:hover {
        background-color: yellow;
    }
    button:active {
        background-color: green;
    }
</style>
<div class="highlight">This is a highlighted text.</div>
<h1 id="title">This is a title.</h1>
<p>This is a paragraph.</p>
<button>Click me!</button>

盒模型相关属性

这些属性用于控制元素的盒模型（包括元素的尺寸、边距、边框和填充）。

width：元素的宽度。
height：元素的高度。
margin：元素的外边距。
padding：元素的内边距。
border：元素的边框。

示例代码：

<style>
    .box {
        width: 200px;
        height: 200px;
        margin: 10px;
        padding: 20px;
        border: 1px solid black;
    }
</style>
<div class="box">This is a box.</div>

文本处理相关属性

这些属性用于控制文本的样式和布局。

color：文本颜色。
font-size：字体大小。
font-weight：字体粗细。
text-align：文本对齐方式。
line-height：行高。

示例代码：

<style>
    .text {
        color: blue;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        line-height: 1.5;
    }
</style>
<div class="text">This is a text.</div>

背景和边框相关属性

这些属性用于设置元素的背景和边框样式。

background-color：背景颜色。
background-image：背景图片。
background-repeat：背景图片重复方式。
border-color：边框颜色。
border-width：边框宽度。

示例代码：

<style>
    .box {
        background-color: yellow;
        background-image: url("bg.png");
        background-repeat: no-repeat;
        border-color: red;
        border-width: 2px;
    }
</style>
<div class="box">This is a box.</div>

定位和布局相关属性

这些属性用于控制元素的位置和布局方式。

position：元素的定位方式。
top：元素的顶部边距。
left：元素的左边边距。
right：元素的右边边距。
bottom：元素的底部边距。
display：元素的显示方式。

示例代码：

<style>
    .box {
        position: absolute;
        top: 100px;
        left: 200px;
        display: block;
    }
</style>
<div class="box">This is a box.</div>

动画和过渡相关属性

这些属性用于实现元素的动画效果和过渡效果。

animation：元素动画效果的相关属性。
transition：元素过渡效果的相关属性。

示例代码：

<style>
    .box {
        animation: myanimation 3s infinite;
        transition: background-color 1s;
    }

    @keyframes myanimation {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(100px);
        }
    }

    .box:hover {
        background-color: red;
    }
</style>
<div class="box">This is a box.</div>