目录
前言:
昨天我们已经开始学习了关于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的一些的基本的内容,这些都是我的个人学习的一些笔记,可能会有所遗漏,欢迎大家的指正,也欢迎大家在评论区和谐讨论。
186
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
