文本修饰和网页背景,超伪类链接

235 阅读2分钟

一。文本修饰

①。text-decoration: none对于一般的元素而言是默认值,定义的标准文本 没有下划线, a元素是默认就含有下划线

1.png

②。text-decoration:overline(设置文本上划线)

2.png

③。text-decoration: underline(设置文本下划线)

3.png

④。text-decoration:line-through(设置文本的删除线)

4.png

二。垂直对齐方式

①。vertical-align:middle(让图片后面的文字垂直对齐方式为居中)

11.png

②。vertical-align: top(让图片后面的文字垂直对齐方式为向上,或者使用text-top也开始实现对齐方式为向上 和图片保持向上对齐)

22.png

③。vertical-align: bottom(让图片后面的文字垂直对齐方式为向下,或者使用text-bottom也开始实现对齐方式为向下 和图片保持向下对齐)

33.png

④。vertical-align: super(使用super可以让文字的垂直对齐方式更加的靠下)

三。超链接伪类

①。p:hover{background: red;}(鼠标摸上p标签的时候显示红色的背景 离开样式就会消失)

②。a:hover(鼠标悬浮其上的超链接样式)

cursor: pointer(手的图标) cursor: all-scroll(十字箭头图标)

③。a:active(鼠标单击未释放的超链接样式)

④。a:link(未单击访问时超链接样式)

⑤。a:visited(单击访问后超链接样式,visited写的样式会对href里面之前已经被访问过的网址生效)

设置伪类的顺序:a:link->a:visited->a:hover->a:active

四。列表样式

①。list-style-type: none(无标记符号)

123.png

②。list-style-type:disc(实心圆,默认类型)

③。list-style-type: circle(空心圆)

④。list-style-type: square(实心正方形)

666.png ⑤。list-style-type:decimal(数字)

⑥。list-style-image: url(也可以使用自定义的小图片来作为标记符号)

⑦。list-style-position: inside(inside就是把标记符号包裹在里面)

777.png

⑧。list-style-position: outside(outside不会把标记符号包裹在里面,会出现在文字的外侧 默认采用outside)

23.png

⑨。list-style: none(一般开发去掉标记符号 可以简写为)

五。网页背景

①。background-image:url(图片默认铺满整个边框)

②。background-repeat: no-repeat(不平铺,只显示一个)

③。background-repeat: repeat-x(沿水平方向平铺)

④。background-repeat: repeat-y(沿垂直方向平铺)

⑤。(background-repeat: repeat(默认使用repeat:沿水平和垂直两个方向平铺)

⑥。background-position:X Y(div的左上角是 0 0点 向下x的值会变大 向右y的值会变大,两个值都是一样 不可以合二为一的写法 只能分开写,两个方向的关键词都是center 可以合二为一的去写 直接写一个center)

⑦。background-size(两个值 第一个值表示背景图的宽度 第一个值表示背景图的高度,也可以设置成百分比,background-size如果只写一个值 比如100% 那么表示的意思是背景图的宽度按照div宽度的100% 高度自动适应div 也就是auto 可以理解为等比例缩放)