### CSS属性速查表知识点详解
#### 1. `!important` 增加特定规则的重要性
- **用途**：当需要确保某条CSS规则优先级高于其他规则时使用此属性。
- **语法示例**：
```css
p {
color: blue !important;
}
```
- **说明**：当其他地方定义了`p`标签的颜色但希望强制使用蓝色时，可以在定义颜色的规则后面加上`!important`。
#### 2. `:active` 设置当链接处于激活状态时`a`元素的样式
- **用途**：定义鼠标点击但未释放时链接的样式。
- **语法示例**：
```css
a:active {
color: red;
}
```
- **说明**：当用户点击链接（但尚未松开鼠标按钮）时，此样式生效。
#### 3. `:first-letter` 在对象的第一个字符上应用一个或多个样式
- **用途**：允许开发者对段落或行中的第一个字母进行特殊样式设置。
- **语法示例**：
```css
p:first-letter {
font-size: 24px;
font-weight: bold;
}
```
- **说明**：可以用来放大或加粗文本中的第一个字母，常用于装饰性文本。
#### 4. `:first-line` 在对象的第一行上应用一个或多个样式
- **用途**：允许对文本的第一行进行样式化处理。
- **语法示例**：
```css
p:first-line {
color: green;
font-weight: bold;
}
```
- **说明**：适用于需要突出显示文本开头的情况。
#### 5. `:hover` 设置当用户将鼠标指针悬停在链接上时`a`元素的样式
- **用途**：定义当鼠标指针悬停在链接上时链接的样式。
- **语法示例**：
```css
a:hover {
color: blue;
}
```
- **说明**：此伪类在鼠标悬停时触发，通常用于改变链接颜色或添加下划线等效果。
#### 6. `:link` 设置当链接最近没有访问过时`a`元素的样式
- **用途**：定义未被访问过的链接的样式。
- **语法示例**：
```css
a:link {
color: red;
}
```
- **说明**：仅当链接从未被点击过时应用此样式。
#### 7. `:visited` 设置当链接最近访问过时`a`元素的样式
- **用途**：定义已访问过的链接的样式。
- **语法示例**：
```css
a:visited {
color: purple;
}
```
- **说明**：用于标记用户曾经访问过的链接，通常用于区分新旧链接。
#### 8. `@charset` 设置外部样式表的字符集
- **用途**：指定样式表中使用的字符编码。
- **语法示例**：
```css
@charset "UTF-8";
```
- **说明**：用于确保正确解析样式表中的特殊字符。
#### 9. `@font-face` 设置要嵌入HTML文档的字体
- **用途**：允许开发者定义自定义字体以供网页使用。
- **语法示例**：
```css
@font-face {
font-family: 'MyFont';
src: url('myfont.woff') format('woff');
}
```
- **说明**：通过这种方式可以嵌入专有的或特殊的字体到网页中。
#### 10. `@import` 导入一个外部样式表
- **用途**：在一个样式表中引入另一个样式表。
- **语法示例**：
```css
@import url('styles.css');
```
- **说明**：用于简化样式管理，可以将公共样式集中在一个单独的文件中。
#### 11. `@media` 设置`styleSheet`对象中一组规则的媒体类型
- **用途**：定义不同的媒体类型（如屏幕、打印等）的样式。
- **语法示例**：
```css
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
```
- **说明**：允许根据不同的设备或环境条件应用不同的样式。
#### 12. `@page` 设置`styleSheet`中页面框的尺寸、方向和边距
- **用途**：定义打印样式时的页面布局和边界。
- **语法示例**：
```css
@page {
size: A4;
margin: 1cm;
}
```
- **说明**：常用于控制打印输出的外观。
#### 13. `abbr` 设置或获取对象的缩写文本
- **用途**：用于定义缩写的完整形式。
- **语法示例**：
```html
<abbr title="World Health Organization">WHO</abbr>
```
- **说明**：提供有关缩写的额外信息。
#### 14. `accelerator` 设置或获取表明对象是否包含快捷键的字符串
- **用途**：为对象定义键盘快捷键。
- **说明**：不常用。
#### 15. `accept` 设置或获取以逗号分隔的内容类型列表
- **用途**：定义表单字段可以接受哪些类型的文件。
- **语法示例**：
```html
<input type="file" accept="image/*">
```
- **说明**：限制上传文件的类型。
#### 16. `acceptCharset` 设置或获取处理表单的服务器必须接受的输入数据所用的字符编码方式列表
- **用途**：指定服务器能够接受的字符编码。
- **说明**：较少使用。
#### 17. `accessKey` 设置或获取对象的快捷键
- **用途**：定义一个键盘快捷键，可以通过它来访问特定的元素。
- **语法示例**：
```html
<button accesskey="b">Button</button>
```
- **说明**：提高了用户界面的可访问性。
#### 18. `action` 设置或获取表单内容要发送处理的URL
- **用途**：定义表单提交时的数据发送地址。
- **语法示例**：
```html
<form action="/submit.php">
...
</form>
```
- **说明**：用于表单数据的后端处理。
#### 19. `activeElement` 获取当父`document`拥有焦点时获得焦点的对象
- **用途**：获取当前拥有焦点的元素。
- **语法示例**：
```javascript
var focusedElement = document.activeElement;
```
- **说明**：常用于确定哪个元素当前被用户交互。
#### 20. `additive` 设置或获取表明动画是否附加到其它动画的值
- **用途**：定义动画效果是否累加。
- **说明**：不常用。
#### 21. `align` 设置或获取对象针对其邻接文本如何排列
- **用途**：定义对象的对齐方式。
- **语法示例**：
```html
<div align="center">Centered text</div>
```
- **说明**：用于调整元素的位置。
#### 22. `aLink` 设置或获取元素中所有激活链接的颜色
- **用途**：定义正在点击（即激活状态）的链接的颜色。
- **语法示例**：
```css
body {
alink: green;
}
```
- **说明**：已不再推荐使用，建议使用`:active`伪类。
#### 23. `alinkColor` 设置或获取元素中所有激活链接的颜色
- **用途**：同`aLink`，定义激活链接的颜色。
- **说明**：已不再推荐使用，建议使用`:active`伪类。
#### 24. `allowTransparency` 设置或获取对象是否可为透明
- **用途**：定义对象背景是否允许透明度。
- **语法示例**：
```html
<iframe allowtransparency="true"></iframe>
```
- **说明**：允许对象背景变为透明。
#### 25. `alt` 设置或获取用于替代图像的文本
- **用途**：为图像提供描述性的替代文本。
- **语法示例**：
```html
<img src="example.jpg" alt="Example image">
```
- **说明**：对于无法加载图像或视觉障碍用户非常有用。
#### 26. `altHTML` 设置可选的若对象装载失败时要执行的替换HTML脚本
- **用途**：定义对象加载失败时显示的替代HTML。
- **说明**：不常用。
#### 27. `altKey` 设置或获取Alt键的状态
- **用途**：获取Alt键是否被按下。
- **说明**：用于处理键盘事件。
#### 28. `altLeft` 设置或获取左Alt键的状态
- **用途**：获取左侧Alt键是否被按下。
- **说明**：用于处理键盘事件。
#### 29. `appCodeName` 获取浏览器的代码名称
- **用途**：获取浏览器的技术名称。
- **说明**：用于浏览器识别。
#### 30. `application` 表明对象的内容是否为HTML应用程序(HTA)，从而免除浏览器的安全模型
- **用途**：定义对象是否作为HTA运行。
- **说明**：HTA是一种特殊的HTML应用程序，可以访问本地资源。
#### 31. `appMinorVersion` 获取应用程序的次版本值
- **用途**：获取浏览器的小版本号。
- **说明**：用于版本识别。
#### 32. `appName` 获取浏览器的名称
- **用途**：获取浏览器名称。
- **说明**：用于浏览器识别。
#### 33. `appVersion` 获取浏览器运行的平台和版本
- **用途**：获取浏览器的版本和平台信息。
- **说明**：用于浏览器识别。
#### 34. `archive` 设置或获取可用于实现对象的你自己的archive功能的字符串
- **用途**：定义对象的档案文件。
- **说明**：不常用。
#### 35. `ATOMICSELECTION` 指定元素及其内容是否必须以一不可见单位统一选择
- **用途**：定义元素及其内容是否作为一个整体被选择。
- **说明**：不常用。
#### 36. `autocomplete` 设置或获取对象的自动完成状态
- **用途**：定义表单元素是否允许自动完成。
- **语法示例**：
```html
<input type="text" autocomplete="off">
```
- **说明**：用于提高用户体验。
#### 37. `availHeight` 获取系统屏幕的工作区域高度，排除Microsoft®Windows®任务栏
- **用途**：获取屏幕可用高度。
- **语法示例**：
```javascript
var height = screen.availHeight;
```
- **说明**：用于响应式设计。
#### 38. `availWidth` 获取系统屏幕的工作区域宽度，排除Windows任务栏
- **用途**：获取屏幕可用宽度。
- **语法示例**：
```javascript
var width = screen.availWidth;
```
- **说明**：用于响应式设计。
#### 39. `axis` 设置或获取以逗号分隔的与对象关联的概念分类列表
- **用途**：定义对象的语义分类。
- **说明**：不常用。
#### 40. `background` 设置或获取对象最多五个独立的背景属性
- **用途**：定义对象的背景颜色和图像。
- **语法示例**：
```css
body {
background: #f0f0f0 url('background.jpg') no-repeat center center fixed;
}
```
- **说明**：结合多种背景属性设置背景。
#### 41. `background` 设置或获取页面上文本和图像后平铺的背景图片
- **用途**：定义背景图片。
- **语法示例**：
```css
body {
background: url('background.jpg');
}
```
- **说明**：定义背景图片。
#### 42. `backgroundAttachment` 设置或获取背景图像如何附加到文档内的对象中
- **用途**：定义背景图像随页面滚动的行为。
- **语法示例**：
```css
body {
background-attachment: fixed;
}
```
- **说明**：固定背景图像位置或使其随页面滚动。
#### 43. `backgroundColor` 设置或获取对象内容后的颜色
- **用途**：定义背景颜色。
- **语法示例**：
```css
body {
background-color: #f0f0f0;
}
```
- **说明**：定义背景颜色。
#### 44. `backgroundImage` 设置或获取对象的背景图像
- **用途**：定义背景图像。
- **语法示例**：
```css
body {
background-image: url('background.jpg');
}
```
- **说明**：定义背景图像。
#### 45. `backgroundPosition` 设置或获取对象背景的位置
- **用途**：定义背景图像的位置。
- **语法示例**：
```css
body {
background-position: center center;
}
```
- **说明**：定位背景图像。
#### 46. `backgroundPositionX` 设置或获取`backgroundPosition`属性的x坐标
- **用途**：定义背景图像水平位置。
- **语法示例**：
```css
body {
background-position-x: 50%;
}
```
- **说明**：定位背景图像水平位置。
#### 47. `backgroundPositionY` 设置或获取`backgroundPosition`属性的y坐标
- **用途**：定义背景图像垂直位置。
- **语法示例**：
```css
body {
background-position-y: 50%;
}
```
- **说明**：定位背景图像垂直位置。
#### 48. `backgroundRepeat` 设置或获取对象的`backgroundImage`属性如何平铺
- **用途**：定义背景图像重复方式。
- **语法示例**：
```css
body {
background-repeat: no-repeat;
}
```
- **说明**：控制背景图像的重复模式。
#### 49. `balance` 设置或获取表明背景声音的音量如何分配在左右扬声器的值
- **用途**：定义音频输出的平衡。
- **说明**：不常用。
#### 50. `banner` 使用event对象获取高级流重定向器(ASX)文件中项目的Banner内容
- **用途**：定义媒体文件的横幅内容。
- **说明**：不常用。
#### 51. `bannerAbstract` 获取ASX文件项的BannerAbstract内容
- **用途**：定义媒体文件的摘要内容。
- **说明**：不常用。
#### 52. `baseHref` 获取可找到对象标签的URL字符串
- **用途**：获取基URL。
- **说明**：用于确定相对URL的基地址。
#### 53. `behavior` 设置或获取文本如何在字幕中滚动
- **用途**：定义字幕滚动行为。
- **说明**：不常用。
#### 54. `behavior` 设置或获取DHTML行为的位置
- **用途**：定义DHTML行为的位置。
- **说明**：不常用。
#### 55. `BGCOLOR` 设置对象后面的背景颜色
- **用途**：定义背景颜色。
- **语法示例**：
```html
<body BGCOLOR="#f0f0f0">
```
- **说明**：已不再推荐使用，建议使用`background-color`。
#### 56. `bgColor` 不推荐。设置或获取对象后面的背景颜色
- **用途**：定义背景颜色。
- **语法示例**：
```html
<body bgColor="#f0f0f0">
```
- **说明**：已不再推荐使用，建议使用`background-color`。
#### 57. `bgColor` 不推荐。设置或获取表明对象后面的背景颜色的值
- **用途**：定义背景颜色。
- **语法示例**：
```html
<body bgColor="#f0f0f0">
```
- **说明**：已不再推荐使用，建议使用`background-color`。
#### 58. `bgProperties` 设置或获取背景图片的属性
- **用途**：定义背景图片的属性。
- **说明**：不常用。
#### 59. `blockDirection` 获取表明块元素内容的绕排方向的值，是由左至右，还是由右至左
- **用途**：定义文本的书写方向。
- **说明**：不常用。
#### 60. `border` 设置或获取绘制对象周围边框的属性
- **用途**：定义边框的样式、宽度和颜色。
- **语法示例**：
```css
div {
border: 1px solid black;
}
```
- **说明**：设置边框的基本属性。
