和css3實(shí)例教程

級(jí)聯(lián)樣式表(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年首次發(fā)明，現(xiàn)在已成為所有主要網(wǎng)絡(luò)瀏覽器的標(biāo)準(zhǔn)功能。

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

CSS允許開發(fā)人員通過“樣式化”頁(yè)面HTML結(jié)構(gòu)來控制網(wǎng)頁(yè)的外觀。

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

CSS規(guī)范由萬維網(wǎng)聯(lián)盟(W3C)維護(hù)。

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

您可以單獨(dú)在CSS中構(gòu)建一些非常令人驚奇的東西，例如此純CSS Minesweeper游戲 (不使用JavaScript)。

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

一個(gè)很好的開始是freeCodeCamp課程“基本CSS簡(jiǎn)介” 。

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

初學(xué)者的另一個(gè)建議是W3C的HTML + CSS入門，它教如何創(chuàng)建樣式表。

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

CSS Zen Garden網(wǎng)站是一個(gè)很好的示例，說明了如何將相同的html設(shè)置為完全獨(dú)特的樣式。

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

有關(guān)CSS強(qiáng)大功能的演示，請(qǐng)查看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.

開始學(xué)習(xí)CSS的最佳位置是freeCodeCamp的CSS教程2小時(shí)入門 。

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

然后，如果您感到更冒險(xiǎn)，我們將提供完整的12小時(shí)課程，詳細(xì)介紹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中構(gòu)造內(nèi)容的新方法。 它提供了一種出色的方式來創(chuàng)建可在不同屏幕尺寸和訂單內(nèi)容下正常運(yùn)行的響應(yīng)式網(wǎng)站。

There are 3 simple steps to use Flexbox:

使用Flexbox只需3個(gè)簡(jiǎn)單的步驟：

Convert the parent container to a flex container by using display: flex;

通過使用display: flex;將父容器轉(zhuǎn)換為flex容器display: flex;

Adjust the layout of different containers by using flex-direction

通過使用flex-direction調(diào)整不同容器的布局

Adjust the layout of items within a container by using properties like justify-content, align-items, and so on

通過使用justify-content ， align-items等屬性來調(diào)整容器中項(xiàng)目的布局

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允許您有效地布局，對(duì)齊和調(diào)整不同頁(yè)面元素之間的空間，即使您不知道它們的確切大小。 相反，項(xiàng)目和容器是動(dòng)態(tài)的，并且將“靈活”以最佳地填充可用空間。

• 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 ：伸縮容器的主軸，可沿其放置伸縮項(xiàng)。 請(qǐng)記住，取決于flex-direction屬性，它可以是水平或垂直的。

• main-start | main-end: Flex items are placed in a container from main-start to main-end.

  主啟動(dòng)| 主端 ： Flex項(xiàng)目從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.

  主要尺寸 ：彈性商品的主要尺寸(可以是其寬度或高度)充當(dāng)該商品的主要尺寸。

• 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.

  交叉啟動(dòng)| cross-end ：柔性線和項(xiàng)目從cross-start到cross-end側(cè)放置在彈性容器中。

• cross size: The item's cross dimension (width or height) acts as the item's cross size.

  十字尺寸 ：商品的十字尺寸(寬度或高度)用作商品的十字尺寸。

網(wǎng)格布局 (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網(wǎng)格布局，簡(jiǎn)稱為Grid，是CSS中最新，功能最強(qiáng)大的布局方案。 所有主要瀏覽器均支持該功能，并提供了一種在頁(yè)面上定位項(xiàng)目并在其中移動(dòng)項(xiàng)目的方法。

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.

它可以自動(dòng)將項(xiàng)目分配給區(qū)域 ，調(diào)整大小并調(diào)整它們的大小，并根據(jù)您定義的模式創(chuàng)建列和行，并使用新引入的fr單位進(jìn)行所有計(jì)算。

為什么選擇網(wǎng)格？ (Why Grid?)

• You can easily have a 12-column grid with one line of CSS. grid-template-columns: repeat(12, 1fr)

  您可以輕松地使用一行CSS來組成一個(gè)12列的網(wǎng)格。 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.

  網(wǎng)格使您可以向任何方向移動(dòng)事物。 與Flex不同，Flex可以在水平方向( flex-direction: row )或垂直方向( flex-direction: column )上移動(dòng)內(nèi)容-不能同時(shí)移動(dòng)兩者-網(wǎng)格使您可以將任何網(wǎng)格項(xiàng)目移動(dòng)到頁(yè)面上的任何預(yù)定義網(wǎng)格區(qū)域 。 您移動(dòng)的項(xiàng)目不必相鄰。

• 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元素的順序 。 從頂部向右移動(dòng)某些內(nèi)容，將頁(yè)腳中的元素移動(dòng)到側(cè)邊欄等。代替將<div>從<footer>移到HTML中的<aside> ，您只需在grid-area使用grid-area更改其位置即可。 CSS樣式表。

網(wǎng)格與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是二維的，這意味著您可以在水平和垂直平面中移動(dòng)元素

• 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中，我們將布局樣式應(yīng)用于父容器而不是項(xiàng)目。 另一方面，Flex將flex項(xiàng)目作為目標(biāo)，以設(shè)置諸如flex-basis ， flex-grow和flex-shrink屬性

• Grid and Flex are not mutually exclusive. You can use both on the same project.
  網(wǎng)格和Flex并不互斥。 您可以在同一項(xiàng)目中使用它們。

使用@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:

理想情況下，構(gòu)建網(wǎng)站時(shí)，可以使用Grid進(jìn)行設(shè)計(jì)，并使用Flex作為后備。 您可以使用@support CSS規(guī)則(也稱為功能查詢)來確定瀏覽器是否支持網(wǎng)格。 這是一個(gè)例子：

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

要使任何元素成為網(wǎng)格，您需要將其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為網(wǎng)格。 .container每個(gè)元素.container自動(dòng)成為網(wǎng)格項(xiàng)。

定義模板 (Defining templates)

Rows and columns

行和列

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

Areas

地區(qū)

grid-template-areas: "a a a a""b c d e""b c d e""f f f f";

or

要么

grid-template-areas:"header header header header""nav main main sidebar";

網(wǎng)格區(qū)域 (Grid Areas)

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

以下是一些有關(guān)如何定義和分配網(wǎng)格區(qū)域的示例代碼：

.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引入了一個(gè)新的fr單位，代表分?jǐn)?shù) 。 使用fr單位的好處是它可以為您計(jì)算。 使用fr可以避免邊距和填充問題。 使用%和em等，它成為計(jì)算grid-gap時(shí)的數(shù)學(xué)方程。 如果使用fr單位，它將自動(dòng)計(jì)算列大小和裝訂線大小，并相應(yīng)地調(diào)整列大小。 另外，最后也不會(huì)有出血間隙。

例子 (Examples)

根據(jù)屏幕大小更改元素的順序 (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.

假設(shè)您要將頁(yè)腳在小屏幕上移至底部，在大屏幕上移至右側(cè)，并且在這兩者之間還有許多其他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).

簡(jiǎn)單的解決方案是根據(jù)屏幕尺寸更改grid-template-areas 。 您也可以根據(jù)屏幕尺寸更改列數(shù)和行數(shù) 。 這是Bootstrap網(wǎng)格系統(tǒng)( col-xs-8 col-sm-6 col-md-4 col-lg-3 )的一種更干凈，更簡(jiǎn)單的替代方法。

.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網(wǎng)格，則是一個(gè)很好的起點(diǎn)。 它具有視覺效果，可幫助您輕松理解術(shù)語

• 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網(wǎng)格改變了一切(關(guān)于Web布局) ：此演示文稿將在不到一個(gè)小時(shí)的時(shí)間內(nèi)說服您CSS網(wǎng)格為何很棒，以及為什么/如何使用它們。

• 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的“學(xué)習(xí)網(wǎng)格布局視頻系列” ：Rachel Andrew是該主題的專家。 視頻標(biāo)題可能看起來很奇怪且令人難以置信，但內(nèi)容簡(jiǎn)短而切合實(shí)際

• Book: Get Ready for CSS Grid Layout by Rachel Andrew

  圖書：為Rachel Andrew準(zhǔn)備CSS網(wǎng)格布局

選擇器 (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規(guī)則，以HTML元素為目標(biāo)以應(yīng)用樣式。 標(biāo)記名稱，類名稱，ID和屬性是用作選擇器的一些掛鉤。

選擇器語法 (Selector Syntax)

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

以特定順序排列的選擇器構(gòu)成了針對(duì)元素的規(guī)則。 一個(gè)例子：

/* 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是類型選擇器，標(biāo)記名稱用于選擇元素，例如h1或a 。

• Universal Selectors apply to all elements.
  通用選擇器適用于所有元素。

• div * matches all elements within div elements.

  div *匹配div元素內(nèi)的所有元素。

• 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.
  類選擇器是使用元素的類名稱作為目標(biāo)元素的選擇器。

• ID Selectors are Selectors that use ID to target elements. #logo selects the element with logo as ID.

  ID選擇器是使用ID定位元素的選擇器。 #logo選擇帶有l(wèi)ogo作為ID的元素。

• Pseudo-class Selectors are Special selectors that target elements based on their state. a:hover selector applies style when pointer hovers over links.

  偽類選擇器是特殊選擇器，它們根據(jù)元素的狀態(tài)定位元素。 當(dāng)指針懸停在鏈接上時(shí)， a:hover選擇器將應(yīng)用樣式。

選擇器組合器 (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選擇所有l(wèi)i該類內(nèi)兒童.nav ，包括嵌套li元件。 >兒童組合器。 .menu > li選擇具有.menu類的元素的直接子元素的所有l(wèi)i。 +相鄰的同級(jí)組合器。 .logo + h1目標(biāo)h1是立即同級(jí).logo類。 ~普通同級(jí)組合器。 header ~ div div元素作為header元素的兄弟對(duì)象。

This section details all of these electors.

本節(jié)詳細(xì)介紹所有這些選民。

更多信息： (More Information:)

You can learn more about selectors on these resources:

您可以通過以下資源了解有關(guān)選擇器的更多信息：

• Official CSS3 Selectors specification

  官方CSS3選擇器規(guī)范

• Selectors page on Mozilla Developer Network

  Mozilla開發(fā)人員網(wǎng)絡(luò)上的“選擇器”頁(yè)面

• 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(級(jí)聯(lián)樣式表)中的選擇器是根據(jù)特定性確定的。 這樣，我們就可以更具體地定義樣式規(guī)則，并覆蓋可能針對(duì)同一元素但不那么具體的其他規(guī)則。

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.

這種特異性層次結(jié)構(gòu)的工作方式基于權(quán)重。 這意味著元素選擇器的權(quán)重為1(一)，類選擇器的權(quán)重為10(十)，id選擇器的權(quán)重為100(一百)。 我們能夠?qū)⒉煌倪x擇器組合在一起，從而更具體地定義我們要更改的元素。

As an example:

舉個(gè)例子：

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個(gè)元素，但其權(quán)重僅為1。 相反，類選擇器的權(quán)重為11，因?yàn)槲覀儗㈩愋瓦x擇器與類選擇器組合在一起(該選擇器將所有p個(gè)元素與紅色類匹配)。

Note:

注意：

• Directly targeted rules will always have precedence over rules which inherit elements from their ancestor.
  直接定向的規(guī)則將始終優(yōu)先于從其祖先繼承元素的規(guī)則。
• Specificity is only applied when multiple declarations are targeting the same element, and only then this rule is applied.
  僅當(dāng)多個(gè)聲明針對(duì)同一元素時(shí)才應(yīng)用特異性，然后才應(yīng)用此規(guī)則。
• Specificity is usually why some of the style rules do not apply to elements when you would expect them to.
  特殊性通常就是為什么某些樣式規(guī)則在您期望的時(shí)候不適用于元素。

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個(gè)可能的關(guān)鍵字值。 常用的有：

.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.

當(dāng)使網(wǎng)站響應(yīng)時(shí)， display:none屬性通常會(huì)很有幫助。 例如，您可能想在屏幕尺寸縮小時(shí)隱藏頁(yè)面上的元素，以彌補(bǔ)空間的不足。 display: none不僅會(huì)隱藏該元素，而且頁(yè)面上的所有其他元素也會(huì)表現(xiàn)為該元素不存在。

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之間的最大區(qū)別visibility: hidden屬性，該屬性隱藏元素，但將所有其他頁(yè)面元素保持在與隱藏元素可見的情況下相同的位置。

These keyword values are grouped into six categories:

這些關(guān)鍵字值分為六類：

• <display-inside>

  <display-inside>

• <display-outside>

  <display-outside>

• <display-listitem>

  <display-listitem>

• <display-box>

  <display-box>

• <display-internal>

  <display-internal>

• <display-legacy>

  <display-legacy>

翻譯自: https://www.freecodecamp.org/news/best-css-and-css3-tutorial/

和css3實(shí)例教程

總結(jié)

以上是生活随笔為你收集整理的和css3实例教程_最好CSS和CSS3教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。