HTML文本标签和span标签和背景图片
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML文本标签和span标签和背景图片相关的知识，希望对你有一定的参考价值。
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
例：
ullist-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）
以上是关于HTML文本标签和span标签和背景图片的主要内容，如果未能解决你的问题，请参考以下文章