Foi de stil în cascadă (CSS)

CSS este un acronim pentru Cascading Style Sheets. A fost inventat pentru prima dată în 1996 și este acum o caracteristică standard a tuturor browserelor web importante.

CSS permite dezvoltatorilor să controleze aspectul paginilor web prin „stilizarea” structurii HTML a paginii respective.

Specificațiile CSS sunt menținute de World Wide Web Consortium (W3C).

Puteți construi câteva lucruri destul de uimitoare numai în CSS, cum ar fi acest CSS pur Joc Minesweeper (care nu folosește JavaScript).

Un început bun este programul Routech Introducere în CSS de bază.

O altă sugestie pentru începători este W3C’s Începând cu HTML + CSS care învață cum să creați o foaie de stil.

Site-ul CSS Zen Garden este un exemplu minunat în care același html poate fi stilizat pentru a arăta complet unic.

Pentru o demonstrație a puterii CSS, verificați Specii în bucăți.

Tutoriale pentru a începe cu CSS și CSS3

Cel mai bun loc pentru a începe învățarea CSS este cu Routech’s Introducere de 2 ore la tutorialul CSS.

Atunci, dacă te simți mai aventuros, avem un întreg Curs de 12 ore care acoperă HTML, HTML5 și CSS în detaliu.

Cele mai bune tutoriale HTML si HTML5

Flexbox

Flexbox este un nou mod de a structura conținutul în CSS3. Oferă o modalitate minunată de a crea site-uri web receptive, care funcționează bine pe diferite dimensiuni de ecran și conținutul comenzii.

Există 3 pași simpli pentru a utiliza Flexbox:

  1. Convertiți containerul părinte într-un container flex folosind display: flex;
  2. Ajustați aspectul diferitelor containere folosind flex-direction
  3. Ajustați aspectul articolelor dintr-un container folosind proprietăți precum justify-content, align-items, și așa mai departe

Flexbox vă permite să dispuneți în mod eficient, să aliniați și să reglați spațiul între diferite elemente de pagină, chiar dacă nu știți dimensiunea exactă a acestora. În schimb, articolele și containerele sunt dinamice și se vor „flexa” pentru a umple cel mai bine spațiul disponibil.

  • axa principală: Axa primară a unui container flex de-a lungul căruia sunt așezate articolele flexibile. Rețineți că acest lucru poate fi orizontal sau vertical în funcție de flex-direction proprietate.
  • main-start | main-end: Articolele flexibile sunt plasate într-un container din main-start la main-end.
  • dimensiunea principală: Dimensiunea principală a unui articol flexibil, care poate fi lățimea sau înălțimea acestuia, acționează ca dimensiunea principală a elementului.
  • axa transversală: Axa care este perpendiculară pe axa principală. Direcția axei transversale depinde de direcția axei principale.
  • cross-start | cross-end: Liniile flexibile și articolele sunt plasate într-un container flex, începând de la cross-start la cross-end latură.
  • dimensiunea crucii: Dimensiunea transversală a elementului (lățimea sau înălțimea) acționează ca dimensiunea transversală a elementului.

Aspectul grilei

CSS Grid Layout, pur și simplu cunoscut sub numele de Grid, este o schemă de aspect care este cea mai nouă și cea mai puternică din CSS. Este acceptat de toate browserele majore și oferă o modalitate de a poziționa elemente pe pagină și de a le deplasa.

Poate atribui automat elemente zone, mărime și redimensionare, aveți grijă să creați coloane și rânduri pe baza unui model pe care îl definiți și face toate calculele folosind noua introducere fr unitate.

De ce Grid?

  • Puteți avea cu ușurință o grilă cu 12 coloane cu o singură linie de CSS. grid-template-columns: repeat(12, 1fr)
  • Grila vă permite să mutați lucrurile în orice direcție. Spre deosebire de Flex, unde puteți muta articole fie pe orizontală (flex-direction: row) sau vertical (flex-direction: column) – și nu ambele în același timp – Grila vă permite să mutați orice element de grilă la orice predefinit zona grilei pe pagina. Elementele pe care le mutați nu trebuie să fie adiacente.
  • Cu CSS Grid, puteți modificați ordinea elementelor HTML folosind numai CSS. Mutați ceva de sus în dreapta, mutați elementele aflate în subsol în bara laterală etc. În loc să mutați <div>din <footer> la <aside> în HTML, puteți doar să schimbați plasarea acestuia cu grid-area în foaia de stil CSS.

Grilă vs. Flex

  • Flex este unidimensional – orizontal sau vertical, în timp ce Grid este bidimensional, ceea ce înseamnă că puteți muta elemente atât în ​​plan orizontal cât și vertical.
  • În Grilă, aplicăm stiluri de aspect containerului părinte și nu articolelor. Flex, pe de altă parte, vizează elementul flex pentru a seta proprietăți precum flex-basis, flex-grow, și flex-shrink
  • Grid și Flex nu se exclud reciproc. Puteți utiliza ambele pe același proiect.

Verificarea compatibilității browserului cu @supports

În mod ideal, atunci când creați un site, îl veți proiecta cu Grid și veți folosi Flex ca rezervă. Puteți afla dacă browserul dvs. acceptă grila cu @support Regula CSS (aleasă interogare caracteristică). Iată un exemplu:

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

Noțiuni de bază

Pentru a transforma orice element într-o grilă, trebuie să îi atribuiți display proprietate pentru grid, ca astfel:

.conatiner {
  display: grid;
}

Si asta e. Tocmai ai făcut-o .container o grilă. Fiecare element din interiorul .container devine automat un element de grilă.

Definirea șabloanelor

Rânduri și coloane

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

Zone

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

sau

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

Zonele de rețea

Iată câteva exemple de cod despre cum să definiți și să atribuiți zone de grilă:

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

Grid introduce un nou fr unitate, care înseamnă fracțiune. Lucrul bun despre utilizarea fr Unitatea este că se ocupă de calcule pentru dvs. Folosind fr evită problemele de marjă și umplere. Cu % și em etc. devine o ecuație matematică atunci când se calculează grid-gap. Dacă ai folosit fr unitate, va calcula automat atât dimensiunile coloanei, cât și ale jgheabului și va ajusta dimensiunea coloanelor în consecință. În plus, nici la sfârșit nu vor exista goluri de sângerare.

Exemple

Modificarea ordinii elementelor în funcție de dimensiunea ecranului

Să presupunem că doriți să mutați subsolul pe ecranele mici și spre dreapta pe ecranele mai mari și există o grămadă de alte elemente HTML între cele două.

Soluția simplă este schimbarea grid-template-areas pe baza dimensiunii ecranului. Poti de asemenea modificați numărul de coloane și rânduri în funcție de dimensiunea ecranului, de asemenea. Aceasta este o alternativă mult mai curată și mai simplă la sistemul Grid al 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"
  }
}

Mai multe informatii:

Selectoare

Selectorii sunt reguli CSS pentru a viza elemente HTML pentru a aplica stiluri. Numele etichetelor, numele claselor, ID-urile și atributele sunt câteva dintre cârligele utilizate ca selectoare.

Sintaxa selectorului

Selectorele aranjate într-o secvență specifică se acumulează la o regulă pentru a viza elemente. Un exemplu:

/* selects anchor tags */
a { 
    color: orange;
}

/* selects elements with hero class */
.hero {
    text-align: center;
}

Tipul de selectoare

  • TypeDescription sunt selectoare de tip și numele etichetelor sunt utilizate pentru a selecta elemente precum h1 sau a.
  • Selectorii universali se aplică tuturor elementelor.
  • div * se potrivește cu toate elementele din elementele div.
  • Selectorele de atribute sunt selectoare care vizează elemente pe baza atributelor lor [and optionally, their values].
  • h1The Best CSS and CSS3 Tutorials selectează h1 elemente cu title atribut.
  • Selectoarele de clasă sunt selectoare care vizează elemente folosind numele lor de clasă.
  • Selectoarele ID sunt Selectoare care utilizează ID pentru a viza elemente. #logo selectează elementul cu logo ca ID.
  • Selectoarele pseudo-clase sunt selectoare speciale care vizează elemente în funcție de starea lor. a:hover selectorul aplică stilul când indicatorul trece peste linkuri.

Combinatoare de selecție

Combinator: Scop white spaceCombinator descendent. .nav li selectează toate li copiii din clasă .nav, inclusiv imbricat li elemente.>Combinator pentru copii. .menu > li selectează toate li-urile care sunt copii direcți ai elementelor cu .menu clasă.+Combinator frate adiacent. .logo + h1 ținte h1 care este un frate imediat pentru .logo clasă.~Combinator frate general. header ~ div ținte div elemente la care sunt frați header elemente.

Această secțiune detaliază toți acești alegători.

Mai multe informatii:

Puteți afla mai multe despre selectoare despre aceste resurse:

Selectorii din CSS (foi de stil în cascadă) sunt determinați pe baza specificitate. Cu aceasta, putem să fim mai specifici regulilor noastre de stil și să anulăm alte reguli care pot viza același element, dar care nu sunt la fel de specifice.

Modul în care funcționează această ierarhie a specificității se bazează pe greutate. Aceasta înseamnă că un element Selector are o greutate de 1 (unul), un selector de clasă are o greutate de 10 (zece) și un selector de id are o greutate de 100 (o sută). Suntem capabili să combinăm diferiți selectori împreună pentru a fi mai specifici asupra elementului pe care dorim să-l schimbăm.

Ca exemplu:

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

Selectorul nostru de tip p va selecta toate elementele p din documentul nostru html, dar are doar o greutate de unul. În schimb, selectorul de clasă are o greutate de 11, deoarece combinăm un selector de tip cu un selector de clasă (acest selector potriveste toate elementele p cu o clasă de roșu).

Notă:

  • Regulile direct direcționate vor avea întotdeauna prioritate asupra regulilor care moștenesc elemente de la strămoșul lor.
  • Specificitatea se aplică numai atunci când mai multe declarații vizează același element și numai atunci se aplică această regulă.
  • Specificitatea este, de obicei, motivul pentru care unele dintre regulile de stil nu se aplică elementelor atunci când v-ați aștepta ca acestea.

Afișare CSS

Proprietatea de afișare specifică tipul de casetă utilizată pentru un element HTML. Are 20 de posibile valori ale cuvintelor cheie. Cele utilizate în mod obișnuit sunt:

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

display:none proprietatea poate fi de multe ori utilă atunci când un site web este receptiv. De exemplu, poate doriți să ascundeți un element pe o pagină, deoarece dimensiunea ecranului se micșorează pentru a compensa lipsa de spațiu. display: none nu va ascunde doar elementul, dar toate celelalte elemente de pe pagină se vor comporta de parcă acel element nu ar exista.

Aceasta este cea mai mare diferență dintre această proprietate și visibility: hidden , care ascunde elementul, dar păstrează toate celelalte elemente ale paginii în același loc în care ar apărea dacă elementul ascuns ar fi vizibil.

Aceste valori ale cuvintelor cheie sunt grupate în șase categorii:

  • <display-inside>
  • <display-outside>
  • <display-listitem>
  • <display-box>
  • <display-internal>
  • <display-legacy>