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

夕暮寒露
570 阅读4分钟

这是我参与更文挑战的第 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斜体。对于没有斜体变量的特殊文本，将应用 obliquefont-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 等同于 boldfont-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-repeatbackground-position: 30px center;

background 属性

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