css常见样式一览表
CSS样式一览表
| 样式名 | 样式值 | 说明 |
|---|---|---|
| 字体属性 | ||
| font-family | [微软雅黑][宋体] | 定义字体类型 |
| font-size | [像素值] | 定义字体大小 |
| font-weight | bold | 定义字体粗体 |
| [具体数值] | 定义字体粗细 | |
| 优先级 | ||
| 一般的顺序 | ID > class > 标签 | 始终满足：越具体的优先级越高 |
| 定位 | ||
| position | relative | 相对定位（相对于原始的位置，进行偏移） |
| absolute | 绝对定位（相对于第一个(绝对定位或相对定位)的父元素，进行定位） | |
| fixed | 固定定位（相对浏览器的可见部分，进行定位） | |
| top | [像素值] | 定位模式为相对、绝对、固定时起作用，表示上的位置 |
| right | [像素值] | 定位模式为相对、绝对、固定时起作用，表示右的位置 |
| bottom | [像素值] | 定位模式为相对、绝对、固定时起作用，表示下的位置 |
| left | [像素值] | 定位模式为相对、绝对、固定时起作用，表示左的位置 |
| z-index | [层级数] | 一般设置值：0-10 (默认值：0) |
| 标签选择器的不同组合 | ||
| 多个标签 | div,dr,dd{ } | 将多个具有相同的标签用","隔开 .表示具有同样的样式 |
| 子孙集选择器 | div dd{ } | 将"div"子孙集所有的"dd"标签选中,它们中间用空格分开 |
| 子集选择器 | div > dd{ } | 将"div"紧贴的子集"dd"标签选中,它们中间用">"分开 |
| 选择器 | div .dd{ } | 将"div"元素下具有"dd"类标签的元素选中 |
| 兄弟选择器 | div + div{ } | 将div标签下一个div标签的元素选中(是同一个父元素) |
| 属性选择器 | [colspan]{ } | 将所有标签中具有"colspan"属性的元素选中 |
| 浮动的设置 (会让当前元素上移一层,始终是以下一个标签为参照) | ||
| float | none | 默认值：元素不浮动 |
| right | 设置元素右浮动 | |
| left | 设置元素左浮动 | |
| clear | none | 默认值：允许左右两边都有元素值 |
| left | 在左侧不允许有浮动元素(清除浮动:清除浮起来的属性) | |
| right | 在右侧不允许有浮动元素(清除浮动:清除浮起来的属性) | |
| both | 在左右两侧都不允许有浮动元素(清除浮动:清除浮起来的属性) | |
| 列表类型图标 | ||
| list-style | none | 去掉修饰符号 |
| disc | 实心圆符号 | |
| circle | 空心圆符号 | |
| square | 实心正方形符号 | |
| decimal | 数字符号 | |
| 文本属性 | ||
| line-height | [像素值] | 设置文本行高 |
| text-align | center | 文本对齐方式为：居中(只能用于对文本的居中) |
| left | 文本对齐方式为：左对齐 | |
| right | 文本对齐方式为：右对齐 | |
| txet-decoration | [像素值] | 设置文本行高 |
| letter-spacing | [像素值] | 设置字符间距 |
| text-decoration | none | 不设置文本 |
| underline | 设置文本下划线 | |
| overline | 设置文本上划线 | |
| line-through | 设置文本中划线 | |
| white-space | nowrap | 文本溢出不换行 |
| 显示模式 | ||
| display | none | 隐藏元素 |
| inline | 指定为行级元素(占据的大小事取决于内容的多少，不能设置大小) | |
| block | 指定为块级元素(会占据一整行，并能设置大小) | |
| inline-block | 作为行级元素，但同时能象块级元素一样设置尺寸和大小 | |
| visibility | visible | 元素可见 |
| hidden | 元素不可见 | |
| 关于背景 | ||
| background-color | [颜色代码] | 背景颜色 |
| background-image | url([图片的路径]) | 背景图片 |
| background-repeat | repeat | 重复显示背景图片 |
| no-repeat | 不重复显示背景图片 | |
| repeat-x | 仅横向重复显示背景图片 | |
| repeat-y | 仅纵向重复显示背景图片 | |
| background-position | [横向位置] [纵向位置] | 背景图片显示的位置（由两个或一个值组成，当只有一个值的时候，另外一个值自动居中） |
| background-attachment | scroll | 背景图片滚动的模式（随滚动条滚动；默认值） |
| fixed | 背景图片滚动的模式（固定！不随滚动条滚动） | |
| 超链接伪类 | ||
| link | a:link | 未单击访问前超链接的样式 |
| visited | a:visited | 单击访问后超链接的样式 |
| hover | a:hover | 鼠标悬浮在上面超链接的样式 |
| active | a:active | 鼠标单击未释放(单击时)超链接的样式 |
| a:hover add(以上一样) | 鼠标悬浮在‘a’元素的时候,‘a’元素下面的‘add’元素的伪类样式 | |
| 边距 | ||
| margin | [上] [右] [下] [左] | 外边距(与它作为的距离)(块级元素居中：margin:auto) |
| padding | [上] [右] [下] [左](不允许为负数) | 内边距(与它内容(子元素)之间的距离；注意：会改变实际尺寸) |
| 边框 | ||
| border | [上] [右] [下] [左] | 边框的距离(缩写：borber:1px solid #000) |
| border-width | [像素（px）] | 边框的宽度 |
| border-style | dashed | 虚线样式的边框 |
| dotted | 点划线样式的边框 | |
| double | 双线样式的边框 | |
| solid | 实线样式的边框 | |
| border-color | [颜色代码] | 边框的颜色 |
| border-collapse | collapse | 合并单元格之间的边框（只能作用于 table 标签） |
| 尺寸 | ||
| width | [像素值] | 宽度 |
| min-width | [像素值] | 最小的宽度 |
| max-width | [像素值] | 最大的宽度 |
| height | [像素值] | 高度 |
| min-height | [像素值] | 最小的高度 |
| max-height | [像素值] | 最大的高度 |
正在加载评论...