第七周笔记

最新推荐文章于 2023-12-09 07:30:00 发布

Ascssy

最新推荐文章于 2023-12-09 07:30:00 发布

阅读量139

点赞数

本文链接：https://blog.csdn.net/weixin_48999849/article/details/116170490

版权

CSS 文本

1.缩进文本
把 Web 页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
这个属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进 5 em：p{text-indent: 5em;}
注意：一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。
text-indent 还可以设置为负值。利用这种技术，可以实现很多有趣的效果，比如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边。
text-indent 可以使用所有长度单位，包括百分比值。百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。
text-indent 属性可以继承。

2.水平对齐
text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。值justify实现两端对齐文本效果。值inherit规定应该从父元素继承 text-align 属性的值。

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}
</style>
</head>
<body>

<h1>标题 1（居中对齐）</h1>
<h2>标题 2（左对齐）</h2>
<h3>标题 3（右对齐）</h3>

<p>上面的三个标题是居中、左和右对齐。</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
img.top {
  vertical-align: top;
}

img.middle {
  vertical-align: middle;
}

img.bottom {
  vertical-align: bottom;
}
</style>
</head>
<body>

<p>一幅 <img src=https://p0.ssl.qhimgs1.com/t01826c8d189430f9c4.jpg width="180" height="167"> 默认对齐方式的图像。</p><br>

<p>一幅 <img class="top" src=https://p0.ssl.qhimgs1.com/t01826c8d189430f9c4.jpg width="180" height="167"> 上对齐的图像。</p><br>

<p>一幅 <img class="middle" src=https://p0.ssl.qhimgs1.com/t01826c8d189430f9c4.jpg width="180" height="167"> 居中对齐的图像。</p><br>

<p>一幅 <img class="bottom" src=https://p0.ssl.qhimgs1.com/t01826c8d189430f9c4.jpg width="180" height="167"> 下对齐的图像。</p>

</body>
</html>

3.字间隔
word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近。(对中文无效)

4.字母间隔
letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。且对汉字有效！

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  letter-spacing: 3px;
}

h2 {
  letter-spacing: -3px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  word-spacing: 10px;
}

h2 {
  word-spacing: -5px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>

</body>
</html>

5.字符转换
text-transform 属性处理文本的大小写。这个属性有 4 个值：none、uppercase、lowercase、capitalize。默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。

<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

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

<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>

</body>
</html>

6.文本装饰
text-decoration 属性，text-decoration 有 5 个值：none、underline、overline、line-through、blink。underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。

<!DOCTYPE html>
<html>
<head>
<style>
a {
  text-decoration: none;
}
</style>
</head>
<body>

<p>没有下划线的链接：<a href="https://blog.csdn.net/weixin_48999849?spm=1000.2115.3001.5343</a></p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

</body>
</html>

7.处理空白符
white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。
如果将 white-space 设置为 pre，空白符不会被忽略。
与之相对的值是 nowrap，它会防止元素中的文本换行，除非使用了一个 br 元素。在 CSS 中使用 nowrap 非常类似于 HTML 4 中用将一个表单元格设置为不能换行，不过 white-space 值可以应用到任何元素。

8.文本方向
direction 属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的为止。对于行内元素，只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。
direction 属性有两个值：ltr 和 rtl。大多数情况下，默认值是 ltr，显示从左到右的文本。如果显示从右到左的文本，应使用值 rtl。

9.CSS 文本属性

属性	描述
color	设置文本颜色
direction	设置文本方向。
line-height	设置行高。
letter-spacing	设置字符间距。
text-align	对齐元素中的文本。
text-decoration	向文本添加修饰。
text-indent	缩进元素中文本的首行。
text-transform	控制元素中的字母。
unicode-bidi	设置文本方向。
white-space	设置元素中空白的处理方式。
word-spacing	设置字间距。