【HTML】常用CSS属性

news2024/11/20 23:31:31

前言

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

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

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

字体属性

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	加下划线，中划线等

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

主要分为外边距和内边距，内边距又称为填充：

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

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

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

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属性通过设置圆角的半径实现圆角边框，其中半径的像素值越大，圆角边框的效果越明显。

示例：

在这里插入图片描述

列表属性主要用于设置列表项的样式，包含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

示例：

在这里插入图片描述