和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:

這些關鍵字值分為六類：