前端基础-CSS属性
1.文字属性
font-family: "Adobe Arabic";
1.px 默认像素
2.rem 对应浏览器默认的字体大小,浏览器是1rem=16px
google浏览器是 16px,最小是12px
3.em 等于父级的字体尺寸--相对父级字体大小而言
4.%相对父级的字体百分比而言
/*font-size: 22px;*/
/*font-size: 2rem;*/
/*font-size: 2em;*/
/*font-size: 50%;*/
关键字:
normal 默认字体
lighter 较细
bolder 很粗
默认给值:
只能是100-900的整百数
400正常的
700相当于bold
/*font-weight: bold;*/
normal 默认字正常
italic 文字斜体(属性)
oblique 文字斜体
font-style: oblique;
1.关键字:aqua、green
2.16进制:
3.rgb(0-255,0-255,0-255):rgb(221,85,170)
r:red
g:green
b:blue
4.rgba(0-255,0-255,0-255,0-1)(221,85,170,0.5)
r:red
g:green
b:blue
a:alpha(透明度) 0完全透明
/*color: aqua;*/
/*color:
/*color:rgb(221,85,170) ;*/
color:rgba(221,85,170,0.5) ;
2.文本属性
text-decoration:
下划线:underline
上划线:overline
删除线:line-through
none:默认值,可以用这个属性去掉带下划线、上划线、删除线
/*text-decoration: underline;*/
/*text-decoration: overline;*/
text-decoration: line-through;
none:无特殊处理
uppercase:文本大写
lowercase:文本小写
capitalize:英文的首字母大写
/*text-transform: uppercase;*/
/*text-transform: capitalize;*/
text-transform: lowercase;
left默认值:左对齐
right:右对齐
center:中间对齐
text-align: left;
text-indent: 2em;
line-height: 30px
letter-spacing: 10px;
word-spacing: 20px;
3.背景
background-color: red;
background-image: url("image/test1.ico")
no-repeat 平铺
repeat 不平铺
repeat-x 平铺x
repeat-y 平铺y
background-repeat: no-repeat;
x轴 left center right
y轴 left center right
如果只是给一个值,默认是x轴,y轴默认center
% px %,px不能交换位置信息,默认是x和y
background-position: left;
使用 % px
auto等比缩放
cover 等比缩放,直到铺满xy
contain 等比缩放,铺满x或者y
background-size:contain;
background: red url("image/test1.ico") no-repeat 50px 60px/contain;
4.对齐方式
vertical-align 垂直对齐方式
baseline 默认
top 顶部
middle 中部
bottom 底部
加vertical-align同排元素都需要添加
text-bottom 文本底部对齐
text-top 文本顶部对齐