如果没有样式，网络将是一个无聊的统一网站。幸运的是，我们拥有 CSS——一种允许前端开发人员和设计师发挥创造力并构建真正独特的设计解决方案的语言。
一些设计师仍然觉得 CSS 令人生畏并且难以学习。好消息是您不必学习所有东西来掌握 CSS 并创建吸引人的界面。借助 CSS 知识，您可以更好地控制您的设计——您可以完全按照您希望的方式实现它们。此外，您不需要开发人员来解决问题。
即使 HTML 和 CSS 是不同的语言，你也永远不会使用其中一种而没有另一种。
CSS的定义
所有语言都有一个基本词汇，母语人士甚至想要点餐或问路的游客都会使用这些词汇。高级学习者或母语人士拥有更广泛和更丰富的词汇，使他们的演讲更加精致和精致。同样，HTML 是任何网站的普通部分，而 CSS 是它的美丽伴侣。
CSS — 层叠样式表 — 是 Web 开发人员用来装饰屏幕上显示的 HTML 元素的一种语言。样式通常保存在单独的外部 CSS 文件中。
与任何其他语言一样，CSS 有自己的语法，其主要规则之一是花括号 — { }. 您将在课程后面熟悉语法，但现在请记住——不要错过右弯括号。
级联
CSS 中的“级联”一词解释了样式规则从不同级别“级联”下来。换句话说，在 CSS 中，顺序很重要。当样式规则具有相同的特殊性时，文件中最后一个具有更高的优先级并覆盖它上面列出的那些。
例如，假设您是一名设计师，而客户向您发送了一个任务：“制作<h1>红色”。一个小时后，他们会向您发送更新：“制作<h1>蓝色。” 你会为标题设置什么颜色？最后一个词有更大的权重。标题应该是蓝色的。是的，它的优先级较低，但这就是 CSS 的工作方式。
不要将此规则与我们应用于不同类型插入样式的级联顺序规则混为一谈
应用 CSS
假设您编写了一个样式表，并且可以开始使用了。如何将 CSS 应用到 HTML 页面？有3种方式：
外部样式表。您从外部资源添加独立的 CSS 文件。这一个文件可以改变整个网站的外观。
内部样式表。您<style>在 HTML 文件的 head 部分添加元素并将它们仅应用于此特定网页。
内联样式。内联样式仅将唯一规则应用于使用该<style>属性的一个组件。
CSS 默认页面样式
默认页面样式就像尚未触及它的画家（或在我们的例子中为开发人员）的空白画布。每个浏览器都有自己的默认样式，也称为浏览器或用户代理 (UA) 样式表，如果您尚未应用任何样式，则默认情况下可以使任何网站可读。
默认样式因浏览器而异，但通常包括按钮、链接、填充、边距、边框、不同标题和其他有用内容的一些基本设置。如果您想查看浏览器默认设置以确保它们符合您的层叠表，您可以在线找到它们，例如 Chrome 默认样式。
CSS 背景颜色属性
为了设置元素的背景，我们使用background-color属性。要指定颜色，开发人员通常会参考其有效的 HTML 名称，CSS 支持的 HEX、RGB 或其他代码。
用于设置文本颜色的 CSS 属性
您可以使用 CSS 将各种格式属性应用于文本。您可以更改文本颜色、对齐其位置、变换其方向、指定行高以添加更多空间、使其变为粗体、斜体或带下划线 - 您可以命名它！在示例中，要更改标题的颜色，我们使用内部样式表应用属性。与属性一样，开发人员使用 HTML 颜色名称、HEX、RGB 或其他颜色代码来指定特定颜色。 colorbackground-color
在此示例中，我们使用外部样式表方法插入样式，该方法通过将 .css 文件链接到 <link> 元素内来将 CSS 代码与 HTML 分开。
CSS 填充属性
填充在其容器的定义边界内围绕元素创建空间。我们需要填充来让内容呼吸并为设计带来视觉清晰度。CSS 为您提供对填充的完全控制。
您可以使用一个公共padding属性并一次定义所有四个值（顶部、右侧、底部和左侧填充）。padding-top或者，您可以使用、padding-right、padding-bottom和padding-left 属性分别指定每个值。
CSS 边距属性
与 padding 不同的是，margin 负责外部事务。它在元素边界之外创建负空间，并防止它撞到其他内容部分。没有边距，设计将变成一个没有新鲜“空气”的墓地，这是一个负空间。
您可以选择一个速记margin属性并列出用空格分隔的所有值，也可以为每个元素的一侧使用唯一属性（margin-top、margin-right、margin-bottom和margin-left）。
CSS 文本对齐属性
对于水平文本对齐，开发人员使用该属性。它允许您应用居中、左对齐、右对齐或两端对齐（拉伸线条以使每条线条具有相等的宽度）。相应的值为、、或。 text-aligncenterleftright justify
就像在示例中一样，居中对齐非常适合标题和简短副本，而左对齐是大文本块最流行的类型。
CSS 字体大小属性
CSS允许您更改字体大小，当然。但是，请避免调整段落的字体大小并使其看起来像标题，反之亦然，使标题看起来像段落。<h1>对标题 ( ... <h6>) 和段落 ( )使用适当的 HTML 标记，<p>并根据它们在页面上的优先级指定它们的值。这对于视觉层次结构和一般可扫描性至关重要。
有两种方法来定义font-size属性——使用绝对或相对大小值。第一个不允许用户在所有浏览器中更改文本大小，这从可访问性的角度来看是可怕的。另一方面，当文本需要匹配其他元素时，它非常适合具有预定义物理测量的设计。
相反，相对大小允许您更改浏览器中的字体大小。它是大型正文文本的最佳选择，因此用户可以根据自己的需要进行更改。开发人员通常使用像素来指定绝对值font-size和em相对字体大小。
以上内容为转载
网友评论