【位置】css常用代码大全.pdf

在CSS（层叠样式表）中，样式定义了网页元素的外观、布局和结构。这份文档整理了关于CSS中的一些常见属性，主要包括位置、字体、背景、区块、方框和列表属性，这些是构建网页样式的基本元素。 1. **位置属性**： - `position`属性用于设置元素的定位方式，如`static`（默认值，不进行特殊定位），`relative`（相对定位，基于元素原本的位置），`absolute`（绝对定位，相对于最近的非`static`定位的祖先元素），以及`fixed`（固定定位，相对于浏览器窗口）。 2. **字体属性**： - `font-size`用于设置字体大小，常用的单位有像素（px）、百分比（%）和em单位。 - `font-style`用于设定字体风格，包括`normal`（正常），`italic`（斜体）和`oblique`（偏斜体）。 - `font-weight`控制字体的粗细，如`bold`（粗体），`lighter`（较细体）和`normal`（正常）。 - `font-variant`可以设置小型大写字母，`small-caps`表示所有小写字母显示为小型大写。 - `text-transform`用于改变文本的大小写，如`capitalize`（首字母大写），`uppercase`（全大写）和`lowercase`（全小写）。 - `text-decoration`添加文本装饰，如`underline`（下划线），`overline`（上划线），`line-through`（删除线）和`blink`（闪烁）。 3. **背景属性**： - `background-color`设置元素的背景颜色。 - `background-image`允许设置背景图像，通常使用URL指定图像路径。 - `background-repeat`控制图像是否平铺，如`no-repeat`（不平铺），`repeat-x`（仅水平平铺）和`repeat-y`（仅垂直平铺）。 - `background-attachment`决定背景图是否随页面滚动，`fixed`（固定）表示不滚动，`scroll`（滚动）表示随页面滚动。 - `background-position`设置背景图像的初始位置，如`left top`（左上角）。 - `background`属性允许将以上属性简写在一起，如`background: #000 url(..) repeat fixed left top;`。 4. **区块属性**： - `letter-spacing`调整字符间的距离，可以设置为正常或特定数值。 - `text-align`控制文本的对齐方式，包括`justify`（两端对齐），`left`（左对齐），`right`（右对齐）和`center`（居中）。 - `text-indent`用于首行缩进，通常设置为像素值。 - `vertical-align`定义元素的垂直对齐方式，如`baseline`（基线），`sub`（下标），`super`（上标），`top`，`bottom`，`text-top`，`text-bottom`等。 5. **方框属性**： - `width`和`height`分别定义元素的宽度和高度。 - `float`让元素浮动，常用于创建自适应布局，如`left`和`right`。 - `clear`防止元素被浮动元素覆盖，如`both`清除左右两侧的浮动。 - `margin`和`padding`控制元素的外边距和内边距，可以单独设置每个方向或使用简写形式。 - `border`属性用于设置边框，包括`border-style`（边框样式），`border-width`（边框宽度）和`border-color`（边框颜色），通常使用简写形式`border: width style color;`。 6. **列表属性**： - `list-style-type`设定列表项的标记类型，如`disc`（实心圆点），`decimal`（数字）等。 - `list-style-position`控制标记的位置，`outside`（标记在列表项外面），`inside`（标记在列表项里面）。 - `list-style-image`允许使用图像作为列表项的标记。 理解和熟练掌握这些CSS属性对于创建美观且功能丰富的网页至关重要。通过组合这些属性，可以实现复杂的布局和设计，使网页更具吸引力和用户体验。在实践中，不断尝试和实验，熟悉这些属性的用法和相互作用，将有助于提升你的CSS技能。