前端学习笔记之——设置文本样式

最新推荐文章于 2023-08-03 17:58:05 发布
最新推荐文章于 2023-08-03 17:58:05 发布
阅读量641 收藏
点赞数
分类专栏： 前端 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36879493/article/details/118305744
版权

设置文本样式

1、应用基本文本样式

1.1、对齐文本

有好几个属性可以用来设计文本内容的对齐方式。

属性说明值
text-align指定文本块的对齐方式start
end
left
right
center
justify
text-justify如果 text-justify 属性使用了 justify 值，则该值会指定对齐问文本的规则

text-align 属性相当简单，不过，需要注意的一点是：可以将文本对齐到显式命名的某个边界（使用 left 或者 right 值），或者对齐到语言本来使用的边界（使用 start 和 end 值）。在处理从右到左的语言时，这是一个非常重要的区别。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            #fruittext {
                width: 400px;
                margin: 5px;
                padding: 5px;
                border: medium double black;
                background-color: lightgrey;
            }            
        </style>
    </head>
    <body>
        <p id="fruittext">
            There are lots of different kinds of fruit - there are over 500
            varieties of banana alone. By the time we add the countless types of
            apples, oranges, and other well-known fruit, we are faced with
            thousands of choices.
            One of the most interesting aspects of fruit is the
            variety available in each country. I live near London, in an area which is
            known for its apples.
        </p>
        <p>        
            <button>Start</button>
            <button>End</button>
            <button>Left</button>
            <button>Right</button>
            <button>Justify</button>
            <button>Center</button>
        </p>
        <script>
            var buttons = document.getElementsByTagName("BUTTON");
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].onclick = function(e) {
                    document.getElementById("fruittext").style.textAlign =
                        e.target.innerHTML;
                };
            }
        </script>
    </body>
</html>

在这里插入图片描述

如果使用 justify 值，可以使用 text-justify 属性指定文本添加空白的方式。

值说明
auto浏览器选择对齐方式，这是最简单的方法，不过，不同浏览器之间的呈现方式会有微小差别
none禁用文本对齐
inter-word空白分布在单词之间，适用于英语等词间有空的语言
inter-ideograph空白分布在单词、表意字之间，且文本两端对齐，适用于汉语、日文哈韩文等语言
inter-cluter空白分布在单词、字形集的边界，适用于泰文等无词间空格的语言
distribute空白分布在单词、字形集的边界，但连续文本或者草体除外
kashida通过拉长选定字符调整对齐方式

1.2、处理空白

空白在 HTML 文档中通常是被压缩或者直接忽略掉。这允许你将 HTML 文档的布局跟页面的外观分离。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            #fruittext {
                width: 400px;
                margin: 5px;
                padding: 5px;
                border: medium double black;
                background-color: lightgrey;
            }
        </style>
    </head>
    <body>
        <p id="fruittext">
            There are lots of different kinds of fruit - there are over 500
            varieties
            
            of banana alone. By the time we add the countless types of
            apples, oranges, and other well-known fruit, we are faced with
            thousands of choices.
            
            One     of the      most interesting aspects of fruit is the
            variety available   in each country. I live near London,
            
            in an area which is
            known for its apples.
            
        </p>
    </body>
</html>

上面代码中，文本包含了一些空格、制表符和换行符。浏览器遇到多个空格时，会将它们压缩为一个空格，而换行符等其他空白符则会直接被忽略。浏览器会自动处理文本换行，以便各行都能适应元素边界。

但有时候我们就想在 HTML 原文本中保留文本中的空白。这时，可以使用 whitespace 属性控制浏览器对空白字符的处理方式。

在这里插入图片描述

属性说明值
whitespace指定空白字符的处理方式参考下表
值说明
normal默认值，空白字符被压缩，文本自动换行
nowrap空白符被压缩，文本行不换行
pre空白符被保留，文本只在遇到换行符时候换行，这跟 pre 的效果一样
pre-line空白符被压缩，文本会在一行排满或遇到换行符时换行
pre-wrap空白符被保留，文本会在一行排满或遇到换行符时换行
<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            #fruittext {
                width: 400px;
                margin: 5px;
                padding: 5px;
                border: medium double black;
                background-color: lightgrey;
                white-space: pre-line;
            }
        </style>
    </head>
    <body>
        <p id="fruittext">
            There are lots of different kinds of fruit - there are over 500
            varieties
            
            of banana alone. By the time we add the countless types of
            apples, oranges, and other well-known fruit, we are faced with
            thousands of choices.
            
            One     of the      most interesting aspects of fruit is the
            variety available   in each country. I live near London,
            
            in an area which is
            known for its apples.
            
        </p>
    </body>
</html>

在这里插入图片描述

1.3、指定文本方向

direction 属性告诉浏览器文本块的排列方向。

属性说明值
direction设置文本方向ltr
rtl
<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            #first {
                direction: ltr;
            }
        
            #second {
                direction: rtl;
            }
        </style>
    </head>
    <body>
        <p id="first">
            This is left-to-right text
        </p>
        <p id="second">
            This is right-to-lefttext
        </p>
    </body>
</html>

在这里插入图片描述

1.4、指定单词、字母、行之间的间距

可以告诉浏览器单词与单词、字母与字母、行与行之间的间距。

属性说明值
letter-spacing设置字母之间的间距normal
<长度值>
word-spacing设置单词之间的间距Normal
<长度值>
line-height设置行高Normal
<数值>
<长度值>
<%>
<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>        
            #fruittext {
                margin: 5px;
                padding: 5px;
                border: medium double black;
                background-color: lightgrey;
                word-spacing: 10px;
                letter-spacing: 2px;
                line-height: 3em;
            }
        </style>
    </head>
    <body>
        <p id="fruittext">
            There are lots of different kinds of fruit - there are over 500
            varieties of banana alone. By the time we add the countless types of
            apples, oranges, and other well-known fruit, we are faced with
            thousands of choices.
        </p>
    </body>
</html>

在这里插入图片描述

1.5、控制断词

word-wrap 属性告诉浏览器当一个单词的长度超过包含块的宽度时如何处理。

值说明
normal单词不断开，即使无法完全放入包含块元素
break-word断开单词，使其放入包含块元素
<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>        
            p {
                width:150px;
                margin: 15px;
                padding: 5px;
                border: medium double black;
                background-color: lightgrey;
                float:left;
            }
            
            #first {
                word-wrap: break-word;
            }
            
            #second {
                word-wrap: normal;
            }
        </style>
    </head>
    <body>
        <p id="first">
            There are lots of different kinds of fruit - there are over 500 
            varieties of madeupfruitwithaverylongname alone.
        </p>
        <p id="second">
            There are lots of different kinds of fruit - there are over 500 
            varieties of madeupfruitwithaverylongname alone.
        </p>
    </body>
</html>

在这里插入图片描述

1.6、首行缩进

text-indent 属性用于指定文本块首行缩进，值可以是长度值，也可以相对于元素宽度的百分数值。

属性说明值
text-indent设置文本首行缩进<长度值>
<%>
<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>        
            p {
                margin: 15px;
                padding: 5px;
                border: medium double black;
                background-color: lightgrey;
                float:left;
                text-indent: 15%;
            }
        </style>
    </head>
    <body>
        <p>
            There are lots of different kinds of fruit - there are over 500
            varieties of banana alone. By the time we add the countless types of
            apples, oranges, and other well-known fruit, we are faced with
            thousands of choices.
            One of the most interesting aspects of fruit is the
            variety available in each country. I live near London, in an area which is
            known for its apples.
        </p>
    </body>
</html>

在这里插入图片描述

2、文本装饰与大小写转换

text-decoration 和 text-transform 两个属性分别允许我们装饰文本和转换文本大小写。

属性说明值
text-decoration为文本块应用装饰效果none
underline
overline
line-through
blink
text-transform为文本块转换大小写none
capitalize
uppercase
lowercase
<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            p {
                border: medium double black;
                background-color: lightgrey;
                text-decoration: line-through;
                text-transform: uppercase;
            }
        </style>
    </head>
    <body>
        <p>
            There are lots of different kinds of fruit - there are over 500
            varieties of banana alone. By the time we add the countless types of
            apples, oranges, and other well-known fruit, we are faced with
            thousands of choices.
            One of the most interesting aspects of fruit is the
            variety available in each country. I live near London, in an area which is
            known for its apples.
        </p>
    </body>
</html>

在这里插入图片描述

3、创建文本阴影

属性说明值
text-shadow为文本块应用阴影<h-shadow> <v-shadow> <blur> <color>

blur 值定义了阴影的模糊程度。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            h1 {
                text-shadow: 0.1em .1em 1px lightgrey;
            }
            p {
                text-shadow: 5px 5px 20px black;
            }
        </style>
    </head>
    <body>
        <h1>Thoughts about Fruit</h1>
        <p>
            There are lots of different kinds of fruit - there are over 500
            varieties of banana alone. By the time we add the countless types of
            apples, oranges, and other well-known fruit, we are faced with
            thousands of choices.
        </p>
    </body>
</html>

在这里插入图片描述

4、使用字体

属性说明值
font-family指定文本块采用的字体名称参见下表
font-size指定文本块的字体大小参见下表
font-style指定字体样式Normal
italic
oblique
font-variant指定字体是否以小型大写字母显示Normal
smallcaps
font-weight设置字体粗细Normal
bold
bolder
lighter
font在一条声明中设置字体的简写属性

font 属性值的格式如下：

font: <font-style> <font-variant> <font-weight> <font-size> <font-family>

4.1、选择字体

font-family 属性指定使用的字体，按照优先顺序排列。浏览器从字体列表中的第一种开始尝试，直到发现合适的字体为止。

通用字体系列实现字体系列
serifTimes
sans-serifHelvetica
cursiveZapf-Chancery
fantasyWestern
monospaceCourier
<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>        
            p {
                padding: 5px;
                border: medium double black;
                background-color: lightgrey;
                margin: 2px;
                float: left;
                font-family: "HelveticaNeue Condensed", monospace;
            }
        </style>
    </head>
    <body>
        <p>
            There are lots of different kinds of fruit - there are over 500
            varieties of banana alone. By the time we add the countless types of
            apples, oranges, and other well-known fruit, we are faced with
            thousands of choices.
        </p>
    </body>
</html>

在这里插入图片描述

4.2、设置字体大小

font-size 属性用来指定字体大小。

值说明
xx-small
x-small
small
medium
large
x-large
xx-large		设置字体大小。浏览器会决定每个值代表具体大小。
smaller
larger		设置字体相对于父元素字体的大小
<length>使用 CSS 长度值精确设置字体大小
<%>将字体大小表示为父元素字体大小的百分数
<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>        
            p {
                padding: 5px;
                border: medium double black;
                background-color: lightgrey;
                margin: 2px;
                float: left;
                font-family: sans-serif;
                font-size: medium;
            }
            #first {
                font-size: xx-large;
            }
            #second {
                font-size: larger;
            }
        </style>
    </head>
    <body>
        <p>
            There are lots of different kinds of fruit - there are over 500
            varieties of <span id="first">banana</span> alone. By the time we add the
            countless types of <span id="second">apples, oranges, and other
            well-known fruit, we are faced with thousands of choices</span>.
        </p>
    </body>
</html>

在这里插入图片描述

4.3、设置字体样式和粗细

可以使用 font-style 属性设置字体粗细。font-style 属性允许我们在正常字体、斜体和假斜体（倾斜字体）三种之间选择。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>        
            p {
                padding: 5px;
                border: medium double black;
                background-color: lightgrey;
                margin: 2px;
                float: left;
                font-family: sans-serif;
                font-size: medium;
            }
            #first {
                font-weight: bold;
            }
            #second {
                font-style: italic;
            }
        </style>
    </head>
    <body>
        <p>
            There are lots of different kinds of fruit - there are over 500
            varieties of <span id="first">banana</span> alone. By the time we add the
            countless types of <span id="second">apples, oranges, and other
            well-known fruit, we are faced with thousands of choices</span>.
        </p>
    </body>
</html>

在这里插入图片描述

前丨尘忆·梦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Scala学习笔记1——从文件读取文本行
01-07
刚接触Scala，所以并不是很习惯这种函数式编程风格，就从现在的第一篇笔记开始记录这个学习过程啦！笔记来源于《Scala编程》的学习。 从文本读取文本行 初步目标： 构建一个脚本从文本读取文本行，并将它们打印出来...
前端基础-html
m0_52118763的博客
03-04 1309
一html 1.p标签 GB2312 、BIG5 、GBK 和 UTF-8， 简体中文，繁体中文，简体和繁体，万国码 为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题， 即<h1> - <h6> 。 <h1>水花61分伊戈达拉制胜抢断西决勇士再胜开拓者总分2-0</h1> <h4>数据统计:水花兄弟合砍61分</h4> <p>库里22投11中，三分14投4
前端---css文字样式、背景
zzjzed的博客
08-03 239
3.font-style:指定文本的字体样式 属性：正常（normal） - 默认，正常显示文本 斜体(italic) - 以斜体字显示的文字 倾斜的文字(oblique)- 文字向一边倾斜。border-bottom-width 设置元素的下边框的宽度。border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。thin 细的边框。scroll 默认值。border-bottom-color 设置元素的下边框的颜色。border-bottom-style 设置元素的下边框的样式。
＜html＞css样式学习（第四天） 文本样式
m0_70516782的博客
06-23 225
1、字体长度 2、颜色单位 3、字体样式 4字体的分类以及其他样式.........
前端学习4：HTML文本格式化
RainstormGod的博客
04-06 1932
和标签都是实现斜体效果。这是倾斜字体
HTML之设置文字和文本样式
DoubleC的博客
04-21 4682
在CSS样式中,最基本的属性是用来设置文字和文本的样式。"文字"指的是单个文字或单词,"文本"指的是由文字组成的内容。为字体设置样式主要是设置字、词的样式,对文本设置样式样式主要是对整段文章设置样式。 设置文字样式 CSS对文字样式的设计有文字字体的设置、文字大小、文字粗体、文字斜体以及字间距等样式的设置。 字体设置 在HTML里可以使用来设置文字字体,而在CSS中设置字体所用到的属性是...
前端：CSS —— 页面布置和样式
m0_61731585的博客
03-01 2202
css
html设置浏览器模式,让浏览器自动设置文档模式
weixin_33628144的博客
06-07 409
解决文档模式问题： 必须在文件头添加其中关键代码为：在解决问题过程中个，最开始只添加了：但问题依然还存在，改变DTD申明后，问题解决。然后添加如下代码： 这两句要引在CSS文件之上，在加载页面代码之前引用--文本模式版本修改--浏览器模式版本修改多个模式的指定。我们可以用逗号分割多个版本，这种情况下，浏览器会从这个列表中选择一个他所支持的最高版本来使用标准模式进行渲染。如下面的例子，在IE8进行浏...
Android学习笔记之——Content Providers
01-03
之前博文《 Android学习笔记之——Android Studio的安装（3.6版本）、Java的基本语法及Android的概述 》曾经介绍过android有四大组件。本博文学习一下Content Providers（内容提供器） 目录 Android运行时 ...
Python学习笔记——大数据之SPARK核心
02-24
本文来自于csdn，文章讲解RDD的特点，RDD操作函数相关，穿插案例辣酱得段子，带大家理解MapReduce，通过哈姆雷特单词分析案例进行深度剖析。RDD（ResilientDistributedDatasets弹性分布式数据集），是spark中最重要...
学习笔记之——基于VScode remote的SSH
01-09
对于之前博客《ROS实验笔记之——多turtlebot机器人运控实验》中提到的多机器人运控。关掉机器人一段时间后重启，会发现机器人的IP地址好像发生了变化。如果每次都需要像博客《ROS中机器人与电脑的网络配置》那样...
前端入门： 用css设置文字样式。
ysds20211402的博客
01-09 1037
转自：微点阅读https://www.weidianyuedu.com 经过前面的文章，相信大家已经基本了解了前端最基本的一些规则了： html搭建结构，承载内容 css则可以利用选择器，来为相应的html标签设置样式 前面提到过的样式有最基础的盒模型相关属性： 边框（border）以及背景（background），有了这两个家伙之后我们基本上就能清楚的看到一个盒子的相貌了，那么现在我们就可以往里面添加一些内容了。 最基础的内容当然是文字，当我们把文字放进标签里面之后则可以来探讨一下该...
【前端学习笔记—使用JS修改样式】
热门推荐
LPC的博客
04-24 1万+
目录JS修改样式的8种方式1.直接设置style的属性2.直接设置属性3.设置style的属性4.使用setProperty5.改变class6.设置cssText7.引入css样式文件8.使用addRule、insertRule JS修改样式的8种方式 1.直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有’-'号，就写成驼峰的形式（如textAlign） 如果想保留 - 号，就中括号的形式 element.style.height = '100px'; 2.直接设.
前端的那些必须要掌握的样式设置和布局【CSS、浮动、清除、固定、em、rem等等......】
qq_46906413的博客
08-09 7052
CSS使用 浮动、清除、固定 em、rem 前端程序员必须要掌握的前端知识 父元素没有高度，内容由子元素撑开，子元素浮动后，导致父元素高度为0，造成高度塌陷，解决方法有： 1.给父元素一个高度。 2.在标签结构的末尾添加一个空的块级标签，添加clear：both；的声明 3.给父元素添加overflow：hidden；声明 4.万能清楚法;父盒子：：after{ content:""; clear:both; display:block; visiblity:hidden; }......
Web前端文本级标签、容器级标签、行内标签、块标签总结
weixin_42132959的博客
03-07 546
文本级标签、容器级标签、行内标签、块级标签
前端实现富文本框
suiyingsuiyi的博客
05-07 1万+
这次我们项要求实现博客形式的富文本框，之前没有接触过，顿时毫无头绪。不过还好在网上找到了一个差不多的例子。下面附上网址：http://www.jb51.net/article/32689.htm知识点：实现富文本框可以使用iframe，修改iframe的designMode属性。&lt;script&gt;myEditer.document.designMode = 'on';&lt;/scrip...
前端基础学习笔记 字体文本样式和特殊符号
勤能补拙
11-24 669
字体样式 字体颜色 color 字体风格 font-family ​ span{ font-family:'微软雅黑','宋体'; } 引入外部字体 @font-face{ font-family:"名称"; src:url(' '); } ​ 字体大小 font-size div{ /*具体的值*/ font-size:50px; /*百分比 相当于父容器的字体百分比调整 浏览器默...
【前端学习记录4】字体样式和文本样式
aftertasttea的博客
12-07 574
一、字体样式 1、简介：英文“font”前缀开头，是“字体”的意思。“font-size”表示字体大小，“font-weight”表示字体粗细。 2、字体类型：font-family 语法：font-family:字体1，字体2，... ，字体N； 设置一种字体：#div1{font-family:Arial;} 设置多种字体：p{font-family:Arial,Verdana,...
前端开发-快速编写页面样式的进阶技巧
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-24 2514
目录 首先，在写html、wxml时，带上样式类名 然后，利用vscode插件【CSS Tree】，来快速生成对应的类名 最后，对照着html格式，来写样式文件 对于俺这种木得票子的打工仔，缺少扩展显示器等外设，写代码、切文档、改样式需要反复缩放界面，很烦~ 总结一些开发中的技巧，提升开发速度和开发舒适度 首先，在写html、wxml时，带上样式类名 就像这样，在构建html的时候就同时把样式类名写好，静态页面编写的时候，可以随便写一些填充内容来占位 例如：想要下面这样的效果，就先搭建静
【K210】K210学习笔记五——串口通信
最新发布
09-11
下面是有关 K210 学习笔记五中串口通信的一些内容： 在 K210 开发板上，串口是一种常见的通信接口，用于将数据从一个设备传输到另一个设备。串口通信通常使用 UART (Universal Asynchronous Receiver/Transmitter) ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值