Ce este CSS și cum să lucrezi cu el

29.05.2022

Timp de citire: 4 minut

Profesii

Autorul articolului

Grișa Prepeliță

Ce este CSS și cum să lucrezi cu el

Cu ajutorul CSS se creează culoarea, dimensiunea, animația și se adaptează site-ul la un dispozitiv.

Conţinut:

Elementele de bază ale aspectului vizual

Tipuri de foi de stil

Fonturi

Cândva, site-urile web nu erau atât de frumoase pe cât le vedem acum. Anterior, dezvoltatorii foloseau diferite hack-uri pentru a afișa elemente. De exemplu, gif-urile transparente au fost folosite pentru indentări, iar caracterele speciale de spațiu au fost folosite pentru a separa textul. Dar totul s-a schimbat: în 1996 a fost publicată prima versiune a CSS (Cascading Style Sheets).

Elementele de bază ale aspectului vizual

CSS este o tehnologie care descrie formatarea elementelor dintr-o pagină web. Acesta a evoluat din 1996 și se află acum la a treia versiune.
Un site web este scris folosind HTML, dar acesta definește doar elementele în sine - structura logică a acestora. Iar un limbaj de stil CSS special le conferă caracteristici vizuale: culoare, font, dimensiune.

Tipuri de foi de stil

Modul corect de aplicare a stilurilor este de a include fișiere externe. Există însă o altă modalitate de a specifica formatul de afișare: puteți aplica foi de stil interne sau integrate.

Fișiere externe

Fișierul de stil "style.css" poate primi orice nume. Uneori, mai multe astfel de fișiere sunt utilizate într-un proiect. Acest lucru ajută la reducerea volumului acestora și face ca fișierele să fie mai ușor de citit și să separe logica. Pentru a include un fișier de stiluri într-o pagină, adăugați o etichetă <link> la blocul <head> al unui document HTML. Vedere generală a proiectului:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="[calea absolută sau relativă a fișierului]">
<title>Titlul paginii</title>
</head>
<body>
</body>
</html>

Ce înseamnă fiecare atribut:

rel este responsabil pentru relația dintre document și fișierul specificat - cu ajutorul acestuia, browserul înțelege cum să citească fișierul și îl aplică corect;
type specifică tipul de fișier folosind specificația MIME - un standard pentru formatare și codificare;
href specifică unde se află fișierul; se folosesc căi absolute și relative pentru locația pe gazdă - calculatorul dumneavoastră sau calculatorul din centrul de date unde este găzduit site-ul.

CSS încorporat

Acest format inline este o descriere a stilurilor în interiorul tag-ului <style> înainte de tag-ul de închidere </head> al unui document HTML. Acest mod de aplicare a stilurilor este considerat incorect, deoarece este dificil de citit și de modificat. Dar este utilă pentru validarea rapidă a mai multor modificări. Iată cum sunt folosite stilurile inline:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Titlul paginii</title>

<style type="text/css">

p {

color: blue; /* textul tuturor paragrafelor să fie de culoarea albastră*/

}


a {

text-decoration: none; /* dezactivați formatarea standard a link-urilor*/

}

</style>

</head>

<body>
</body>

</html>

Stiluri interne

Un ultim mod de a specifica designul unui element este de a specifica un stil prin adăugarea atributului style în interiorul etichetei. Aplicați stilurile interne numai la elemente individuale, deoarece acestea sunt dificil de modificat. Un exemplu al acestei metode:

<!- deci setează elementul container

o dimensiune fixă de 150 de pixeli lățime

și 200 de pixeli înălțime ->

<div style="width: 150px; height: 200px;">...</div>

Priorități

Mai multe opțiuni de formatare vor intra în conflict între ele. De exemplu, specificarea unui stil intern pentru un element va suprascrie formatarea suprapusă dintr-un fișier legat. Pentru a rezolva astfel de probleme, CSS a dezvoltat un sistem special de priorități:

Stilul intern.
Stilul intern.
Stil exterior.

Regula de @import.

De exemplu, utilizați mai multe fișiere de stil: "images.css" pentru imagini, "mobile.css" pentru dispozitive mobile și "main.css" ca fișier principal. Pentru a evita atașarea individuală a tuturor fișierelor cu ajutorul etichetei <link>, utilizați construcția "@import". Scrieți "main.css" la începutul fișierului:

@import url('images.css');

@import url('mobile.css');
/* Apoi, urmează stilurile în fișierul principal*/
p {

color: blue;

}

În documentul HTML, includeți doar fișierul principal, deoarece codul CSS din cele suplimentare va fi deja încorporat în acesta.

Selectoare

Sunt folosite pentru a alege elementele cărora să le aplici stilurile. Acestea pot fi ID-uri, clase, nume de etichete, selectoare de atribute și pseudo-clase.

selector de id

De exemplu, în interiorul unui fișier HTML există un bloc <div> cu un atribut „id”. Este setat la „unique_row”

<div id=”unique_row”>...</div>

Pentru a vă referi la elemente după id, utilizați numele grid + id. Pentru a seta dimensiunea și marginea containerului din exemplu, adăugați în fișierul de stiluri:

#unique_row {

width: 400px;

height: 200px;

border: 1px solid black; /* margine, 1 pixel grosime, solid, negru */ 

}

Id trebuie să fie unic, astfel încât să nu puteți aplica stilul la mai multe elemente.

Selector de clasă

Clasele se aplică la mai multe elemente în același timp. Iar un element poate avea mai multe clase în același timp. Acestea sunt specificate prin intermediul atributului "class"

<div class=”block”>...</div>

<div class=”block”>...</div>

<div class=”block”>...</div>

Acestea sunt cele trei containere cu clasa "block". Pentru a vă referi la aceste elemente într-un fișier CSS, utilizați un punct și virgulă + numele clasei. Setați stilurile pentru blocuri:

.block

width: 400px;

height: 200px;

border: 1px solid black;

}

Selector de atribute

Vă permite să selectați elemente cu un anumit atribut:

img[alt] — выберет <img src=”...” alt=””>, но пропустит <img src=””> или <img src=”” title=”...”>

Selector de pseudo-clase

Este necesar să setați stiluri pentru elementele peste care se află cursorul. Sau cele pe care se face clic. Consultați platforma de învățare MDN pentru o listă completă de pseudo-clase.

De exemplu, a:hover va selecta eticheta <a>, dar stilurile sunt aplicate numai dacă cursorul este peste ea.

Fonturi

Există mai multe clase de fonturi:

fără serif (sans-serif);
cu serif (serif);
lățime fixă (monospace);
cursiv (cursivă);
fonturi decorative (fantezie).

Fontul este setat folosind proprietatea font-family.

font-family: “Helvetica”, sans-serif;

Browserul citește fișierul de stiluri. Acesta vede că este instalat un font Helvetica. În cazul în care browserul nu îl găsește, acesta ia primul font fără serife (sans-serif).

Încărcați fontul în format .ttf pe site, astfel încât textul să se afișeze corect. De exemplu, aveți un fișier de font numit SpecialFont.ttf. Pentru a-l conecta, creați un subfolder în dosarul site-ului numit fonturi. Puneți fișierul de font acolo, iar la începutul fișierului de stiluri - după toate @import - scrieți:

@font-face {

font-family: MySpecial; /* numele fontului */

src: url(“fonts/SpecialFont.ttf”); /*
calea către el */

Setați acest font pentru întreaga pagină deodată:

body {

font-family: MySpecial;

}

Pentru a evita căutarea fișierelor de fonturi și pentru a facilita conectarea, utilizați Google Fonts. Găsiți un font potrivit și deschideți pagina acestuia. Selectați stilurile necesare, copiați codul pentru a adăuga fontul în fereastra modală din dreapta.
Există două moduri de a adăuga un font. Primul este în interiorul unui document HTML cu tag-ul <link>. Al doilea se află în interiorul unui fișier de stiluri cu instrucțiunea @import.

Proprietăți

Proprietățile CSS sunt utilizate pentru a defini condițiile de redare și poziționare pentru elementele HTML. Consultați cartea de referință HTML5Book pentru o listă completă de proprietăți. Să ne uităm la câteva exemple populare.

Proprietăți de text

Acestea definesc textul în ceea ce privește fontul, dimensiunea, grosimea, culoarea, spațierea între linii și umbrirea. Subliniați, scrieți cu italic sau cu bold. Transformă cuvintele în minuscule sau majuscule. Indentare la începutul paragrafului, aliniere, cratimă.

Să ne uităm la proprietatea modului de scriere - această tehnologie este încă în curs de dezvoltare. Această proprietate vă permite să specificați direcția textului:

lr-tb - de la stânga la dreapta și de sus în jos;
rl-tb - de la dreapta la stânga și de sus în jos;
tb-rl - de sus în jos și de la dreapta la stânga;
bt-rl - de jos în sus și de la dreapta la stânga.

Culoare și fundal

Pentru a seta o imagine sau o culoare ca fundal, utilizați proprietatea "background" a selectorului selectat. De exemplu,

{ background: green; }

va seta culoarea la verde iar:

{ background: url(“img/image1.png”); }

setează fundalul la image1.png din folderul img.

Animație

CSS creează animații pentru elemente. De exemplu, ei pot face ca un text să își schimbe culoarea, un buton să fie mărit, o imagine să fie micșorată sau rotită.
Acest cod va face ca paragrafele să strălucească:

p {

animation-duration: 5s; /* durata animației */

animation-name: colorful; /* numele animației */

animation-iteration-count: infinite; /* o facem să se repete continuu*/

margin: auto; /* aliniere orizontală */

}
/* aici se creează reguli de animație numite colorful */

@keyframes colorful {

0% {

color: orange;

}

33% {

color: red;

}

66% {

color: blue;

}

100% {

color: orange;

}

}

Interogări media

Acestea sunt utilizate pentru a aplica stiluri pe diferite dispozitive și pentru a menține pagina web receptivă. Utilizați-le pentru a specifica orientarea peisaj sau portret, dacă dispozitivul este o imprimantă, un televizor sau un monitor, precum și lățimea minimă și maximă a ecranului. De exemplu, pentru a specifica stiluri pentru dispozitive cu o lățime a ecranului de până la 600 de pixeli, scrieți:

@media screen and(max-width: 600px) { /* selectori și CSS-instrucții */ }

Metodologii

Acestea vă permit să respectați o anumită structură de cod. Acest lucru facilitează navigarea în foile de stil și în structura HTML și crearea structurii.

Atomic CSS

Atomic CSS este o abordare a organizării codului astfel încât fiecare proprietate sau grup de proprietăți să aibă propria clasă. În acest fel, puteți reutiliza codul și puteți aplica clasele potrivite elementelor din structura HTML.

BEM

Metodologia Block, Element, Modifier a fost inventată de Yandex. Ideea este de a împărți o pagină în blocuri - părți independente care pot fi refolosite.

Cum să studiezi

Cursuri

CSS se învață la cursurile de creare a unui site web de la zero. Sau ca parte a unui curs de dezvoltare web sau front-end.

Vino la Skillbrain Online School pentru a învăța dezvoltarea frontend. Veți lucra cu CSS timp de un an întreg: veți stăpâni sintaxa JavaScript de bază, veți învăța cum să scrieți cod curat, vă veți familiariza cu instrumentele de dezvoltare. Veți realiza mai multe proiecte: un magazin online, o aplicație, un serviciu de achiziție de zboruri. Veți crea jocuri online funcționale, veți lucra cu widget-uri și veți crea un proiect în React.

"Un frontend este o oportunitate de a deveni un angajat căutat în întreaga lume în trei-patru ani. Puteți pleca sau rămâne, puteți călători și trăi ca un hipster. Până acum câțiva ani, ați cerut ca un cartof să fie cântărit înainte de a-l duce la casa de marcat."

Cărți

"The New Big Book of CSS", David Sawyer McFarland.
"CSS pentru profesioniști", Keith Grant.
"CSS - Cascading Style Sheets", Eric Meyer.
"HTML și CSS. Web Site Development and Design", John Duckett.

CSS pe scurt