1.文本修饰:text-decoration:none、line-through、underline、overline;
text-decoration:none;
注:none对于一般的元素而言是默认值,定义的标准文本没有下划线,且a元素是默认就含有下划线
text-decoration:line-through;
注:line-through设置文本的删除线
text-decoration:overline;
注:overline设置文本的上划线
text-decoration:underline;
注:underline设置文本的下划线
2.垂直对齐方式:vertical-align: middle; top;text-bottom;super;
vertical-align: middle; 让图片后面文字垂直对齐方式居中
vertical-align: top; 让图片后面文字垂直对齐方式顶部
vertical-align: text-bottom; 让图片后面文字垂直对齐方式图片底部
vertical-align: super; 可以图片使文字垂直对齐方式更加向下
3、超链接伪类样式:设置伪类的顺序:a:link->a:visited->a:hover->a:active
a:link{
color: rgb(38, 141, 189);
}
a:visited{
color: darkolivegreen;
}
a:hover{
background: cornflowerblue;
width: 100px;
}
a:active{
color: brown;
}
注:href属性里面的网络地址没有在你的浏览器访问过则会显示:link伪类的颜色,地址跳转了但是没有访问成功,或者你的地址无效,也就意味永远不能访问,那么就会一直显示:link的样式
释 :link表示未单击访问时超链接样式;
:visited表示单击访问后超链接样式
:hover表示鼠标悬浮p标签时有background样式,离开就没有样式显示
:active表示单击还没有跳转访问超链接时样式
背记口诀:LVHA男朋友给你买了一个LV然后你就HA大笑了
4.列表样式:list-style-type:none、disc、circle、square、decimal
none无标记符号
list-style-type: none;
disc实心圆默认类型
list-style-type: disc;
circle空心圆
list-style-type: circle;
square实心正方形
list-style-type: square;
decimal数字
list-style-type: decimal;
也可以使用自定义图标图片作标记符号
例如:
list-style-position: inside;
inside就是把标记符号/图片包裹在border里面
outside不把标记符号/图片包裹在border里面,会出现在文字的外侧,默认采用outside,li是块元素没有宽度会白动撑满一行
5.网页背景、背景定位
背景图片/颜色 ------------------------------------------------------------------------------------------
背景颜色:具体颜色英文、十六进制、也可以写rgba颜色rgba(35,120,147,.5)、rgb */
.5表示透明色
background-color: rgba(35,120,147,.5); */
background-color: beige; */
transparent透明色 */
background-color: transparent; */
背景图像*/
图片默认会铺满整个div */
background-image: url(./img/pic1\ \(1\).png); */
图片样式 ---------------------------------------------------------------------------------
不平铺,即只显示一次*/
background-repeat: no-repeat; */
repeat-x:只沿水平方向平铺,铺满一行*/
background-repeat: repeat-x; */
repeat-y:只沿垂直方向平铺,铺满一列*/
background-repeat: repeat-y; */
默认使用repeat:沿水平和垂直两个方向平铺,等于铺面整个div*/
background-repeat: repeat; */
图片定位------------------------------------------------------------------------------
图片定位background-position:
background-position:x y,
x表示比原来位置x轴方向的Npx位置 (水平)
y表示比原来位置y轴方向的Npx位置 (垂直)*
background-position: 260px 10px;
百分比位置
background-position: 30% 30%;
水平方向关键词:left、 center. right
垂直防线关键词:top.center. bottom
background-position: left top;
两个方向的关键词都是center可以合二为一的去写直接写一个center
background-position: center;
x轴的位置属性和y轴的位置属性也可以分开写
background-position-x: center;
background-position-y: top;
★背景图和背景颜色可以共存的
background: ;是复合属性
除了×轴和y轴的其他的顺序都可以被改变
background: antiquewhite url(./img/pic1\ \(1\).png) center top no-repeat;
css3之前图片的大小是靠美工来切图的现在css3有个属性可以修改背景图的大小
background-size: Npx Mpx;
N:宽,M:高,也可以使用百分比
background: url(./img/pic1\ \(1\).png) no-repeat;
background-size: 50px 50px;
background-size如果只写一个值比如background-size: 100%;
那么表示的意思是背景图的宽度,按照div宽度的100%高度自动适应div
也就是auto:等比例缩放
/* */
background-size: 50% auto;
background-size: 100% 100%;
div:hover{
/* 点击光标为十字 */
cursor: all-scroll;
/* 点击光标为手 */
/* cursor: pointer; */
}