CSS 属性简介

CSS（层叠样式表）用于设置HTML元素的样式，包括布局、颜色、字体等。以下是一些常用的CSS属性及其用途的详细介绍。

布局属性

宽度和高度

  • width: 设置元素的宽度。
  • height: 设置元素的高度。
div {
    width: 50%;
    height: 100px;
}

边距

  • margin: 设置元素的外边距，可以同时设置四个方向的边距。
  • margin-top, margin-right, margin-bottom, margin-left: 分别设置上、右、下、左的外边距。
p {
    margin: 10px 20px 30px 40px;
}

内边距

  • padding: 设置元素的内边距，可以同时设置四个方向的内边距。
  • padding-top, padding-right, padding-bottom, padding-left: 分别设置上、右、下、左的内边距。
input {
    padding: 5px 10px;
}

颜色和背景

背景颜色

  • background-color: 设置元素的背景颜色。
body {
    background-color: #f0f0f0;
}

文本颜色

  • color: 设置文本的颜色。
h1 {
    color: navy;
}

字体和文本

字体族

  • font-family: 设置文本的字体族。
p {
    font-family: Arial, sans-serif;
}

字体大小

  • font-size: 设置文本的字体大小。
h2 {
    font-size: 24px;
}

字体样式

  • font-style: 设置文本的字体样式（正常、斜体、倾斜）。
em {
    font-style: italic;
}

文本对齐

  • text-align: 设置文本的水平对齐方式（左对齐、右对齐、居中对齐）。
p {
    text-align: center;
}

边框

边框样式

  • border: 简写属性，用于设置元素的边框样式、宽度和颜色。
  • border-top, border-right, border-bottom, border-left: 分别设置上、右、下、左边框的样式、宽度和颜色。
table {
    border: 1px solid black;
}

边框宽度

  • border-width: 设置边框的宽度。
img {
    border-width: 5px;
}

边框颜色

  • border-color: 设置边框的颜色。
button {
    border-color: red;
}

列表

列表样式类型

  • list-style-type: 设置列表项标记的类型（无、圆圈、方块等）。
ul {
    list-style-type: square;
}

列表样式图像

  • list-style-image: 设置列表项标记的图像。
li {
    list-style-image: url('marker.png');
}

表格

表格布局

  • border-collapse: 设置表格边框是否合并为一个单一边框。
table {
    border-collapse: collapse;
}

表格单元格间距

  • border-spacing: 设置表格单元格之间的距离。
table {
    border-spacing: 10px;
}

过渡和动画

过渡

  • transition: 简写属性，用于设置过渡效果的多个属性。
button {
    transition: background-color 0.3s ease;
}

动画

  • animation: 简写属性，用于设置动画效果的多个属性。
@keyframes slidein {
    from {
        margin-left: 100%;
        width: 300%;
    }

    to {
        margin-left: 0%;
        width: 100%;
    }
}

div {
    animation: slidein 5s;
}
Last Updated:
Contributors: Lee