css笔记——文本样式

最新推荐文章于 2024-06-10 22:18:41 发布
最新推荐文章于 2024-06-10 22:18:41 发布
阅读量92 收藏
点赞数
文章标签： javascript 数据库 ViewUI
原文链接：http://www.cnblogs.com/yingzi1028/p/7675716.html
版权

聊聊text-decoration、text-indent、text-transform、letter-spacing、word-spacing、vertical-align。下面是一些常用设置文本样式的css样式：

text-decoration: underline;                  /* 设置文字下划线 */

text-indent: 35px;                                /* 设置缩进 */

text-transform: uppercase;                 /* 设置英文字母转大写 */

letter-spacing: 3px;                             /* 设置字间距 */

word-spacing: 10px;                            /* 设置词间距 */

 vertical-align: -20px;                          /* 设置垂直对齐 */

目录：

1.text-decoration

2.text-indent

3.text-transform

4.letter-spacing

5.word-spacing

6.vertical-align

7.white-space

1.text-decoration

定义什么请移步：w3school

说明

这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。不要求用户代理支持 blink。

默认值：none
继承性：no
版本：CSS1
JavaScript 语法：object.style.textDecoration="overline"

可能的值

值描述
none默认。定义标准的文本。
underline定义文本下的一条线。
overline定义文本上的一条线。
line-through定义穿过文本下的一条线。
blink定义闪烁的文本。
inherit规定应该从父元素继承 text-decoration 属性的值。

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文本实例-设置文本字体效果</title>
    <style type="text/css">
    h2 {
        text-decoration: underline;
    }

    .p1 {
        text-decoration: overline;
    }

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

    .sp1 {
        text-decoration: blink;
    }

    .decoration {
        text-decoration: underline;
        padding: 10px;
    }
    </style>
</head>

<body>
    <h1>none默认。定义标准的文本</h1>
    <h2>underline定义文本下的一条线。</h2>
    <p class="p1">overline定义文本上的一条线。</p>
    <p class="p2">line-through定义穿过文本下的一条线。</p>
    <span class="sp1">blink定义闪烁的文本。</span>
    <div class="decoration">
        <span class="sp2">inherit规定应该从父元素继承 text-decoration 属性的值。</span>
    </div>
</body>

</html>

注释：IE、Chrome 或 Safari 不支持 "blink" 属性值。

效果图

2.text-indent

 定义什么请移步：w3school

说明

用于定义块级元素中第一个内容行的缩进。这最常用于建立一个“标签页”效果。允许指定负值，这会产生一种“悬挂缩进”的效果。

默认值：not specified
继承性：yes
版本：CSS1
JavaScript 语法：object.style.textIndent="50px"

可能的值

值描述
length定义固定的缩进。默认值：0。
%定义基于父元素宽度的百分比的缩进。
inherit规定应该从父元素继承 text-indent 属性的值。

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .indent{
            width: 300px;
            margin: 0 auto;
        }
        .text1{
            text-indent: 20px;
        }
        .text2{
            text-indent: 20%;
        }
    </style>
</head>
<body>
<div class="indent">
    <div class="text1">测试测试测试</div>
    <div class="text2">测试测试测试</div>
</div>
</body>
</html>

效果图

3.text-transform

 定义什么请移步：w3school

说明

这个属性会改变元素中的字母大小写，而不论源文档中文本的大小写。如果值为 capitalize，则要对某些字母大写，但是并没有明确定义如何确定哪些字母要大写，这取决于用户代理如何识别出各个“词”。

默认值：none
继承性：yes
版本：CSS1
JavaScript 语法：object.style.textTransform="uppercase"

可能的值

值描述
none默认。定义带有小写字母和大写字母的标准的文本。
capitalize文本中的每个单词以大写字母开头。
uppercase定义仅有大写字母。
lowercase定义无大写字母，仅有小写字母。
inherit规定应该从父元素继承 text-transform 属性的值。

示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    .uppercase1 {
        text-transform: uppercase;
    }

    p.uppercase2 {
        text-transform: uppercase;
    }

    .uppercase2 input {
        text-transform: uppercase;
    }

    p.lowercase {
        text-transform: lowercase;
    }

    p.capitalize {
        text-transform: capitalize;
    }

    .text_transform {
        text-transform: uppercase;
    }

    p.inherit {
        text-transform: inherit;
    }
    </style>
</head>

<body>
    <h1 class="uppercase1">This Is An H1 Element</h1>
    <p class="uppercase2">This is some text in a paragraph.
        <input type="text" placeholder="This is some text in a paragraph.">
    </p>
    <p class="lowercase">This is some text in a paragraph.</p>
    <p class="capitalize">This is some text in a paragraph.</p>
    <div class="text_transform">
        dddd
        <p class="inherit">This is some text in a paragraph.</p>
    </div>
</body>

</html>

效果图

在input框中输入： wet

显示结果：

然后分别执行以下代码：

document.getElementsByClassName('uppercase1')[0].innerHTML;
document.getElementsByClassName('uppercase1')[0].innerText;
document.getElementsByClassName('uppercase2')[0].innerHTML;
document.getElementsByClassName('uppercase2')[0].innerText;
document.getElementsByTagName('input')[0].value;

 

从上图可以看出，虽然个input添加了 text-transform: uppercase;  但是，css只是改变了页面显示的文本样式，但真实的value值并没有发生改变

4.letter-spacing

 定义什么请移步：w3school

说明

默认值：normal
继承性：yes
版本：CSS1
JavaScript 语法：object.style.letterSpacing="3px"

可能的值

值描述
normal默认。规定字符间没有额外的空间。
length定义字符间的固定空间（允许使用负值）。
inherit规定应该从父元素继承 letter-spacing 属性的值。

示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    .text_letter_spacing {
        width: 500px;
        margin: 20px auto;
    }

    .p1 {
        letter-spacing: -0.5em;
    }

    .p2 {
        letter-spacing: 20px;
    }
    </style>
</head>

<body>
    <div class="text_letter_spacing">
        <p class="p1">This is text 1</p>
        <p class="p2">This is text 2</p>
    </div>
</body>

</html>

效果图

 

5.word-spacing

 定义什么请移步：w3school

说明

默认值：normal
继承性：yes
版本：CSS1
JavaScript 语法：object.style.wordSpacing="10px"

可能的值

值描述
normal默认。定义单词间的标准空间。
length定义单词间的固定空间。
inherit规定应该从父元素继承 word-spacing 属性的值。

示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>增加或减少单词间距（字间隔）</title>
    <style type="text/css">
    p.spread {
        word-spacing: 30px;
    }

    p.tight {
        word-spacing: -0.5em;
    }
    </style>
</head>

<body>
    <div>
        <p class="spread">This is some text. This is some text.</p>
        <p class="tight">This is some text. This is some text.</p>
    </div>
</body>

</html>

效果图

6.vertical-align

定义什么请移步：w3school

说明

默认值：baseline
继承性：no
版本：CSS1
JavaScript 语法：object.style.verticalAlign="bottom"

可能的值

值描述
baseline默认。元素放置在父元素的基线上。
sub垂直对齐文本的下标。
super垂直对齐文本的上标
top把元素的顶端与行中最高元素的顶端对齐
text-top把元素的顶端与父元素字体的顶端对齐
middle把此元素放置在父元素的中部。
bottom把元素的顶端与行中最低的元素的顶端对齐。
text-bottom把元素的底端与父元素字体的底端对齐。
length通过距离升高（正值）或降低（负值）元素。'0cm'等同于'baseline'
%使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit规定应该从父元素继承 vertical-align 属性的值。

示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>vertical-align</title>
    <style type="text/css">
    div {
        color: pink;
        font-size: 25px;
    }

    div span {
        color: #000;
        font-size: 15px;
    }

    .test1 {
        vertical-align: baseline;
    }

    .test2 {
        vertical-align: sub;
    }

    .test3 {
        vertical-align: super;
    }

    .test4 {
        vertical-align: top;
    }

    .test5 {
        vertical-align: text-top;
    }

    .test6 {
        vertical-align: middle;
    }

    .test7 {
        vertical-align: bottom;
    }

    .test8 {
        vertical-align: text-bottom;
    }

    .test9 {
        vertical-align: 22px;
    }

    .test10 {
        vertical-align: 30%;
    }
    </style>
</head>

<body>
    <div>father<span class="test1">vertical-align: baseline默认。元素放置在父元素的基线上</span></div>
    <div>father<span class="test2">vertical-align: sub垂直对齐文本的下标。</span></div>
    <div>father<span class="test3">vertical-align: super垂直对齐文本的上标</span></div>
    <div>father<span class="test4">vertical-align: top把元素的顶端与行中最高元素的顶端对齐</span></div>
    <div>father<span class="test5">vertical-align: text-top把元素的顶端与父元素字体的顶端对齐</span></div>
    <div>father<span class="test6">vertical-align: middle把此元素放置在父元素的中部。</span></div>
    <div>father<span class="test7">vertical-align: bottom把元素的顶端与行中最低的元素的顶端对齐。</span></div>
    <div>father<span class="test8">vertical-align: text-bottom把元素的底端与父元素字体的底端对齐。</span></div>
    <div>father<span class="test9">vertical-align: 22px上移22px</span></div>
    <div>father<span class="test10">vertical-align: 30%上移30%</span></div>
</body>

</html>

效果图

7.white-space

定义什么请移步：w3school

说明

white-space 属性设置如何处理元素内的空白。

这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。

默认值：normal
继承性：yes
版本：CSS1
JavaScript 语法：object.style.whiteSpace="pre"

可能的值

值描述
normal默认。空白会被浏览器忽略。
pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签；文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。。
nowrap文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap保留空白符序列，但是正常地进行换行。
pre-line合并空白符序列，但是保留换行符。
inherit规定应该从父元素继承 white-space 属性的值。

示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    .white-space-demo {
        width: 170px;
        background-color: pink;
    }

    p {
        font-size: 18px;
    }

    .p1 {
        white-space: pre;
    }

    .p2 {
        white-space: nowrap;
    }

    .p3 {
        white-space: pre-wrap;
    }

    .p4 {
        white-space: pre-line;
    }
    </style>
</head>

<body>
    <div class="white-space-demo">
        <p>the     latest  update  of  oracle solaris</p>
        <p>使用white-space pre效果</p>
        <p class="p1">the     latest  update  of  oracle solaris啦    啦 啦 啦啦啦</p>
        <p>使用white-space nowrap效果</p>
        <p class="p2">the     latest  update  of  oracle solaris啦    啦 啦 啦啦啦</p>
        <p>使用white-space pre-wrap效果</p>
        <p class="p3">the     latest  update  of  oracle solaris啦    啦 啦 啦啦啦</p>
        <p>使用white-space pre-line效果</p>
        <p class="p4">the     latest  update  of  oracle solaris啦    啦 啦 啦啦啦</p>
    </div>
</body>

</html>

效果图

 

 

推荐：

我对CSS vertical-align的一些理解与认识（一）
CSS vertical-align的深入理解(二)之text-top篇
CSS深入理解vertical-align和line-height的基友关系

转载于:https://www.cnblogs.com/yingzi1028/p/7675716.html

weixin_30659829
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Css样式--文本样式详解
09-25
本样式包括所谓的文本缩进：text-indent、水平对齐：text-align:center;left;right、字间隔和字母间距、字符转换：text-transform等等，在本文将为大家详细介绍下，感兴趣的朋友可以参考下
css文字控制与css文本样式示例和属性
09-25
主要介绍了css文字控制与css文本样式示例和属性,需要的朋友可以参考下
CSS基础笔记——文本样式
KllKllKll
07-20 127
字体样式针对的是文字本身的形体效果，而文本样式针对的则是整个段落的排版效果 在CSS中，常见的文本样式如下 首行缩进：text-indent p元素的首行是不会自动缩进的，所以我们可以使用text-indent属性来定义p元素的首行缩进 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>字体样式</title&g.
CSS学习笔记 —— 文本相关常用样式
利用Transition过渡完成手风琴菜单
06-08 152
本文是作者本人学习过程中的笔记总结，如若文中有不正确，或需要补充的地方，欢迎在评论区中留言。 1. 颜色color
CSS学习笔记——文本字体设计
weixin_45375866的博客
08-11 210
在前端基础的学习中，对于字体接触的比较多的便是标题字体（H1-H6)和文本字体，标题字体默认加粗，文本字体的设计一般通过`<font>`标签进行设计。
CSS笔记——①css样式表、选择器、常用属性
yanqiu12138的博客
12-29 337
900 , 100到500都是正常的，600都900都是加粗的 )复合的写法，是通过空格的方式实现的。层叠样式表，用于修饰网页信息的显示样式，目前推荐遵循的是W3C发布的CSS3.0.要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到。当多个选择器，选中的是同一个元素，且都为他们定义了样式，如果属性发生冲突了，会选择。多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。word-spacing : 词之间的间距 ( 针对英文段落的 )
CSS笔记 —— 美化网页
热门推荐
一纸春秋的博客
10-31 1万+
本篇博客是根据B站up@遇见狂神说 的视频以及W3school官网文档整理的笔记，里面会有一些视频的截图、代码和官网的概念，以及我个人的注释笔记，代码例子等。 全篇博客包括代码均为自己手打，结果截图均为自己运行的结果。 以下是视频链接 https://www.bilibili.com/video/BV1YJ411a7dy?spm_id_from=333.999.0.0 W3school官网链接 https://www.w3school.com.cn/css/index.asp 目录字体span标签美化网页的
CSS笔记——盒模型及外边距合并解决
bqiuer的博客
09-25 161
是用于布局和定位HTML元素的一种概念
CSS学习笔记——Day One
2301_79729136的博客
11-21 155
CSS学习笔记（选择器、文本属性、新闻页面案例）
CSS笔记——伪类和伪元素
bqiuer的博客
09-25 574
需要注意的是，在CSS2中，伪元素使用单冒号（:）作为前缀，而在CSS3中，它们使用双冒号（::）作为前缀。同时，在使用伪元素时，必须要设置content属性，否则伪元素的样式不会生效。伪元素允许我们在元素的内容之前或之后添加一些特殊的样式，而不需要添加额外的HTML标记。focus-within ，一个元素获得焦点，该元素的后代都获得焦点，都可触发事件。::first-letter ，首行首字（只能用于块元素）::before ，在前面创建伪元素。::after ，在后面创建伪元素。
HTML&CSS笔记——概述
weixin_43888905的博客
03-18 151
HTML&CSS 概述 文章目录HTML&CSS 概述定义执行版本及兼容性 定义 HTML：hypertesxt markup language 超文本标记语言 HTML是W3C定义的语言标准，用于描述页面的结构（structure）。 HTML相当于毛坯房。 CSS：cascading style sheets 层叠样式表 CSS用于描述网页的样式（presentation），相当于给房子装修。 XML: extension markup language 拓展标记语言 自
CSS常用文本样式总结
09-27
主要介绍了CSS常用文本样式的总结,包括段落首字下沉、字体对齐、字母间间隔设置等人们群众喜闻乐见的常用文本处理方法,需要的朋友可以参考下
动态调用css文件——jquery的应用
10-31
动态调用css文件——jquery的应用
Css样式–文本样式详解
01-19
1.文本缩进：text-indent 复制代码代码如下: p {text-indent: 5em;} 1.实用负值：设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议...
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 329
在vue.config.js中配置关闭Uncaught runtime errors显示。
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 504
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
基于JavaScript 如何实现爬山算法以及优化方案
最新发布
乐闻世界
06-10 1212
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
vue3如何定义一个组件
Java程序员专栏
06-09 518
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
CSS从入门到精通——文本与字体样式
09-18
CSS从入门到精通的文本与字体样式包括字体颜色、文本装饰和字体风格。在CSS中，可以使用color属性设置字体颜色，例如使用`color:lightslategray`来设置字体颜色为lightslategray。可以使用text-decoration属性设置...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值