【慢慢】V6.03.2 读书笔记 css文本

最新推荐文章于 2019-12-05 21:45:11 发布

浮生故城

最新推荐文章于 2019-12-05 21:45:11 发布

阅读量103

点赞数

分类专栏： css读书笔记文章标签： css文字

本文链接：https://blog.csdn.net/a1328636397/article/details/90748509

版权

css读书笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS文本

主要改变的是以下属性：

文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进以及文本转换。

文本的对齐方式

文本对齐的属性可以设置为:

居中
对齐到左右
两端对齐

根据以上属性，text-align的属性可以类似的设置为：

left
right
center
justify

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* div{
            width: 80px;
            height: 100px;
            opacity: 0.5;
        } */
        h1{
            text-align: center
        }
        h2{
            text-align: right
        }
        h3{
            text-align: justify
        }
    </style>
</head>
<body>
    <!-- <div style="background: brown">
        测试
    </div> -->
    <h1>This is zhengxuzhi</h1>
    <h2>This is zhengxuzhi</h2>
    <h3>This is zhengxuzhi</h3>
</body>
</html>

两端对齐是指设置文本内容两端，调整文字的水平间距，使其均匀分布在左右页边距之间。

就类似两行文字硬生生的首尾呼应的意思吧。

控制文本的大小

条目：text-transform

属性：

none 默认文本
capitalize 每个单词用大写开头
uppercase 定义仅有大写字母 即全部大写
lowercase 定义无大写字母，仅有小写字母 即全部小写

实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* div{
            width: 80px;
            height: 100px;
            opacity: 0.5;
        } */
        h1{
           text-transform: capitalize
        }
        h2{
            text-transform: uppercase
        }
        h3{
            text-transform: lowercase
        }
    </style>
</head>
<body>
    <!-- <div style="background: brown">
        测试
    </div> -->
    <h1>This is zhengxuzhi</h1>
    <h2>This is zhengxuzhi</h2>
    <h3>This is zhengxuzhi</h3>
</body>
</html>

处理元素空白

条目：white-space

属性：

normal 默认
pre 空白会被浏览器保留
nowrap 文本不会换行
pre-wrap 正常换行，保留空白附子列
pre-line 正常换行，合并空白符

规定制表符字符长度

条目：tab-size

属性：

数字
长度

这个属性只对<textarea> 和 <pre>这个两个标签有效~

目前只有 Chrome 支持 tab-size 属性。

Firefox 支持另一个可替代该属性的属性，即 -moz-tab-size 属性。

Opera 支持另一个可替代该属性的属性，即 -o-tab-size 属性。

目前没有浏览器支持该值作为长度单位。

非中国断行规则

条目：word-break

属性：

normal 正常换行规则
break-all 允许在单词内换行
keep-all 只能在半角空格或连字符处换行

URL换行规则

条目：word-wrap

属性：

normal
break-word

例如：

p.test {word-wrap:break-word;}

使得长单词或 URL 地址换行到下一行。

最后一行的水平对齐方式

条目：text-align-last 属性规定如何对齐文本的最后一行

好像类似 text-align 吧，但只是最后一行的格式。属性好像有多几条，罗列一下。

额外属性：

start 最后一行在开头对齐
end 最后一行在结尾对齐
initial 属性的默认值

使用的例子可以是：

p{text-align-last:start;}

设置对齐文本和对齐间距

条目：text-justify

属性：

auto
inter-word
inter-ideograph
inter-cluster
distribute
kashida
trim

只有IE支持这个标签，我就不深入看了。

文本溢出

条目：text-overflow

属性：

clip 修剪文本
ellipsis 用省略符号代表修剪的文本
string 使用给定的字符串来代表被修剪的文本

设置文本阴影

text-shadow: h-shadow v-shadow blur color

条目：text-shadow

属性：

h-shadow 水平阴影的位置必选
v-shadow 垂直阴影的位置必选
blur 模糊的距离
color 颜色

代码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* div{
            width: 80px;
            height: 100px;
            opacity: 0.5;
        } */
        h1{
           text-shadow: 2px 2px;
        }

    </style>
</head>
<body>
    <!-- <div style="background: brown">
        测试
    </div> -->
    <h1>This is zhengxuzhi</h1>
</body>
</html>

设置字空白

word-spacing属性是用来设置字与字之间的空白，可以增加或减少字空白。

条目：word-spacing

属性：长度

代码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* div{
            width: 80px;
            height: 100px;
            opacity: 0.5;
        } */
        h1{
           word-spacing: 30px;
        }

    </style>
</head>
<body>
    <!-- <div style="background: brown">
        测试
    </div> -->
    <h1>This is zhengxuzhi</h1>
</body>
</html>

设置字符空白

跟上面的一样，但是是字符间的空白。

条目：letter-spacing

首行缩进

条目：text-indent

属性：长度

首行缩进好像用的挺多的吧。

代码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* div{
            width: 80px;
            height: 100px;
            opacity: 0.5;
        } */
        h1{
          text-indent: 30px;
        }

    </style>
</head>
<body>
    <!-- <div style="background: brown">
        测试
    </div> -->
    <h1>This is zhengxuzhi This is zhengxuzhiThis is zhengxuzhiThis is zhengxuzhiThis is zhengxuzhiThis is zhengxuzhi</h1>
</body>
</html>