HTML文本标签和span标签和背景图片

时间:2022-12-15 14:03:33
span:为了突出没写文字

字体样式:

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)