0
点赞
收藏
分享

微信扫一扫

文本修饰、超链接伪类、列表样式、网页背景定位

蓝哆啦呀 2022-03-30 阅读 50
html

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; */

        }

举报

相关推荐

0 条评论