将样式定义放入外部CSS文件中，然后在HTML文件中使用标签引入。

<link rel="stylesheet" href="styles.css">

选择器用于选择要样式化的HTML元素。

• element: 选择指定元素。
• .class: 选择具有指定类的元素。
• id: 选择具有指定id的元素。
• element, element: 选择多个元素。
• element.class: 选择指定元素中具有指定类的元素。

h1 {
    color: blue;
}

每个HTML元素可以看作是一个盒子，包括内容、内边距、边框和外边距。

div {
    padding: 20px;
    border: 1px solid ccc;
    margin: 10px;
}

使用媒体查询来根据设备的不同特性应用不同的样式。

@media screen and (maxwidth: 600px) {
    body {
        fontsize: 14px;
    }
}

Flexbox是一种用于页面布局的模型，可以方便地对齐和分配空间。

.container {
    display: flex;
    justifycontent: center;
    alignitems: center;
}

Grid布局提供了一个二维网格，使得页面布局更加灵活。

.container {
    display: grid;
    gridtemplatecolumns: 1fr 1fr 1fr;
    gridgap: 10px;
}

通过过渡和动画为页面元素增加动态效果。

.box {
    transition: all 0.3s easeinout;
}
.box:hover {
    transform: scale(1.1);
}

使用maxwidth属性确保图片在小屏幕上不会溢出。

img {
    maxwidth: 100%;
    height: auto;
}

使用浏览器的开发者工具（如Chrome的开发者工具）来调试CSS。