当前位置：首页 > news >正文

初识CSS样式与文本背景样式

news 2025/6/22 15:53:51

前言:

1.什么是CSS:

2.关于css的主要特性:

2.1层叠性：

2.2继承性：

2.3优先级：

2.4.CSS的组成结构:

3.css样式的三种写法:

3.1内联样式：

3.1.2存在的优点和缺点:

3.2内部样式表：

3.2.2存在的优点和缺点:

3.3外部样式表：

3.4CSS选择器：

4.盒子标签:

4.1块级元素

4.2页面中的一个独立部分

4.3文章或内容块

4.4导航链接的语义元素

4.5辅助内容

4.6页面或部分的头部

4.7页面或部分的页脚

4.8突出显示文本:

4.9文本标签

4.10创建表格布局

, 5.文本样式:
5.1文本的颜色color：
1. 5.2设置文本的水平对齐方式text-align：
2. 5.3文本添加text-decoration：
3. 5.4text-indent：
  
  5.5 text-shadow：
  
  5.6  letter-spacing：
  
  5.7 word-spacing：
  
  5.8 line-height：
  
  5.9 font-family：
  
  5.10  font-size：
  
  5.11  font-weight：
  
  5.12 font-style：
  
  5.13  text-transform：
  
  5.14 white-space：
  
  5.15direction：
  
  结语:

前言:

昨天我们已经开始学习了关于web前端的html的一点知识,今天我们开始学习前端三剑客里面的的另一个css样式还有文本背景样式.这些都是我个人的学习,欢迎大家一起和谐讨论.

1.什么是CSS:

CSS（层叠样式表，Cascading Style Sheets）是一种用于描述HTML或XML（包括如SVG、XHTML等派生语言）文档样式的计算机语言。CSS描述了如何在屏幕、纸质、音频等各种媒体中渲染元素。这种分离使得文档内容（written in HTML or a similar markup language）与文档的表现（如样式设计）可以独立开来。这种分离有许多优点，包括改进内容的可访问性，提供更多的样式和设计选项，以及使得网站更易于维护和更新。

2.关于css的主要特性:

2.1层叠性：

当多个样式应用于同一个HTML元素时，CSS会根据一定的规则（如选择器的特异性）来确定哪个样式应该被应用。这就是所谓的“层叠”或“级联”。

2.2继承性：

在CSS中，某些样式属性可以从父元素继承到子元素。例如，如果你为一个元素设置了特定的字体，那么该元素的所有子元素也会默认使用这种字体，除非你为它们特别指定了另一种字体。

2.3优先级：

当多个样式规则可以应用到同一个元素上时，CSS会根据一套复杂的优先级规则来决定哪个规则应该生效。这些规则包括选择器的类型（如内联样式优先于外部样式表）、选择器的特异性（更具体的选择器优先于更一般的选择器）以及规则的来源（用户定义的样式可能优先于作者定义的样式）等。

2.4.CSS的组成结构:

基本语法结构非常简单，主要由三部分构成：选择器、属性和值。选择器用于指定应用样式的HTML元素，属性是你想要改变的样式属性，值则是你给这个属性赋予的特定值。例如，p {color: red;}这个规则表示所有<p>元素的文本颜色应该是红色。其中，p是选择器，color是属性，red是值。

3.css样式的三种写法:

3.1内联样式：

直接在HTML元素中使用style属性来添加CSS样式。这种方法适用于单个元素的特定样式，但不建议在大型项目中使用，因为它会使HTML代码变得混乱且难以维护。

通过标签属性style.直接把样式写在标签里

<标签名 style='属性:值; 属性:值;'>

<p style="color: red;">这是一段红色的文本。</p>

3.1.2存在的优点和缺点:

优点: 权重很高,写起来很方便

缺点: 灵活性不强

频率: 较少

范围: 单个标签

3.2内部样式表：

在HTML文档的<head>部分使用<style>标签来包含CSS规则。这种方法适用于单个页面的样式定义

例子:

<head>

<style>

css代码

</style>

</head>

<head>  <style>  p {  color: red;  }  </style>  
</head>  
<body>  <p>这是一段红色的文本。</p>  
</body>

3.2.2存在的优点和缺点:

优点: 写起来方便/只有一个页面很灵活

缺点: 不可复用

频率: 较高(学习阶段常用)

范围: 单个页面

3.3外部样式表：

将CSS规则保存在一个单独的.css文件中，并通过HTML文档的<link>标签引用它。这是最常见且最推荐的方法，因为它使HTML和CSS分离，更易于管理和维护。

<head>  <link rel="stylesheet" href="styles.css">  
</head>  
<body>  <p>这是一段红色的文本。</p>  
</body>

3.3.2存在的优点和缺点:

优点: 可以重复使用

缺点: 需要导入

频率: 最高(正式开发时.主要用它)

范围: 整个网站

3.4CSS选择器：

在CSS中，你使用选择器来“找到”你想要样式化的HTML元素。选择器可以基于元素的名称、ID、类、属性等来匹配元素。例如，上面的例子中，p就是一个选择器，它选择了所有的<p>元素。你还可以使用更复杂的选择器来匹配特定的元素或元素组合。

4.盒子标签:

在HTML中，盒子标签通常指的是<div>元素，也被称为division或区块标签。<div>是一个块级元素，用于将网页内容划分为独立、不同的部分或区块。它本身并不包含任何特定的格式或样式，但可以通过CSS进行高度定制，包括设置宽度、高度、背景色、边框等属性。

盒子模型是CSS布局的基础，每个HTML元素都可以看作是由内容、内边距（padding）、边框（border）和外边距（margin）组成的矩形盒子。

以下是关于盒子标签的一些详细的介绍:

`4.1`块级元素`<div>`:

块级元素，常用于布局和样式化。它可以包含其他块级元素和内联元素，是构建页面结构的主要元素之一。

`4.2`页面中的一个独立部分`<section>`:

HTML5引入的语义元素，表示页面中的一个独立部分。它通常用于包含一组相关的内容。

`4.3`文章或内容块`<article>`:

另一个HTML5语义元素，表示页面中的一篇文章或内容块。它通常包含标题、段落、图像等元素。

`4.4`导航链接的语义元素`<nav>`:

用于包含导航链接的语义元素。它通常包含一组指向网站不同部分的链接。

`4.5`辅助内容`<aside>`:

表示与页面主要内容相关但不太重要的辅助内容。它可以用于包含侧边栏、广告、引用等元素。

`4.6`页面或部分的头部`<header>`:

表示页面或部分的头部。它通常包含标题、标志、导航等元素。

`4.7`页面或部分的页脚`<footer>`:

表示页面或部分的页脚。它通常包含版权信息、联系信息、社交媒体链接等元素。

`4.8`突出显示文本`<span>`:

内联元素，用于对文本进行样式化。它不会引入换行，常用于突出显示文本或设置文本的样式。

`4.9文本标签<p>`:

段落元素，用于包含一段文本。它是块级元素，会在其内容前后引入换行。

`4.10`创建表格布局`<ul>`, `<ol>`, `<li>`:

分别表示无序列表、有序列表和列表项。它们常用于创建列表结构。它们用于创建表格布局。

5.文本样式:

CSS中与文本样式相关的详细属性列表及其说明：

5.1文本的颜色color：

作用：设置文本的颜色。
值类型：颜色值，可以是颜色名称、十六进制颜色代码、RGB值或RGBA值。
示例：color: red; 或 color: #ff0000;。

5.2设置文本的水平对齐方式text-align：

作用：设置文本的水平对齐方式。
值类型：left（左对齐）、right（右对齐）、center（居中对齐）、justify（两端对齐）。
示例：text-align: center;。

5.3文本添加text-decoration：

作用：为文本添加装饰线，如下划线、上划线、删除线等。
值类型：none（无装饰线）、underline（下划线）、overline（上划线）、line-through（删除线）或它们的组合。
示例：text-decoration: underline;。

5.4text-indent：

作用：设置文本的首行缩进。
值类型：长度值（如像素值或百分比）或负值。
示例：text-indent: 2em;（首行缩进两个字符宽度）。

5.5 text-shadow：

作用：为文本添加阴影效果。
值类型：horizontal-offset vertical-offset blur-radius color，其中horizontal-offset和vertical-offset是阴影的水平和垂直偏移量，blur-radius是阴影的模糊半径，color是阴影的颜色。
示例：text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);（添加黑色模糊阴影）。

5.6 letter-spacing：

作用：设置字符之间的间距。
值类型：长度值（如像素值）或normal（默认值，正常间距）。
示例：letter-spacing: 2px;。

5.7 word-spacing：

作用：设置单词之间的间距。
值类型：长度值（如像素值）或normal（默认值，正常间距）。注意，这个属性对中文文本通常没有效果。
示例：word-spacing: 5px;。

5.8 line-height：

作用：设置行高，即文本行与行之间的垂直间距。
值类型：长度值（如像素值）、百分比或normal（默认值，根据字体大小自动计算行高）。
示例：line-height: 1.5;（行高为字体大小的1.5倍）。

5.9 font-family：

作用：设置文本的字体。
值类型：字体名称列表，用逗号分隔。浏览器会按顺序尝试使用列表中的字体，直到找到可用的字体为止。
示例：font-family: Arial, sans-serif;（首选Arial字体，如果不可用则使用无衬线字体）。

5.10 font-size：

作用：设置文本的大小。
值类型：绝对大小（如xx-small、x-small、small、medium、large、x-large、xx-large）、相对大小（如larger、smaller）或长度值（如像素值、百分比）。还可以使用em和rem单位表示相对于当前元素或根元素的字体大小。
示例：font-size: 16px; 或 font-size: 1em;。

5.11 font-weight：

作用：设置文本的粗细程度。
值类型：normal（正常）、bold（粗体）、bolder（更粗）、lighter（更细）或数字值（如100到900之间的整数，以100的倍数递增）。注意，不是所有的字体都支持所有的粗细程度。
示例：font-weight: bold;。

5.12 font-style：

作用：设置文本的字体样式。
值类型：normal（正常）、italic（斜体）或oblique（倾斜）。注意，oblique通常与italic有细微的差别，但具体取决于字体本身的设计。
示例：font-style: italic;。

5.13 text-transform：

作用：控制文本的大小写转换。
值类型：none（无转换）、capitalize（每个单词的首字母大写）、uppercase（全部大写）或lowercase（全部小写）。
示例：text-transform: uppercase;。

5.14 white-space：

作用：控制文本中的空白字符如何处理。
值类型：normal（合并空白字符和换行符）、nowrap（不换行，忽略换行符）、pre（保留空白字符和换行符）等。还有其他一些值，但不太常用。
示例：white-space: nowrap;（防止文本换行）。

5.15direction：

作用：设置文本的方向。这对于从右到左书写的语言（如阿拉伯语和希伯来语）非常有用。
值类型：ltr（从左到右）、rtl（从右到左）等。还有其他一些值，但不太常用。
示例：direction: rtl;（设置文本从右到左显示）。

结语:

今天我们介绍了关于css的一些的基本的内容,这些都是我的个人学习的一些笔记,可能会有所遗漏,欢迎大家的指正,也欢迎大家在评论区和谐讨论。

前言:

1.什么是CSS:

2.关于css的主要特性:

2.1层叠性：

2.2继承性：

2.3优先级：

2.4.CSS的组成结构:

3.css样式的三种写法:

3.1内联样式：

3.1.2存在的优点和缺点:

3.2内部样式表：

3.2.2存在的优点和缺点:

3.3外部样式表：

3.4CSS选择器：

4.盒子标签:

4.1块级元素<div>:

4.2页面中的一个独立部分<section>:

4.3文章或内容块<article>:

4.4导航链接的语义元素<nav>:

4.5辅助内容<aside>:

4.6页面或部分的头部<header>:

4.7页面或部分的页脚<footer>:

4.8突出显示文本<span>:

4.9文本标签<p>:

4.10创建表格布局<ul>, <ol>, <li>:

5.文本样式:

5.1文本的颜色color：

5.2设置文本的水平对齐方式text-align：

5.3文本添加text-decoration：

5.4text-indent：

5.5 text-shadow：

5.6 letter-spacing：

5.7 word-spacing：

5.8 line-height：

5.9 font-family：

5.10 font-size：

5.11 font-weight：

5.12 font-style：

5.13 text-transform：

5.14 white-space：

5.15direction：

结语:

相关文章：

`4.1`块级元素`<div>`:

`4.2`页面中的一个独立部分`<section>`:

`4.3`文章或内容块`<article>`:

`4.4`导航链接的语义元素`<nav>`:

`4.5`辅助内容`<aside>`:

`4.6`页面或部分的头部`<header>`:

`4.7`页面或部分的页脚`<footer>`:

`4.8`突出显示文本`<span>`:

`4.9文本标签<p>`:

`4.10`创建表格布局`<ul>`, `<ol>`, `<li>`: