【前端】CSS基础（4）

码农世界 2024-05-24 前端 69 次浏览 0个评论

文章目录

前言
1、CSS常用属性

1.1 文本属性

1.1.1 文本对齐
1.1.2 文本装饰
1.1.3 文本缩进

1.1.5 行高

前言

这篇博客仅仅是对CSS的基本结构进行了一些说明，关于CSS的更多讲解以及HTML、Javascript部分的讲解可以关注一下下面的专栏，会持续更新的。
链接： Web前端学习专栏
下面我对这个专栏的内容进行几点说明：
1. 适合每一个前端0基础的小伙伴学习。
2. 对常用标签以及常用属性进行了详细讲解。
3. 最后有综合案例实现，手把手带大家实现每一个综合案例。
4. 可以把专栏当作查询资料，前端的知识忘记了的话可以根据博客的目录找到相对应的内容进行复习。
首先，提示一下大家，如果是在手机端看这篇博客的小伙伴，请移步电脑端学习哈！在电脑上会更好看一些！如果能够跟着在电脑上进行代码的实现就会更好了！
其次，欢迎大家来到前端的学习，因为我们可以很直观的看见代码的效果，所以我觉得前端的学习其实是很有意思的。这篇博客，将帮助您从零开始学习前端。

在这个学习过程中，将遇到挑战和困难，但请相信，每一次的努力和坚持都将化为成长的动力。让我们携手共进，一起探索Web前端的无限可能！

1、CSS常用属性

1.1 文本属性

1.1.1 文本对齐

控制文字水平方向的对齐。
不仅能控制文本对齐，也能控制图片等元素居中或者靠右。

text-align: [值];

center：居中对齐。
left: 左对齐。
right：右对齐。

代码：




    
    
    Document


    靠左
    居中
    靠右

浏览器显示如下：

现在我们有一个要求：让靠左的文字处于页面左方；居中的文字处于页面中间；靠右的文字处于页面右方。

代码：




    
    
    Document
    


    靠左
    居中
    靠右

浏览器显示如下：

1.1.2 文本装饰

text-decoration: [值];

常用取值：

underline 下划线（常用）。
none 啥都没有，可以给a标签去掉下划线。
overline上划线（不常用）。
line-through 删除线（不常用）。

代码：

Document

Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam enim obcaecati a nobis error cupiditate nam voluptate velit deserunt quibusdam accusantium iste eligendi eius porro dolore, excepturi, aut quia itaque?Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam enim obcaecati a nobis error cupiditate nam voluptate velit deserunt quibusdam accusantium iste eligendi eius porro dolore, excepturi, aut quia itaque?Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam enim obcaecati a nobis error cupiditate nam voluptate velit deserunt quibusdam accusantium iste eligendi eius porro dolore, excepturi, aut quia itaque?Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam enim obcaecati a nobis error cupiditate nam voluptate velit deserunt quibusdam accusantium iste eligendi eius porro dolore, excepturi, aut quia itaque?Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam enim obcaecati a nobis error cupiditate nam voluptate velit deserunt quibusdam accusantium iste eligendi eius porro dolore, excepturi, aut quia itaque?

浏览器显示如下：

要求：给文本文字加上下划线。

代码：

Document

浏览器显示如下：

要求：给文本文字加上中划线。

代码：

Document

浏览器显示如下：

要求：给文本文字加上上划线。

代码：

Document

浏览器显示如下：

还记得我们在上一篇博客中说过去掉超链接文字的下划线吗？我们就可以利用这里的知识来实现。

代码：




    
    
    Document


    不跳转

浏览器显示如下：

这是原来的展示效果，下面我们来修改一下。

代码：




    
    
    Document
    


    不跳转

浏览器显示如下：

1.1.3 文本缩进

控制段落的首行缩进（）其他行不影响。

text-indent: [值];

1.单位可以使用px或者em.
2. 使用em作为单位更好，1个em就是当前元素的文字大小。
3. 缩进可以是负的，表示往左缩进（会导致文字溢出去）。

代码：

Document

浏览器显示如下：

要求：文本首行缩进20px。

第一种：

代码：

Document

浏览器显示如下：

第二种方式：

代码：

Document

浏览器显示如下：

1.1.5 行高

行高指的是上下文本行之间的基线距离。

HTML中展示文字涉及到这几个基准线：

绿色的是顶线。
蓝色的是中线。
红色的是基线。
紫色的是底线。
内容区：即底线和顶线包裹的区域。
基线之间的距离=顶线间的距离=中间线之间的距离。

**注意：**行高= 上边距 + 下边距 + 字体大小

代码：

Document

浏览器显示如下：

我们接下来设置一下行高，使行与行之间的距离变得更大些。

代码：

Document

浏览器显示如下：

转载请注明来自码农世界，本文标题：《【前端】CSS基础（4）》

码农世界 37815篇文章站点微博

每一天，每一秒，你所做的决定都会改变你的人生！

发表评论取消回复

评论列表（暂无评论，69人围观）参与讨论

码农世界管理员

【前端】CSS基础（4）

文章目录

前言

1、CSS常用属性

1.1 文本属性

1.1.1 文本对齐

1.1.2 文本装饰

1.1.3 文本缩进

1.1.5 行高

发表评论取消回复

还没有评论，来说两句吧...

文章目录

码农世界管理员

【前端】CSS基础（4）

文章目录

前言

1、CSS常用属性

1.1 文本属性

1.1.1 文本对齐

靠左

居中

靠右

靠左

居中

靠右

1.1.2 文本装饰

1.1.3 文本缩进

1.1.5 行高

Visual Studio 连接 MySQL 数据库 实现数据库的读写（C++）

[工业自动化-1]：PLC架构与工作原理

网络编程（六）TCP并发服务器

Vue3、Element Plus使用v-for循环el-form表单进行校验

Ceph: vdbench 测试ceph存储rbd块设备

linux如何部署前端项目和安装nginx

Windows OpenVPN的安装之服务器自动启动连接

服务器数据恢复—KVM虚拟机被误删除如何恢复虚拟磁盘文件？

发表评论取消回复

还没有评论，来说两句吧...

文章目录

Visual Studio 连接 MySQL 数据库实现数据库的读写（C++）