"CSS样式大全"
在Web开发中,CSS(Cascading Style Sheets)是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表语言。这个资源似乎是一个全面的CSS样式参考,涵盖了字体、背景以及布局等多个方面。下面将对这些关键知识点进行详细解释。
字体属性
1. `font-size`: 这个属性用于设置元素的字体大小。示例中的`x-large`是相对大小的一种,还有如`xx-small`等其他预定义的值。此外,可以使用绝对单位(如`px`、`pt`)或相对单位(如`em`、`rem`)来精确指定大小。
2. `font-style`: 定义字体的倾斜样式。`oblique`使文本倾斜,`italic`则应用斜体,而`normal`是默认值,表示无倾斜。
3. `line-height`: 设置行高,`normal`是默认值,也可以使用数值、百分比或长度单位来指定。
4. `font-weight`: 控制字体的粗细。`bold`表示加粗,`lighter`表示较轻,`normal`是常规重量。
5. `font-variant`: 用于创建小型大写的效果,`small-caps`是其一个值,`normal`则是默认值,表示标准字体。
6. `text-transform`: 控制文本的大小写。`capitalize`将每个单词的首字母转换为大写,`uppercase`将所有字母转为大写,`lowercase`则转为小写,`none`表示不转换。
7. `text-decoration`: 用于添加装饰到文本。`underline`下划线,`overline`上划线,`line-through`删除线,`none`则移除所有装饰。
8. `font-family`: 指定字体系列,如`"Courier New"`, `Arial`, `Helvetica`等。如果浏览器不支持指定的字体,它会按照顺序尝试使用后续的字体。
背景属性
1. `background-color`: 设置元素的背景颜色,如`#FFFFFF`表示白色。
2. `background-image`: 允许设置背景图像,`url()`内填写图像的URL。
3. `background-repeat`: 控制背景图像是否重复。`no-repeat`表示不重复,`repeat`沿X和Y轴重复,`repeat-x`仅沿X轴重复,`repeat-y`沿Y轴重复。
4. `background-attachment`: 定义背景图像是否随滚动条移动。`fixed`保持在视口固定位置,`scroll`随页面滚动。
5. `background-position`: 设置背景图像的位置,可以使用关键词(如`left`、`top`)或百分比、长度单位来指定。
布局属性
1. `letter-spacing`: 控制字符间的间距,`normal`是默认值,也可以使用数值来增加或减少间距。
2. `text-align`: 用来设置文本的对齐方式。`justify`为两端对齐,`left`、`right`和`center`分别表示左对齐、右对齐和居中对齐。
3. `text-indent`: 设置段落首行缩进,可以使用长度单位。
4. `vertical-align`: 控制元素的垂直对齐方式,可以是`baseline`(基线对齐)、`sub`(下标)、`super`(上标)、`top`、`text-top`、`middle`、`bottom`、`text-bottom`。
5. `word-spacing`: 类似于`letter-spacing`,但控制单词间的间距。
6. `white-space`: 控制空白字符的处理。`normal`是默认值,允许换行和缩进;`pre`保留空白字符,如同`<pre>`标签;`nowrap`强制文本在同一行显示。
7. `display`: 决定元素如何在页面上显示。`block`使元素成为块级元素,`inline`为内联元素,`list-item`用于列表项,`run-in`是混合块级和内联的行为,`compact`(已废弃)用于紧凑排列,`none`则隐藏元素。
以上就是从提供的资源中提取出的一些关键CSS知识点,这些属性和值构成了CSS样式的核心,帮助开发者实现丰富的网页设计和布局。