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; /* 设置文本字体，可以指定多个字体作为回退选项 */
font-weight: 400; /* 设置字体粗细，选项100到900的数字值 */
color: #333333; /* 设置文本颜色，支持hex、rgb、rgba、hsl、hsla、关键词等值 */
font-size: 20px; /* 设置文本字体大小，可以是px、em、rem、%、pt等 *
line-height: 1.8em; /* 设置文本行高，可以是数字、px、em、%等 */
text-align: left; /* 设置文本对齐方式，选项包括left、right、center、justify等 */
text-decoration: solid underline #ff0000 1px; /* 设置下划线等，选项包括none、underline等 */

模块的样式

background-color: #ffffff; /* 设置元素的背景颜色，ffffff00八位的值最后2位是透明度 */
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3) ; /* 设置元素的阴影效果 */
border-radius: 10px 20px 30px 20px; /* 设置元素的边框圆角, 分别是左上 右上 右下 左下 */

margin: 10px 10px 20px 30px; /* 设置元素外边距 按照顺时针方向 上 右 下 左 */
padding: 10px 5px 30px 10px; /* 设置元素内边距，按照顺时针方向 上 右 下 左*/
border: 1px solid #000000; /* 设置元素边框， */
width: 100px; /* 设置元素宽度，可以是px、em、rem、%、vw、vh等 */
height: 100px; /* 设置元素高度，可以是px、em、rem、%、vw、vh等 */

当我们需要单独设置某个属性的“上下左右”时，就可以按如下单独设置。设置样式，“属性-top/bottom/right/left”。

边框
border-top: 2px solid #002fa7;
border-bottom: 1px solid #002fa7;
border-right: 1px solid #002fa7;
border-left: 1px solid #002fa7;
内边距
padding-right: 2px;
padding-left: -10px;
padding-top: 2px;
padding-bottom: -10px;
外边距
margin-right: 2px;
margin-left: -10px;
margin-top: 2px;
margin-bottom: -10px;

控制显示的

display: none; /设置元素显示类型，选项包括block、inline、inline-block、flex、grid等 */
position: relative; /* 设置定位方式，选项包括static、relative、absolute、fixed、sticky等 */
overflow: hidden; /* 设置溢出内容的处理方式，选项包括visible、hidden、auto等 */

一些使用频率不高的样式

opacity: 0.9; /* 设置元素透明度，可以是0到1之间的任意值 */
cursor: pointer; /* 设置鼠标悬停时的光标样式，选项包括default、pointer、crosshair、text等 */
transition: all .6s ease; /* 设置过渡效果，可以设置多个属性，duration（如0.3s）、timing-function（如linear、ease、ease-in、ease-out、ease-in-out等）、delay */
z-index: 10; /* 设置元素的堆叠顺序，可以是任意整数，值越大元素层级越高 */
flex-direction: row; /* 在Flex容器中设置主轴方向，这里是水平方向 */
justify-content: center; /* 在Flex容器中水平居中子元素 */
align-items: center; /* 在Flex容器中垂直居中子元素 */
flex-wrap: wrap; /* 在Flex容器中设置子元素超出时是否换行 */
flex-grow: 1; /* 在Flex项目中设置放大比例，允许项目占据可用空间 */
flex-shrink: 1; /* 在Flex项目中设置缩小比例，定义项目缩减的量 */
flex-basis: auto; /* 在Flex项目中设置默认大小 */
align-self: stretch; /* 在Flex项目中允许单个项目有不同的对齐方式 */
order: 1; /* 在Flex容器中设置项目的排列顺序 */
grid-template-columns: repeat(3, 1fr); /* 在Grid容器中定义列的大小 */
grid-template-rows: repeat(2, 50px); /* 在Grid容器中定义行的大小 */
grid-column-gap: 10px; /* 在Grid容器中设置列间距 */
grid-row-gap: 10px; /* 在Grid容器中设置行间距 */
grid-area: header; /* 在Grid项中定义位置和大小 */
column-count: 3; /* 定义多列布局中的列数 */
column-gap: 20px; /* 定义多列布局中的列间距 */
column-rule: 1px solid #000; /* 在多列布局中设置列之间的分隔线样式 */
background-image: url(‘image.jpg’); /* 设置元素的背景图片 */
background-repeat: no-repeat; /* 设置背景图片是否重复 */
background-position: center; /* 设置背景图片的位置 */
background-size: cover; /* 设置背景图片的大小 */
background-attachment: fixed; /* 设置背景图片是否固定或滚动 */
animation-name: fadeIn; /* 设置动画名称 */
animation-duration: 2s; /* 设置动画持续时间 */
animation-timing-function: ease-in-out; /* 设置动画速度曲线 */
animation-delay: 0.5s; /* 设置动画开始之前的延迟 */
animation-iteration-count: infinite; /* 设置动画的播放次数 */
animation-direction: alternate; /* 设置动画是否轮流反向播放 */
visibility: hidden; /* 设置元素是否可见 */
content: ‘→’; /* 伪元素中生成的内容，如:before或:after中 */
clip-path: circle(50%); /* 设置元素的剪裁路径 */
filter: blur(5px); /* 设置元素的视觉效果，如模糊或颜色偏移 */
object-fit: cover; /* 设置替换元素的内容应如何适应其容器 */
pointer-events: none; /* 设置元素是否为指针事件的目标 */
resize: both; /* 设置元素是否可以由用户调整大小 */
user-select: none; /* 设置用户是否可以选择文本 */
white-space: nowrap; /* 设置元素中的空白如何处理 */
word-break: break-all; /* 设置非中文文本的换行规则 */

hover停留常用

我们经常在外贸独立站会看到，当鼠标经过某些图标图片或模块的时候，有一些特殊效果产生，本质上就是设置了css的hover功能，从而实现醒目转化作用。常用方法就是”:hover”

.menu-item:hover {
background-color: #ff0000; /* 鼠标经过的时候改变颜色 */
transform: scale(1.10,1.10); /*放大或者缩放倍数 */
}

电脑平板手机的不同设定

当我们想在不同设备上使用不同效果的时候，可以通过限定条件实现

电脑专用

@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{
.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {
background-color: #cb2c2c !important;
width: 100% !important;
-moz-border-radius: 0px !important;
-webkit-border-radius: 0 !important;
border-radius: 2px !important;
font-size: 14px;
color: #000000;
padding: 8px !important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}

上面这个案例就是，实现了bbbb下的单独样式显示

总结

在做wordpress独立站的过程中，大部分的插件和编辑器只能满足基本你的一般需求。当涉及到非常特殊的细节时，css就能帮我们实现很多个人的细节想法。

另外就是大家不需要单独去学习css基础知识，我们外贸人只要能看懂，能修改参数为我所用即可，不要陷入技术的困境中。