span:为了突出没写文字标签:repeat,span,color,标签,HTML,background,text,font,背景图片 From: https://blog.51cto.com/u_15907719/5939226
字体样式:
font-family:字体类型
font-size:字体大小(px像素,cm厘米,mm毫米,em跟随父级,rem根目录)
font-weight:字体粗细(normal默认,bold加粗,bolder更粗,lighter更细)
font-style:字体风格(normal系统默认,itacle:斜体)
font还可以同时设置四种:(顺序为:风格一粗细一大小一类型)
例:
font:itacle bold 20ox "楷体"
文本样:
文本颜色:color(rgb:r指的是红色分量,g指的是绿色的分量,b指的是蓝色的分量取值范围均是0-255;
在rgba的基础上增加透明度,alpha取值范围为0-1)
例:
color:red;
color:#222222
color:(255,0,255)
color:rgba(255,255,0,0.5)
文本水平对齐方式text-align:
属性值:left居左,right居右,justify两端对齐
例:
text-align: center;
首行缩进:text-indent
属性值单位:px像素(一般字体大小的两倍)
文本样式:text-decoration:
属性值:overline上划线,underline下划线,line-throudh删除线,none无
例:
text-decoration: underline;
垂直对齐方式: vertical-align
属性值:middle居中,top:居上,bottom:居下(一般用于图片和文字垂直对齐)
例:
vertical-align: middle;
文本阴影:text-shadow
例:(text-shadow:颜色 x轴偏移量 y轴偏移量 模糊半径)
text-shadow: #0D7114 2px 2px 5px;
超链接伪类:
鼠标点击之前:link
例:
a:link{
color: black
}
鼠标点击之后:
a:visited{
color: red;
}
鼠标悬浮:hover
a:hover{
color: purple;
}
鼠标点击时:
a:active{
color: yellow;
}
列表样式:
1.list-style-type(none无,disc实心圆(默认的),circle空心圆,square实心正方形,decimal数字)
例:
ul{
list-style-type: circle
}
2.list-style
例:
ul{list-style: none;}
背景颜色:
background-color
背景图片:background-image
例:
p{
background-image:url("../image/bg.png")
}
背景图片重复方式:background-repeat(no-repeat不重复,repeat-x沿x轴重复,repeat-y沿y轴重复)
例:
li{
background-repeat:no-repeat;
}
背景图片定位:background-position(x轴偏移量 y轴偏移量 )
单位:1.像素px
2.百分百
3.可以为关键字(x轴left,right,center,y轴top,botton,middle)
例:
background-position:20px 30px;
背景:background(可以同时设置背景图片,背景颜色,背景定位,是否重复)
例:
background:blue url("../images/bg.png")20px 20px no-repeat;
背景图片尺寸:
background-size
(auto:自动
百分百:当使用百分百值时,不是相当于背景额尺寸大小来计算的,二是相
对于元素宽度来计算的
cover:整个背景图片放大填充了整个元素
contain:让背景图片保持本身宽高比例,将背景图片缩放到宽度或者
高度正好适应所定义背景的区域)
线性渐变:linerar-gradient(渐变方向,颜色1,颜色2,颜色3,颜色。。。。)
linerar-gradient(to left,red,blue,aqua,yellow)