CSS，全称是“层叠样式表”（Cascading Style Sheets），是一种用来控制网页外观的技术。想象一下，HTML是网页的骨架，定义了结构和内容，而CSS则是网页的“时尚顾问”，负责美化这个骨架。它可以让你指定网页的字体、颜色、间距、布局和许多其他视觉效果，让网页从简单文本变成吸引人的界面。
下面我将通过案例，帮助大家理解css原理和列举常用的css样式列表，建议大家收藏此文章，以便于随时查阅复制css样式。
通过案例对比自定义css的好处 这个文字案例是展示自定义css的用法。根据图片的对比，我们发现使用css可以完全根据自己的想法来设置文字的大小、间距、背景、圆角、阴影、行高等等所有的细节。
css before css after 这个CSS代码片段为具有.dddd-text类的元素定义了一系列的样式规则。让我们一步步拆解这个例子，以便更好地理解选择器和属性数值之间的关系，以及它们是如何影响元素外观的。
解读选择器 .dddd-text：这是一个类选择器，用于选择所有具有dddd-text类属性的HTML元素。类选择器由点（.）字符开头，后面紧跟类名。在HTML中，任何元素都可以通过class=”dddd-text”被指定为这个选择器的目标。
解读属性和数值 每个CSS规则包含一个或多个属性声明，每个声明都试图设置一个特定的样式属性及其值。在这个例子中，我们有以下属性和它们的数值：
margin-bottom: 0px;：设置元素底部的外边距为0像素。外边距是元素外部的空间，这里将其设为0意味着元素底部不会有额外的空间。 margin-top: 100px;：设置元素顶部的外边距为100像素。这会在元素顶部创建100像素的空间，相当于将元素向下推。 background-color: #002fa7;：设置元素的背景颜色为深蓝色（由十六进制颜色代码#002fa7指定）。 color: #f3f5f7;：设置元素内文本的颜色为浅灰色（由十六进制颜色代码#f3f5f7指定）。 font-size: 20px;：设置文本的字体大小为20像素。 line-height: 1.1em;：设置行高为1.1倍的当前字体大小（em单位是相对单位，这里基于元素的font-size）。 padding-top: 10px;和padding-bottom: 10px;：分别设置元素顶部和底部的内边距为10像素。内边距是元素边框内侧与内容之间的空间。 border-radius: 8px 8px 0px 0px;：设置元素边框的圆角。这里指定的值意味着顶部左右两个角各为8像素的圆角，而底部两个角不设圆角。 box-shadow: 0px 0px 0px 0px #f40707;：设置元素的盒子阴影。这里的值意味着阴影的水平偏移、垂直偏移、模糊半径和扩展半径都是0，阴影颜色为红色（#f40707）。由于偏移和模糊度都是0，这个阴影实际上不会显示。 通过上述属性和数值的组合，.dddd-text类的元素会有一个深蓝色背景、浅灰色文字、20像素的文字大小，以及特定的外边距、内边距和圆角设置，可见的阴影效果。这些样式共同作用于目标元素，使其在页面上以预期的视觉效果展现出来。
contact form 7 表单的案例 再举一个案例，帮助大家理解css, Contact Form 7 是一个非常流行的 WordPress 插件，用于创建表单。尽管它功能强大、灵活，但它的默认样式比较简单，可能不会完全符合你的网站设计。幸运的是，你可以通过添加自定义CSS来改善表单的外观，使其更加吸引人并与你的网站保持风格一致。
大家通过上面的图片可以看出来，在使用css之后，这个表单的样式外观会差别超级大。css代码定制了表单输入框和发送按钮，以及发送按钮停留hover。所以，我们一旦掌握了css的使用方法，就可以把表单调制成适合自己独立站的外观。
理论部分 在CSS中，选择器、属性和数值之间的关系构成了整个样式表的基础。理解这三者之间的关系对于编写有效的CSS代码至关重要。下面是它们之间关系的简单解释：
选择器 选择器用于指定CSS样式应用于HTML文档中的哪些元素。它是CSS规则的起点，决定了哪些元素会被选中以应用以下定义的样式。选择器有多种类型，包括：
类选择器（如.classname）：选中所有具有特定类的元素。 ID选择器（如#idname）：选中具有特定ID的单个元素。 元素选择器（如p）：选中所有特定类型的元素。 复合选择器：通过组合以上选择器，可以更精确地定位元素。 属性 属性是您想要设置或修改的样式的具体方面。CSS定义了大量的属性，每个属性控制着元素的一个特定方面，如颜色、布局、大小、字体等。例如：
color：控制元素的文本颜色。 margin：控制元素的外边距。 padding：控制元素的内边距。 font-size：控制文本的大小。 数值 数值是与属性配对使用的，指定该属性应该采用的值。数值可以是绝对的（如像素或点），相对的（如百分比或相对于其他元素的大小），或者是预定义的关键字（如auto或inherit）。数值定义了属性应该如何被应用或改变：
对于color属性，数值可以是颜色名称（如red）、十六进制颜色代码（如#ff0000）、RGB值（如rgb(255, 0, 0)）等。 对于margin和padding属性，数值通常是长度值，如10px或2em。 对于font-size属性，数值指定了字体的大小，如14px或1.5em。 选择器、属性和数值的关系 这三者共同工作，定义了一个CSS规则，这个规则告诉浏览器如何渲染选定的HTML元素。一个完整的CSS声明包括选择器（决定哪些元素应该被样式化）、属性（指定要改变的样式方面）和数值（确定属性的新值）。
常见的css列表 以下是我整理的一些使用频率较高的样式
基本文字样式 font-family: Arial, sans-serif; /* 设置文本字体，可以指定多个字体作为回退选项 */
模块的样式 background-color: #ffffff; /* 设置元素的背景颜色，ffffff00八位的值最后2位是透明度 */
当我们需要单独设置某个属性的“上下左右”时，就可以按如下单独设置。设置样式，“属性-top/bottom/right/left” 。
边框 内边距 外边距
控制显示的 display: none; /设置元素显示类型，选项包括block、inline、inline-block、flex、grid等 */
一些使用频率不高的样式 opacity: 0.9; /* 设置元素透明度，可以是0到1之间的任意值 */
hover停留常用 我们经常在外贸独立站会看到，当鼠标经过某些图标图片或模块的时候，有一些特殊效果产生，本质上就是设置了css的hover功能，从而实现醒目转化作用。常用方法就是”:hover “
.menu-item:hover {
电脑平板手机的不同设定 当我们想在不同设备上使用不同效果的时候，可以通过限定条件实现
电脑专用
@media (min-width: 981px) {
平板电脑专用
@media (min-width: 600px) and (max-width: 980px) {
手机专用
@media (max-width: 599px) {
!important 优先生效 在CSS中，!important 是一个声明，用来给一个属性值加上最高优先级。当多个CSS规则应用到同一个元素上，且有冲突时，加上 !important 的规则会覆盖其他规则。
color: #ff0000 !important;
限定类中生效 在实践中，我们有一些特殊需求：同一类css在不同的区域内不同的数值生效，这么这个时候就要用到嵌套，举个例子，例如aaaa区域内和bbbb区域内的表单样式不一样，可以用如下css实现
.bbbb{
上面这个案例就是，实现了bbbb下的单独样式显示
总结 在做wordpress独立站的过程中，大部分的插件和编辑器只能满足基本你的一般需求。当涉及到非常特殊的细节时，css就能帮我们实现很多个人的细节想法。
另外就是大家不需要单独去学习css基础知识，我们外贸人只要能看懂，能修改参数为我所用即可，不要陷入技术的困境中。
一个回复
you are in reality a good webmaster. The website loading velocity is amazing. It sort of feels that you’re doing any distinctive trick. Also, The contents are masterwork. you have done a fantastic job in this topic!