2024年大数据最新【CSS】CSS文本样式【CSS基础知识详解】，2024年最新大数据开发基础语言教程

最新推荐文章于 2024-07-23 20:07:39 发布
最新推荐文章于 2024-07-23 20:07:39 发布
阅读量664 收藏 8
点赞数 7
分类专栏： 程序员 文章标签： 大数据 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84573447/article/details/138824474
版权

img
img
img

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

🌙文本缩进

属性名：text-indent

取值：

  • 数字+px
  • 数字+em

例如：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>花无缺</title>
    <style>
 p {
 text-indent: 32px;
 }
 </style>
</head>

<body>
    <p>这是一句话，设置文本缩进32px，相当于两个汉字的距离</p>

    <span>这是另一句话，没有设置文本缩进</span>
</body>

</html>

🌙文本对齐

🌏水平对齐

🌸一般水平对齐

属性名：text-align

作用：用于设置文本的水平对齐方式

取值：

属性值效果
left文本左对齐
center文本居中对齐
right文本右对齐
justify文本两端对齐

注意：属性设置为 “justify” 后，将拉伸每一行，以使每一行具有相等的宽度

例如：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>花无缺</title>
    <style>
 .a1 {
 text-align: center;
 }

 .a2 {
 text-align: left;
 }

 .a3 {
 text-align: right;
 }

 .a4 {
 width: 100px;
 height: 90px;
 float: left;
 background-color: pink;
 text-align: justify;
 }

 .a5 {
 width: 100px;
 height: 90px;
 float: left;
 margin-left: 10px;
 background-color: skyblue;
 }
 </style>
</head>

<body>
    <p class="a1">文本水平居中对齐</p>

    <p class="a2">文本左对齐</p>

    <p class="a3">文本右对齐</p>

    <div class="a4">文本两端对齐，文本两端对齐，文本两端对齐</div>

    <div class="a5">文本默认对齐，文本默认对齐，文本默认对齐</div>
</body>

</html>

🌸最后一行的水平对齐

属性名：text-align-last

作用：规定如何对齐文本的最后一行

取值：

值描述
auto默认值。最后一行被调整，并向左对齐。
left最后一行向左对齐。
right最后一行向右对齐。
center最后一行居中对齐。
justify最后一行被调整为两端对齐。
start最后一行在行开头对齐（如果 text-direction 是从左到右，则向左对齐；如果 text-direction 是从右到左，则向右对齐）。
end最后一行在行末尾对齐（如果 text-direction 是从左到右，则向右对齐；如果 text-direction 是从右到左，则向左对齐）。
initial设置该属性为它的默认值。
inherit从父元素继承该属性。

例如：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>花无缺</title>
    <style>
 p {
 text-align-last: justify;
 }
 </style>
</head>

<body>
    <p>周杰伦（Jay Chou），1979年1月18日出生于台湾省新北市，祖籍福建省泉州市永春县，中国台湾流行乐男歌手、音乐人、演员、导演、编剧，毕业于淡江中学。
        2000年发行首张个人专辑《Jay》。2001年发行的专辑《范特西》奠定其融合中西方音乐的风格。2002年举行“The
        One”世界巡回演唱会。2003年成为美国《时代周刊》封面人物。2004年获得世界音乐大奖中国区最畅销艺人奖。2005年凭借动作片《头文字D》获得金马奖、金像奖最佳新人奖。2006年起连续三年获得世界音乐大奖中国区最畅销艺人奖。2007年自编自导的文艺片《不能说的秘密》获得金马奖年度台湾杰出电影奖
        。</p>
</body>

</html>

🌏垂直对齐

属性名：vertical-align

作用：设置元素的垂直对齐方式

取值：

值描述
baseline默认。元素放置在父元素的基线上。
sub垂直对齐文本的下标。
super垂直对齐文本的上标
top把元素的顶端与行中最高元素的顶端对齐
text-top把元素的顶端与父元素字体的顶端对齐
middle把此元素放置在父元素的中部。
bottom使元素及其后代元素的底部与整行的底部对齐。
text-bottom把元素的底端与父元素字体的底端对齐。
length将元素升高或降低指定的高度，可以是负数。
%使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
inherit规定应该从父元素继承 vertical-align 属性的值。

例如：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>花无缺</title>
    <style>
 .a1 {
 vertical-align: text-top;
 }

 .a2 {
 vertical-align: text-bottom;
 }
 </style>
</head>

<body>
    <p>把元素的顶端<img src="../../../../../../ChromeDownload/爱心.png" class="a1">与父元素字体的顶端对齐</p>
    <hr>
    <p>把元素的底端<img src="../../../../../../ChromeDownload/爱心.png" class="a2">与父元素字体的底端对齐。</p>
</body>

</html>

🌙文本修饰

属性名：text-decoration

取值：

属性值效果
underline下划线
line-through删除线
overline上划线
none无装饰线

例如：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>花无缺</title>
    <style>
 .a1 {
 text-decoration: underline;
 }

 .a2 {
 text-decoration: line-through;
 }

 .a3 {
 text-decoration: overline;
 }

 .a4 {
 text-decoration: none;
 }
 </style>
</head>

<body>
    <p class="a1">下划线效果</p>

    <p class="a2">删除线效果</p>

    <p class="a3">删除线效果</p>

    <p class="a4">无装饰线</p>

</body>

</html>

🌙文本转换

属性名：text-transform

作用：控制文本中的大小写字母

取值：

取值效果
capitalize文本中的每个单词以大写字母开头
uppercase定义仅有大写字母
lowercase定义无大写字母，仅有小写字母

例如：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>花无缺</title>
    <style>
 .a1 {
 text-transform: capitalize;
 }

 .a2 {
 text-transform: uppercase;
 }

 .a3 {
 text-transform: lowercase;
 }
 </style>
</head>

<body>
    <p class="a1">My name is huawuque.</p>
    <p class="a2">My name is huawuque.</p>
    <p class="a3">My name is huawuque.</p>
</body>

</html>

🌙文本方向

属性名：direction

取值：

取值效果
ltr默认，文本方向从左到右
rtl文本方向从右到左

如果文本方向设置为从右到左，则需要配合unicode-bidi: bidi-override;使用。

例如：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>花无缺</title>
    <style>
 .a1 {
 direction: ltr;
 }

 .a2 {
 direction: rtl;
 unicode-bidi: bidi-override;
 }
 </style>
</head>

<body>
    <p class="a1">文本方向从左到右</p>
    <p class="a2">文本方向从右到左</p>
</body>

</html>

🌙文字间距

属性名：letter-spacing/word-spacing

作用：增加或减少字符间的空白（字符间距）

取值：

取值效果
normal默认。规定字符间没有额外的空间
length定义字符间的固定空间（允许使用负值）

例如：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>花无缺</title>
    <style>
 .a1 {
 letter-spacing: 16px;
 }

 .a2 {
 word-spacing: 16px;
 }
 </style>
</head>

<body>
    <p class="a1">文本间距为16px，i love you</p>
    <p class="a1">文本间距为16px，i love you</p>
</body>

</html>

🌙文本阴影

属性名：text-shadow

作用：设置文本阴影效果

语法:text-shadow: h-shadow v-shadow blur color;

取值：

取值作用
h-shadow必须写，水平偏移量，允许负值
v-shadow必须写，垂直偏移量，允许负值
blur可选，模糊距离
color可选，阴影颜色

例如：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>花无缺</title>
    <style>
 p {
 text-shadow: 2px 2px 2px blue;
 }
 </style>
</head>

<body>
    <p>文本阴影效果</p>
</body>

</html>

img
img

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>花无缺</title>
    <style>
 p {
 text-shadow: 2px 2px 2px blue;
 }
 </style>
</head>

<body>
    <p>文本阴影效果</p>
</body>

</html>

[外链图片转存中…(img-sX4W9Fw8-1715614873492)]
[外链图片转存中…(img-p2HXFps4-1715614873493)]

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

2401_84573447
关注
  • 7
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+CSS零基础入门学习教程之类选择器详解基本使用
01-08
HTML和CSS是构建网页设计的基础，其中类选择器是CSS中一种强大的选择器类型，它允许我们更加精确地控制元素的样式。对于零基础的学习者来说，理解并掌握类选择器的基本使用至关重要。 1. 类选择器的基本使用 类选择...
学习CSS需要知道的CSS基础知识
09-25
在深入学习CSS的基础知识之前，首先要理解CSS（Cascading Style Sheets）的作用，它是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。通过CSS，我们可以控制网页的视觉呈现，包括字体、...
2024年你不应该错过的CSS新特性，2024年最新源码解析
m0_63174618的博客
04-16 682
编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！
【CSS】CSS入门笔记第二弹~_css 父元素
2401_84164503的博客
04-27 734
CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。
2024 年 10 个很实用的 CSS 新特性，你不一定知道！
前端开发博客
06-23 1146
CSS 既简单又复杂。刚开始学起来很容易，但 CSS 不断更新，设计方法也在变化，总有新的功能和特性出现来解决旧问题。这可真是个让人又爱又恨的家伙！最近几年，CSS 涌现出很多新特性，让网页设计变得更强大、更灵活。今天就来聊聊一些比较实用，并且已经得到广泛支持的新特性，帮助你提升网页设计的技能，做一个更牛的 web 设计师！aspect-ratio: 轻松控制元素比例aspect-ratio属性...
css新特性
m0_63540064的博客
05-23 278
Grid布局：Grid布局是CSS中最新的布局方式，它可以实现更复杂的布局效果，比如多列、多行等。Grid布局使用网格来定义布局和定位，使得页面布局更加灵活和易于控制。自定义属性：CSS变量是CSS中非常有用的新特性之一，它可以定义全局或局部的变量，并且可以在样式表中的任何位置调用这些变量，从而简化代码并提高可维护性。CSS网格线：CSS网格线是CSS中用于定义网格布局的新特性，可以通过定义行和列的数量以及起始和结束位置来实现各种灵活的布局效果，比如多列、多行等。
2022 年的 CSS 全览
热门推荐
前端开发博客
05-17 1万+
关注公众号前端开发博客，领27本电子书回复加群，自助秒进前端群2022年将成为 CSS 最伟大的一年。无论是在功能还是合作浏览器的功能发布方面，合作目标是实现 14 个功能。概述本文是在 Google IO 2022上发表的演讲的文字形式。这里不会对每个功能进行深入的讲解，而是对每个功能进行简要概述，提供广度而不是深度。下面是这些 CSS 功能的概览：浏览器兼容性将这么...
这么香的技术还不快点学起来英文，详解16个CSS新特性（2024最新版-上，真牛皮
2301_82101171的博客
04-08 1016
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
HTML基础知识——css样式表,样式属性,格式与布局详解
09-28
HTML基础知识中的CSS样式表是构成网页外观的重要部分，它定义了网页内容的布局、设计和风格。CSS样式表通过设置元素的样式属性，来控制这些元素如何展示在浏览器中，包括文字、颜色、边框、背景以及页面的格式与布局...
19年录制HTML5CSS3视频教程前端开发教程flex布局项目实战
06-14
本套19年录制的视频教程将深入讲解HTML5、CSS3和Flex布局的基础知识，并结合项目实战，帮助学习者从理论到实践，掌握前端开发的核心技能。通过学习，你将能够独立创建符合现代标准的网页，适应移动设备和平板电脑等...
详解16个CSS新特性（2024最新版-下），面试高频题目
03-31 597
技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】a {&:hover {自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。
css3新语法,CSS3 新特性
weixin_34002071的博客
08-03 140
transition - 过渡通过过渡transition，可以实现简单的动画交互效果。// 语法transition: property duration timing-function delay;复制代码属性值和描述实例-过渡从初始状态过渡到终止状态时速度由快到慢，运动时间2s，1s后开始执行。div{width:80px;height:80px;background:rgb(18, 18...
css3新语法,CSS3新特性
weixin_42512483的博客
08-03 317
2.过渡 transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)复制代码3.动画 animation：动画名称，一个周期花费时间，运动曲线(默认ease)，动画延迟(默认0)，播放次数(默认1)，是否反向播放动画(默认normal)，是否暂停动画(默认running)复制代码4.形状转换 transform:适用于2D或3D转换的元素rotate(30...
CSS3新增的语法（二）
mwm2378的博客
03-31 851
CSS3新增的语法（二）
2024年Web前端最全【经验分享】显示文件扩展名，一个三非渣本的前端校招秋招之路
2401_84438654的博客
05-04 371
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】前端面试题汇总JavaScript前端资料汇总如何在.java文件和记事本之间通过改扩展名快速切换呢？首先打开此电脑（我的电脑）找到左上角的这个东西。
都2024年了你还没有开始探索 CSS 属性 mask 吗？
最新发布
fans_x的博客
07-23 856
打开控制台其实我们可以看到这里是在img这里主要使用了mask这个属性：在我们去掉这个mask属性以后，会发现轮播图会有一个白色的背景，这更加让我确定了这个mask属性就是实现这个样式的关键点。所以，接下来让我们来探究一下这个mask到底是何方神圣，居然能完成这样的样式。我们先来看看MDN对maskmask允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。这个解释肯定让小伙伴们糊里糊涂的，简单来说就是遮罩图片中不透明的部分会和原图片合在一起。拿上面天谕群星计划。
Web(六)CSS3语法-CSS样式规则
m0_63324772的博客
11-28 546
标签作用，标签中通过style属性为文本添加样式，添加顺序为： （1）字体设置为楷体；2.设置背景图像的大小，使其保持纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。3.外部样式文件设置的样式可通过点击编辑器窗口左上角的“代码文件”查看。3.上述样式设置顺序： （1）设置背景图 （2）设置背景图的大小。1.按照要求的效果在标签中运用CSS样式，编辑唐诗“静夜思”1.为网页设置背景图，图像的url地址为。（2）文本水平居中对齐；（2）文本水平居中对齐。（1）字体设置为楷体；（3）行间距设置为2。
CSS样式，2024年最新web前端开发规范
m0_60452141的博客
04-10 464
由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**[外链图片转存中…(img-NrpqRFnu-1712715710980)]
2024年HarmonyOS鸿蒙最新CSS基础知识（复合选择器、标签模式、背景）_css规则复合内容，2024年最新面试时过往经历怎么说
2401_84871792的博客
05-14 646
标签以什么方式进行显示，比如div自己占一行， span一行多个作用网页标签非常多不同地方用不同类型的标签以便更好的完成网页分类。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值