理解级联样式表 (CSS) —（基础）
理解级联样式表 (CSS) —（基础）
磷 与我之前关于 HTML 的重要性、其语义、标签的文章不同。重要的是我要发布那篇文章的后续内容。在这里，我将讨论 HTML 的样式器，它被称为 ** 层叠样式表** 缩写为 (CSS) .
让我们通过定义什么是样式表以及级联的含义来开始这次冒险。
什么是样式表？
根据流行的搜索引擎； google，它将样式表定义为 “一种由字体和布局设置组成的模板文件，为文档提供标准化外观。”
另一方面，级联意味着 以系列或顺序排列（许多设备或对象）。
现在，让我们更深入地了解。
什么是层叠样式表？
根据 Mozilla 开发者网络 (MDN) 的说法， 级联样式表 (CSS) 是一种样式表语言，用于描述以 HTML 或 XML（包括 XML 方言
CSS 被设计用来分离和内容，包括布局、颜色、字体。这种分离改善了网站的总体概况，使网站易于使用并吸引眼球。万维网上几乎没有一个网站不使用 CSS 样式。
以下是未设置样式的网站与使用 CSS 设置样式的同一网站之间的比较。
An example of a website without CSS
The same website styled with CSS.
您会发现上述两个示例之间存在很大差异，并且它对您的读者有影响。 CSS 对 HTML 产生了巨大的影响，使其更具吸引力。现在让我们研究一下 it 的语法、属性以及如何将 CSS 文件添加到 HTML 文档中。
CSS 语法
CSS 语法是由选择器和声明块组成的规则，声明块也包含属性及其各自的值。选择器指向要应用 CSS 样式的 HTML 元素。 CSS 属性用分号分隔。它是选择器名称后跟属性的组合：为特定选择器定义的值对。
Image displaying CSS syntax
在下面的示例中，每个
标签将具有蓝色、白色背景并与中心对齐。
h1 styling showing the CSS syntax.
将 CSS 添加到您的 HTML
您可以通过三 (3) 种不同的方式将 CSS 添加到 HTML 文档中；
- 内联样式： 这涉及在 HTML 元素中添加样式属性。例子：
Example of Inline Styling
- 内部造型 : 这是通过嵌套里面的标签HTML 文件的标签。这会将 HTML 和 CSS 放在同一个 HTML 文档中。这并不总是合适的，因为您可能希望为繁琐的 HTML 文档设置样式，并且在包含您的 HTML 的同一文档中设置样式可能会给您留下一长串代码，这可能会导致您在需要搜索或进行其他更改时感到沮丧。
Internal Styling
- 外部造型 ：这是最有效的 CSS 样式之一。它涉及在项目的根文件夹或单独的文件夹中创建单独的 CSS 文件。 CSS 文件扩展名为 (.css)，它会自动通知您的计算机这是一个 CSS 文件。
这样做不会自动设置 HTML 文档的样式，而是需要添加标记到您的 HTML 文件，该文件将指向您的 CSS 文件的位置。
下面是一个说明这一点的插图；
External Styling
这上面的标签包含一个“rel”属性，表示要链接到 HTML 文件的文档与 HTML 文档的关系。在上图中 rel 的值为 stylesheet，因为要链接的文档是 HTML 的样式表。 它还包含一个指向 CSS 文件位置的 href 属性。
CSS 属性
这里有一些 最常被使用 CSS 属性
- 颜色 : 定义文本的颜色
- 背景 : 定义所选 HTML 元素的背景。它的值可能包含颜色、图像或颜色渐变。
- 文本对齐 ：这会修改文本的位置，无论是居中、左还是右。
- 字体系列 ：此属性修改所选 HTML 元素的字体类型。
- 利润 ：它们用于在元素周围创建空间。
- 填充 : CSS padding 属性用于在元素内容周围生成空间，在任何定义的边界内。
- 字体大小 ：这指定字体的大小。
- 高度 : 用于指定元素的高度。
- 宽度 : 用于指定元素的宽度。
- 边界 ：允许您指定元素边框的样式、宽度和颜色。
- 展示 ：定义组件（div、超链接、标题等）将如何放置在网页上。
- 列表样式： 允许您一次设置所有列表样式属性。
- 字体粗细 ：设置字体的粗细（或粗细）。可用的权重取决于当前设置的字体系列。
- 文字装饰 ：此属性设置文本上装饰线的外观。
- z-index ：此属性设置z-order，即元素的位置顺序。 z-index 数值最小的元素被放置在每个元素之下，而 z-index 数值最大的元素被放置在所有其他元素之上。默认情况下，每个元素的 z-index 为 1。
- 转换 ：这使您可以旋转、缩放、倾斜或平移元素。它修改了 CSS 的坐标空间。
- 文本转换 ：指定如何将元素的文本大写。它可用于使文本显示为全大写或全小写，或每个单词大写。
- 漂浮 ：它将元素放置在其容器的左侧或右侧，允许文本和内联元素环绕它。
- 线高 ：设置行框的高度。它通常用于设置文本行之间的距离。
- 字母间距 : 属性设置文本字符之间的水平间距行为。
- 光标 : 设置鼠标光标，如果有的话，当鼠标指针在一个元素上时显示。
我们还有其他惊人的 CSS 属性，本文未涉及。
最后，这篇文章包含了整个 CSS 的一小部分内容。在接下来的几周里，我希望能写更多关于响应式设计、CSS 框架、CSS 版本和其他有趣主题的文章。
学分： mdn 文档， W3学校， 极客极客 , 射线.so .
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
