文本装饰:
text-decoration
<style>
a{text-decoration: none;}</style>
span{ text-decoration: underline;
}
<h1>
<span>我是span</span>
</h1>
<h1 >
<a href="http://www.baidu.com" style="text-decoration: none;">跳转到百度</a>
</h1>
对于一般的元素而言是默认值,定义的标准文本 没有下划线, a元素是默认就含有下划线
text-decoration:overline;设置文本的上划线
text-decoration: underline; 设置文本的下划线
text-decoration:line-through;设置文本的删除线
垂直对齐方式: vertical-align
<style>
img{vertical-align:middle;}</style>
<img src="./images/1.webp" alt="" width="120" height="120" class="x">可爱的猫
让图片后面的文字垂直对齐方式为居中、
vertical-align: top;让图片后面的文字垂直对齐方式为向上
vertical-align: bottom;让图片后面的文字垂直对齐方式为向下
vertical-align: super;使用super可以让文字的垂直对齐方式更加的靠下
超链接伪类
<style> a:link{
color:red;
}
a:visited{
color:green;}
a:hover{
color:blue;
a:active{
background:cyan;
}
<h1>
<a href="https://new.qq.com/omn/20220325/20220325A07SBL00123123.html">我是a标签,我们来学习伪类</a>
</h1>
a:link未单击访问时超链接样式,href属性里面的网络地址没有在你的浏览器访问过则会显示:link伪类的颜色,地址跳转了但是没有访问成功,或者你的地址无效,也就意味永远不能访问,那么就会一直显示:link的样式
a:visited单击访问后超链接样式,visited写的样式会对href里面之前已经被访问过的网址生效
a:hover鼠标悬浮其上的超链接样式
a:active鼠标单击未释放的超链接样式
▲伪类冒号前面不要加空格,设置伪类的顺序:a:link->a:visited->a:hover->a:active
列表样式
<style>
li { list-style: none;
list-style-image: url(./);
border:1px solid red;
list-style-position: inside;
} </style>
<ul>
<li>我是程序员1号</li>
<li>我是程序员2号</li>
<li>我是程序员3号</li>
<li>我是程序员4号</li>
<li>我是程序员5号</li>
</ul>
list-style-type: none;无标记符号
list-style-type:disc;实心圆,默认类型
list-style-type: circle;空心圆
list-style-type: square;实心正方形
list-style-type:decimal;数字
也可以使用自定义的小图片来作为标记符号,inside就是把标记符号包裹在里面,outside不会把标记符号包裹在里面,会出现在文字的外侧 默认采用outside
如果把 list-style: none;写在最下面则选用的图片符号或者其他的形状就不会显示,必须放在最上面或者直接不写
网页背景
<style>
div{
width: 400px;
height: 600px;
border:1px solid red;
background-color:red;
background-image:url(./images/pic1.png);
background-repeat: no-repeat;
background-position:X Y;
<div>
</div>
background-image:url(./images/pic1.png);图片默认会铺满整个div所有使用background-repeat: no-repeat;不平铺,即只显示一次
repeat-x:只沿水平方向平铺
repeat-y:只沿垂直方向平铺
默认使用background-repeat: repeat;沿水平和垂直两个方向平铺
background-position:X Y; X表示水平位置,Y表示垂直位置
水平方向的关键词: left、center、right
垂直方向的关键词:left、center、right
x轴的位置属性 和y轴的位置属性 也可以分开写: background-position-x: left; background-position-y: bottom;
两个方向的关键词都是center 可以合二为一的去写 直接写一个center
背景图片的大小
background-size: 100px 200px
background-size 两个值 第一个值表示背景图的宽度 第一个值表示背景图的高度,也可以设置成百分比
background-size: 100% auto;
background-size如果只写一个值 比如100% 那么表示的意思是背景图的宽度按照div宽度的100% 高度自动适应div 也就是auto 可以理解为等比例缩放