提供永久免费的API接口，查看更多API接口，如果您有其他免费API资源，请联系我们，造福人类。

定制开发，免费评估，免费咨询，价格便宜，售后保障，前往开发服务中心或联系开发客服中心

级联样式表（CSS）

CSS是层叠样式表的缩写。它于1996年首次发明，现在已成为所有主要网络浏览器的标准功能。

CSS允许开发人员通过“样式化”页面的HTML结构来控制网页的外观。

CSS规范由万维网联盟（W3C）维护。

您可以单独在CSS中构建一些非常令人惊奇的东西，例如此纯CSS Minesweeper游戏（不使用JavaScript）。

一个很好的开始是freeCodeCamp课程“基本CSS简介”。

初学者的另一个建议是W3C的HTML + CSS入门，它教如何创建样式表。

CSS Zen Garden网站是一个很好的示例，说明了如何将相同的html设置为完全独特的样式。

有关CSS强大功能的演示，请查看Species In Pieces。

开始学习CSS的最佳位置是freeCodeCamp的CSS教程2小时入门。

然后，如果您有冒险精神，我们将提供完整的12小时课程，详细介绍HTML，HTML5和CSS。

弹性盒

Flexbox是在CSS3中构造内容的新方法。它提供了一种出色的方式来创建可在不同屏幕尺寸和订单内容下正常运行的响应式网站。

使用Flexbox只需3个简单的步骤：

通过使用将父容器转换为Flex容器 display: flex;

通过使用调整不同容器的布局 flex-direction

通过使用像特性调整容器内项的布局justify-content，align-items等

Flexbox允许您有效地布局，对齐和调整不同页面元素之间的空间，即使您不知道它们的确切大小。相反，项目和容器是动态的，并且将“灵活”以最佳地填充可用空间。

main-axis：伸缩容器的主轴，可沿其放置伸缩项。请记住，取决于flex-direction属性，它可以是水平或垂直的。

主启动| main-end： 弹性项目从main-start到放置在容器中main-end。

主要尺寸：弹性商品的主要尺寸（可以是其宽度或高度）充当商品的主要尺寸。

横轴：与主轴垂直的轴。横轴的方向取决于主轴的方向。

交叉启动| cross-end：伸缩线和项目从cross-start到cross-end侧面放置在伸缩容器中。

十字尺寸：商品的十字尺寸（宽度或高度）用作商品的十字尺寸。

网格布局

CSS Grid Layout，简称为Grid，是CSS中最新，功能最强大的布局方案。所有主要浏览器均支持该功能，并提供了一种在页面上定位项目并将其移动的方法。

它可以自动将项目分配给区域，调整大小和调整大小，并根据您定义的模式创建列和行，并使用新引入的fr单位进行所有计算。

为什么选择网格？

您可以轻松地使用一行CSS来组成一个12列的网格。 grid-template-columns: repeat(12, 1fr)

网格使您可以向任何方向移动事物。与Flex不同，Flex可以水平（flex-direction: row）或垂直（flex-direction: column）移动项目，但不能同时移动项目-网格允许您将任何网格项目移动到页面上的任何预定义网格区域。您移动的项目不必相邻。

使用CSS Grid，您可以仅使用CSS更改HTML元素的顺序。移动从顶部的东西的权利，这是在页脚侧边栏等等而不是移动的移动元素<div>来自<footer>于<aside>在HTML中，你可以改变它的位置与grid-area在CSS样式表。

网格与Flex

Flex是一维的-水平或垂直的，而Grid是二维的，这意味着您可以在水平和垂直平面中移动元素

在Grid中，我们将布局样式应用于父容器而不是项目。Flex的，而另一方面，针对柔性项类似的属性集flex-basis，flex-grow和flex-shrink

网格和Flex并不互斥。您可以在同一项目上使用它们。

检查浏览器的兼容性 @supports

理想情况下，构建网站时，可以使用Grid进行设计，并使用Flex作为后备。您可以确定您的浏览器是否支持@supportCSS规则的网格（也称为功能查询）。这是一个例子：

.container {

  display: grid; /* display grid by default */

}

@supports not (display: grid) { /* if grid is not supported by the browser */

  .container {

    display: flex; /* display flex instead of grid */

  }

}

入门

要使任何元素成为网格，您需要将其display属性分配给grid，如下所示：

.conatiner {

  display: grid;

}

就是这样。您刚刚建立.container了网格。内的每个元素都会.container自动成为一个网格项。

定义模板

行和列

grid-template-columns: 1fr 1fr 1fr 1fr;

grid-template-rows: auto 300px;

地区

grid-template-areas: 

  "a a a a"

  "b c d e"

  "b c d e"

  "f f f f";

要么

grid-template-areas:

  "header header header header"

  "nav main main sidebar";

网格区域

以下是一些有关如何定义和分配网格区域的示例代码：

.site {

  display: grid;

  grid-template-areas: /* applied to grid container */

    "head head" /* you're assigning cells to areas by giving the cells an area name */

    "nav  main" /* how many values kind of depends on how many cells you have in the grid */

    "nav  foot";

}

.site > header {

  grid-area: head;

}

.site > nav {

  grid-area: nav;

}

.site > main {

    grid-area: main;

}

.site > footer {

    grid-area: foot;

}

该fr单元

Grid引入了一个新的fr单位，代表分数。使用fr单位的好处是它会为您计算。使用fr可以避免边距和填充问题。使用%和em等，在计算时变成一个数学方程grid-gap。如果使用fr单位，它将自动计算列大小和装订线大小，并相应地调整列大小。另外，最后也不会有出血间隙。

例子

根据屏幕大小更改元素的顺序

假设您要将页脚在小屏幕上移至底部，在大屏幕上移至右侧，并且在这两者之间还有许多其他HTML元素。

一种简单的解决方案是grid-template-areas根据屏幕大小来更改。您也可以根据屏幕尺寸更改列数和行数。这是Bootstrap网格系统（col-xs-8 col-sm-6 col-md-4 col-lg-3）的一种更干净，更简单的替代方法。

.site {

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-template-areas:

    "title title"

    "main header"

    "main sidebar"

}

@media screen and (min-width: 34em) { /* If the screen is big enough, use a different template for grid areas */

  .site {

    grid-template-columns: 2fr 1fr 1fr;

    grid-template-areas:

      "title title title"

      "main header header"

      "main sidebar footer"

  }

}

选择器语法

以特定顺序排列的选择器构成了针对元素的规则。一个例子：

/* selects anchor tags */

a { 

    color: orange;

}

/* selects elements with hero class */

.hero {

    text-align: center;

}

选择器类型

TypeDescription是类型选择器，标记名称用于选择诸如h1或的元素a。

通用选择器适用于所有元素。

div * 匹配div元素内的所有元素。

属性选择器是根据元素的属性[和（可选地，它们的值））将元素作为目标的选择器。

h1[title]选择h1具有title属性的元素。

类选择器是使用类名称来定位元素的选择器。

ID选择器是使用ID定位元素的选择器。#logo选择logoID为的元素。

伪类选择器是特殊选择器，它们根据元素的状态来定位元素。a:hover当指针悬停在链接上时，选择器将应用样式。

选择器组合器

组合器：目的white space后代组合器。.nav li选择li该类中的所有子级.nav，包括嵌套li元素。>儿童组合器。.menu > li选择所有属于.menuclass 元素的直接子元素的li 。+相邻的同级组合器。.logo + h1目标h1是直接.logo上课的兄弟姐妹。~通用同级组合器。header ~ div定位div到header元素的同级元素。

官方CSS3选择器规范

Mozilla开发人员网络上的“选择器”页面

FreeCodeCamp指南上的CSS选择器备忘单

CSS（级联样式表）中的选择器是根据特定性确定的。这样，我们就可以更具体地定义样式规则，并覆盖可能针对同一元素但不那么具体的其他规则。

特异性层次结构的工作方式基于权重。这意味着元素选择器的权重为1（一），类选择器的权重为10（十），id选择器的权重为100（一百）。我们能够将不同的选择器组合在一起，从而更具体地定义我们要更改的元素。

举个例子：

    p {

      color: blue;

    }

    p .red {

       color: red;

    }

我们的类型选择器p将选择html文档中的所有p个元素，但其权重仅为1。相比之下，类选择器的权重为11，因为我们将类型选择器与类选择器组合在一起（此选择器将所有p个元素与红色类匹配）。

注意：

直接定向的规则将始终优先于从其祖先继承元素的规则。

仅当多个声明针对同一元素时才应用特异性，然后才应用此规则。

特殊性通常就是为什么某些样式规则在您希望它们不适用于元素时的原因。

CSS显示

display属性指定用于HTML元素的框的类型。它有20个可能的关键字值。常用的有：

    .none             {display: none}

    .block            {display: block}

    .inline-block     {display: inline-block}

    .inline           {display: inline}

    .flex             {display: flex}

    .inline-flex      {display: inline-flex}

    .inline-table     {display: inline-table}

    .table            {display: table}

    .inherit          {display: inherit}

    .initial          {display: initial}

display:none在使网站具有响应能力时，该属性通常会有所帮助。例如，您可能想在屏幕尺寸缩小时隐藏页面上的元素，以弥补空间的不足。display: none不仅会隐藏该元素，而且页面上的所有其他元素也会表现为该元素不存在。

这是此属性与visibility: hidden属性之间最大的区别，该属性隐藏元素，但将所有其他页面元素保留在与可见元素相同的位置。

这些关键字值分为六类：

<display-inside>

<display-outside>

<display-listitem>

<display-box>

<display-internal>

<display-legacy>

2023-03-22 10:04:19