前端开发知识汇总系列（五、CSS概念、语法、单位、样式表）

2021-01-16 21:32:32 阅读：222 来源： 互联网

标签：颜色 color 元素样式表 background 前端开发 CSS 属性

1. 概念

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

CSS 是开放网络的核心语言之一，由 W3C 规范实现跨浏览器的标准化。CSS节省了大量的工作。样式可以通过定义保存在外部.css文件中，同时控制多个网页的布局，这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS 被分为不同等级：CSS1 现已废弃， CSS2.1 是推荐标准， CSS3 分成多个小模块且正在标准化中。

用于设置网页的样式及布局——比如，可以更改内容的字体、颜色、大小以及间距，或是将其分列，或是添加动画及赋予内容其它装饰性的特征。

样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
1. 基本语法

规则

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

将CSS属性设置为特定值是CSS语言的核心功能。CSS引擎计算哪些声明应用于页面的每个元素，以便适当地布局和样式它。

整个结构称为 规则集（通常简称“规则”），各部分释义如下：

选择器（Selector）

HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 p 元素）。要给不同元素添加样式只需要更改选择器就行了。

声明（Declaration）

一个单独的规则，如 color: red; 用来指定添加样式元素的属性。

属性（Properties）

改变 HTML 元素样式的途径。（本例中 color 就是 <p> 元素的属性。）CSS 中，由编写人员决定修改哪个属性以改变规则。

属性的值（Property value）

在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）。

注意其他重要的语法：

每个规则集（除了选择器的部分）都应该包含在成对的大括号里（{}）。
在每个声明里要用冒号（:）将属性与属性值分隔开。
在css中，属性和值都是区分大小写的。
在每个规则集里要用分号（;）将各个声明分隔开。

如果要同时修改多个属性，只需要将它们用分号隔开，就像这样：

p {  
  color: red;  
  width: 500px;   
  border: 1px solid black; 
}

重要事项：如果属性未知或某个值对给定属性无效，则声明被视为无效，并被浏览器的CSS引擎完全忽略。

重要：在CSS(和其他网络标准)中，当语言表达存在不确定性时，美国的拼写被视作公认的标准。例如，颜色应该始终拼写为color。colour是不起作用的。

1. 值与单位

CSS中使用的每个属性都允许拥有一个或一组值。

1. 1. CSS的值

在CSS规范上您将能够发现值的存在，因为它们将被尖括号包围，如<color>或<length>。当您看到值<color>对特定属性有效时，这意味着您可以使用任何有效的颜色作为该属性的值，如 <color>参考页面所列。

注意：您还将看到被称为数据类型的CSS值。这些术语基本上是可以互换的——当你在CSS中看到一些被称为数据类型的东西时，它实际上只是一种表示值的奇特方式。

注意：是的，CSS值倾向于使用尖括号表示，以区别于CSS属性(例如color属性和 <color> 数据类型)。您可能还会混淆CSS数据类型和HTML元素，因为它们都使用尖括号，但这不太可能——它们在完全不一样的上下文中使用。

在下面的例子中，我们使用关键字设置标题的颜色，使用rgb()函数设置背景：

h1 {

    color: black;

    background-color: rgb(197,93,161); 

}

CSS中的值是一种定义允许子值集合的方法。这意味着如果您看到<color>是有效的，那么您就不需要考虑可以使用哪些不同类型的颜色值—关键字、十六进制值、rgb()函数等等。假设浏览器支持这些可用的<color>值，则可以使用它们任意一个。

1. 1. 数字，长度和百分比

您可能会发现自己在CSS中使用了各种数值数据类型。以下全部归类为数值：

长度

最常见的数字类型是<length>，例如10px(像素)或30em。CSS中有两种类型的长度——相对长度和绝对长度。重要的是要知道它们之间的区别，以便理解他们控制的元素将变得有多大。

绝对长度单位

以下都是绝对长度单位——它们与其他任何东西都没有关系，通常被认为总是相同的大小。

这些值中的大多数在用于打印时比用于屏幕输出时更有用。例如，我们通常不会在屏幕上使用cm。惟一一个您经常使用的值，估计就是px(像素)。

相对长度单位

相对长度单位相对于其他一些东西，比如父元素的字体大小，或者视图端口的大小。使用相对单位的好处是，经过一些仔细的规划，您可以使文本或其他元素的大小与页面上的其他内容相对应。下表列出了web开发中一些最有用的单位。

ems and rems

em和rem是您在从框到文本调整大小时最常遇到的两个相对长度。了解这些方法是如何工作的以及它们之间的区别是很有意义的，尤其是当您开始学习更复杂的主题时，比如样式化文本或CSS布局。下面的示例提供了一个演示。

HTML是一组嵌套的列表—我们总共有三个列表，并且两个示例都有相同的HTML。唯一的区别是第一个类具有ems，第二个类具有rems。

首先，我们将16px设置为<html>元素的字体大小。

概括地说，在排版属性中 em 单位的意思是“父元素的字体大小”。带有ems类的<ul>内的<li>元素从它们的父元素中获取大小。因此，每一个连续的嵌套级别都会逐渐变大，因为每个嵌套的字体大小都被设置为1.3em—是其父嵌套字体大小的1.3倍。

概括地说，rem单位的意思是“根元素的字体大小”。(“根em”的rem标准。)<ul>内的<li>元素和一个rems类从根元素(<html>)中获取它们的大小。这意味着每一个连续的嵌套层都不会不断变大。

但是，如果您在CSS中更改<html>字体大小，您将看到所有其他相关内容都发生了更改，包括rem和em大小的文本。

<ul class="ems">

    <li>One</li>

    <li>Two</li>

    <li>Three

      <ul>

        <li>Three A</li>

        <li>Three B

          <ul>

            <li>Three B 2</li>

          </ul>

        </li>

      </ul>

    </li>

  </ul>

 

  <ul class="rems">

    <li>One</li>

    <li>Two</li>

    <li>Three

      <ul>

        <li>Three A</li>

        <li>Three B

          <ul>

            <li>Three B 2</li>

          </ul>

        </li>

      </ul>

    </li>

  </ul>

html {

  font-size: 26px;

}


.rems {

  font-size: 20px;

}


.rems li {

  font-size: 1.3rem;

}

百分比

在许多情况下，百分比与长度的处理方法是一样的。百分比的问题在于，它们总是相对于其他值设置的。例如，如果将元素的字体大小设置为百分比，那么它将是元素父元素字体大小的百分比。如果使用百分比作为宽度值，那么它将是父值宽度的百分比。

在下面的示例中，两个百分比大小的框和两个像素大小的框具有相同的类名。这两款相机分别为200px和40%宽。

不同之处在于，第二组两个框位于一个400像素宽的包装器中。第二个200px宽的盒子和第一个一样宽，但是第二个40%的盒子现在是400px的40%——比第一个窄多了!

尝试更改包装器的宽度或百分比值，看看这是如何工作的。

<div class="box px">I am 200px wide</div>

<div class="box percent">I am 40% wide</div>

<div class="wrapper">

  <div class="box px">I am 200px wide</div>

  <div class="box percent">I am 40% wide</div>

</div>

.wrapper {

  width: 400px;

  border: 5px solid rebeccapurple;

}


.px {

  width: 200px;

}


.percent {

  width: 40%;

}

下一个示例以百分比设置字体大小。每个<li>都有80%的字体大小，因此嵌套列表项在从父级继承其大小时将逐渐变小。

li {

  font-size: 80%;

}

<ul>

  <li>One</li>

  <li>Two</li>

  <li>Three

    <ul>

      <li>Three A</li>

      <li>Three B

        <ul>

          <li>Three B 2</li>

        </ul>

      </li>

    </ul>

  </li>

</ul>

注意，虽然许多值接受长度或百分比，但也有一些值只接受长度。

数字

有些值接受数字，不添加任何单位。接受无单位数字的属性的一个例子是不透明度属性（opacity ），它控制元素的不透明度(它的透明程度)。此属性接受0(完全透明)和1(完全不透明)之间的数字。

.box {

  opacity: 0.6;

}

<div class="wrapper">

  <div class="box">I am a box with opacity</div>

</div>

注意: 当您在CSS中使用数字作为值时，它不应该用引号括起来。

1. 1. 颜色

在CSS中指定颜色的方法有很多，其中一些是最近才实现的。在CSS中，相同的颜色值可以在任何地方使用，无论您指定的是文本颜色、背景颜色还是其他颜色。

现代计算机的标准颜色系统是24位的，它允许通过不同的红、绿、蓝通道的组合显示大约1670万种不同的颜色，每个通道有256个不同的值(256 x 256 x 256 = 16,777,216)。让我们来看看在CSS中指定颜色的一些方法。

十六进制RGB值

您可能遇到的下一种颜色值类型是十六进制代码。每个十六进制值由一个散列/磅符号(#)和六个十六进制数字组成，每个十六进制数字都可以取0到f(代表15)之间的16个值中的一个——所以是0123456789abcdef。每对值表示一个通道—红色、绿色和蓝色—并允许我们为每个通道指定256个可用值中的任意一个(16 x 16 = 256)。

.one {

  background-color: #02798b;

}


.two {

  background-color: #c55da1;

}


.three {

  background-color: #128a7d;

}

RGB 和 RGBA的值

我们将在这里讨论的第三种方案是RGB。RGB值是一个函数—RGB()—它有三个参数，表示颜色的红色、绿色和蓝色通道值，与十六进制值的方法非常相似。RGB的不同之处在于，每个通道不是由两个十六进制数字表示的，而是由一个介于0到255之间的十进制数字表示的——这有点容易理解。

.one {

  background-color: rgb(2, 121, 139);

}


.two {

  background-color: rgb(197, 93, 161);

}


.three {

  background-color: rgb(18, 138, 125);

}

您还可以使用RGBA颜色——它们的工作方式与RGB颜色完全相同，因此您可以使用任何RGB值，但是有第四个值表示颜色的alpha通道，它控制不透明度。如果将这个值设置为0，它将使颜色完全透明，而设置为1将使颜色完全不透明。介于两者之间的值提供了不同级别的透明度。

.one {

  background-color: rgba(2, 121, 139, .3);

}


.two {

  background-color: rgba(197, 93, 161, .7);

}


.three {

  background-color: rgba(18, 138, 125, .9);

}

HSL 和 HSLA 的值

与RGB相比，HSL颜色模型的支持稍差一些(在旧版本的IE中不支持)，它是在设计师们感兴趣之后实现的。hsl() 函数接受色调、饱和度和亮度值作为参数，而不是红色、绿色和蓝色值，这些值的不同方式组合，可以区分1670万种颜色：

色调：颜色的底色。这个值在0和360之间，表示色轮周围的角度。
饱和度：颜色有多饱和？它的值为0 - 100%，其中0为无颜色(它将显示为灰色阴影)，100%为全色饱和度
亮度：颜色有多亮？它从0 - 100%中获取一个值，其中0表示没有光(它将完全显示为黑色)，100%表示完全亮(它将完全显示为白色)

.one {

  background-color: hsl(188, 97%, 28%);

}


.two {

  background-color: hsl(321, 47%, 57%);

}


.three {

  background-color: hsl(174, 77%, 31%);

}

就像RGB有RGBA一样，HSL也有HSLA等效物，它使您能够指定alpha通道值。

.one {

  background-color: hsla(188, 97%, 28%, .3);

}


.two {

  background-color: hsla(321, 47%, 57%, .7);

}


.three {

  background-color: hsla(174, 77%, 31%, .9);

}

1. 1. 图片

<image> 数据类型用于图像为有效值的任何地方。它可以是一个通过 url()函数指向的实际图像文件，也可以是一个渐变。

.image {

  background-image: url(star.png);

}


.gradient {

  background-image: linear-gradient(90deg, rgba(119,0,255,1) 39%, rgba(0,212,255,1) 100%);

}

<div class="box image"></div>

<div class="box gradient"></div>

注意：<image>还有一些其他可能的值，但是这些都是较新的，并且目前对浏览器的支持很差。

1. 1. 位置

<position> 数据类型表示一组2D坐标，用于定位一个元素，如背景图像(通过 background-position)。它可以使用关键字(如 top, left, bottom, right, 以及center )将元素与2D框的特定边界对齐，以及表示框的顶部和左侧边缘偏移量的长度。

一个典型的位置值由两个值组成——第一个值水平地设置位置，第二个值垂直地设置位置。如果只指定一个轴的值，另一个轴将默认为 center。

.box {

  height: 300px;

  width: 400px;

  background-image: url(star.png);

  background-repeat: no-repeat;

  background-position: right 40px;

}

<div class="box"></div>

1. 1. 字符串和标识符

在上面的示例中，我们看到关键字被用作值的地方(例如<color>关键字，如 red, black, rebeccapurple, and goldenrod)。这些关键字被更准确地描述为标识符，一个CSS可以理解的特殊值。因此它们没有使用引号括起来——它们不被当作字符串。

在某些地方可以使用CSS中的字符串，在下面的示例中，我们使用非引号括起来的颜色关键字和引号括起来的内容字符串。

.box {

  width:400px;

  padding: 1em;

  border-radius: .5em;

  border: 5px solid rebeccapurple;

  background-color: lightblue;

}


.box::after {

  content: "This is a string. I know because it is quoted in the CSS."

}

<div class="box"></div>

1. 1. 函数

在编程中，函数是一段可重用的代码，可以多次运行，以完成重复的任务，对开发人员和计算机都是如此。函数通常与JavaScript、Python或c++等语言相关联，但它们也以属性值的形式存在于CSS中。我们已经在颜色部分看到了函数的作用——rgb()、hsl()等。用于从文件返回图像的值——url()——也是一个函数。

行为更类似于传统编程语言的值是calc()函数。这个函数使您能够在CSS中进行简单的计算。如果您希望计算出在为项目编写CSS时无法定义的值，并且需要浏览器在运行时为您计算出这些值，那么它特别有用。

例如，下面我们使用calc()使框宽为20% + 100px。20%是根据父容器.wrapper的宽度来计算的，因此如果宽度改变，它也会改变。我们不能事先做这个计算，因为我们不知道父类的20%是多少，所以我们使用calc()来告诉浏览器为我们做这个计算。

.wrapper {

  width: 400px;

}


.box {

  width: calc(20% + 100px);

}

<div class="wrapper">

  <div class="box">My width is calculated.</div>

</div>

1. 引入
  1. 外部样式表

外部样式表是指将CSS编写在扩展名为.css 的单独文件中，并从HTML<link> 元素引用它的情况：

<!DOCTYPE html>

<html>

   <head>

<meta charset="utf-8">

<title>My CSS experiment</title>

<link rel="stylesheet" href="styles.css">

   </head>

   <body>

<h1>Hello World!</h1>

<p>This is my first CSS example</p>

   </body>

</html>

h1 {

   color: blue;

   background-color: yellow;

   border: 1px solid black;

} 

p {

   color: red;

}

您可以将css链接到多个页面，从而允许您使用相同的样式表设置所有页面的样式。在大多数情况下，一个站点的不同页面看起来几乎都是一样的，因此您可以使用相同的规则集来获得基本的外观。

1. 1. 内部样式表

内部样式表是指不使用外部CSS文件，而是将CSS放在HTML文件<head>标签里的<style>标签之中。

<!DOCTYPE html>

<html>

   <head>

<meta charset="utf-8">

<title>My CSS experiment</title>

<style>
  h1 {

      color: blue;

      background-color: yellow;

      border: 1px solid black;      

   }       

   p {

      color: red;      

   }    

</style>

   </head>

   <body>

 <h1>Hello World!</h1>

 <p>This is my first CSS example</p>

   </body>

</html>

有的时候，这种方法会比较有用（比如你使用的内容管理系统不能直接编辑CSS文件)，但该方法和外部样式表比起来更加低效。在一个站点里，你不得不在每个页面里重复添加相同的CSS，并且在需要更改CSS时修改每个页面文件。

1. 1. 内联样式

内联样式表存在于HTML元素的style属性之中。其特点是每个CSS表只影响一个元素：

<!DOCTYPE html>

<html>

   <head>

 <meta charset="utf-8">

 <title>My CSS experiment</title>

   </head>

   <body>

 <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>

 <p style="color:red;">This is my first CSS example</p>

   </body>

</html>

除非你有充足的理由，否则不要这样做！它难以维护（在需要更新时，你必须在修改同一个文档的多处地方），并且这种写法将文档结构和文档表现混合起来了，这使得代码变得难以阅读和理解。将不同类型的代码分开存放在不同的文档中，会让我们的工作更加清晰。

标签：颜色,color,元素,样式表,background,前端开发,CSS,属性
来源： https://blog.csdn.net/Silence1515/article/details/112724792

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

前端开发知识汇总系列（五、CSS概念、语法、单位、样式表）