css设计文本样式 前端开发入门笔记（十二）

CSS (Cascading Style Sheets) 是一种标记语言，用于描述 HTML 或 XML（包括如 SVG、MathML 等派生语言）文档的呈现。以下是一些基本的 CSS 文本样式：

1. 字体样式：你可以使用 font-family 属性来改变字体类型，font-size 来调整字体大小，font-weight 来调整字体的粗细，font-style 来调整字体的风格，例如斜体。例如：

p {
    
    
    font-family: "Times New Roman", Times, serif;
    font-size: 16px;
    font-weight: bold;
    font-style: italic;
}

2. 文本装饰：你可以使用 text-decoration 属性来添加或删除文本装饰，如下划线、上划线、删除线等。例如：

p {
    
    
    text-decoration: underline;
}

3. 文本对齐：你可以使用 text-align 属性来设置文本的对齐方式，例如左对齐、右对齐、居中对齐或两端对齐。例如：

p {
    
    
    text-align: center;
}

4. 文本颜色：你可以使用 color 属性来设置文本的颜色。例如：

p {
    
    
    color: red;
}

5. 文本转换：你可以使用 text-transform 属性来控制文本的大小写转换。例如：

p {
    
    
    text-transform: uppercase;
}

6. 行高和行距：你可以使用 line-height 属性来设置行高，使用 letter-spacing 来设置字符间距，使用 word-spacing 来设置词间距。例如：

p {
    
    
    line-height: 1.6;
    letter-spacing: 2px;
    word-spacing: 3px;
}

CSS 文本样式示例：

1. 文本缩进：使用 text-indent 属性可以设置首行文本的缩进。例如：

p {
    
    
    text-indent: 2em;
}

2. 文本垂直对齐：使用 vertical-align 属性可以设置文本的垂直对齐方式。例如：

img {
    
    
    vertical-align: middle;
}

3. 文本装饰：使用 text-decoration 属性可以添加或删除文本装饰，如下划线、上划线、删除线等。例如：

p {
    
    
    text-decoration: underline wavy;
}

4. 文本溢出：使用 overflow 属性可以设置当文本溢出元素框时如何处理。例如：

p {
    
    
    overflow: hidden;
}

5. 文本阴影：使用 text-shadow 属性可以设置文本阴影。例如：

p {
    
    
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

6. 文本转换：使用 text-transform 属性可以控制文本的大小写转换。例如：

p {
    
    
    text-transform: lowercase;
}

7. 文字装饰效果：使用 @keyframes 和 animation 可以创建复杂的文字动画装饰效果。例如：

@keyframes twinkle {
    
    
    0% {
    
    color: red;}
    50% {
    
    color: yellow;}
    100% {
    
    color: red;}
}
p {
    
    
    animation: twinkle 2s infinite;
}

文本换行word-break

word-break是一个CSS属性，用于设置或检索对象内文本的字内换行行为。其具体的取值解释如下：

• normal：默认值，浏览器会尽可能避免在单词中间换行，但可能会在单词之间换行。
• break-all：单词内任意位置换行，即使在单词中间。
• keep-all：防止单词在任意位置换行，即使在单词中间。

例如，如果你希望在一个容器中能够尽可能展示更多的文本内容，可以将word-break属性设置为break-all。这样，当文本内容超过容器宽度时，会自动在单词之间进行换行，以适应容器的宽度。

word-break的代码示例如下：

p {
  word-break: break-all;
}

上述代码将p标签内的文本换行方式设置为在任意位置换行，即使在单词中间。

应用示例：

<p>这是一段很长的文本，其中包含了很多单词和标点符号，但是由于设置了word-break属性为break-all，所以这段文本可以在任意位置换行，以适应容器的宽度。</p>

在上述应用示例中，由于将word-break属性设置为break-all，因此当文本内容超过容器宽度时，会自动在单词之间进行换行，以适应容器的宽度。这样可以更好地控制文本的显示效果，使其适应不同的容器大小和分辨率。

initial值和inhert值的详细介绍和示例

初始值（initial）和继承值（inherit）是在CSS中使用的两种属性值，它们在设置和继承样式时有着不同的作用。

初始值（initial）用于将属性设置为其默认值。每个CSS样式都有初始值，通过使用initial可以有效地将其重置，相当于硬复位。它通常被用于撤销作用于某个元素的样式。例如，如果要将元素的边框样式重置为默认样式，可以使用“border: initial;”。

继承值（inherit）用于强制继承父元素的属性值。在CSS中，一些属性可以从父元素继承，例如字体样式、颜色等。当一个元素的值定义为长度（如px、em、rem等）有单位时，子元素会继承它的计算值。使用无单位的数值时，继承的是声明值，即在每个继承子元素上会重新算它的计算值。例如，“color: inherit;”会让元素的字体颜色继承自父元素的字体颜色。

以下是一些示例：

1. 初始值（initial）：

p {
    
    
  color: initial; /* 将段落的字体颜色设置为默认颜色 */
}

2. 继承值（inherit）：

div {
    
    
  border: 2px solid black; /* 定义一个黑色边框 */
}

div > p {
    
    
  border: inherit; /* 子元素继承父元素的边框样式 */
}

在这个例子中，所有直接子元素 <p> 的边框样式会继承父元素 <div> 的边框样式，即2px宽、实线、黑色的边框。

CSS设计文本样式的特殊设置

以下是一些CSS设计文本样式的特殊设置，包括文本阴影、文本溢出、文本装饰和文字装饰效果等：

1. 文本阴影（Text Shadow）

文本阴影可以创建文本的阴影效果，增强文本的视觉效果。通过使用text-shadow属性，可以设置阴影的位置、颜色和模糊半径。

p {
    
    
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

上述代码将在段落 <p> 的文本周围添加一个黑色阴影，其中阴影的偏移量为2像素，模糊半径为4像素。

2. 文本溢出（Text Overflow）

文本溢出用于处理文本溢出到容器的情况。通过使用overflow属性，可以设置文本的处理方式，例如省略号或滚动条。

p {
    
    
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

上述代码将使段落 <p> 中的文本溢出时显示省略号。其中，overflow属性设置为hidden表示隐藏溢出的内容，white-space属性设置为nowrap表示不换行，text-overflow属性设置为ellipsis表示显示省略号。

3. 文本装饰（Text Decoration）

文本装饰可以添加下划线、上划线、删除线等装饰效果。通过使用text-decoration属性，可以设置装饰的类型和颜色。

p {
    
    
  text-decoration: underline red;
}

上述代码将在段落 <p> 的文本下方添加一个红色的下划线。可以将text-decoration属性设置为none来移除装饰效果。

4. 文字装饰效果（Text Decoration Effect）

文字装饰效果可以创建更复杂的装饰效果，例如波浪线或弹簧线。通过使用text-decoration-style属性，可以设置装饰效果的类型。

p {
    
    
  text-decoration: underline;
  text-decoration-style: wavy;
}

all属性

CSS中的all属性是一种简写属性，用于将所有元素的值设置为其初始值或继承的值。也可以用于在某些情况下将元素的值设置为另一个电子表格的来源。此属性用于重置文档中的所有CSS属性。

all属性的语法如下：

all: initial | inherit | unset | revert

属性值：

• initial：此属性用于将所有属性设置为其默认值。
• inherit：此属性用于设置其父元素的all属性。
• unset：此属性用于指定所有元素属性（如果默认继承）应更改为它们的继承值，否则为初始值。
• revert：此属性使元素恢复成浏览器默认的样式。

以下是一些使用all属性的示例：

1. 继承父元素的样式：

div {
    
    
  text-align: center;
  color: green;
  all: initial; 
}

在这个例子中，<div>元素的所有CSS属性都将被重置为其初始值。
2. 继承父元素的样式：

div {
    
    
  text-align: center;
  color: green;
  all: inherit; 
}

在这个例子中，<div>元素将继承其父元素的all属性值。
3. 指定元素属性的继承方式：

div {
    
    
  text-align: center;
  color: green;
  all: unset; 
}

在这个例子中，<div>元素的所有属性将继承其父元素的对应属性值，如果没有父元素的对应属性值则使用元素的初始值。

opacity

opacity是一个CSS属性，它用于设置或检索对象的不透明度。它的值是一个范围从0（完全透明）到1（完全不透明）的数字。可以使用opacity属性来实现淡入淡出的效果，或者控制元素的透明度。

例如，下面的代码将使一个元素的不透明度设置为0.5，即半透明：

element {
    
    
  opacity: 0.5;
}

同时，opacity属性也可以用于整个页面的不透明度设置，例如：

body {
    
    
  opacity: 0.7;
}

以上代码将使整个页面的不透明度设置为0.7，使得页面背景半透明。

currentColor值

currentColor值在CSS中是一个特殊的变量，代表当前元素的color值。它可以在任何需要写颜色的地方使用，这个变量的值是当前元素的color值。如果当前元素没有在CSS里显示地指定一个color值，那它的颜色值就遵从CSS规则，从父级元素继承而来。父元素未设定color值，会寻找祖先元素直到有设定color的元素为止，如果没有，以浏览器默认颜色为准。

以下是一个使用currentColor值的CSS示例：

body {
    
    
  color: currentColor;
}

/* 这将使body的文本颜色继承自父元素的color值 */

这个例子中，我们将body元素的文本颜色设置为currentColor。这意味着body元素的文本颜色将继承自其父元素的color值。如果父元素的color值发生变化，body元素的文本颜色也会随之变化。

另外，你也可以在边框颜色、背景色等其他属性中使用currentColor值。例如：

div {
    
    
  border-color: currentColor;
}

在这个例子中，div元素的边框颜色将继承自其父元素的color值。如果父元素
的color值发生变化，div元素的边框颜色也会随之变化。

rem值

rem是相对单位，相对于根元素（HTML文档中的根节点，一般为html标签）的字体大小。在网页中，通常将根元素的字体大小设置为16像素，如果某个元素的像素值为32像素，那么该元素的REM值就为2。

在CSS中，使用rem单位可以轻松地设置字体大小，而不必每次都指定像素值。此外，rem单位还可以方便地适应不同设备的屏幕分辨率。
以下是一个使用rem单位的CSS代码示例：

html {
    
    
  font-size: 16px;
}

h1 {
    
    
  font-size: 3rem; /* 相当于3 * 16px = 48px */
}

在这个示例中，根元素的字体大小被设置为16像素，然后使用rem单位来设置h1元素的字体大小。由于根元素的字体大小为16像素，因此3rem等于3乘以16像素，即48像素。这样就可以方便地设置h1元素的字体大小为48像素。

使用rem单位的CSS代码具有以下特点：

1. 相对性：rem单位相对于根元素的字体大小进行定义，这使得我们可以根据根元素的字体大小来设置其他元素的字体大小。如果根元素的字体大小发生变化，使用rem单位的字体大小也会相应地调整。
2. 适应不同设备：由于rem单位是相对单位，可以根据不同设备的屏幕分辨率自适应调整字体大小。这样就可以确保在不同设备上呈现的网页效果更加一致和美观。
3. 易于维护：使用rem单位可以避免硬编码像素值，从而使得代码更加简洁、易于维护。如果需要调整字体大小，只需要修改根元素的字体大小，使用rem单位的元素会自动调整字体大小。
4. 可读性更好：使用rem单位可以清晰地表达元素之间的相对大小关系，使得代码更加易于阅读和理解。
5. 支持自定义字体：使用rem单位可以方便地引入自定义字体，而不必担心字体大小与页面其他元素不匹配的问题。

使用rem单位的CSS代码可以提高代码的可维护性、可读性和响应式设计能力。

使用rem单位与使用其他单位（如px、pt等）相比，有以下几个不同之处：

1. 相对性：rem单位是相对单位，相对于根元素的字体大小进行定义。这种相对性使得我们可以根据根元素的字体大小来设置其他元素的字体大小，而无需每次都指定像素值。这种相对性使得页面的字体大小能够更好地适应不同设备和屏幕分辨率。
2. 适应不同设备：由于rem单位的相对性，可以根据不同设备的屏幕分辨率自适应调整字体大小。这样就可以确保在不同设备上呈现的网页效果更加一致和美观。
3. 易于维护：使用rem单位可以避免硬编码像素值，从而使得代码更加简洁、易于维护。如果需要调整字体大小，只需要修改根元素的字体大小，使用rem单位的元素会自动调整字体大小。这种易于维护的特性使得开发人员可以更加高效地进行开发和维护。
4. 可读性更好：使用rem单位可以清晰地表达元素之间的相对大小关系，使得代码更加易于阅读和理解。同时，使用rem单位也可以提高代码的可重用性和可维护性。
5. 支持自定义字体：使用rem单位可以方便地引入自定义字体，而不必担心字体大小与页面其他元素不匹配的问题。这使得开发人员可以更加灵活地进行页面设计和排版。