A legjobb CSS és CSS3 oktatóanyagok

Lépcsőzetes stíluslapok (CSS)

A CSS a Cascading Style Sheets rövidítése. Először 1996-ban találták ki, és ma már az összes nagyobb webböngésző alapfunkciója.

A CSS lehetővé teszi a fejlesztők számára, hogy az oldal HTML-struktúrájának „stílusával” szabályozzák a weboldalak megjelenését.

A CSS specifikációkat a World Wide Web Consortium (W3C) tartja fenn.

Csak CSS-ben meglehetősen elképesztő dolgokat építhet, például ezt a tiszta CSS Aknakereső játékot (amely nem használ JavaScript-et).

Jó kezdet a freeCodeCamp tananyag Bevezetés az alapvető CSS-be.

Egy másik javaslat a kezdőknek a W3C Starting with HTML + CSS, amely megtanítja, hogyan kell létrehozni egy stíluslapot.

A CSS Zen Garden webhely nagyszerű példa arra, hogy ugyanaz a html megtervezhető úgy, hogy teljesen egyedi legyen.

A CSS erejének bemutatásához nézze meg a Species Pieces darabot.

Oktatóanyagok a CSS és a CSS3 használatához

A CSS elsajátításának legjobb helye a freeCodeCamp 2 órás bevezetése a CSS bemutatóhoz.

Aztán, ha kalandosabbnak érzi magát, van egy teljes 12 órás tanfolyamunk, amely részletesen lefedi a HTML-t, a HTML5-t és a CSS-t.

Flexbox

A Flexbox egy új módszer a tartalom strukturálására a CSS3-ban. Csodálatos módot kínál arra, hogy olyan reszponzív webhelyeket hozzon létre, amelyek jól működnek a különböző képernyőméretekben, és tartalmat rendelnek.

A Flexbox használatának 3 egyszerű lépése van:

  1. A szülőtartály konvertálása rugalmas tárolóvá a használatával display: flex;
  2. A gombbal állítsa be a különböző tárolók elrendezését flex-direction
  3. Állítsa be a az elemek elrendezésének egy tartályon belül használatával tulajdonságok, mint a justify-content, align-itemsés így tovább

A Flexbox lehetővé teszi a különböző oldalelemek hatékony elrendezését, igazítását és beállítását, még akkor is, ha nem ismeri azok pontos méretét. Ehelyett az elemek és a tárolók dinamikusak, és "rugalmasan" fogják kitölteni a rendelkezésre álló helyet.

  • főtengely : A hajlékony tartály elsődleges tengelye, amely mentén hajlékony elemeket helyeznek el. Ne feledje, hogy ezflex-directiontulajdonságtólfüggően lehet vízszintes vagy függőleges.
  • main-start | fő-vég :Flex tárgyak kerülnek a tartályt main-start, hogy main-end.
  • fő méret : A rugalmas elem fő dimenziója, amely lehet szélessége vagy magassága, az elem fő méretének felel meg.
  • kereszt tengely : A tengely, amely merőleges a fő tengelyre. A kereszttengely iránya a fő tengely irányától függ.
  • keresztindítás | keresztirányú : A hajlékony vonalak és elemek egy rugalmas tartályba kerülnekcross-start,cross-endoldalrólindulva.
  • keresztméret : Az elem keresztmérete (szélesség vagy magasság) az elem keresztméreteként működik.

Rácsszerkezet

A CSS Grid Layout, egyszerűen Grid néven ismert elrendezési séma, amely a legújabb és a legerősebb a CSS-ben. Minden nagyobb böngésző támogatja, és lehetőséget nyújt az elemek elhelyezésére az oldalon és azok mozgatására.

Automatikusan hozzárendelhet elemeket területekhez , mérethez és átméretezéshez, gondoskodhat az oszlopok és sorok létrehozásáról az Ön által definiált minta alapján, és elvégzi az összes számítást az újonnan bevezetett fregység segítségével.

Miért a Grid?

  • Könnyedén létrehozhat 12 oszlopos rácsot, a CSS egy sorával. grid-template-columns: repeat(12, 1fr)
  • A Rács segítségével bármilyen irányba mozgathatja a dolgokat. A Flex-től eltérően, ahol az elemeket vízszintesen ( flex-direction: row) vagy függőlegesen ( flex-direction: column) mozgathatja - és nem mindkettőt egyszerre -, a Rács lehetővé teszi, hogy bármely rácselemet az oldal előre meghatározott rácsterületére mozgasson . Az áthelyezett elemeknek nem kell egymás mellett lenniük.
  • A CSS Grid segítségével csak a CSS használatával módosíthatja a HTML elemek sorrendjét . Mozgás valami fentről jobbra, mozgatni elemeket, amelyek a láblécben az oldalsáv stb mozgatása helyett a következőtől hogy a HTML, akkor csak változtatni a elhelyezést grid-areaa CSS stíluslap.

Rács vs. Flex

  • A flex egydimenziós - vízszintes vagy függőleges, míg a rács kétdimenziós, vagyis az elemeket vízszintes és függőleges síkban is mozgathatja
  • A Rácsban az elrendezési stílusokat a szülőtárolóra alkalmazzuk, nem pedig az elemekre. Flex, másrészt, megcélozza a flex elem készlet tulajdonságok, mint flex-basis, flex-growésflex-shrink
  • A Grid és a Flex nem zárják ki egymást. Használhatja mindkettőt ugyanabban a projektben.

A böngésző kompatibilitásának ellenőrzése a @supports

Ideális esetben, ha webhelyet épít, akkor a Griddel kell megterveznie, és a Flex-et tartalékként használja. Megtudhatja, hogy a böngésző támogatja-e a rácsot a @supportCSS-szabály (más néven szolgáltatáskérdezés) segítségével. Íme egy példa:

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

Elkezdeni

Bármely elem rácsrá alakításához hozzá kell rendelnie a displaytulajdonságát grid, például:

.conatiner { display: grid; }

És ez az. Most készítetted a .containerrácsodat. Az elemen belül minden elem .containerautomatikusan rácsos elem lesz.

Sablonok meghatározása

Sorok és oszlopok

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

Területek

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

vagy

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

Rácsterületek

Íme néhány példa kód a rácsterületek meghatározásáról és hozzárendeléséről:

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

Az fregység

A Grid egy új fregységet mutat be, amely a frakciót jelenti . Az a jó dolog az fregység használatában, hogy gondoskodik az Ön számításairól. Használatával frelkerülhetők a margó és a kitöltési problémák. Ezzel %és emstb válik egy matematikai egyenlet kiszámításakor grid-gap. Ha fregységet használt , akkor automatikusan kiszámítja az oszlop és az ereszcsatorna méretét, és ennek megfelelően állítja be az oszlopok méretét. Ráadásul a végén sem lesznek vérző rések.

Példák

Az elemek sorrendjének megváltoztatása a képernyő mérete alapján

Tegyük fel, hogy a láblécet alul akarja mozgatni kis képernyőkön, jobbra pedig nagyobb képernyőkön, és egy csomó más HTML elem van a kettő között.

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

.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
  • 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.
  • 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
  • Book: Get Ready for CSS Grid Layout by Rachel Andrew

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.

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.
  • Universal Selectors apply to all elements.
  • div * matches all elements within div elements.
  • Attribute Selectors are Selectors that target elements based on their attributes [and optionally, their values].
  • h1[title] selects h1 elements with title attribute.
  • 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.
  • Pseudo-class Selectors are Special selectors that target elements based on their state. a:hover selector applies style when pointer hovers over links.

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.

This section details all of these electors.

More Information:

You can learn more about selectors on these resources:

  • Official CSS3 Selectors specification
  • Selectors page on Mozilla Developer Network
  • CSS Selectors Cheat Sheet on FreeCodeCamp Guides

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.

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.

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

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

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

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.

These keyword values are grouped into six categories: