初识CSS

1. CSS的诞生

当人们发现浏览器不仅能用作科学目的，还可以用来享受娱乐时， 就立刻觉得缺乏多媒体功能：视频、动画、颜色、声音、透明度等等。

一开始，大家想通过添加更多的标签来满足这些需求，但很快意识到新的 标签会有成百上千个，这将会显著复杂化HTML文档的工作。于是便有了 将“文档的美化”（样式）与其内容分离的想法，CSS因此诞生。

Cascading Style Sheets (CSS)，即级联样式表，是网页开发的 核心技术之一，负责网页的视觉呈现。

CSS 是一组属性，每个属性都有名称和值。 网页开发者定义这些属性，浏览器会根据这些定义显示样式。 这些属性几乎可以应用于任何元素。以下是CSS样式示例：

这些CSS属性不足百种，但它们可以巧妙组合，产生很惊艳的效果。在CodeGym，你会学会如何使用它们来为网页创造真正的魔法🦄。

2. 元素样式

你可以通过style属性 为每一个HTML元素定义独立的CSS样式。

示例：

      
<p style="color: blue; font-size: 16px;">这是内联样式的示例。</p>
      
    

这个样式告诉浏览器段落中的文本要以蓝色显示，字体大小为16像素高度。

实际上这里有两个“样式”：

• color = blue
• font-size = 16px

它们只是写在了一行，并用分号分隔。

此外，你可以创建一个黑色矩形，并在其中用白色显示文本。其代码如下：

      
<div style="width:100%; height:200px;color:white;background-color:black"> 
白色文字在黑色背景上 
</div>
      
    

3. 颜色

我们会在学习HTML后详细研究CSS样式。为了让你更感兴趣，今天我们来了解颜色相关的内容。通过CSS可以定义任何计算机能显示的颜色，甚至更多。

颜色是CSS中样式化网页的重要部分。它们可以创建视觉吸引力和直观的界面。 CSS中有几种定义颜色的方法，每种方法都有其特点和应用场景。

1. 颜色名称 (Color Names)

CSS支持140多种标准颜色名称。这是定义颜色的一种简单明了的方式。

      
<div style="color: lightblue;"> 浅蓝色文字</div>
      
    

一些常见的颜色名称：

2. 十六进制值 (Hexadecimal Values)

还有一种方法可以定义任意颜色 —— 十六进制值。 它允许定义1600万个色调 —— 为这么多种颜色起名字是不可能的， 所以人们用数字代替。

十六进制值以符号#开头，后跟六个数字或字母，分别表示 红色、绿色和蓝色的强度 (RRGGBB)。

      
<div style="color: #ff0000; background-color: #00ff00;"> 红色背景绿色 </div>
      
    

你会经常在示例中遇到这种定义颜色的方式。我们会在学习CSS细节时再回到这个主题。