【HTML】常用CSS属性

最新推荐文章于 2024-06-19 23:57:22 发布
最新推荐文章于 2024-06-19 23:57:22 发布
阅读量1.2k 收藏 17
点赞数 19
分类专栏： HTML 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39088168/article/details/137430148
版权

文章目录

前言

上一篇我们学习了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
    评论
专栏目录
CSS样式大全（网络收集整理）
02-08 1338
CSS样式大全（网络收集整理 字体属性：(font) 大小{font-size:x-large;}(特大)xx-small;(极小)一般中文用不到，只要用数值就可以，单位：PX、PD 样式{font-style:oblique;}(偏斜体)italic;(斜体)normal;(正常) 行高{line-height:nor...
CSS属性大全
热门推荐
代码改变生活
06-01 3万+
字体属性：(font) 大小 font-size:x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式 font-style:oblique;(偏斜体) italic;(斜体) normal;(正常) 行高 line-height:normal;(正常) 单位：PX、PD、EM 粗细 font-weight:bold;(粗体) li
css属性大全（css的所有属性）
01-19
包含css的所有属性包含css的所有属性包含css的所有属性
HTML+CSS基础知识点（part06）
最新发布
2201_75597173的博客
06-19 834
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。在CSS中，通过float属性来定义浮动，浮动的目的就是为了让多个块级元素同一行上显示。元素添加浮动后，浮动的元素脱标,虽然一行内显示,但是display属性为block在 CSS 中，定位是一种用于精确控制元素在文档中位置的机制。
Css所有属性
行者
12-19 601
CSS 的属性很多，有许多人都抱怨说要怎麼才能快速记忆 CSS 的属性呢 . 在这裡我就把 CSS 所有的属性列在一张小卡片上， 大家可以像背英语单词的小卡片一样， 用来记忆： CSS 速记 小纸片 ( 目前缺 ) ](yw2c;m e     字体属性： (font) *x3";%o     大小   font-size: x-large;( 特大
CSS所有属性集合
qq_68718978的博客
07-14 2423
css3的基本元素都在这儿啦！
css所有属性介绍
xcLeigh
12-02 3637
css所有属性介绍，里面包含了所有的css属性，CSS3 动画属性（Animation）， CSS 背景属性（Background） ，CSS 边框属性（Border 和 Outline），Box 属性，Color 属性 ，Content for Paged Media 属性，CSS 尺寸属性（Dimension），可伸缩框属性（Flexible Box）， CSS 字体属性（Font），内容生成（Generated Content）， Grid 属性，Hyperlink 属性，CSS 列表属性
HTML+CSS布局(常用css控制属性)小结
09-25
在这个小结中，我们将探讨一些常用的CSS控制属性，这些属性对于创建响应式和有组织的页面布局至关重要。 首先，CSS布局的基本属性包括`width`、`height`、`margin`和`padding`。在示例中，`#contner`元素的宽度设置...
css常用属性
06-11
下面我们将深入探讨在描述中提到的一些常用CSS属性。 字体属性： `font-size` 用于定义字体的大小，可以使用像素（PX）或其他相对单位如em、rem等。例如：`font-size: 16px;`。 `line-height` 设置行高，同样可以...
CSS常用属性大全
08-31
CSS是层叠样式表(英文全称：Cascading Style Sheets)的简称，简单来说，就是网页布局的样式元素，网页界面的视觉效果...目前，网页架构的标准版本是html5+CSS3，CSS的最新版也是CSS3，任何网页都需要遵循这个标准来设计
HTML+CSS常用代码
07-01
HTML+CSS 常用代码大全 HTML（HyperText Markup Language）是一种标记语言，用来创建网页。它是网页的结构和内容的基础。HTML 由一系列的元素组成，每个元素都有其特定的语义和用途。下面是 HTML 中一些常用的标签...
顶级经典常用的CSS属性收集整理
10-30
本文将深入探讨标题中提到的一些顶级经典常用的CSS属性，帮助网页爱好者提升网页设计的美观度和功能性。 1. 文本两端对齐： 使用`text-align: justify;`可以实现文本在段落中的两端对齐，`text-justify: inter-...
css属性大全
12-01 3371
在Dreamweaver4的CSS样式里包含了W3C规范定义的所有CSS1的属性，Dreamweaver4把这些属性分为Type（类型）、Background（背景）、Block（块）、Box（盒子）、Border（边框）、List（列表）、Positioning（定位）、Extensions（扩展）八个部分，下面我们分别详细讲解。 　　1.Type（类型） 　　Type面板主要是对文字的字体
CSS 属性大全
05-07 395
CSS 属性大全。
css属性列表 和 属性值含义
肖大宝产品之路
08-23 1354
css属性列表 属性名称字体属性（Font）font-familyfont-stylefont-variantfont-weightfont-size颜色和背景属性ColorBackground-colorBackground-imageBackground-repeatBackground-attachmentBackground-position文本属性Word-spacingLe
css display 常用那些属性
08-08
CSS的display属性常用的属性有以下几种： 1. none：表示元素不会被显示，空间不会占用。 2. inline：默认值，表示元素会显示为行内元素，和其他行内元素在同一行显示。同时也可以通过line-height, height和width属性来设置元素的高度和宽度。 3. block：表示元素会显示为块级元素，会独占一行。可以通过width, height, margin和padding属性来设置元素的尺寸和外边距。 4. inline-block：表示元素会显示为行内块级元素。和inline相比，可以设置元素的宽度、高度、外边距和内边距等。 5. flex：表示元素以弹性的方式布局，可以通过flex-direction, flex-wrap, justify-content和align-items等属性来实现灵活的布局。 6. grid：表示元素以网格的形式布局，可以通过grid-template-columns, grid-template-rows, grid-gap等属性来定义网格布局。 7. table：表示元素会以表格的形式进行布局，类似于HTML的table元素。 8. inline-table：表示元素会以行内表格的形式进行布局。 9. list-item：表示元素会以列表项的形式进行布局，通常和ul或ol元素配合使用。 以上是display属性常用的几种值，通过设置不同的display属性，可以调整元素的布局和显示方式，并实现不同的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

世人万千丶

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

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

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

打赏作者

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

抵扣说明：

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

余额充值