前端基础-CSS属性1.文字属性
#1.浏览量默认的字体微软雅黑 font-family: "Adobe Arabic"; #2.字体大小设置 1.px 默认像素 2.rem 对应浏览器默认的字体大小,浏览器是1rem=16px google浏览器是 16px,最小是12px 3.em 等于父级的字体尺寸--相对父级字体大小而言 4.%相对父级的字体百分比而言 /*font-size: 22px;*/ /*font-size: 2rem;*/ /*font-size: 2em;*/ /*font-size: 50%;*/ #3.font-weight 字体粗细 关键字: normal 默认字体 lighter 较细 bolder 很粗 默认给值: 只能是100-900的整百数 400正常的 700相当于bold /*font-weight: bold;*/ #4.font-style 字体类型 normal 默认字正常 italic 文字斜体(属性) oblique 文字斜体 font-style: oblique; #5.color字体颜色 1.关键字:aqua、green 2.16进制: #dd55aa;或者#d5a 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: #dd55aa;*/ /*color:rgb(221,85,170) ;*/ color:rgba(221,85,170,0.5) ;
2.文本属性
#1.文本线属性:text-decoration text-decoration: 下划线:underline 上划线:overline 删除线:line-through none:默认值,可以用这个属性去掉带下划线、上划线、删除线 /*text-decoration: underline;*/ /*text-decoration: overline;*/ text-decoration: line-through; #2.文字大小写:text-transform: none:无特殊处理 uppercase:文本大写 lowercase:文本小写 capitalize:英文的首字母大写 /*text-transform: uppercase;*/ /*text-transform: capitalize;*/ text-transform: lowercase; #3.text-align:对齐方式,文本和image有效 left默认值:左对齐 right:右对齐 center:中间对齐 text-align: left; #4.text-indent:首行缩进 text-indent: 2em; #5.line-height:行高 line-height: 30px #6.letter-spacing:字距 letter-spacing: 10px; #7.word-spacing:单词之间的距离 word-spacing: 20px;
3.背景
#1. 背景颜色:background-color background-color: red; #2.背景图片:background-image background-image: url("image/test1.ico") #3.背景平铺:background-repeat no-repeat 平铺 repeat 不平铺 repeat-x 平铺x repeat-y 平铺y background-repeat: no-repeat; #4.背景位置:background-position x轴 left center right y轴 left center right 如果只是给一个值,默认是x轴,y轴默认center % px %,px不能交换位置信息,默认是x和y background-position: left; #5.背景图片的大小 使用 % 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 文本顶部对齐
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!