【前端】CSS基础（4）

文章目录

前言
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：右对齐。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>靠左</h1>
    <h2>居中</h2>
    <h3>靠右</h3>
</body>
</html>

浏览器显示如下：
在这里插入图片描述

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

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            text-align: left;
        }
        h2 {
            text-align: center;
        }
        h3 {
            text-align: right;
        }
    </style>
</head>
<body>
    <h1>靠左</h1>
    <h2>居中</h2>
    <h3>靠右</h3>
</body>
</html>

浏览器显示如下：
在这里插入图片描述

1.1.2 文本装饰

text-decoration: [值];

常用取值：

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

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>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?</p>
</body>
</html>

浏览器显示如下：
在这里插入图片描述

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

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <p>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?</p>
</body>
</html>

浏览器显示如下：
在这里插入图片描述

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

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <p>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?</p>
</body>
</html>

浏览器显示如下：
在这里插入图片描述

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

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            text-decoration: overline;
        }
    </style>
</head>
<body>
    <p>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?</p>
</body>
</html>

浏览器显示如下：
在这里插入图片描述
还记得我们在上一篇博客中说过去掉超链接文字的下划线吗？我们就可以利用这里的知识来实现。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="#">不跳转</a>
</body>
</html>

浏览器显示如下：
在这里插入图片描述

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

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <a href="#">不跳转</a>
</body>
</html>

浏览器显示如下：
在这里插入图片描述

1.1.3 文本缩进

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

text-indent: [值];

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

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>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?</p>
</body>
</html>

浏览器显示如下：
在这里插入图片描述

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

第一种：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            text-indent: 20px;
        }
    </style>
</head>
<body>
    <p>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?</p>
</body>
</html>

浏览器显示如下：
在这里插入图片描述
第二种方式：
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p>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?</p>
</body>
</html>

浏览器显示如下：
在这里插入图片描述

1.1.5 行高

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

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

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

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

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>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?</p>
</body>
</html>

浏览器显示如下：
在这里插入图片描述

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

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
           line-height: 200px;
        }
    </style>
</head>
<body>
    <p>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?</p>
</body>
</html>

浏览器显示如下：
在这里插入图片描述

【前端】CSS基础（4）

文章目录

前言

1、CSS常用属性

1.1 文本属性

1.1.1 文本对齐

1.1.2 文本装饰

1.1.3 文本缩进

1.1.5 行高

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

前端提高篇（102）：jQuery高级方法callbacks、deferred

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

JQuery中的load()、$

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

文本，wangEditor5展示HTML无样式，wangEditor5如何看源码，Ctrl U看CSS文件，代码高亮，Prism.js可以实现，解决方法，参考网页源代码的写法

【简单html静态网页代码】制作一个简单HTML宠物网页（HTML CSS）

【html】新建一个html并且在浏览器运行

前端哥

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

前端提高篇（102）：jQuery高级方法callbacks、deferred

解决npm install 报错 “npm err code 1“

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

JQuery中的load()、$

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000