De bedste CSS- og CSS3-selvstudier

Cascading Style Sheets (CSS)

CSS er et akronym for Cascading Style Sheets. Den blev først opfundet i 1996 og er nu en standardfunktion i alle større webbrowsere.

CSS giver udviklere mulighed for at kontrollere, hvordan websider ser ud, ved at "style" HTML-strukturen på den side.

CSS-specifikationer vedligeholdes af World Wide Web Consortium (W3C).

Du kan bygge nogle ret fantastiske ting i CSS alene, såsom dette pure-CSS Minesweeper-spil (som ikke bruger JavaScript).

En god start er freeCodeCamp-læseplanen Introduktion til grundlæggende CSS.

Et andet forslag til begyndere er W3C's Starter med HTML + CSS, som lærer, hvordan man opretter et stilark.

Webstedet CSS Zen Garden er et godt eksempel på, hvordan den samme html kan designes til at se helt unik ud.

For en demonstration af kraften ved CSS, se Species In Pieces.

Selvstudier til start med CSS og CSS3

Det bedste sted at begynde at lære CSS er med freeCodeCamp's 2-timers introduktion til CSS-tutorial.

Så hvis du føler dig mere eventyrlysten, har vi et helt 12-timers kursus, der dækker HTML, HTML5 og CSS i detaljer.

Flexbox

Flexbox er en ny måde at strukturere indhold i CSS3 på. Det giver en vidunderlig måde at oprette responsive websteder, der fungerer godt på tværs af forskellige skærmstørrelser og bestiller indhold.

Der er 3 enkle trin til at bruge Flexbox:

  1. Konverter den overordnede container til en flexcontainer ved hjælp af display: flex;
  2. Juster layoutet på forskellige containere ved hjælp af flex-direction
  3. Juster layoutet på emner i en container ved hjælp af egenskaber som justify-content, align-itemsosv

Flexbox giver dig mulighed for effektivt at lægge, justere og justere pladsen mellem forskellige sideelementer, selvom du ikke kender deres nøjagtige størrelse. I stedet er genstande og containere dynamiske og vil "bøjes" for bedst at udfylde den tilgængelige plads.

  • hovedakse : Den primære akse i en flexcontainer, langs hvilken flex-emner er lagt. Husk, at dette kan være vandret eller lodret afhængigt afflex-directionejendommen.
  • hovedstart | main-end :Flex-genstande placeres i en container fra main-starttil main-end.
  • hovedstørrelse : En flex-artikels hoveddimension, som kan være dens bredde eller højde, fungerer som elementets hovedstørrelse.
  • tværakse : Den akse, der er vinkelret på hovedaksen. Retningen af ​​tværaksen afhænger af hovedaksen retning.
  • krydsstart | tværgående : Flex-linjer og genstande placeres i en flex-container, der starter fra sidencross-starttilcross-endsiden.
  • tværstørrelse : Varens tværdimension (bredde eller højde) fungerer som varens tværstørrelse.

Gitterlayout

CSS Grid Layout, ganske enkelt kendt som Grid, er et layoutskema, der er det nyeste og mest kraftfulde i CSS. Det understøttes af alle større browsere og giver en måde at placere elementer på siden og flytte dem rundt på.

Det kan automatisk tildele elementer til områder , størrelse og ændre størrelsen på dem, sørge for at oprette kolonner og rækker baseret på et mønster, du definerer, og det gør alle beregningerne ved hjælp af den nyligt introducerede frenhed.

Hvorfor Grid?

  • Du kan nemt have et 12-søjles gitter med en linje CSS. grid-template-columns: repeat(12, 1fr)
  • Grid giver dig mulighed for at flytte ting i enhver retning. I modsætning til Flex, hvor du kan flytte elementer enten vandret ( flex-direction: row) eller lodret ( flex-direction: column) - og ikke begge på samme tid - giver Grid dig mulighed for at flytte ethvert gitterelement til et foruddefineret gitterområde på siden. De emner, du flytter, behøver ikke at være tilstødende.
  • Med CSS Grid kan du ændre rækkefølgen på HTML-elementer ved kun at bruge CSS . Flyt noget fra top til højre, flyt elementer, der var i sidefoden til sidepanelet osv. I stedet for at flytte fra til i HTML-koden kan du bare ændre placeringen med grid-areai CSS-stilarket.

Grid vs. Flex

  • Flex er endimensionel - enten vandret eller lodret, mens gitter er todimensionelt, hvilket betyder at du kan flytte elementer i både vandrette og lodrette planer
  • I Grid anvender vi layoutformater til den overordnede container og ikke elementerne. Flex, på den anden side, er målrettet flex punkt til at angive egenskaber som flex-basis, flex-growogflex-shrink
  • Grid og Flex udelukker ikke hinanden. Du kan bruge begge dele på det samme projekt.

Kontrol af browserkompatibilitet med @supports

Ideelt set, når du bygger et websted, skal du designe det med Grid og bruge Flex som en reserve. Du kan finde ud af, om din browser understøtter gitter med @supportCSS-reglen (også kaldet funktionsforespørgsel). Her er et eksempel:

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

Kom godt i gang

For at gøre ethvert element til et gitter skal du tildele dets displayegenskab til gridsådan:

.conatiner { display: grid; }

Og det er det. Du har lige lavet dit til .containeret gitter. Hvert element inde i .containerbliver automatisk et gitterelement.

Definition af skabeloner

Rækker og kolonner

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

Områder

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

eller

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

Gitterområder

Her er nogle eksempler på, hvordan du definerer og tildeler gitterområder:

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

den frenhed

Grid introducerer en ny frenhed, der står for brøkdel . Den gode ting ved at bruge frenheden er, at den tager sig af beregninger for dig. Brug frundgår margin- og polstringsproblemer. Med %og emosv. Bliver det en matematisk ligning ved beregning grid-gap. Hvis du brugte frenheden, beregner den automatisk både kolonne- og tagrendestørrelser og justerer størrelsen på kolonnerne i overensstemmelse hermed. Der er heller ikke nogen blødningshuller i slutningen.

Eksempler

Ændring af rækkefølgen af ​​elementer baseret på skærmstørrelse

Lad os sige, at du vil flytte sidefoden til bunden på små skærme og til højre på større skærme, og der er en masse andre HTML-elementer imellem de to.

Den enkle løsning er at ændre det grid-template-areasbaseret på skærmstørrelsen. Du kan også ændre antallet af kolonner og rækker baseret på skærmstørrelsen . Dette er et meget renere og enklere alternativ til Bootstraps 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" } }

Mere information:

  • CSS Grid Palyground af Mozilla: Fantastisk udgangspunkt, hvis du ikke er ny i CSS Grids. Det har billeder, der hjælper dig med let at forstå terminologien
  • YouTube: Morten Rand-Hendriksen: CSS Grid ændrer alt (om weblayouts): Denne præsentation vil overbevise dig på mindre end en time om, hvorfor CSS Grids er seje, og hvorfor / hvordan du skal bruge dem.
  • Videoer: Learn Grid Layout Videoserie af Rachel Andrew: Rachel Andrew er ekspert i emnet. Videotitlerne kan se mærkelige og overvældende ud, men indholdet er kort og til det punkt
  • Bog: Bliv klar til CSS Grid Layout af Rachel Andrew

Vælgere

Vælgerne er CSS-regler for at målrette HTML-elementer til at anvende stilarter. Tagnavne, klassenavne, id'er og attributter er nogle af de kroge, der bruges som vælgere.

Selector-syntaks

Vælgerne arrangeret i en bestemt rækkefølge bygger op til en regel til målelementer. Et eksempel:

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

Type vælgere

  • TypeDescription er typevælgere, og tagnavne bruges til at vælge elementer såsom h1eller a.
  • Universelle vælgere gælder for alle elementer.
  • div * matcher alle elementer inden for div-elementer.
  • Attributvælger er Selectors, der målretter mod elementer baseret på deres attributter [og eventuelt deres værdier].
  • h1[title]vælger h1elementer med titleattribut.
  • Klassevælgere er vælgere, der målretter mod elementer ved hjælp af deres klassenavne.
  • 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}

Den display:noneegenskab kan ofte være nyttigt, når de foretager en hjemmeside lydhør. For eksempel vil du muligvis skjule et element på en side, da skærmstørrelsen krymper for at kompensere for manglen på plads. display: nonevil ikke kun skjule elementet, men alle andre elementer på siden opfører sig som om elementet ikke findes.

Dette er den største forskel mellem denne egenskab og visibility: hiddenejendommen, som skjuler elementet, men holder alle andre sideelementer på samme sted, som de ville vises, hvis det skjulte element var synligt.

Disse søgeordsværdier er grupperet i seks kategorier: