总结一下工作中常用的 CSS 属性

4年前更新

2030

这是我参与更文挑战的第 4 天，活动详情查看：更文挑战

在这里回忆总结一下工作中常用的 CSS 属性，并整理成表格：

文本

属性名	描述
`font-size`	设置文本大小
`font-family`	设置文本字体
`font-style`	设置文本样式
`font-weight`	设置文本粗细
`font-variant`	设置文本小型大写样式
`color`	设置文本颜色
`line-height`	设置文本行高
`text-decoration`	设置文本修饰
`text-align`	设置文本对齐方式
`text-transform`	设置文本大小写
`text-indent`	设置文本首行缩进
`font`	设置文本复合属性

`font-size` 属性

`font-size` 属性值	属性值描述	实例
`正数px`	固定值尺寸像素	`font-size: 30px;`
`正数%`	基于父对象中文本的尺寸大小	`font-size: 150%;`

`font-family` 属性

`font-family` 属性值	属性值描述	实例
`字体名称`	按优先顺序排列，以 `,` 隔开，如果字体名称包含空格，应使用括号括起来	`font-family: Consolas, 楷体, "Century Gothic", serif;`

`font-style` 属性

`font-style` 属性值	属性值描述	实例
`normal`	默认值，正常的文本	`font-style: normal;`
`italic`	斜体。对于没有斜体变量的特殊文本，将应用 oblique	`font-style: italic;`
`oblique`	倾斜的文本	`font-style: oblique;`

`font-weight` 属性

`font-weight` 属性值	属性值描述	实例
`normal`	默认值，正常粗细	`font-weight: normal;`
`bold`	粗体	`font-weight: bold;`
`bolder`	比 `bold` 更粗	`font-weight: bolder;`
`lighter`	细体	`font-weight: lighter;`
`100 - 900`	定义由细到粗的文本， `400` 等同于 `normal` ， `700` 等同于 `bold`	`font-weight: 500;`

`font-variant` 属性

`font-variant` 属性值	属性值描述	实例
`normal`	默认值，显示标准的文本	`font-variant： normal;`
`small-caps`	显示小型大写字母的文本	`font-variant： small-caps;`

`color` 属性

`color` 属性值	属性值描述	实例
`颜色名`	指定此颜色名的颜色	`color: red;`
`rgb()`	指定 RGB 格式的颜色	`color: rgb(44,44,144);`
`rgba()`	指定 RGBA 格式的颜色	`color: rgba(44,44,144,0.8);`
`#eddd22`	指定 16 进制格式的颜色	`font-style: #ed22cc;`

`line-height` 属性

`line-height` 属性值	属性值描述	实例
`normal`	默认值，默认行高	`line-height: normal;`
`正数px`	指定行高为多少像素	`line-height: 30px;`
`正数`	指定行高为文本大小的倍数	`line-height: 1.5;`

`text-decoration` 属性

`text-decoration` 属性值	属性值描述	实例
`normal`	默认值，无修饰	`text-decoration: normal;`
`underline`	下划线	`text-decoration: underline;`
`line-through`	贯穿线	`text-decoration: line-through;`
`overline`	上划线	`text-decoration: overline;`

`text-align` 属性

`text-align` 属性值	属性值描述	实例
`left`	默认值，左对齐	`text-align: left;`
`center`	居中对齐	`text-align: center;`
`right`	右对齐	`text-align: right;`

`text-transform` 属性

`text-transform` 属性值	属性值描述	实例
`none`	默认值，不进行转化	`text-transform: none;`
`capitalize`	将每个单词的第一个字母转化为大写	`text-transform: capitalize;`
`uppercase`	转化为大写	`text-transform: uppercase;`
`lowercase`	转化为小写	`text-transform: lowercase;`

`text-indent` 属性

`text-indent` 属性值	属性值描述	实例
`正数px`	首行缩进多少像素	`text-indent: 60px;`
`正数em`	首行缩进多少字符	`text-indent: 2em;`

`font` 属性

`font` 属性值	属性值描述	实例
`font-style font-variant font-weight font-size/line-height font-family`	设置文本的复合属性（注意属性值的位置顺序，除了 `font-size` 和 `font-family` 之外，其他任何一个属性值都可以省略）	`font: italic small-caps bolder 20px/100px 宋体;`
`font-size font-family`	同上	`font: 20px 黑体;`

背景

属性名	描述
`background-color`	设置背景颜色
`background-image`	设置背景图像
`background-repeat`	设置背景图像平铺方式
`background-position`	设置背景图像位置
`background-attachment`	设置背景图像滚动位置
`background`	设置背景复合属性

`background-color` 属性

`background-color` 属性值	属性值描述	实例
`transparent`	默认值，背景色透明	`background-color: transparent;`
`#ae8686`	指定背景颜色	`background-color: #ae8686;`

`background-image` 属性

`background-image` 属性值	属性值描述	实例
`none`	默认值，无背景图	`background-image: none;`
`url()`	指定绝对或相对背景图像 URL 地址	`background-image: url("../images/qt_06_background-image1.jpg");`

`background-repeat` 属性

`background-repeat` 属性值	属性值描述	实例
`repeat`	默认值，背景图像在合横向和纵向平铺	`background-repeat: repeat;`
`no-repeat`	背景图像不平铺	`background-repeat: no-repeat;`
`repeat-x`	背景图像仅在横向平铺	`background-repeat: repeat-x;`
`repeat-y`	背景图像仅在纵向平铺	`background-repeat: repeat-y;`

`background-attachent` 属性

`background-attachent` 属性值	属性值描述	实例
`scroll`	默认值，背景图像会随着页面的移动而滚动	`background-attachment: scroll;`
`fixed`	当页面滚动时，背景图像不会滚动	`background-attachment: fixed;`

`background-position` 属性

`background-position` 属性值	属性值描述	实例
`x轴坐标px,left,center,right y轴坐标px,top,center,bottom`	指定背景图的位置，平铺方式为 `no-repeat`	`background-position: 30px center;`

`background` 属性

`background` 属性值	属性值描述	实例
`color image repeat attachment position`	设置所有的背景属性	`background: #ae8686 url("../images/im1.jpg no-repeat fixed center center");`

© 版权声明

文章版权归作者所有，未经允许请勿转载。

THE END

喜欢就支持一下吧

相关推荐