【HTML】常用CSS属性

前言

上一篇我们学习了CSS扩展选择器以及它的继承性,对于页面元素样式设置相信大家都不陌生了。

这一篇我们就来看看具体都有哪些样式可以设置?又该如何设置?

喜欢的【点赞】【关注】【收藏】

1、字体和文本属性

字体属性

CSS的字体属性用于定义字体类型、字号大小以及字体是否加粗等,常用属性如下:

属性名说明举例
font设置字体的所有样式属性font:bold 12px宋体
font-family定义字体类型font-family:宋体
font-size定义字体大小font- size:12px
font-weight定义字体大小font- weight:bold
color字体颜色color:red;(颜色取值可以为颜色的英文单词,也可以采用#00000F#FFFFF之间的取值)

示例:
在这里插入图片描述

文本属性

文本属性用于定义文本的外观,包括文本颜色、行高、对齐方式以及字符间距

属性名说明应用场景
line-height设置行高(即行间距),常用取值为25px、28px布局多行文本
text-align设置对齐方式,常用的取值为left、right以及center各种元素对齐
letter-spacing设置 字符间距,常用的取值为3px、8px加大字符间间隔
text-decoration设置文本修饰,常用的取值为underline (下划线)、none加下划线,中划线等

示例:
在这里插入图片描述

2、边距和填充

主要分为外边距和内边距,内边距又称为填充:

  • margin-外边距(边距):边框到其他元素的距离
  • padding-内边距(填充):内容和边框之间的距离

说明:margin和padding使用语法一样,只不过是把margin换成了padding,所以我们就以margin来说明,大家知晓一下即可


CSS3边距属性margin用于设置元素周围的边界宽度,主要包括上下左右4个边界的距离设置。填充属性padding也称为补白属性,用于设置边框和元素内容之间的间隔,同样包括上、下、左、右4个方向的值。
在这里插入图片描述

  • 仅设置一个值,则应用于所有的四个边距

    在这里插入图片描述

  • 设置两个值,表示上下,左右边距

    在这里插入图片描述

  • 设置三个值,表示上,左右,下边距

    在这里插入图片描述

  • 设置四个值,则按照上,右,下,左的顺序对应四个方向边距

    在这里插入图片描述

示例:以margin为主,padding跟margin使用一样,只不过是把margin换成了padding
在这里插入图片描述

3、border边框

CSS3常见的边框属性有border-style属性、border-width属性、border-color属性和复合属性border。

属性名说明示例
border-style设置边框的样式,取值: none 无边框、solid 实线以及dashed虚线等border-style:solid
border-width设置边框的宽度border-width:1px
border-color设置边框的颜色border-color:red
border复合属性,用于设置边框宽度、样式以及颜色border:1 px solid red

示例:
在这里插入图片描述

圆角边框border-radius

在css3.0中,又添加了一个新的属性border-radius,使用border-radius这个属性可以实现圆角边框的效果。border-radius属性通过设置圆角的半径实现圆角边框,其中半径的像素值越大,圆角边框的效果越明显。

示例:

在这里插入图片描述

4、列表属性

列表属性主要用于设置列表项的样式,包含list-style-type属性、list-style-image属性、list-style-position属性和 list-style属性。

属性名说明
list-style-type用于设定列表项的符号,取值: None (无)、Disc (实心圆)、Circle (空心圆)、Square (实心方块)。
list-style-image用于设定图像作为列表项目符号,其值为图像对应的url。
list-style-position用于设定项目符号在列表项的位置, 取值: inside、 outside (默认值)。
list-style复合属性,用于设置列表属性,其顺序为: list-style-type、list-style-position、list-style-image

示例:

在这里插入图片描述

好了,就到这里吧,大家抓紧时间去学习吧😄
后续内容持续更新中,创作不易,【点赞】【关注】【收藏】支持一下哦😘
祝各位看官万福金安😊


⭐️徒手摘星,爱而不得,世人万千,再难遇我。⭐️

  • 19
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

世人万千丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值