【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 |

示例:


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


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

相关推荐
檀越剑指大厂9 分钟前
【Python系列】异步 Web 服务器
服务器·前端·python
我是Superman丶11 分钟前
【前端】js vue 屏蔽BackSpace键删除键导致页面后退的方法
开发语言·前端·javascript
Hello Dam12 分钟前
基于 Spring Boot 实现图片的服务器本地存储及前端回显
服务器·前端·spring boot
小仓桑14 分钟前
利用 Vue 组合式 API 与 requestAnimationFrame 优化大量元素渲染
前端·javascript·vue.js
Hacker_xingchen14 分钟前
Web 学习笔记 - 网络安全
前端·笔记·学习
天海奈奈15 分钟前
前端应用界面的展示与优化(记录)
前端
多多*36 分钟前
后端并发编程操作简述 Java高并发程序设计 六类并发容器 七种线程池 四种阻塞队列
java·开发语言·前端·数据结构·算法·状态模式
mubeibeinv1 小时前
列表代码思路
前端
过期的H2O21 小时前
【H2O2|全栈】JS进阶知识(十)ES6(6)
开发语言·前端·javascript·ecmascript·es6
White graces1 小时前
Spring MVC练习(前后端分离开发实例)
java·开发语言·前端·后端·spring·java-ee·mvc