CSS新手入门笔记整理:CSS常用属性表
字体样式
属性 | 属性值 | 说明 |
font-family | 微软雅黑/苹方 | 字体类型 |
font-size | 数值 | 字体大小 |
font-weight | 数值/关键字 | 字体粗细(字重) |
font-style |
| 字体风格 |
color | 色值 | 字体颜色 |
文本样式
属性 | 属性值 | 说明 |
text-indent | 数值/2em | 首行缩进 |
text-align |
| 水平对齐 |
text-decoration |
| 文本修饰 |
text-transform |
| 大小写转换 |
line-height | 数值 | 行高 |
letter-spacing | 数值 | 字间距 |
word-spacing | 数值 | 词间距(只针对英文单词) |
vertical-align |
| 垂直对齐 |
边框样式
属性 | 属性值 | 说明 |
border |
| 边框的整体样式 |
border-width |
| 边框的宽度 |
border-style |
| 边框的外观 |
border-color |
| 边框的颜色 |
border-radius |
| 边框圆角 |
列表样式
属性 | 属性值 | 说明 |
list-style-type |
| 列表项符号 |
list-style-image | url(图片路径) | 列表项图片 |
表格样式
属性 | 属性值 | 说明 |
caption-side |
| 标题位置 |
border-collapse |
| 边框合并 |
border-spacing |
| 边框间距 |
图片样式
属性 | 属性值 | 说明 |
width | 数值 | 宽度 |
height | 数值 | 高度 |
border | 数值 | 边框 |
text-align |
| 水平对齐 |
vertical-align |
| 垂直对齐 |
float | left(元素向左浮动) right(元素向右浮动) | 文字环绕方式 |
背景样式
属性 | 属性值 | 说明 |
background-color |
| 背景颜色 |
background-image |
| 背景图片地址 |
background-repeat |
| 背景图片平铺方式 |
background-position |
| 背景图片位置 |
background-attachment |
| 背景图片固定 |
超链接样式
属性 | 说明 |
a:link0 | 超链接“未访问”的样式 |
a:visited | 超链接“访问后”的样式 |
a:hover | 鼠标“经过”超链接的样式 |
a:active | 鼠标“单击”超链接时的样式 |
cursor | 鼠标外观 |
盒子模型
属性 | 属性值 | 说明 |
width | 数值 | 宽度 |
height | 数值 | 高度 |
border | 数值 | 边框 |
margin | 数值 | 外边距 |
padding | 数值 | 内边距 |
浮动布局
属性 | 属性值 | 说明 |
float | left | 左浮动 |
right | 右浮动 | |
clear | both | 清除浮动 |
定位布局
属性 | 属性值 | 说明 |
position | fixed | 固定定位 |
relative | 相对定位 | |
absolute | 绝对定位 | |
static | 静态定位 |
溢出声名
属性 | 属性值 | 说明 |
overflow | visible | 若内容溢出,则溢出内容可见(默认值) |
hidden | 若内容溢出,则溢出内容隐藏 | |
scroll | 若内容溢出,则显示滚动条 | |
auto | auto 跟 scroll 很相似,不同的是 auto 值在盒子需要的时候会给它一个滚动条 |
元素类型转换
属性值 | 说明 | |
display | inline | 行内元素 |
block | 块元素 | |
inline-block | 行内块元素 | |
table | 以表格形式显示,类似于 table 元素 | |
table-row | 以表格行形式显示,类似于 tr 元素 | |
table-cell | 以表格单元格形式显示,类似于 td 元素 | |
none | 隐藏元素 |
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!