css样式大全
参考网站:
1.字体样式
①font:修饰字体的快捷样式
font:字体 大小; (大小要写像素)
font—family: 字体;
font—size:**px; 表示多大字号
font—weight:bold; 表示字体加粗,使用 bold 关键字可以将文本设置为粗体。
关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100 对应最细的字体变形,900 对应最粗的字体变形。数字 400 等价于 normal,而 700 等价于 bold。
如果将元素的加粗设置为 bolder,浏览器会设置比所继承值更粗的一个字体加粗。与此相反,关键词 lighter 会导致浏览器将加粗度下移而不是上移。
font-family: 修饰选择字体
font-size: 修饰字体大小
font-weight: 修饰字体是否加粗
②color:修饰字体颜色样色(十六进制rgb(0-255))
color:#000000; 表示黑色
color:#FFFFFF; 表示白色
color:#******; 表示任意颜色
color:rgb(**,**,**);
color:rgba(**,**,**,0-1); 后面a为透明度,数值范围0-1之间
③text-align:修饰字体水平对齐方式
text—align:left; 左居中
text—align:right; 右居中
④line-height:修饰字体所占行高
line——height:**px; 设置行高,块元素可通过此拉倒行高达到垂直居中效果
⑤border:元素边框
border:**px solid/dashed color; 设置边框像素,边框线条为实线/虚线
border—radius:50% ; radius为角度,可通过调节百分比设置角度大小,50%可以将矩形变为圆形。也可以不写百分比,写上像素数,
border—left:**px ;
一般为原来像素的一半,考虑到原来的像素可能会被修改,所以最好写成百分比,便于维护。
⑥display:行元素和块元素的转换、隐藏元素
display:block; 表示将行元素转换成块元素(常用),转换的同时会换行
display:inline-block; 表示将行元素转换成块元素(常用),转换的同时不会换行
display:inline; 表示将块元素转换成行元素(一般不常用)
display:none; 隐藏元素
⑦margin:元素外边矩
margin—top:**px; 表示上边的外边矩与元素的距离
margin—bottom:**px; 表示下边的外边矩与元素的距离
margin—left:**px; 表示左边外边矩与元素的距离,即左缩进
margin—right:**px; 表示右边的外边矩与元素的距离,即右缩进
margin:**px **px **px **px; 表示上、右、下、左(钟表顺时针方向)
margin:0; 表示上下左右全为0个像素(只有为0时可以不用写px),同理,只写一个数据说明上右下左全为某个值。
margin:auto; 表示居中
margin:0 auto; 表示top和bottom即上下为0,左右自动居中
与margin对应的是padding(内边距),用法和margin一样。
⑧text-decoration:修饰字体边线
text—decoration:none ; 表示字体无下划线
⑨text-shadow:字体阴影 (box—shadow:盒子阴影)
text—shadow:5px 3px 2px red; 分别表示x轴偏移量、y轴偏移量、阴影字体的模糊度、阴影字体颜色
2.背景样式
background:背景快捷方式
background-color:背景颜色
background-image:背景图片
background-position:背景定位
background-attachment:背景定位方式
background-repeat:背景重复