如果网站都具有相同的风格，它们会看起来很无聊。对我们来说幸运的是，有多种功能可以改变网页设计，从文本和背景颜色一直到布局和视觉效果。在本文中，学习将 HTML 样式应用于元素的基础知识。
HTML 和 CSS
HTML 是一种标记语言，它允许我们创建和构建 Web 内容。然而，即使在互联网的早期，它的局限性也很明显——除了一些基本的文本和背景颜色之外，没有办法对内容进行样式设置。因此，发明了一种与 HTML 一起使用的新标记语言——CSS，是 Cascading Style Sheets 的缩写。之所以称为“级联”，是因为当一种样式应用于一个元素时，它会自动应用于嵌套在其中的所有元素。
如今，我们同时使用 HTML 和 CSS 来创建网页——分别用于构建和设置内容样式。CSS 允许我们控制文本颜色、字体、大小、元素之间的间距、元素的位置和布局、背景图像、颜色、网站在不同设备和屏幕尺寸上的外观等等。
使用 CSS
将 CSS 添加到 HTML 文档有 3 种不同的方法：
• 内联样式使用HTML 元素内的属性。 style
• 内部样式使用节<style>中的元素<head>。
• 外部样式使用<link>元素链接到外部 CSS 文件。
文本对齐
现在您对内联 CSS 样式语法有所了解，让我们看一下示例。
假设您想将段落的对齐方式设置为默认居中。根据语言的默认脚本方向，文本通常左对齐或右对齐。使用该属性text-align并选择值center，left 和right 是该属性的其他可能值。
样式属性语法
编写代码为浏览器提供有关如何显示内容的命令。将内联 CSS 样式应用于元素时，您需要与浏览器沟通 3 件事：
• 您希望更改元素样式的事实
• 您要更改的样式属性
• 您希望设置的属性值
从技术上讲，您可以通过以下方式将其写出来。在开始标记中，添加一个属性，style 后跟一个等号 ( = )。接下来，按以下顺序描述您要设置的属性：
1.开引号
2. 指明属性（例如，color）
3. 放一个冒号
4. 说明房产的价值（例如，blue）
5.放一个分号
6.关闭引号
确保不要错过任何标点符号 - 没有它们，浏览器将无法正确显示您的页面！
文字颜色
默认情况下，除非另有说明，否则浏览器会将整个文本显示为黑色。要更改文本颜色，请将属性添加style 到文本元素标记，后跟等号 ( = )，然后使用属性color.
有 3 种不同的方式可以设置颜色：
• 按名称 — 例如
• 按十六进制值 - 例如，#0000FF
• 按 RGB 值 — 例如，rgb(0, 0, 255)
虽然所有浏览器都支持超过 140 种颜色名称，更专业的方法是使用十六进制或 RGB 值。
字体大小
所有浏览器的标准字体大小为 16 像素——除非您另有说明，否则这将是您正文的大小。
您可以使用多种类型的单位来设置字体大小。最简单的是像素，或px. 要更改字体大小，style 请向文本标签添加一个属性，使用属性font-size，然后输入您希望文本的大小（以像素为单位）——例如，40px。
背景颜色
默认背景颜色是透明的，这意味着如果您没有在页面上的任何位置指定，大多数浏览器将使用白色背景。
您可以将该background-color属性应用于几乎任何元素：在<body>元素中设置页面背景，或在文本元素中设置文本背景，例如<h1>. 与调整文本颜色类似，您可以使用不同类型的值来设置背景颜色：颜色名称 ( orange)、十六进制值 ( #FFA500) 或 RGB 值 ( rgb(255, 165, 0))。
字体系列
如果您不指定字体，也就是文本的字体系列，浏览器将使用默认字体。默认字体取决于浏览器和操作系统。例如，在 Windows 上的 Google Chrome 中，它是 Times New Roman。如果您想使用不同的字体，请将style 属性应用于 text 标签并使用 property font-family。
设置字体值的一种方法是使用特定的字体系列名称，例如Arial、Verdana和。另一种方法是使用 5 个通用 CSS 字体名称之一：、、、和. 在这种情况下，浏览器将提供它支持的所选类别的一种字体。 Tahomaserifsans-serifmonospacecursivefantasy
填充
如果我们想象所有 HTML 元素都封装在不可见的盒子中，那么段落的填充将是文本内容和盒子边框之间的空间。默认情况下，此空间为零，这意味着边框位于内容结束的位置。一些元素在边界之外有额外的空间，称为“边距”——例如，段落和标题。
但是如果你想在内容和它的边框之间设置自定义空间呢？您完全可以通过使用属性padding 内的style 属性来做到这一点。以像素为单位设置所需的填充值，一切顺利！
边框宽度、样式和颜色
默认情况下，元素的边框是不可见的。但是，CSS 允许您指定边框宽度、样式和颜色。更改元素border 样式的最简单方法是使用边框属性。它是一种速记，可让您一次设置所有 3 个属性。
您可以在属性内设置所有 3 个值border ：宽度、样式和颜色。如果缺少其中一个值并不重要。例如，要在页面的某个部分周围设置一个 1 像素的实线边框，请使用标签style中的属性，<div> 其值为"border:1px solid;"。如果不指定颜色，边框颜色将与文本颜色匹配。
颜色属性
使用 CSS 设置颜色的最简单方法是使用颜色名称。然而，这并不能提供灵活性，因为支持的颜色只有大约 140 种，任何设计师都知道这还远远不够。更好的选择是使用十六进制或 RGB 颜色代码，因为它们允许您使用超过 1600 万种颜色，这是一个完全不同的球赛。
字体大小属性
许多 CSS 属性允许不同的值类型，font-size值也不例外。定义文本大小的最简单方法是使用像素px——一个无论如何都始终保持不变的绝对单位。
但是，如果您要更改文档的默认字体大小，您可能希望所有元素彼此保持成比例。这就是相对单位em和rem发挥作用的地方，分别等于父元素和根元素 ( <HTML>) 的字体大小。例如，如果您设置 a <h1 style=" font-size: 2rem;">，则无论您在文档上设置何种文本大小，您的标题将始终是正文的两倍。
文本对齐属性
如果您的默认语言使用从左到右的脚本，则默认对齐方式为left. 要更改此设置，请将值设置为右侧。 text-align
该属性可以采用的其他值是center，它使文本居中，以及justify，它拉伸线条以使它们都具有相等的宽度，就像在报纸中一样。
背景颜色属性
您可以将该background-color属性应用于几乎任何元素，而不仅仅是文本。在标签中使用此属性<body>将设置整个页面的背景颜色。
还记得 HTML 元素与盒子的相似之处吗？为元素设置背景颜色将改变其整个框的颜色，包括边框。
填充属性
CSS 提供了不同的方法来设置填充大小。如果您使用具有一个值的填充速记属性，它将为所有 4 个边设置相同的填充大小。例如，"padding: 25px;"将使所有边的填充为 25 像素。
但是，有一些方法可以为每一侧设置不同的填充值。padding 您可以为将分别定义顶部、右侧、底部和左侧填充的属性编写 4 个值。例如，"padding: 25px 50px 75px 100px;"。但是，这种方法可能会变得非常混乱，因此另一种选择是使用单独的填充属性"padding-top:25px;"、"padding-right:50px;"、"padding-bottom:75px;"和"padding-left:100px;"。
以上内容为转载
网友评论