CSS3的初级文本修饰我知道

本文介绍了CSS3中关于文本修饰的属性,包括text-decoration用于去除或设置下划线、上划线和中间线,以及vertical-align调整元素的垂直对齐方式。接着讲解了伪类的应用,如a标签的link、visited、hover和active状态。此外,还涵盖了列表样式的设置,如list-style-type、list-style-image和list-style-position。最后,讨论了背景样式的相关属性,如background-color、background-image、background-repeat、background-position和background-size。文章末尾提供了一个小练习,要求应用这些CSS知识来设计淘宝女装分类页面。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

文本修饰


text-decoration:none;(underline下划线;overline上划线;line-through中间线)
一般是默认,但如果是a标签就会去掉下划线

垂直对齐
vertical-align:middle;(top=text-top、bottom=text-bottom、super


让图片后面的文字垂直对齐方式居中,向上、向下(跟图片边缘对齐)再往下一点点(比图片底线还低一点)

---------------------------------------------------------------------------------------------------------------------------------

伪类


标签:hover鼠标靠到p标签的时候显示样式
a:link未单击访问时超链接样式(没点击过的超链接初始状态
地址跳转了但是没有访问成功或者你的地址无效也就意味着永远不能访问,那么会一直显示link的样式
a:visited单击访问过的样式
会对href里面之前已经被访问过的网址生效
a:hover鼠标悬浮的时候显示
a:active 鼠标单击未释放的超链接样式
顺序:lingk-visited-hover-active 请按顺序设置哦~

---------------------------------------------------------------------------------------------------------------------------------

列表样式

 元素list-style-type:none; 无标记显示
circle空心圆(套第二个的话会自动空心)disc实心圆 square 实心正方形decimal有序数字
list-style-image:url(./)自定义列表图标
border:1px solid red
list-style-position:inside、outside不会把标记符号包裹在里面会出现在文字的外侧默认是outside
块元素没有设置宽度会自动撑满一行

---------------------------------------------------------------------------------------------------------------------------------
背景样式

 background-color背景颜色可以是英文可以是十六进制、transparent设置透明
background-image:url(./路径)
background-repeat:no-repeat 不平铺;repeat-x水平方向平铺;repeat-y垂直方向平铺默认repeat平铺

 border:1px solid red
background-position:Xpos Ypos、X% Y%、或者关键词left  right top center bttom 三种书写方式不能混搭,但是两个center可以省一个
也可以分开设置background-position-x:background-position-y:
元素左上角为坐标系原点

 颜色 图 位置 平铺可以一句话写完,这就是复合元素(位置不能分开哦!)

background-size:100px 100px;前一个是宽后一个是高也可以用百分比表示,可以修改背景图大小。不能偷懒,只写一个值的话,背景图的另一个值就自动自适应元素了

——————————————————————————————————————————————————————————————————————————————————————

小练习

------------------------------------------------------------------------------

作业:淘宝女装分类页面 需求说明: 1、使用无序列表等 HTML 标签编辑页面。 2、女装各分类名称前的图片使用背景图片的方式实现,标题字体大小为18px,加粗显示。 3、分类内容字体大小为 12px,超链接文本字体颜色为黑色,无下划线,当鼠标移至超链接文本上时字体颜色为橙色(#F60),并且显示下划线。4、使用外部样式表创建页面样式。 5、页面中其他效果样式见下图。

写的不好。。但是能实现呀喵~

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值