和css3实例教程

级联样式表(CSS) (Cascading Style Sheets (CSS))

CSS is an acronym for Cascading Style Sheets. It was first invented in 1996, and is now a standard feature of all major web browsers.

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

CSS allows for developers to control how web pages look by “styling” the HTML structure of that page.

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

CSS specifications are maintained by the World Wide Web Consortium (W3C).

CSS规范由万维网联盟(W3C)维护。

You can build some pretty amazing things in CSS alone, such as this pure-CSS Minesweeper game (which uses no JavaScript).

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

A good start is the freeCodeCamp curriculum Introduction to Basic CSS.

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

Another suggestion for beginners is W3C’s Starting with HTML + CSS which teaches how to create a style sheet.

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

The site CSS Zen Garden is a great example how the same html can be styled to look totally unique.

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

For a demonstration of the power of CSS, check out Species In Pieces.

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

CSS和CSS3入门教程 (Tutorials for starting with CSS and CSS3)

The best place to start learning CSS is with freeCodeCamp's 2-hour intro to CSS tutorial.

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

Then, if you're feeling more adventurous, we have an entire 12-hour course that covers HTML, HTML5, and CSS in detail.

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

弹性盒 (Flexbox)

Flexbox is a new way to structure content in CSS3. It provides a wonderful way to create responsive websites that work well across different screen sizes and order content.

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

There are 3 simple steps to use Flexbox:

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

Convert the parent container to a flex container by using display: flex;
通过使用display: flex;将父容器转换为flex容器display: flex;
Adjust the layout of different containers by using flex-direction
通过使用flex-direction调整不同容器的布局
Adjust the layout of items within a container by using properties like justify-content, align-items, and so on
通过使用justify-content ， align-items等属性来调整容器中项目的布局

Flexbox allows you to efficiently lay out, align, and adjust the space among different page elements, even if you don't know their exact size. Instead, items and containers are dynamic, and will "flex" to best fill the available space.

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

main-axis: The primary axis of a flex container along which flex items are laid out. Keep in mind that this can be horizontal or vertical depending on the flex-direction property.
main-axis ：伸缩容器的主轴，可沿其放置伸缩项。请记住，取决于flex-direction属性，它可以是水平或垂直的。
main-start | main-end: Flex items are placed in a container from main-start to main-end.
主启动| 主端： Flex项目从main-start到main-end放置在容器中。
main size: A flex item's main dimension, which can be its width or height, acts as the item's main size.
主要尺寸 ：弹性商品的主要尺寸(可以是其宽度或高度)充当该商品的主要尺寸。
cross axis: The axis that is perpendicular to the main axis. The direction of the cross axis depends on the main axis's direction.
横轴：垂直于主轴的轴。横轴的方向取决于主轴的方向。
cross-start | cross-end: Flex lines and items are placed in a flex container starting from the cross-start to the cross-end side.
交叉启动| cross-end ：柔性线和项目从cross-start到cross-end侧放置在弹性容器中。
cross size: The item's cross dimension (width or height) acts as the item's cross size.
十字尺寸 ：商品的十字尺寸(宽度或高度)用作商品的十字尺寸。

网格布局 (Grid Layout)

CSS Grid Layout, simply known as Grid, is a layout scheme that is the newest and the most powerful in CSS. It is supported by all major browsers and provides a way to position items on the page and move them around.

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

It can automatically assign items to areas, size and resize them, take care of creating columns and rows based on a pattern you define, and it does all the calculations using the newly introduced fr unit.

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

为什么选择网格？ (Why Grid?)

You can easily have a 12-column grid with one line of CSS. grid-template-columns: repeat(12, 1fr)
您可以轻松地使用一行CSS来组成一个12列的网格。 grid-template-columns: repeat(12, 1fr)
Grid lets you move things in any direction. Unlike Flex, where you can move items either horizontally (flex-direction: row) or vertically (flex-direction: column) - and not both at the same time - Grid lets you move any grid item to any predefined grid area on the page. The items you move do not have to be adjacent.
网格使您可以向任何方向移动事物。与Flex不同，Flex可以在水平方向( flex-direction: row )或垂直方向( flex-direction: column )上移动内容-不能同时移动两者-网格使您可以将任何网格项目移动到页面上的任何预定义网格区域 。您移动的项目不必相邻。
With CSS Grid, you can change the order of HTML elements using only CSS. Move something from top to the right, move elements that were in the footer to the sidebar etc. Instead of moving the <div>from <footer> to <aside> in the HTML, you can just change its placement with grid-area in the CSS stylesheet.
使用CSS Grid，您可以仅使用CSS更改HTML元素的顺序 。从顶部向右移动某些内容，将页脚中的元素移动到侧边栏等。代替将<div>从<footer>移到HTML中的<aside> ，您只需在grid-area使用grid-area更改其位置即可。 CSS样式表。

网格与Flex (Grid vs. Flex)

Flex is one-dimensional - either horizontal or vertical, while Grid is two-dimensional, meaning you can move elements in both horizontal and vertical planes
Flex是一维的-水平或垂直，而Grid是二维的，这意味着您可以在水平和垂直平面中移动元素
In Grid, we apply layout styles to the parent container and not the items. Flex, on the other hand, targets the flex item to set properties like flex-basis, flex-grow, and flex-shrink
在Grid中，我们将布局样式应用于父容器而不是项目。另一方面，Flex将flex项目作为目标，以设置诸如flex-basis ， flex-grow和flex-shrink属性
Grid and Flex are not mutually exclusive. You can use both on the same project.
网格和Flex并不互斥。您可以在同一项目中使用它们。

使用`@supports`检查浏览器兼容性 (Checking browser compatibility with `@supports`)

Ideally, when you build a site, you’d design it with Grid and use Flex as a fallback. You can find out if your browser supports grid with the @support CSS rule (aka feature query). Here’s an example:

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

.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 */}
}

入门 (Getting Started)

To make any element a grid, you need to assign its display property to grid, like so:

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

.conatiner {display: grid;
}

And that’s it. You just made your .container a grid. Every element inside the .container automatically becomes a grid item.

就是这样。您只是将.container为网格。 .container每个元素.container自动成为网格项。

定义模板 (Defining templates)

Rows and columns

行和列

grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto 300px;

Areas

地区

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";

网格区域 (Grid Areas)

Here’s some sample code on how to define and assign grid areas:

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

.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`单位 (The `fr` unit)

Grid introduces a new fr unit, which stands for fraction. The good thing about using the fr unit is that it takes care of calculations for you. Using fr avoids margin and padding issues. With % and em etc. it becomes a math equation when calculating grid-gap. If you used fr unit, it’ll automatically calculate both column and gutter sizes and adjust the size of the columns accordingly. Plus there will be no bleeding gaps at the end either.

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

例子 (Examples)

根据屏幕大小更改元素的顺序 (Changing the order of elements based on screen size)

Let’s say you want to move the footer to the bottom on small screens and to the right on bigger screens, and there’s a bunch of other HTML elements in between the two.

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

The simple solution is to change the grid-template-areas based on the screen size. You can also change the number of columns and rows based on the screen size, too. This is a much cleaner and simpler alternative to Bootstrap’s Grid system (col-xs-8 col-sm-6 col-md-4 col-lg-3).

简单的解决方案是根据屏幕尺寸更改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"}
}

更多信息： (More Information:)

CSS Grid Palyground by Mozilla: Great starting point if you’re new to CSS Grids. It has visuals to help you understand the terminology easily
Mozilla撰写CSS Grid Palyground ：如果您不熟悉CSS网格，则是一个很好的起点。它具有视觉效果，可帮助您轻松理解术语
YouTube: Morten Rand-Hendriksen: CSS Grid Changes Everything (About Web Layouts): This presentation will convince you in less than an hour why CSS Grids are cool and why/how you should use them.
YouTube：Morten Rand-Hendriksen：CSS网格改变了一切(关于Web布局) ：此演示文稿将在不到一个小时的时间内说服您CSS网格为何很棒，以及为什么/如何使用它们。
Videos: Learn Grid Layout Video Series by Rachel Andrew: Rachel Andrew is an expert on the subject. The video titles may look strange and overwhelming, but the content is short and to the point
视频：Rachel Andrew的“学习网格布局视频系列” ：Rachel Andrew是该主题的专家。视频标题可能看起来很奇怪且令人难以置信，但内容简短而切合实际
Book: Get Ready for CSS Grid Layout by Rachel Andrew
图书：为Rachel Andrew准备CSS网格布局

选择器 (Selectors)

Selectors are CSS rules to target HTML elements to apply styles. Tag names, class names, ids, and attributes are some of the hooks used as selectors.

选择器是CSS规则，以HTML元素为目标以应用样式。标记名称，类名称，ID和属性是用作选择器的一些挂钩。

选择器语法 (Selector Syntax)

Selectors arranged in a specific sequence build up to a rule to target elements. An example:

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

/* selects anchor tags */
a { color: orange;
}/* selects elements with hero class */
.hero {text-align: center;
}

选择器类型 (Type of Selectors)

TypeDescription are Type selectors and Tag names are used to select elements such as h1 or a.
TypeDescription是类型选择器，标记名称用于选择元素，例如h1或a 。
Universal Selectors apply to all elements.
通用选择器适用于所有元素。
div * matches all elements within div elements.
div *匹配div元素内的所有元素。
Attribute Selectors are Selectors that target elements based on their attributes [and optionally, their values].
属性选择器是基于元素的属性[和(可选地，它们的值)]定位元素的选择器。
h1[title] selects h1 elements with title attribute.
h1[title]选择具有title属性的h1元素。
Class Selectors are Selectors that target elements using their class names.
类选择器是使用元素的类名称作为目标元素的选择器。
ID Selectors are Selectors that use ID to target elements. #logo selects the element with logo as ID.
ID选择器是使用ID定位元素的选择器。 #logo选择带有logo作为ID的元素。
Pseudo-class Selectors are Special selectors that target elements based on their state. a:hover selector applies style when pointer hovers over links.
伪类选择器是特殊选择器，它们根据元素的状态定位元素。当指针悬停在链接上时， a:hover选择器将应用样式。

选择器组合器 (Selector Combinators)

Combinator: Purpose white spaceDescendant combinator. .nav li selects all li children within the class .nav, including nested li elements.>Child combinator. .menu > li selects all li that are direct children of elements with .menu class.+Adjacent sibling combinator. .logo + h1 targets h1 that is an immediate sibling to .logo class.~General sibling combinator. header ~ div targets div elements that are siblings to header elements.

组合器：用途white space后代组合器。 .nav li选择所有li该类内儿童.nav ，包括嵌套li元件。 >儿童组合器。 .menu > li选择具有.menu类的元素的直接子元素的所有li。 +相邻的同级组合器。 .logo + h1目标h1是立即同级.logo类。 ~普通同级组合器。 header ~ div div元素作为header元素的兄弟对象。

This section details all of these electors.

本节详细介绍所有这些选民。

更多信息： (More Information:)

You can learn more about selectors on these resources:

您可以通过以下资源了解有关选择器的更多信息：

Official CSS3 Selectors specification
官方CSS3选择器规范
Selectors page on Mozilla Developer Network
Mozilla开发人员网络上的“选择器”页面
CSS Selectors Cheat Sheet on FreeCodeCamp Guides
FreeCodeCamp指南上CSS选择器备忘单

Selectors in CSS (cascading style sheets) are determined based on specificity. With this we are able to be more specific on our style rules and override other rules that may be targeting the same element but are not as specific.

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

The way this specificity hierarchy works is based on weight. This means that an element Selector has a weight of 1 (one), a class selector has a weight of 10 (ten) and a id selector has a weight of 100 (one hundred). We are able to combine different selectors together be more specific on the element we want to change.

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

As an example:

举个例子：

p {color: blue;}p .red {color: red;}

Our type selector p will select all p elements in our html document, but it only has a weight of one. In contrast, the class selector has a weight of 11, because we are combining a type selector with a class selector (this selector is matching all p elements with a class of red).

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

Note:

注意：

Directly targeted rules will always have precedence over rules which inherit elements from their ancestor.
直接定向的规则将始终优先于从其祖先继承元素的规则。
Specificity is only applied when multiple declarations are targeting the same element, and only then this rule is applied.
仅当多个声明针对同一元素时才应用特异性，然后才应用此规则。
Specificity is usually why some of the style rules do not apply to elements when you would expect them to.
特殊性通常就是为什么某些样式规则在您期望的时候不适用于元素。

CSS显示 (CSS Display)

The display property specifies the type of box used for an HTML element. It has 20 possible keyword values. The commonly used ones are:

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}

The display:none property can often be helpful when making a website responsive. For example, you may want to hide an element on a page as the screen size shrinks in order to compensate for the lack of space. display: none will not only hide the element, but all other elements on the page will behave as if that element does not exist.

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

This is the biggest difference between this property and the visibility: hidden property, which hides the element but keeps all other page elements in the same place as they would appear if the hidden element was visible.

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

These keyword values are grouped into six categories:

这些关键字值分为六类：