0
点赞
收藏
分享

微信扫一扫

文本修饰、垂直对齐方式、伪类选择器、列表样式

phpworkerman 2022-03-27 阅读 100
css3vscode

1.文本修饰

1.1.对于一般的元素而言是默认值,定义的标准文本 没有下划线

1.2. a元素是默认就含有下划线

a{

text-decoration: none;

}(该语法可去除a元素的下划线)

1.3.设置文本的上划线

a{

text-decoration:overline;

}

1.4设置文本的删除线

a{

text-decoration:line-through;

}

1.5设置文本的下划线

a{

text-decoration: underline;

}

1.6内部选择器的方式去除a元素的下划线

 <a href="http://www.baidu.com" style="text-decoration: none;">跳转到百度</a>

2.垂直对齐方式

2.1让图片后面的文字垂直对齐方式为居中 

img{

vertical-align:middle;

}

2.2.让图片后面的文字垂直对齐方式为向上

或者使用text-top也开始实现对齐方式为向上 和图片保持向上对齐

img{

vertical-align: top;

}

2.3让图片后面的文字垂直对齐方式为向下

或者使用text-bottom也开始实现对齐方式为向下 和图片保持向下对齐

img{

vertical-align: bottom;

}

2.4.使用super可以让文字的垂直对齐方式更加的靠下

img{

vertical-align: super

}

3.伪类选择器

伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。

伪类选择器书写最大的特点是用冒号(:)表示,比如 :hover 、 :first-child 。

3.1鼠标摸上p标签的时候显示红色的背景 离开样式就会消失

p:hover{

          background:red;

        } 

3.2.

a:link{

            color:red;

        }

  • 未单击访问时超链接样式
  • href属性里面的网络地址没有在你的浏览器访问过则会显示:link伪类的颜色
  • 地址跳转了但是没有访问成功,或者你的地址无效,也就意味永远不能访问,那么就会一直显示:link的样式

3.3

    a:visited{

            color:green;

        }

  • 单击访问后超链接样式 */
  • visited写的样式会对href里面之前已经被访问过的网址生效
  • ▲伪类冒号前面不要加空格

  3.4

a:hover{

            color:blue

        }

鼠标悬浮其上的超链接样式

3.5

a:active{

            background:cyan;

        }

鼠标单击未释放的超链接样式

我给女朋友买了一个LV 然后她就笑HA了

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

4.列表样式

去除了无序列表的小黑点

list-style-type: none

list-style-type:disc实心圆(默认)

list-style-type:cirle空心圆

list-style-type:square实心正方形

list-style-type:decimal  数字序列

list-style-image:url(./pic1\ \(1\).png);

            border:1px solid red;

list-style-position: inside ;inside就是把标记符号放在里面,outside就是标记符号在外侧,默认采用outsidelist-style-position:outside

 li是块元素没有宽度会自动撑满一行

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

5.背景属性

通过 CSS 背景属性,可以给页面元素添加背景样式,包括背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定、背景图片缩放等。

1.1 背景颜色

background-color 属性定义了元素的背景颜色。

background:red;

一般情况下元素背景颜色默认值是 transparent(透明),我们也可以手动指定背景颜色为透明色。

background-color: transparent;

背景颜色 ,一样可以使用三种方式——分别为具体的英文颜色/十六进制/rgb形式*

具体的英文颜色 red yellow 也可以写十六进制颜色 #cccccc简写为#ccc

也可以写rgb颜色 例如rgb(35,120,147)

也可以写rgba颜色rgba(35,120,147,.5)

 background-color: rgb(35,120,147,.5);

1.2 背景图片

background-image 属性表示元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景) 

图片默认会铺满整个div

background-image:url(./images/pic1.png);

1.3 背景平铺

 background-repeat 属性表示在 HTML 页面上对背景图像进行平铺。

  • 不平铺,即只显示一次
  • background-repeat: no-repeat;
  • repeat-x:只沿水平方向平铺
  • background-repeat: repeat-x;
  • repeat-y:只沿垂直方向平铺
  • background-repeat: repeat-y;

1.4 背景图片位置 

background-position 属性可以改变图片在背景中的位置

① background-position: x y;中的x表示水平位置,y表示垂直位置,   默认为x和y均为0;越向右向下,x和y的值越大

②如果只指定一个数值,那该数值一定是 x 坐标,另一个默认垂直居中 。

③可以使用百分比表示背景图片的位置,  相对于盒子的宽度高度来说的,比如这里的30%指的就是这个背景图片所处盒子的30%。

④可以使用方位词表示背景的位置 ,如: right、left、center、top、bottom ;

⑤如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐;

⑥x轴的位置属性和 y轴的位置属性 也可以分开写。 

1.5 背景图像固定(背景附着) 

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。 

①属性值scroll表示背景图像是随对象内容滚动的;

②属性值fixed表示背景图像固定

1.6 背景图像缩放

background-size 属性k可以设置背景图像的大小。 这个属性是CSS3特有的,之前的版本不具有.

①属性值为: 长度|百分比|cover|contain;

②属性值设置成百分比时  这个百分比是相对于盒子而言的,比如background-size: 60%   60%;则表示这个背景图片占这个盒子宽度的60%,高度的60%;

③若background-size只指定一个精确值,那么这个值指的是宽度,高度省略了,则表示为等比例缩放;比如background-size: 60%; 其实等价于 background-size: 60% auto;

④属性值cover,表示把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,实行的是等比例缩放,可能有部分背景图片显示不全

⑤属性值contain, 表示把当宽度或高度,有一者铺满盒子时就不再进行拉伸了,实行的是等比例缩放,可能有部分空白区域。
 

举报

相关推荐

0 条评论