大数据最全【CSS】CSS文本样式【CSS基础知识详解】(1)，大数据开发开发应该了解的Binder原理

于 2024-05-15 14:02:48 发布
阅读量1k 收藏 8
点赞数 30
文章标签： 大数据 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84166306/article/details/138906519
版权

img
img

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

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

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

| 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>

🌙行高

属性名：line-height

作用：控制文本行与行之间的距离

取值：

值描述
normal默认。设置合理的行间距。
number设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length设置固定的行间距。
%基于当前字体尺寸的百分比行间距。

例如：

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

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

 .a2 {
 line-height: 50%;
 }
 </style>
</head>

<body>
    <p class="a1">
        这一个段落的行高为16px，没错，就是这么多，我写这么多字就是为了有足够多的字来换行。
    </p>

    <p class="a2">
        这一个段落的行高为默认字体大小的%50，没错，就是这么多，我写这么多字就是为了有足够多的字来换行。
    </p>
</body>

</html>

🌙文本重写

属性名:unicode-bidi

作用:与 direction 属性一起使用，来设置或返回文本是否被重写，以便在同一文档中支持多种语言

语法:unicode-bidi: normal|embed|bidi-override;

取值：

取值效果
normal默认。不使用附加的嵌入层面
embed创建一个附加的嵌入层面
bidi-override设置该属性为它的默认值

例如：

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

<head>
    <meta charset="UTF-8">
    <title>花无缺</title>
    <style>
 p {
 direction: rtl;
 unicode-bidi: bidi-override;
 }
 </style>
</head>

<body>
    <p>文本方向改变了</p>
</body>

</html>

🌙空白处理

属性名：white-space

作用:指定元素内的空白怎样处理

取值：

取值效果
normal默认。空白会被浏览器忽略
pre空白会被浏览器保留。其行为方式类似 HTML 中的 < pre > 标签
nowrap文本不会换行，文本会在在同一行上继续，直到遇到 < br > 标签为止
pre-wrap保留空白符序列，但是正常地进行换行
pre-line合并空白符序列，但是保留换行符

例如：

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

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



![img](https://img-blog.csdnimg.cn/img_convert/dd6ac6448c3a41a2975010c41d202a97.png)
![img](https://img-blog.csdnimg.cn/img_convert/6d0e5b5daf92effc412d59454f68e5f8.png)

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

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**


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

签为止 |
| pre-wrap | 保留空白符序列，但是正常地进行换行 |
| pre-line | 合并空白符序列，但是保留换行符 |


例如：
花无缺

[外链图片转存中…(img-FJAxEMk4-1715752946419)]
[外链图片转存中…(img-99EGK2G8-1715752946420)]

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

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

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

2401_84166306
关注
【CSS】CSS文本样式【CSS基础知识详解】
2401_84164527的博客
04-27 920
2007年自编自导的文艺片《不能说的秘密》获得金马奖年度台湾杰出电影奖。周杰伦（Jay Chou），1979年1月18日出生于台湾省新北市，祖籍福建省泉州市永春县，中国台湾流行乐男歌手、音乐人、演员、导演、编剧，毕业于淡江中学。2001年发行的专辑《范特西》奠定其融合中西方音乐的风格。这一个段落的行高为16px，没错，就是这么多，我写这么多字就是为了有足够多的字来换行。| bidi-override | 设置该属性为它的默认值 || embed | 创建一个附加的嵌入层面 |与父元素字体的底端对齐。
CSS【立体文字和电子数字】样式数字大屏数字
qq_38687592的博客
06-16 1711
CSS中引入：
大数据可视化大屏实战项目（72）大数据可视化系统数据分析通用模版---HTML+CSS+JS【源码在文末】（可用于比赛项目或者作业参考中）
m0_63324772的博客
09-11 725
大数据可视化大屏实战项目（72）大数据可视化系统数据分析通用模版---HTML+CSS+JS【源码在文末】（可用于比赛项目或者作业参考中🐕🐕🐕）
大数据可视化大屏实战项目（66）公司大数据展示模版---HTML+CSS+JS【源码在文末】（可用于比赛项目或者作业参考中）
m0_63324772的博客
09-10 186
大数据可视化大屏实战项目（66）公司大数据展示模版---HTML+CSS+JS【源码在文末】（可用于比赛项目或者作业参考中🐕🐕🐕）
大数据WEB阶段（三）CSS
chou_out_man的博客
11-17 707
CSS一、概述 css： 层叠样式表 ， 可以用来美化html页面 。可以实现html代码和设置样式的css代码的分离 。增强了页面的显示能力。 二、在html中引入css样式的方式 内嵌式大多数便签都可以具有style属性 ， 可以通过style属性为当前标签设置样式 。 这种设置方式不推荐大量使用， 会造成页面结构的混乱 ， 不理与后期的维护及扩展 。 <div style="border
web前端面试题（必背面试题）
热门推荐
Z_Gleng的博客
05-25 3万+
自己总结的常见的面试题 总字数13万+ 大概有200+左右道题 会不定期更新
Android基础
05-03
### Android基础知识点详解 #### 一、Android与3G技术概览 - **3G技术定义**：3G，即第三代移动通信技术，是相对于第一代模拟制式手机（1G）和第二代数字手机（2G）而言的最新一代手机通信技术标准。3G技术不仅...
Android面试-基础知识
学无止境
06-03 976
Android四大组件：Activity、Service、BroadcastReceiver、ContentProvider
Android高级工程师普遍进阶难题：遇到瓶颈我们该如何去提升自己？哪个方向
m0_64604893的博客
12-17 187
Socket协议，Socket实现长连接 TCP和UDP协议 HTTP协议中GET和POST的具体实现 序列化和反序列化 线程池的实现原理 数据库基础知识：多表查询、索引、数据库事务 3、数据结构、算法 数据结构 栈和队列 数组和链表，自定义一个动态数组 Hash表，及Hash冲突的解决 二叉树 B+ B-树 基础排序算法：重点 快排、归并排序、堆排序（大根堆、小根堆） 快排的优化 二分查找与变种二分查找 哈夫曼树、红黑树 字符串操作，字符..
Android性能优化系列篇（五）：弱网优化
m0_64420071的博客
10-18 1647
汇总了一下众多大佬的性能优化文章，知识点，主要包含： UI优化/启动优化/崩溃优化/卡顿优化/安全性优化/弱网优化/APP深度优化等等等~ 本篇是第五篇：弱网优化
大数据可视化UI样例html Demo
10-29
大数据 big data 可视化UI样例html Demo，可提取样式、布局、控件等。希望能帮助各位UI或非UI工程师。
大数据可视化大屏实战项目（2）公司季度销售额度可视化展示—HTML+CSS+JS【源码在文末】（可用于比赛项目或者作业参考中）
m0_63324772的博客
09-04 307
大数据可视化大屏实战项目（2）公司季度销售额度可视化展示—HTML+CSS+JS【源码在文末】（可用于比赛项目或者作业参考中🐕🐕🐕）
通过CSS给最后一行的div设置一个统一的样式
郭宝的博客
06-05 1781
HTML代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; } .div-container {
BootStrap-CSS样式_布局组件_超大屏幕页面标题
LoveyourselfJiuhao的博客
12-27 904
超大屏幕（Jumbotron） 步骤如下： 1. 创建一个带有 class .jumbotron. 的容器 &lt;div&gt;。 2. 除了更大的 &lt;h1&gt;，字体粗细 font-weight 被减为 200px。 页面标题（page-header） 页中有多个标题且每个标题之间需要添加一定的间距时，页面标题这个功能就显得特别有用。如 需使用页面标题（Page Header）...
18款超看好纯css 标题栏
ranshakalove的博客
03-08 9006
18款超看好纯css 标题栏
CSS（9）网站标题优化
flower521528的博客
03-09 651
一、网站的标题 1.网站的表述 <meta name="description" content="这是一个好的网站"> 2.网站关键字，对网站友好 <meta name="description" conttent="关键字"> 3.标题图标：用ico文件，引入ico图片，两种方式 1.比特虫在线转换ico图片 2.直接在项目根目录放入ico图片，图片名称： fovicon.ico 3.加入引入ico的link链接，再加入图片，图片名称一定是 faicon.ico
大数据库可视化模版20：大数据通用模版大标题样式
最新发布
杭州.黄老师
11-01 1876
Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注大学生毕业设计教育和辅导。所有项目都配有从入门到精通的基础知识视频课程，免费项目配有对应开发文档、开题报告、任务书、PPT、论文模版等项目都录了发布和功能操作演示视频；项目的界面和功能都可以定制，包安装运行！！！
【大数据平台开发】【Web前端】003CSS样式
qq_44928822的博客
03-31 182
【Web前端】003CSS样式
用最短的CSS样式，勾勒大数据演示屏
weixin_34326179的博客
06-01 2227
前段时间撸了一个演示平台，输入任一手机号，可追踪其行迹，类似《人民的名义》追踪丁义珍的效果，很明显涉密了，因此特意克隆了一个，并把后端阉割了，目前查询号码写死为我的号码，数据替换为静态的： 演示地址(阉割后端) 本文github地址,持续更新...... 效果预览 ↓↓↓ 动画效果总览：GIF 加载需要稍等一下 ↓↓↓ 常用效果...
Android开发核心知识点详解
"Android开发核心知识点笔记V2020.01.02.pdf" 是一份全面涵盖Android开发关键领域的资料，主要包括七大板块：Java基础知识、Android基础与扩展、开源库源码分析、设计模式、Gradle、面试算法题。以下是对这些知识点...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值