本文共 2477 字，大约阅读时间需要 8 分钟。

CSS基础元素与属性总结

1. CSS的基本概念

CSS（Cascading Style Sheet，层叠样式表）是一种用于增强网页样式控制并将样式信息与网页内容分离的标记性语言。通过CSS，我们可以为HTML元素指定样式属性，从而实现网页的美观设计和结构优化。

2. CSS选择器

CSS选择器是用于在文档中定位目标元素的标记方法，常见的选择器类型包括：

属性选择器可以进一步指定属性值。例如：

`h3[id="h1"][class="6"] { background-color: green; }`

3. 常用的伪类

伪类用于在不实际存在于DOM中的元素上应用样式，常见的伪类包括：

示例：

`a:link { font-size: 30px; color: blue; }`

4. 常用属性设置

4.1 字体属性

字体属性包括字体颜色、字体名称、字体大小等：

• color: #000000 | black | white
• font-family: Arial, sans-serif
• font-size: 16px
• font-style: normal | italic
• font-weight: 400 | bold
• text-decoration: none | underline | overline | line-through
• text-shadow: 0 0 5px rgba(0,0,0,0.5)
• text-transform: uppercase | lowercase
• line-height: 1.6em
• letter-spacing: 0.5em

4.2 文本属性

文本属性包括对齐方式、缩进等：

• text-indent: 2em
• vertical-align: top | middle | bottom
• text-align: left | right | center

4.3 背景属性

背景属性包括背景颜色和背景图片：

• 背景颜色：background-color: #ffffff
• 背景图片：background-image: url("imgs/banner1.png");

4.4 元素尺寸

设置元素的宽度和高度：

• width: 100px
• height: 200px

4.5 边框属性

边框属性包括边框颜色、样式和粗细：

• border-color: #000000
• border-style: solid | dashed
• border-width: 1px

可以使用border属性同时设置四个边的边框。例如：

border: 2px solid #000000;

4.6 列表设置

列表的样式设置：

• 有序列表：<ol><li></li></ol>
• 无序列表：<ul><li></li></ul>
• 自定义列表：<dl><dt><dd></dd></dt></dl>

可以通过list-style-image设置列表图标。例如：

ul { list-style-image: url("imgs/home.PNG"); }

4.7 表格设置

表格的样式设置：

• border-collapse：合并单元格边框。例如：border-collapse: collapse;
• border-spacing：设置单元格间距。例如：border-spacing: 5px;
• empty-cells：设置单元格空白显示状态。例如：empty-cells: show;

4.8 补丁设置

补丁用于子元素与父元素之间的间距：

• 内补丁（父元素）：padding: 12px 15px 28px 35px;
• 外补丁（子元素）：margin: 12px 15px 28px 35px;

4.9 布局属性

布局属性包括浮动和定位：

• float：设置元素的浮动方式。例如：float: left | right;
• position：设置元素的定位方式。例如：position: absolute | relative;
• z-index：设置元素的层叠顺序。例如：z-index: 2;

4.10 显示与隐藏

元素的显示与隐藏：

• display：设置元素的显示状态。例如：display: none;
• visibility：设置元素的可见性状态。例如：visibility: hidden;

display和visibility的区别：

总结