CSS 属性

2024 年 08 月 29 日 | 阅读 9 分钟

CSS（层叠样式表）是一种用于描述 HTML 或 XML 文档表示和格式的语言。它允许 Web 开发人员控制网页上元素的显示效果。以下是一些常用的 CSS 属性。CSS 属性用于设置 HTML 元素的某个方面。以下是一些示例。

<div style="border: 1px solid black;
            font-size: 18px; "> Style This </div>

在此示例中，两个 CSS 属性应用于 div 元素：border 和 font-size 属性。

CSS 属性声明由属性名和属性值组成。属性名在前，后面是冒号，然后是值。CSS 属性声明遵循通用模式如下：

如果您指定了多个 CSS 属性，则每个名称-值对都用分号分隔，如下所示：

property1 : property-value1;
property2 : property-value2;

最后一个属性声明不必以分号结尾，但这使得添加更多 CSS 属性而不会忘记添加额外分号变得更容易。

CSS 属性

您可以为不同的 HTML 元素指定许多 CSS 属性。这些 CSS 属性在其自己的文本中进行了介绍。

1. 背景 (Background): 指定元素的背景颜色或背景图像。

颜色填充了未被图像覆盖的空间。
url("/img/css/sunflowers.jpg") 指向背景图像。
no-repeat 指定背景图像不重复。
right 将背景图像放置在元素的右侧。

背景颜色 (Background color): 设置背景颜色。

.my-element {
        background-color: #f1f1f1;
        }

背景图像 (Background-image): 设置背景图像。

.my-element {
        background-image: url('image.jpg');
        }

背景重复 (Background-repeat): 确定背景图像是否/如何重复。

.my-element {
        background-repeat: no-repeat;
        }

背景位置 (Background-position): 设置背景图像的起始位置。

.my-element {
        background-position: center;
        }

2. 颜色 (Color): 设置文本颜色。

颜色 (Color): 设置文本的颜色。

.my-element {
        color: #333333;
        }

3. 排版 (Typography): 控制字体属性。

字体系列 (Font-family): 指定字体系列。

.my-element {
                     font-family: Arial, sans-serif;
                     }

字号 (Font size): 设置字体的大小。

.my-element {
                  font-size: 16px;
                  }

字重 (Font-weight): 设置字体的粗细。

.my-element {
                       font-weight: bold;
                        }

字体样式 (Font-style): 应用斜体或倾斜样式到字体。

.my-element {
                    font-style: italic;
                     }

4. 外边距 (Margin): 定义元素周围的空间。

margin-top, margin-right, margin-bottom, margin-left: 设置元素的每个边的外边距。

.my-element {
                    margin: 10px 20px 15px 5px;
                     }

5. 内边距 (Padding): 指定元素内容和边框之间的空间。

padding-top, padding-right, padding-bottom, padding-left: 设置元素的每个边的内边距。

.my-element {
                    padding: 10px 20px 15px 5px;
                     }

6. 边框 (Border): 设置元素的边框属性。

边框宽度 (Border-width): 指定边框的宽度。

.my-element {
                         border-width: 2px;
                         }

边框颜色 (Border-color): 设置边框的颜色。

 .my-element {
                        border-color: #cccccc;
                        }

边框样式 (Border-style): 确定边框的样式（例如，实线、虚线、点线）。

.my-element {
                         border-style: dashed;
                          }

7. 宽度和高度 (Width and Height): 设置元素的尺寸。

宽度 (Width): 设置元素的宽度。

.my-element {
        width: 200px;
           }

高度 (Height): 设置元素的高度。

.my-element {
              height: 100px;
                }

8. 显示 (Display): 控制元素的显示方式。

显示 (Display): 指定显示行为（例如，block、inline、flex）。

.my-element {
               display: block;
               }

9. 定位 (Positioning): 相对于其容器元素或浏览器窗口定位元素。

定位 (Position): 设置定位方法（例如，static、relative、absolute、fixed）。

.my-element {
                position: relative;
                 }

Top, right, bottom, left: 设置元素的位置。

.my-element {
                 top: 10px;
                 left: 20px;
                 }

10. Flexbox (弹性盒子): 为布局目的定义弹性盒子。

Display: flex: 启用弹性容器。

.flex-container {
                      display: flex;
                      }

Flex-direction (弹性方向): 指定弹性项目的方向（例如，row、column）。

.flex-container {
                         flex-direction: row;
                          }   

Justify-content (内容对齐): 水平对齐弹性项目。

.flex-container {
                           justify-content: center;
                           }

Align-items (项对齐): 垂直对齐弹性项目。

.flex-container {
                       align-items: center;
                         }

Flex (弹性): 指定弹性项目的 flex-grow、flex-shrink 和 flex-basis。

 .flex-item {
                        flex: 1 0 auto;
                         }

11. 浮动 (Float): 指定元素是否应向左、向右浮动或不浮动。

浮动 (Float): 设置元素的浮动行为（例如，left、right、none）。

.my-element {
                  float: left;
                    }

12. 清除 (Clear): 指定元素是否应定位在浮动元素旁边或清除浮动元素。

清除 (Clear): 设置元素的清除行为（例如，left、right、both、none）。

.my-element {
                              clear: both;
           }

13. 不透明度 (Opacity): 指定元素的透明度级别。

不透明度 (Opacity): 设置元素的透明度（0.0 到 1.0）。

 .my-element {
                               opacity: 0.5;
                               }

14. 可见性 (Visibility): 控制元素的可见性。

可见性 (Visibility): 设置元素的可见性（visible、hidden、collapse）。

.my-element {
                            visibility: hidden;
                             }

15. 文本对齐 (Text Alignment): 设置元素内文本的对齐方式。

文本对齐 (Text-align): 指定文本的水平对齐方式（left、right、center、justify）。

.my-element {
           text-align: center;
           }

16. 文本装饰 (Text Decoration): 为文本添加装饰效果。

文本装饰 (Text-decoration): 设置文本的装饰（underline、overline、line-through、none）。

.my-element {
               text-decoration: underline;
                }

17. 文本转换 (Text Transformation): 控制文本的字母大小写。

文本转换 (Text-transform): 设置文本的字母大小写（none、uppercase、lowercase、capitalize）。

.my-element {
                text-transform: uppercase;
                  }

18. 文本溢出 (Text Overflow): 确定当文本溢出其容器时如何处理。

文本溢出 (Text-overflow): 设置文本超出容器宽度时的行为（ellipsis、clip）。

 .my-element {
                 text-overflow: ellipsis;
                 }

19. 盒子阴影 (Box Shadow): 为元素的盒子添加阴影效果。

盒子阴影 (Box-shadow): 设置阴影属性（颜色、水平偏移、垂直偏移、模糊半径、扩展半径）。

.my-element {
                  box-shadow: 2px 2px 4px rgba (0, 0, 0, 0.5);
                  }

20. 过渡 (Transition): 为属性指定过渡效果。

过渡 (Transition): 设置过渡属性（property、duration、timing-function、delay）。

.my-element {
           transition: background-color 0.3s ease-in-out;
               }

21. 溢出 (Overflow): 指定如何处理超出容器的内容。

溢出 (Overflow): 设置溢出行为（visible、hidden、scroll、auto）。

.my-element {
  overflow: hidden;
}

22. 盒子模型 (Box Sizing): 确定元素的总宽度和高度的计算方式。

盒子模型 (Box-sizing): 设置尺寸行为（content-box、border-box）。

.my-element {
                box-sizing: border-box;
                 }

23. 定位 (Position): 指定元素的定位。

定位 (Position): 设置定位方法（static、relative、absolute、fixed）。

.my-element {
                    position: absolute;
                      }

24. Z 轴索引 (Z-index): 指定已定位元素的堆叠顺序。

Z 轴索引 (Z-index): 设置堆叠顺序（整数值）。

.my-element {
            z-index: 2;
             }

25. 光标 (Cursor): 指定鼠标悬停在元素上时显示的鼠标光标类型。

光标 (Cursor): 设置光标类型（pointer、default、help 等）。

.my-element {
  cursor: pointer;
}

26. 文本阴影 (Text Shadow): 为元素的文本添加阴影效果。

文本阴影 (Text-shadow): 设置文本的阴影属性（颜色、水平偏移、垂直偏移、模糊半径）。

.my-element {
                    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
                   }

27. 列表样式 (List Style): 设置有序列表和无序列表上的列表标记样式。

列表样式类型 (List-style-type): 设置列表标记的类型（disc、circle、square、decimal 等）。

ul {
                 list-style-type: disc;
                  }

28. 动画 (Animation): 将动画效果应用于元素。

动画名称 (Animation-name): 指定动画的名称。
动画时长 (Animation-duration): 设置动画的时长。
动画时间函数 (Animation-timing-function): 设置动画的时间函数（linear、ease、ease-in、ease-out 等）。
动画延迟 (Animation-delay): 指定动画开始前的延迟。
动画迭代次数 (Animation-iteration-count): 设置动画应重复的次数。
动画方向 (Animation-direction): 指定动画是应反向播放还是交替播放。

.my-element {
  animation-name: slide-in;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

29. 变换 (Transform): 将各种变换应用于元素，例如旋转、缩放或倾斜。

transform (变换): 将 2D 或 3D 变换应用于元素。

.my-element {
           transform: rotate(45deg);
                }

30. Flexbox (弹性盒子): 控制弹性容器内元素的弹性布局。

Display: flex: 启用弹性容器。
Flex-direction (弹性方向): 指定容器内弹性项目的方向（row、column、row-reverse、column-reverse）。
Justify-content (内容对齐): 沿主轴对齐弹性项目（flex-start、flex-end、center、space-between、space-around）。
Align-items (项对齐): 沿交叉轴对齐弹性项目（flex-start、flex-end、center、baseline、stretch）。
Flex-grow (弹性增长): 指定弹性项目的增长能力。
Flex-shrink (弹性收缩): 指定弹性项目的收缩能力。
Flex-basis (弹性基础): 指定弹性项目的初始大小。

.flex-container {
           display: flex;
           flex-direction: row;
           justify-content: space-between;
           align-items: center;
              }

这些附加的 CSS 属性提供了更多用于控制 Web 元素布局、交互性、效果和变换的选项。

您通过 CSS 属性设置 HTML 元素的样式。不同的 HTML 元素可能有不同的 CSS 属性可以设置。CSS 属性可以组织成 CSS 规则。CSS 规则将一组 CSS 属性分组，并将所有属性应用于 CSS 规则匹配的 HTML 元素。

CSS 属性的优势

CSS 属性为 Web 开发带来诸多优势，例如：

控制表现形式 (Control over presentation): CSS 属性允许开发人员控制网页上元素的视觉外观。开发人员可以通过定义诸如背景颜色、字体样式、边框和间距等属性来创建具有视觉吸引力的设计并确保一致的网站样式。
关注点分离 (Separation of concerns): CSS 属性实现了表示与内容和行为的分离。这种分离使开发人员能够维护清晰有条理的代码，从而可以更轻松地更新和修改样式，而不会影响底层 HTML 结构或 JavaScript 功能。
响应式设计 (Responsive design): CSS 属性在实现响应式 Web 设计方面至关重要。诸如媒体查询、flexbox 和网格布局之类的属性使开发人员能够创建灵活且自适应的布局，这些布局可以无缝地适应不同的屏幕尺寸和设备，从而提供更好的用户体验。
效率和一致性 (Efficiency and consistency): 使用 CSS 属性，开发人员可以同时将样式应用于多个元素，从而减少代码重复并提高效率。CSS 还提供继承和层叠规则，从而可以在整个网站或特定元素中实现一致的样式。
易于维护 (Ease of maintenance): 使用 CSS 属性，可以更轻松地更改网站的样式。开发人员可以轻松地在单个 CSS 文件中更新属性，并且更改将自动反映在引用该样式表的所有页面上，从而确保一致性并减少维护工作。
可访问性 (Accessibility): CSS 属性通过允许开发人员控制文本对比度、字体大小和元素可见性来提供可访问性优势。这使得可以创建对视力障碍或其他可访问性需求的用户而言更具可读性和可用性的网页。
动画和交互性 (Animation and interactivity): CSS 属性可以为 Web 元素添加动画和交互性。通过诸如 transitions、transforms 和 animations 等属性，开发人员可以通过添加运动、悬停效果以及元素不同状态之间的过渡来创建引人入胜的用户体验。
性能优化 (Performance optimization): 正确使用 CSS 属性可以提高网站性能。通过优化诸如图像大小、减少不必要的样式以及利用 CSS 预处理器或压缩技术等属性，开发人员可以减小文件大小，缩短页面加载时间，并提高整体性能。
模块化和可重用性 (Modularity and reusability): CSS 属性允许开发人员定义可重用的样式并将其应用于网站中的多个元素，从而促进了模块化。这促进了代码的可重用性，减少了冗余，并使得跨不同页面和部分维护一致的设计更加容易。
浏览器兼容性 (Browser compatibility): CSS 属性旨在跨不同的 Web 浏览器一致地工作。它们提供了一种标准化的样式指定方式，可确保网站的视觉呈现效果在各种浏览器和平台上保持一致。
打印友好样式 (Print-friendly styling): CSS 属性提供了优化 Web 页面以供打印的特定功能。使用诸如 @media print 之类的属性，开发人员可以创建适合打印的样式表，这些样式表可以调整布局、字体大小和颜色，以确保更具可读性和视觉吸引力的打印输出。
易于更新和可伸缩性 (Ease of updating and scalability): 使用 CSS 属性，更新网站样式变得更加容易和高效。通过修改 CSS 文件中的属性值，开发人员无需编辑每个单独的 HTML 文件即可进行全站更改。这种可伸缩性允许进行更快的迭代、重新设计和适应不断变化的设计要求。
可访问性增强 (Accessibility enhancements): CSS 属性提供了各种功能来提高 Web 可访问性。通过使用诸如 focus、hover 和 :active 等属性，开发人员可以提供视觉反馈并增强使用辅助技术导航网站的用户的可用性。此外，outline 和 text-indent 可以提高可访问性受损用户的键盘导航和可读性。
与 JavaScript 集成 (Integration with JavaScript): CSS 属性可以通过 JavaScript 进行操作和动画，允许开发人员创建动态和交互式 Web 体验。开发人员可以通过利用与 CSS 属性配合使用的 JavaScript 库和框架来创建高级动画、过渡和效果。
简化多设备开发 (Simplifies multi-device development): CSS 属性使得为各种设备开发响应式和优化的网站变得更加容易。通过使用媒体查询，开发人员可以根据屏幕尺寸调整布局和样式，从而在台式机、平板电脑和移动设备上实现一致且用户友好的体验。
更快的页面渲染 (Faster page rendering): CSS 属性被设计为轻量级且高效，从而缩短了 Web 页面的加载时间。通过将样式与 HTML 结构分开，浏览器可以更快地处理和应用样式，从而提高性能并加快页面加载速度。
保持语义结构 (Maintains semantic structure): CSS 属性允许开发人员专注于表示层，而不会损害 HTML 的语义结构。CSS 使 HTML 标记保持清晰和有条理，从而使搜索引擎、屏幕阅读器和开发人员更容易理解和导航内容。

下一主题CSS Transform

CSS 属性

CSS 属性

CSS 属性的优势

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS 属性

CSS 属性

CSS 属性的优势

相关帖子

CSS Color Picker

CSS 中如何添加背景图片

CSS Corp Chennai

什么是 CSS 网格

CSS Portal Login

White Space

CSS Transform

CSS 中如何对齐文本

使用 CSS 隐藏滚动条

CSS Bounce Effect

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器