CSS从上到下–包括CSS3

披露: 您的支持有助于保持网站的正常运行!我们会为此页面上推荐的某些服务收取推荐费.


级联样式表(CSS)是使网络美观的语言。与HTML和JavaScript一起,它是每个前端开发人员都必须掌握的技术之一.

虽然网络上有很多资源可以帮助您学习CSS,但是如果您是初学者,则可能很难将大量资源与其他资源分开。.

在本资源指南中,我们对CSS是什么,其功能以及最新版本中推出的功能进行了基本介绍:CSS3.

CSS入门

如果您准备参加,本指南将介绍以下内容:

  • CSS简介: 如果您不熟悉CSS,那么这是开始的地方。本节提供CSS的基本概述,并向您介绍其他重要资源.
  • CSS3的新功能: 如果您想研究CSS3中已推出的模块,请转到本主题,在这里您将了解媒体查询,框大小,3D转换,动画,多列布局等.
  • 使用CSS创建响应式网站: 当今的网站必须在任何大小的设备上都能呈现精美的外观,而CSS是使之实现的语言.
  • 如何制作移门按钮: 结合jQuery和CSS来创建非常酷的效果的入门.
  • 关于CSS颜色的所有信息: 起床并使用CSS颜色。本节包括出色的色彩参考.
  • 编写高效的CSS::拥有快速加载的页面比以往任何时候都更为重要。这将向您展示如何编写CSS,以大大减少加载时间.
  • Master CSS Online: 这些资源提供了CSS掌握的途径。如果您喜欢边做边学的教育方式,本部分适合您.
  • CSS的惊人作品: 寻找灵感?在这里,我们收集了一些网络上最神奇的CSS创作.
  • CSS3的官方说法: 既然您已经了解了CSS,并且已经了解了CSS3中推出了哪些模块,那么熟悉W3C是一个很好的主意,W3C是推动CSS开发的组织.
  • 推荐读物: 如果您想借助电子书或平装书来学习,请查看我们的推荐书籍列表,在其中您一定会找到引起您兴趣的书名.

CSS简介

CSS简介

CSS或级联样式表是用于确定网站的样式和外观的语言.

网站的内容(包括标题,段落和图像)是根据HTML文档中包含的说明加载的,而CSS会告诉您的浏览器如何显示该HTML文档中的每个元素.

CSS用于执行诸如在网站上放置项目之类的事情,并用于确定诸如背景色,边框大小和样式,一项与另一项之间的间距,字体系列之类的事情。.

CSS的核心好处是将网站的设计与网站的内容分隔开来。通过将内容与设计清扫分开,只需在单个CSS文件中调整一些CSS规则即可对整个网站进行设计更改.

编写CSS规则的三个地方

在编写一行CSS之前,您需要知道编写CSS的位置以及如何将其与受影响的HTML内容绑定。您可以在三个不同的地方编写CSS:

  • 外部样式表:仅包含CSS规则而创建的文档,可以使用HTML文档标题中的LINK元素将其应用于多个HTML文档.
  • 内部样式表:CSS样式直接嵌入样式元素标签之间的HTML文档标题中.
  • 内联样式:使用HTML文档中的style属性将CSS样式添加到单个HTML元素.

尽管有时间和地点使用内部样式表和内联样式,但绝大多数 最好使用外部样式表来应用CSS样式.

外部样式表可以链接到任意数量的HTML文档,使您可以从单个CSS文件控制整个网站的外观.

将CSS规则与特定的HTML元素相关联

CSS规则由两部分构成:选择器和声明。每个声明还包括两个部分:一个属性和一个值.

  • 选择器 标识或选择将CSS规则应用于的HTML元素.
  • 物产 是描述规则将要解决的功能的名称。 CSS的一些常用属性是margin,border,background-color,text-align和font-style.
  • 价值观 描述属性应如何出现。如果所讨论的属性为空白,则公共值可能为10像素.

选择器和特异性

通常,样式表会包含单个HTML元素的冲突规则。概念 选择器特异性 将确定哪些规则应用于每个HTML元素.

例如,如果将链接列表用于主导航,而其他列表显示在页面的主体中,则导航列表和主体中的列表将需要不同的CSS规则集.

否则,导航菜单和页面正文中的列表将遵循相同的CSS规则.

了解CSS选择器的工作原理是编写影响正确HTML元素的规则的关键.

尽管最常见的CSS选择器是id,class和tag或element选择器,但其他选择器(例如属性,位置选择器,伪选择器和选择器组合)也可以用于创建具有更高特异性的规则.

CSS的常见用途

实际上,HTML的每个页面上都有许多CSS属性。熟悉这些常见的CSS属性将使您能够解决大多数样式和定位任务.

样式字体

CSS可用于创建任何所需的字体样式。无论是颜色,大小,粗细,线条高度,对齐方式,大小写,字体类型本身还是要控制的装饰(例如下划线和删除线),CSS属性都可以用来创建所需的效果.

通过应用特异性原理,可以将不同的字体样式应用于页面上的每个HTML元素。.

盒子模型

通过考虑所谓的框模型,可以最好地理解每个HTML元素周围的空间:

盒子模型图

盒子模型由三个CSS属性组成:padding,border和margin。这些属性可以应用于任何HTML元素。通过示例最容易理解这三个属性.

考虑以下HTML段落元素:

一段文字.

编写以下CSS规则会产生什么影响?

p {
填充:10px;
边框:实心1px;
边距:10px;
}

该段将显示为:

  • 首先,在段落文本的所有侧面上填充10像素(空白),
  • 其次,段落和填充周围有1像素宽的实线边框,
  • 第三,边框和任何相邻元素之间的空白(空白)为10像素.

这就是所谓的盒子模型。每个元素首先由称为空白的空白框起来,然后由边框框起来,最后由称为空白的空白框起来.

使用浮点数

浮点数用于将HTML元素发送到其父元素的左侧或右侧,而不会超出HTML文档的整体流程。除了清除其姐妹财产外,它们也是创建网站布局的最佳方法之一.

虽然我们不会尝试涵盖浮游物的所有知识,但是在您开始学习CSS时,对它们的工作原理有一个基本的了解是至关重要的.

在文字处理程序文档的上下文中最容易理解浮点数。考虑文本文档中的图像.

通常,每个图像要么一直位于图像的左侧,一直流到右边,要么一直到图像的右侧,一直流到左边。在网站上,此外观是通过使用float属性完成的.

float属性具有四个可接受的值:left,right,none和Inherit。在上面的示例中:

  • 如果图像受属性为float且值为left的CSS规则约束,则图像将位于父元素的左侧,文本在右侧流动.
  • 价值权利将按照您的期望执行.
  • 不会阻止元素向任一方向浮动.
  • 继承会导致该元素继承应用于父元素的float值.

浮点数通常用于创建站点导航菜单。通常,网站导航菜单由HTML无序列表组成,每个列表项都向左或向右浮动,导致列表项彼此相邻出现,而不是以项目符号列表样式堆叠.

例如,典型的导航菜单在HTML中可能如下所示:

  • 我们的商店

  • 关于我们

  • 联系我们.

没有任何CSS规则,该菜单将显示为项目符号列表,并且每个项目都显示在新行上。为了使每个项目显示在从页面左侧开始的一条水平线中,可以使用以下CSS规则.

li {
向左飘浮;
}

请注意,为了简化此示例,我们使用列表项标签li作为CSS选择器。实际上,这永远不会做。通常,将一个类分配给列表本身或每个列表项,并将该类用作选择器.

清除浮动

通常与浮点数结合使用的另一个属性是clear属性。浮动一个元素时,所有后续元素会向上滑动并在浮动元素旁边对齐.

如果您希望后续元素在浮动项目的下方而不是在其旁边开始,则可以使用clear属性强制它们从新行开始.

我们只是简单介绍了浮点数和clear属性可以完成的工作,但是我们确实从CSS-Tricks上找到了这篇很棒的文章,它提供了对该主题的深入了解.

使用Position属性

CSS position属性是通常用于创建网站布局的另一种方法。与float属性不同,position属性通常用于使元素脱离HTML文档的自然流,并非常明确地规定其位置.

位置属性可以使用两个值:相对和绝对。应用这些值之一之后,可以使用其他属性(例如顶部,底部,左侧和右侧)非常具体地定位受影响的元素.

使用position属性创建布局并非没有风险。与float属性不同,由position属性定位的元素将与其他项目重叠,从而可能导致更多的跨浏览器和视口大小问题.

但是,它是CSS开发领域中广泛使用的属性,您最好学习使用position属性的基础知识.

CSS3的新增功能

CSS3的新功能

虽然CSS2是一个单一规范,但CSS3已分为五十多个不同的模块,每个模块处于不同的开发和接受阶段.

正在进行的CSS3工作由万维网联盟或W3C管理,它们提供了一个集中的位置,您可以在其中跟踪所有正在进行的CSS3标准化工作.

尽管正在进行各种CSS3模块的工作,但是许多模块已经得到了广泛的接受,并被许多网站广泛使用。这是十个最重要的CSS3属性,这些属性已经获得了广泛的接受,并且受到所有现代浏览器的支持.

  • 同时创造简单的能力 动画 使用JavaScript已经有很长时间了,现在可以使用更简单的CSS语法创建CSS动画.
  • 计算 CSS3现在提供的功能对于创建响应式布局非常有帮助。它可以用于加,减,乘或除,然后将计算结果用作属性值.
  • 各种各样 高级选择器 添加了CSS3,从而为CSS规则选择元素时提高了特异性.
  • 加法 渐变色 由于背景类型使CSS开发人员能够创建令人印象深刻的背景,这些背景可以快速下载并显示.
  • 应用于元素的width和height属性不包含填充,边框和边距。结果,填充,边距和边框会增加元素的大小,使其超出指定的宽度和高度。长期以来,使CSS开发人员感到沮丧的是,他们依靠复杂的数学方法来微调网站布局。但是,使用新的box-sizing属性,可以应用值border-box,从而在指定的宽度和高度的约束内强制填充,边框和边距,从而简化了网页布局的设计.
  • CSS可以用于将边框应用于任何HTML元素,并且通过border-image属性,创建和使用自定义边框比以往任何时候都更加容易。属性本身的语法非常复杂,但是一旦掌握了它的含义,就可以快速为网站上的任何元素创建一种边框.
  • 媒体查询 确定用于访问站点的设备的视口是否满足某些指定的特征。 @media CSS3模块是用于创建响应式网站的关键工具之一。使用媒体查询,CSS开发人员可以创建CSS规则,仅在满足某些媒体功能(例如视口的宽度和高度以及颜色显示功能)时才应用CSS规则。这样,CSS开发人员可以根据媒体查询的结果重新定位元素并调整其大小,或将它们全部隐藏在一起.
  • 使用 多种背景 创建特定的背景效果比使用CSS3更加容易。通过使用background属性,可以将多个背景图像,颜色和渐变应用于任何元素.
  • 使用 使用CSS3中的columns属性,可以比以往更加轻松地创建报纸风格的布局。该属性可用于轻松设置列数和宽度,从而创建一个容器,内容可以轻松地从一列流到下一列。列对于创建灵活的导航菜单也很有用.
  • 3D转换 由CSS3实现。这是一门非常复杂的主题,您最好先阅读有关CSS转换的知识,然后逐步学习一些教程.

使用CSS创建响应式网站

使用CSS创建响应式网站

每天使用数百种(甚至数千种)不同的设备显示尺寸和分辨率来访问网络,结果,仅拥有一个完整的网站以及一个或两个较小设备的设计就不再足够了。.

如今,您的网站需要可以在大屏幕,小型设备上以及介于两者之间的每个视口大小下进行查看.

为此,您的网站CSS必须符合响应式网页设计的三个驱动原则.

  • 首先,定义整体布局的主干或网格必须流畅.
  • 其次,图像必须自动调整大小以在任何设备上完美呈现.
  • 第三,必须使用媒体查询来解决原始流体设计崩溃的问题.

在进行新的网页设计项目时,许多经验丰富的设计师从 移动优先 技术。使用此技术设计的网站从针对最小视口的最简单设计开始,并且随着视口大小的增加添加了其他样式.

移动优先技术提供了两个值得注意的好处:

  • 首先,它迫使设计人员确定网站的基本功能,并将其用作网站设计的基础。大型网站通常包含在移动设备上查看时不属于网站内容的内容,例如小部件,菜单等。移动优先方法有助于确保网站的核心目的和功能在所有视口尺寸中处于中心地位.
  • 其次,通过手机访问网站的网站访问者下载的CSS规则和网站资源更少。如果完整站点是第一个加载的站点,那么移动用户将下载比所需更多的资源。以移动设备为先的方法仅将适当的内容加载到移动设备上,从而保存了一些访客的宝贵数据,并创造了更加灵活的网站加载体验.

学习响应式设计

学习响应式设计技术的最佳方法之一是使用简单的动手响应式设计项目。通过创建您的第一个自适应网站设计,您将更好地了解我们所讨论的概念.

随着列样式布局的日益普及,网站设计师面临着新的挑战:使列布局适应各种规模的设备的挑战.

幸运的是,这里有资源可以帮助CSS初学者和经验丰富的开发人员学习如何在响应性环境中使用此新CSS属性。.

开始了解最佳CSS开发人员如何适应网站的另一种好方法是并排浏览各种大小的自适应网站。媒体查询是一个站点,您可以在一个屏幕上看到数百个各种大小的响应式网站设计.

如何制作移门按钮

如何制作移门按钮

只需使用CSS,您就可以创建美观且功能强大的按钮。您可以使用一些jQuery做更多的事情.

下面,我们将向您展示如何拍摄简单的按钮图像并将其设置为在您的网站上用作各种尺寸的可切换按钮。最后,您将生成可重复使用的按钮代码,可用于生成此类按钮.

点击图片切换动画.

移门按钮示例1

创建图像

我们将用来创建这些按钮的技术称为“滑动门” CSS。要设置这些按钮,我们需要为每个按钮版本使用两张图片-在我们的示例中,需要两张黑色按钮图片和两张蓝色按钮图片,总共需要四张图片.

为了创建这些图像,我们从实心按钮图像开始.

蓝色按钮
黑色按钮

我们需要做的是将每个按钮分成两个图像:

  • 左侧图像将尽可能窄,同时仍捕获按钮角的整个半径.
  • 右边的图像将尽可能宽,实际上,我们将要使用图像处理程序来复制按钮的主体几次,以便我们可以使用图像创建非常长的按钮.

以下是将它们切成适当大小后将得到的图像:

左蓝色按钮右蓝色按钮右蓝色按钮
黑色按钮向左黑色按钮向右黑色按钮向右

创建全部四张图片后,就可以开始编码了.

按钮HTML

我们的按钮HTML将包含三个组件:外部div包装器,锚点元素和span元素.

按钮文字

在上面的代码块中,所有三个元素都分为不同的行,以便您可以更轻松地了解发生了什么.

但是,实际上,您可能希望将它们全部保持内联,特别是如果您使用的是诸如WordPress之类的内容管理系统(CMS),该系统将在每个换行符后插入段落标签.

添加按钮图像

现在,如果您从上面的示例中渲染一点点HTML,您将获得的只是一个链接,上面写着“按钮文本”。我们要采取的下一步是将按钮图片添加到我们的代码中.

但是,在执行此操作之前,让我们在外部div包装器中添加一些样式,以便我们可以更清楚地了解发生了什么.

.滑动按钮{
显示:inline-block;
宽度:自动;
边距:20px;
}

这段代码只会在按钮周围增加一些空间,并强制包含div缩小到链接和文本的大小。现在我们准备添加按钮图像.

.滑动链接{
背景图片:url(’blue-button-right.png’);
背景大小:自动100%;
背景位置:正确;
背景重复:不重复;
}
.滑动文字{
背景图片:url(’blue-button-left.png’);
背景大小:自动100%;
背景位置:左;
背景重复:不重复;
}

因此,现在我们添加了按钮图片。不幸的是,目前尚待探讨。此外,如果放大并仔细查看,您会注意到左侧图片实际上只是坐在右侧图片的上方。不是我们想要的效果.

坏按钮

按钮样式

让我们在文本周围添加一些填充。这将使我们的按钮看起来更像一个按钮。此外,我们需要将span和anchor元素的显示更改为inline-block,以使它们都能以我们希望它们的方式响应填充和边距.

.滑动链接{
显示:inline-block;
}
.滑动文字{
填充:20px;
显示:inline-block;
}

该代码将给我们的按钮一些尺寸。但是,我们仍然在左右图像之间存在麻烦的重叠问题。我们需要做的是使用边距将右手图像稍微向右移动,然后将完全相同的负边距应用于左手图像.

.滑动链接{
左边距:17px;
}
.滑动文字{
左边距:-17px;
}

17像素值适用于我们的特定按钮图像。如果您使用的是其他图像,则需要通过反复试验来微调此值,直到按钮看起来正确为止.

在继续之前,我们还要继续为按钮文本添加一些样式.

.滑动文字{
颜色:#fff;
字体大小:14pt;
字体家族:“ Open-Sans”,Arial,无衬线;
文本转换:大写;
font-weight:粗体;
文本对齐:居中;
}

此时,我们的按钮实际上看起来像一个按钮!

好按钮

按钮悬停效果

现在,如果将鼠标悬停在按钮上,则没有视觉上的迹象表明鼠标悬停在按钮上。让我们通过添加悬停效果来解决此问题.

.滑动文本:悬停,.sliding-text:active {
box-shadow:嵌入0 0 0 1000px rgba(255,255,255,.2);
}

虽然确实可以,但是有点粗糙。首先,悬停效果过分过渡。其次,如果将按钮放在深色背景上,则会注意到悬停效果超出了按钮的圆角.

我们可以通过在span元素中添加几行代码来解决这两个问题.

.滑动文字{
-webkit过渡属性:box-shadow; /* 苹果浏览器 */
-webkit-transition-duration:.2s; /* 苹果浏览器 */
过渡属性:盒影;
过渡时间:0.2秒;
border-radius:12px;
}

现在,我们的悬停效果将在百分之一秒的时间内进出过渡,这是一个小的放松,但足以使过渡感觉平滑。其次,边界半径规则将使悬停效果的角变圆整以适合图像.

请注意,我们应用于边框半径的12像素值特定于我们的按钮图像。如果您使用其他图片,则需要微调此值.

切换按钮图像

现在,我们可以将URL添加到anchor元素href属性,并且我们的按钮可以很好地用作链接。但是,在本文的顶部,有一个gif演示了切换按钮图像的切换效果。现在让我们逐步完成创建切换按钮的过程.

首先,我们需要将新图像添加到按钮中。我们这样做的方法是将按钮图像添加到新类中,然后在单击按钮时使用jQuery在该类上打开和关闭该按钮.

让我们从CSS开始.

.当前按钮.sliding-link {
背景图片:url(’black-button-right.png’);
}
.当前按钮.sliding-text {
背景图片:url(’black-button-left.png’);
}

目前,切换效果不起作用。但是,如果您将class current-button手动添加到按钮容器div中,则会看到该按钮的第二个版本.

为了在点击时在两个版本的按钮之间切换,您需要使用jQuery来打开和关闭按钮的当前按钮类.

但是,在此之前,我们需要确定要将哪些按钮设置为切换按钮。为此,我们可以向希望用作切换按钮的任何按钮添加一个类。让我们为此使用类切换按钮.

因此,要将任何按钮指定为切换按钮,我们只需将该类添加到外部div包装器中即可:

现在,我们可以使用jQuery在该按钮的当前按钮类上打开和关闭.

$(’。toggle-button’)。click(function(){
$(this).toggleClass(’当前按钮’);
返回false;
});

该代码中发生了一些事情。让我们来看看.

首先,我们从Google Hosted Libraries加载jQuery。如果您的网站已经使用jQuery,则可以省略第一个脚本元素.

第二个脚本元素包含一个简单的jQuery函数.

该函数使用类切换按钮监视任何元素。单击具有该类的任何元素时,将触发一个函数,以为该被单击的元素切换类当前按钮的开或关.

最后,该函数返回值false,这防止了默认的链接行为,这是因为在切换按钮上我们的锚元素href属性将为空,因此将重新加载页面.

添加这些代码后,我们可以将按钮切换到我们内心深处的内容.

点击图片切换动画.

移门按钮示例2

完整的源代码

如果您一直在逐步进行操作,那么您已经为这些按钮创建了完整版的源代码。但是,如果您还没有遵循,可以通过将下面的代码复制到HTML文档中来获取本教程中按钮的完整源代码。.

移门按钮

.滑动按钮{
显示:inline-block;
宽度:自动;
边距:20px;
}
.滑动链接{
背景图片:url(’blue-button-right.png’);
背景大小:自动100%;
背景位置:正确;
背景重复:不重复;
显示:inline-block;
左边距:17px;
}
.滑动文字{
背景图片:url(’blue-button-left.png’);
背景大小:自动100%;
背景位置:左;
背景重复:不重复;
显示:inline-block;
填充:20px;
左边距:-17px;
颜色:#fff;
字体大小:14pt;
字体家族:“ Open-Sans”,Arial,无衬线;
文本转换:大写;
font-weight:粗体;
文本对齐:居中;
-webkit过渡属性:box-shadow; /* 苹果浏览器 */
-webkit-transition-duration:.2s; /* 苹果浏览器 */
过渡属性:盒影;
过渡时间:0.2秒;
border-radius:12px;
}
.滑动文本:悬停,.sliding-text:active {
box-shadow:嵌入0 0 0 1000px rgba(255,255,255,.2);
}
.当前按钮.sliding-link {
背景图片:url(’black-button-right.png’);
}
.当前按钮.sliding-text {
背景图片:url(’black-button-left.png’);
}


切换按钮

链接按钮

$(’。toggle-button’)。click(function(){
$(this).toggleClass(’当前按钮’);
返回false;
});

充分利用您的按钮

难题的最后一步是充分利用新按钮。以下是一些入门指南:

  • 将URL添加到锚元素href属性,然后使用按钮链接到任何网页。请注意,您需要在按钮div包装器中省略切换按钮类.
  • 切换按钮时,使用其他jQuery或JavaScript显示或隐藏其他信息.
  • 如果您确实有野心,请使用按钮进行网站导航,并使用jQuery确定当前页面是否与按钮URL相匹配,如果两者匹配,请切换current-button类.

所有关于CSS颜色

所有关于CSS颜色

可以用CSS指定的最重要的(也是可能造成混淆的)事物之一是颜色。网页上几乎所有元素都可以使用CSS着色.

CSS颜色属性

CSS color属性是经常使新的前端开发人员绊倒的一个细节。令人困惑的是颜色并不控制元素本身,而是元素内部的文本.

元素本身(框)的颜色通常将由background-color,border-color或简写的background和border属性(包括颜色信息)控制。您还可以在盒子阴影上设置颜色.

通常,元素的背景颜色覆盖元素的内容,填充和边框区域。这是CSS标准创建者所想象的通常行为。但是,有一些方法可以使填充和内容具有不同的颜色.

颜色声明

除了可以用于指定颜色的不同CSS属性之外,还有三种不同的方法可以在CSS中标识颜色:RGB,十六进制值或名称.

/ *所有这三个都将是相同的颜色。 * /

.red-rgb {
背景颜色:rgb(255,0,0);
}

.红六角{
背景颜色:#ff0000;
}

.红色名称{
背景颜色:红色;
}

第二个(十六进制值)是最常见的,但我们将从RGB开始,因为除非您了解RGB的工作原理,否则十六进制值没有意义.

RGB值

电脑显示器,电视屏幕和其他类似的显示器带有像素。在彩色显示器上,每个像素分为三个子像素:红色,绿色和蓝色.

这些就是所谓的“光的原色”。这三种颜色在不同强度下的组合可用于创建人眼能够看到的任何颜色。这称为“加法混色”。

(值得知道的是,这与人眼有关,而与光本身无关。)

就每个子像素可产生的强度范围而言,不同的显示屏具有不同的功能。一个非常简单的显示器可能每种颜色(关闭或打开)只有两个强度,而一个非常高质量的显示器可能具有更多的灰度.

作为标准,计算机对每个子像素使用的范围是从0(始终为0)到255(一直为开)(例如,128为中途)。每个子像素有256种可能的强度,这意味着每个子像素的值可以存储为8位字节(2 8 = 256).

由于存在三种颜色,每种颜色用8位表示,因此可以通过这种方式表示的颜色总数超过1600万种(256 3 = 16,777,216).

可以通过简单地注意每个子像素的值来表示此颜色范围,如下所示:

rgb(0,128,255)

在该示例中,红色子像素一直关闭,绿色子像素一直打开,而蓝色子像素一直打开。该颜色如下所示:

在此系统中,白色(一直打开所有颜色)为rgb(255,255,255),黑色(所有关闭颜色)为rgb(0,0,0).

RGB颜色也可以指定为百分比,使用不带尾随数字的十进制:

rgb(0.0,50.0,100.0)

这种用法不是很常见.

十六进制值

写入相同确切信息的一种更紧凑的方法是使用十六进制值。十六进制的颜色值是用井号(井号)写成的,后面紧跟着三对六个六个十六进制字符,如下所示:

#0080ff

第一对代表红色值,第二对代表绿色值,第三对代表蓝色值。在此示例中,00表示完全没有红色,80表示中途是绿色,ff表示一直到蓝色。所以这是和rgb(0,128,255)相同的颜色.

如果您不习惯使用十六进制数字,这似乎有些令人困惑。在我们的普通十进制系统中,每个数字可以有10个值(0-9)。在十六进制编号中,每个数字都有16个可能的值(0-9,a-f).

这样就可以用两位数字0-ff表示从0-255的所有值。有关更多信息,请参见此十六进制教程。.

在此系统中,白色为#ffffff,黑色为#000000.

十六进制颜色值是在CSS中指定颜色的最常见方法.

CSS颜色名称

指定特定颜色的最后一种方法是使用一种预定义的颜色名称。 W3C维护并偶尔更新官方的颜色名称列表,这些名称可以代替编号的颜色代码使用。例如,可以使用黑色代替#000000.

在网络的早期,这些命名的颜色有助于定义一小组非正式的“网络安全色”,这些颜色在大多数浏览器和显示屏上都得到了很好的支持.

如今,拥有颜色名称的最大优点是它们更容易记住。例如,相比于#add8e6或rgb(173,216,230),lightblue更容易记住(并正确键入).

CSS颜色名称列表

颜色名称
十六进制值
颜色示例
爱丽丝蓝#f0f8ff
古董白#faebd7
水色#00ffff
蓝晶#7fffd4
天蓝色#f0ffff
米色#f5f5dc
浓汤#ffe4c4
黑色#000000
布兰查德蒙德#ffe4c4
蓝色#0000ff
紫罗兰色#8a2be2
棕色#a52a2a
burlywood#deb887
cadetblue#5f9ea0
黄绿色#7fff00
巧克力#d2691e
珊瑚#ff7f50
矢车菊蓝#6495ed
玉米丝#fff8dc
赤红#dc143c
深蓝#00008b
深蓝#008b8b
暗金杆#b8860b
深灰色#a9a9a9
深绿色#006400
深灰色#a9a9a9
Darkkhaki#bdb76b
深洋红色#8b008b
深橄榄绿色#556b2f
深橙色#ff8c00
兰花#9932cc
深红#8b0000
黑鲑#e9967a
深海绿色#8fbc8f
深蓝色#483d8b
暗裂#2f4f4f
暗灰色#2f4f4f
深蓝绿色#00ced1
暗紫#9400d3
深粉红色#ff1493
深蓝#00bfff
暗灰色#696969
灰灰色#696969
道奇蓝#1e90ff
耐火砖#b22222
花白色#fffaf0
森林绿#228b22
紫红色#ff00ff
恩斯伯勒#dcdcdc
幽灵般的白色#f8f8ff
#ffd700
金毛#daa520
灰色#808080
绿色#008000
黄绿色#adff2f
灰色#808080
甘露#f0fff0
亮粉色#ff69b4
印第安人#cd5c5c
靛青#4b0082
象牙#fffff0
黄褐色#f0e68c
薰衣草#e6e6fa
薰衣草腮红#fff0f5
草坪绿#7cfc00
柠檬雪纺#fffacd
浅蓝#add8e6
轻珊瑚#f08080
浅青色#e0ffff
浅金黄色#fafad2
浅灰#d3d3d3
浅绿色#90ee90
浅灰色#d3d3d3
浅粉红色#ffb6c1
Lightsalmon#ffa07a
浅海绿色#20b2aa
天蓝色#87cefa
光一体化#778899
浅灰色#778899
浅蓝色#b0c4de
浅黄色#ffffe0
酸橙#00ff00
柠檬绿#32cd32
麻布#faf0e6
栗色#800000
海蓝宝石#66cdaa
中蓝#0000cd
兰花#ba55d3
中紫色#9370db
中海绿色#3cb371
深蓝色#7b68ee
中春绿色#00fa9a
绿松石色#48d1cc
中等紫色#c71585
午夜蓝#191970
薄荷#f5fffa
迷雾玫瑰#ffe4e1
莫卡辛#ffe4b5
纳瓦霍怀特#ffdead
海军#000080
老花边#fdf5e6
橄榄#808000
Olivedrab#6b8e23
橙子#ffa500
橙红色#ff4500
兰花#da70d6
淡金黄色的#eee8aa
淡绿色#98fb98
浅绿色#afeeee
泛紫#db7093
木瓜鞭#ffefd5
桃扑#ffdab9
秘鲁#cd853f
#ffc0cb
李子#dda0dd
粉蓝色#b0e0e6
紫色#800080
rebecurple#663399
红色#ff0000
红褐色#bc8f8f
宝蓝色#4169e1
马鞍棕色#8b4513
三文鱼#fa8072
沙棕#f4a460
海绿色#2e8b57
贝壳#fff5ee
黄土#a0522d
#c0c0c0
天蓝色#87ceeb
slateblue#6a5acd
奴隶#708090
板岩灰#708090
#fffafa
春绿色#00ff7f
钢蓝#4682b4
棕褐色#d2b48c
蓝绿色#008080
#d8bfd8
番茄#ff6347
绿松石#40e0d0
紫色#ee82ee
小麦#f5deb3
白色#ffffff
白色的烟#f5f5f5
黄色#ffff00
黄绿色#9acd32

其他CSS颜色资源

  • W3Schools的CSS Color Tutorial是该主题的快速概述,并带有其他示例.
  • CSS Color Converter是一种在线工具,可采用任何颜色格式并将其转换为所有其他颜色格式,并提供可能的调色板选择.
  • Mozilla开发人员网络提供的CSS颜色参考是获取有关各种颜色标准和规范信息的最佳场所之一.
  • 颜色,背景和渐变:使用CSS增添个性(Eric A Meyer,2015年),是一本很棒的书,详细介绍了CSS颜色.

编写高效的CSS

编写高效的CSS

编写高效的CSS非常重要。当今的互联网用户关注时间很短,因此您的网站加载时间越长,他们点击后退按钮的机会就越高.

如果您要建立一个简单的网站,那么高效的CSS没什么关系。但是这样的网站越来越少。如果您要建立一个大型而复杂的网站,则应关注CSS的效率.

下面我们重点介绍为什么高效的CSS很重要,如何编写更高效的选择器,并提供一些工具来帮助您进一步优化代码.

为什么要有效的CSS问题

编写代码时未考虑CSS效率会严重损害页面的整体性能。最后,您想要的是拥有一个缓慢加载的网站.

您的目标是使浏览器尽可能轻松地呈现代码,甚至是运行效率较低的浏览器.

有人争辩说,担心优化选择器不是作者的工作,而是编译代码的引擎的工作。尽管在一定程度上确实如此,但并不是每个用户都将使用现代浏览器.

全世界仍然有用户只能访问较旧的计算机和浏览器。您不希望惩罚这些用户,因为他们无法使用最新技术。也许时间会改变.

但是,在编写代码时记住用户始终是一个好主意.

选择器是最重要的

编写高效CSS的最重要方面之一是了解浏览器如何阅读和编译它。最重要的是,他们从右到左阅读.

它从键选择器开始,然后向左移动以在规则选择器中查找祖先。然后,它继续向左移动,直到规则完成,否则会导致不匹配.

因此,如果您的代码读取ul > 如果是img,那么首先要解释的是img.

键选择器是分配给选择器末尾的最后一部分.

四种类型的CSS选择器

您需要了解四种主要的CSS选择器类型,并使用正确的方法提高CSS代码的效率。以下选择器是根据其效率排序的。顶部的效率最高,底部的效率最低.

ID选择器

ID选择器使用ID属性引用特定的HTML元素,如下所示:

#main-navigation

在HTML中,其用法如下:

类选择器

类选择器将选择特定类属性中的元素,如下所示:

.中央

在HTML中,其用法如下:

标签选择器

标记选择器的效率不如ID和类,因此应谨慎使用。但是它们在适当的情况下仍然有效。标签选择器通常如下所示:

ul

在HTML中,只要使用标签,标签就会按照CSS的要求简单地设置样式(在这种情况下为ul).

通用选择器

通用选择器可以应用于文档中的任何元素。要编写高效的CSS,应尽可能避免使用通用选择器。通用选择器由以下指定:

*

谨记有效的CSS规则

需要牢记一些关键规则,这些规则将帮助您编写更有效的CSS。通过遵循这些规则,您的CSS代码将更快地加载,并在周围的每个网络浏览器中均具有更好的性能.

不要使用后代选择器

后代选择器是两个不由组合符分隔的选择器。后代选择器是效率最低的选择器,确实会对性能产生负面影响.

您不应该使用的后代选择器的示例包括:

标头h3

页脚p

.身体div

不要标记ID

由于ID只能引用单个元素,因此以将要使用的特定标签来限定ID毫无意义。例如,

li#向左导航

无需告诉浏览器选择器将应用于哪个标签。相反,这更有效:

#left-navigation

请注意,对于类而言,情况也是一样,但程度较小。所以也不要上课.

尽可能多地使用CSS继承

财产继承是掌握的重要内容。了解哪些属性将在元素之间传递,并让它们完成工作.

例如,font-size是继承的。因此,如果您将其设置为文档正文,则无需为p和li标签进行设置.

限制规则

在代码中添加太多规则会减慢CSS代码的速度,并使匹配过程大大复杂化.

例如

身体.widget-left #widget

这是糟糕的代码。发生了太多事情。另一方面:

#widget

.小部件左

这些更有效.

实施上述技巧将有助于使您的CSS代码更加高效。如果您想测试代码或寻找更多提高代码效率的方法,请查看下面突出显示的一些工具.

改善CSS的工具

如果您牢记上述规则,那么您的CSS代码将更加高效.

但是,如果您想进一步优化CSS代码,则可以使用一些工具来帮助您实现目标。下面我们介绍一些工具,这些工具将有助于压缩CSS,定义选择器,甚至为您创建ID.

  • CSS压力测试:这很酷,因为它可以对您的网站进行微调整,例如滚动,缩放,调整大小等。另外,它可以在30秒内完成所有这些工作。然后向您发送有关CSS有效性的报告.
  • 定义CSS ID:Web Pack CSS加载器是一个非常有用的工具。它可以帮助指定类和ID,甚至可以为您做一些CSS优化.
  • 减少CSS选择器:显示所有当前使用的CSS选择器以及选择器正在使用的元素。这样可以减少使用的选择器的数量,从而可以减少总体内存负载。使用此工具,您可以插入任何URL,因此您还可以研究其他站点.
  • 收缩CSS代码:收缩现有CSS代码。您需要编译的代码越少越好。它提供了“之前”和“之后”屏幕截图,因此您可以看到此工具所做的更改.
  • 压缩CSS文件:gzip将CSS文件压缩将有助于清理。因此,它可以帮助减少HTTP响应的整体大小,从而减少服务器响应时间.

编写高效的CSS是一个好主意

是否选择优化CSS取决于您。对于当今的现代浏览器而言,这并不是完全必要的。但是,如果您要创建一个复杂的网站,则值得这样做.

而且,您仍然可能拥有使用较早设置的用户,这也是满足他们需求的明智之举。希望本节将帮助您做到这一点并编写更有效的CSS.

在线掌握CSS

在线掌握CSS

在网上有很多地方,您可以在学习CSS的同时观看视频,完整的教程甚至浏览器中的代码。虽然有数十种(甚至数百种)可用资源,但是这里有一些我们最喜欢的免费学习CSS的地方.

如果您真的是CSS的新手, 不要害怕互联网 是介绍初学者的视频系列,介绍CSS和HTML。如果您从头开始,这是一个精心制作的系列,不会吓series那些刚开始学习CSS的人.

如果您以前从未编写过样式表,那么撰写第一个样式表的好地方就是 万维网联盟提供的CSS教程 (W3C)。本教程没有提供很多解释,因此,如果您是动手学习者,那么这可能是一个理想的起点.

编写HTML和CSS要求您使用文本编辑器,使用正确的格式和标题保存文件,并使用浏览器查看您的工作。如果您希望通过一个程序,可以直接在浏览器中编辑文件, 密码学 正是您要找的东西.

另一资源涵盖了与Codecademy大致相同的基础,但它需要您学习如何使用文本编辑器以及如何以正确的格式保存文件,这是另一资源。 学习编码HTML和CSS 由Shay Howe撰写。掌握了基础知识之后,还可以使用高级程序.

控制页面布局是使用CSS完成的最棘手且最重要的任务之一。如果您无法控制布局,请参考 学习版式 正是您所需要的.

Mozilla开发人员网络 提供了CSS教程,涵盖了CSS的所有基本功能,使您可以继续学习更具挑战性的主题.

如果您希望拥有扎实的基础,可以成长为成熟的CSS开发人员,那么您可以做的比MDN CSS教程要糟糕得多.

最后,不提及推动CSS开发的组织,资源清单是不完整的.

虽然肯定不是该列表中最简单的教程,但它是全面而详细的。如果您的目标是学习一点CSS,那么这不是适合您的教程,但是如果您正准备成为一名成熟的CSS开发人员,那么这是一个很好的教程.

设计灵感

CSS的惊人作品

如果您正在寻找设计灵感,或者想更好地了解CSS可以做什么,那么这里有一些地方可以查看CSS展示的作品.

  • Creative Bloq整理了这份精选的22个令人印象深刻的CSS动画清单。当您浏览它们时,请记住,除了CSS之外,这些动画中的许多也确实使用了JavaScript。.
  • CSS Design Awards创建了这个包含十个动画的列表,并带有演示和教程,以便您可以将这些概念应用于自己的项目中.
  • MDN DemoStudio是一个地方,您可以在其中查看数百个CSS演示,这些CSS演示按受欢迎程度,观看次数,趋势状态或首先查看最新的演示进行排序.
  • 先前列表中选择的许多动画都托管在Code Pen上,直接转到这些笔将使您可以访问使用HTML,CSS和JavaScript构建的大量令人印象深刻的动画.
  • 如果您看过所有喜欢看的精美动画,而又想看看如何使用CSS完全更改整个网站而无需对HTML进行任何更改,请查看这些优雅的网站设计,这些内容强调了的CSS.

CSS3官方词汇

CSS3官方词汇

W3C是推动Web标准(包括CSS3模块)开发的组织。在学习CSS和升级技能时,您应该熟悉W3C及其提供的技术文档。.

W3C CSS主页是W3C上所有CSS的启动板。在此页面中,您可以找到有关正在进行的标准开发工作的信息.

推荐读物

推荐读物

使用CSS3来加深理解和专业知识的最有效方法之一就是使用多种教学资源和方法.

如果您尝试了一两个教程,并且想尝试其他方法,或者只是想使用书面文字,则以下是市场上最好的CSS文字:

  • Dan Cedarholm撰写的CSS3 For Web Designers(2010):由A List Apart的创始人Jeffrey Zeldman作序,并得到CSS-Tricks的Chris Coyier的认可和Eric Meyer的支持,这是几本有关CSS的书的作者,本文由Dribbble的联合创始人Dan Cedarholm是CSS3文本的黄金标准.
  • HTML和CSS:设计和构建网站(2011),作者:乔恩·达克特(Jon Duckett):这些文本包括HTML和CSS,并且是这两个主题中最受欢迎和最受欢迎的介绍之一.
  • 杰米·陈(Jamie Chan)的《一天学习CSS,学得很好》(2015年):如果您是CSS初学者,并且想快速掌握基础知识,这本书适合您.
  • CSS:David Sawyer McFarland撰写的《失踪手册》(2015),该文本不仅仅针对初学者,而是涵盖了诸如Flexbox和Sass的使用之类的高级主题。如果您准备从初学者状态升级,此文字将帮助您到达那里.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map