Site-urile web ar părea plictisitoare fără CSS, deoarece acest limbaj de stil este responsabil pentru stilul textului, dimensiunea, culoarea și poziționarea pe o pagină web.
Cuprins
Ce este CSS?
Cascading Style Sheets, abreviat ca CSS, este un limbaj care descrie modul în care elementele HTML ar trebui să fie afișate pe un ecran sau hârtie. CSS a fost creat de World Wide Web Consortium (W3C) în 1996.
Elementele HTML nu au fost concepute pentru a avea etichete care ar putea ajuta la formatarea unei pagini web, iar dezvoltatorilor li sa cerut doar să scrie un marcaj pentru pagină. Introducerea etichetelor precum când a fost lansat HTML 3.2 a introdus noi probleme pentru dezvoltatori.
Deoarece paginile web au fundal colorat, fonturi diferite și stiluri multiple, rescrierea codului a devenit costisitoare și dureroasă. Școlile W3C au introdus CSS pentru a rezolva aceste provocări și a continuat să evolueze de-a lungul anilor.
De ce CSS?
#1. CSS este eficient
CSS ne scutește de durerea de a adăuga etichete cum ar fi fontul, alinierea elementelor, chenarul, culoarea, stilul de fundal și dimensiunea pe fiecare pagină web.
#2. Economisi timp
Puteți schimba cu ușurință aspectul întregului site prin modificarea fișierului CSS extern.
#3. Compatibilitate cu mai multe dispozitive
Utilizatorii web moderni accesează site-uri pe gadgeturi cu diferite dimensiuni ale ecranului, cum ar fi computere, tablete și smartphone-uri. CSS facilitează crearea de pagini web care răspund la dimensiunile ecranului.
#4. Aplicații ușor de întreținut
Aplicațiile web moderne evoluează mereu. CSS facilitează schimbarea componentelor individuale sau chiar a întregului site web, fără a modifica baza de cod.
Cum este folosit CSS cu HTML pentru a crea site-uri web?
HTML este un limbaj de marcare standard utilizat pentru crearea paginilor web. Pe de altă parte, CSS descrie modul în care sunt afișate paginile web (create folosind HTML). O pagină web creată folosind HTML și CSS va avea, în mod ideal, un fișier HTML cu text, linkuri de imagine și etichete HTML.
Acest fișier HTML poate avea fie un fișier CSS separat legat la el folosind o etichetă de link, fie poate folosi stiluri CSS interne sau inline. Un fișier HTML poate avea un titlu precum
și un paragraf notat cu
. Puteți folosi CSS pentru a instrui browserul să afișeze tot conținutul din paragraf cu caractere aldine sau chiar să facă conținutul antetului de 50 de pixeli și de culoare verde.
Vom demonstra cum funcționează HTML și CSS în secțiunea următoare.
Tipuri de CSS
#1. CSS extern
Pentru ca CSS să fie clasificat ca extern, ar trebui să existe un fișier HTML și un fișier CSS separat cu extensia .css. De exemplu, style.css. Fișierul CSS este legat de fișierul/documentul HTML folosind o etichetă de legătură.
Exemplu de fișier CSS extern:
.main {
text-align:center;
}
.GF {
color:red;
font-size:50px;
font-weight:bold;
}
#TP {
color:blueviolet
font-style:bold;
font-size:20px;
}
Fișierul CSS poate fi legat cu următorul document HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://wilku.top/12-best-online-courses-and-books-to-master-css/style.css"/> </head> <body> <div class = "main"> <div class ="GF">Geek Flare!!!! </div> <div id ="TP"> Your favourite tech portal </div> </div> </body> </html>
Eticheta link leagă foaia de stil externă cu documentul HTML, în timp ce atributul href specifică locația foii de stil externe.
Pagina web finală va apărea după cum urmează:
CSS extern este abordarea cea mai recomandată, deoarece facilitează crearea de componente reutilizabile și efectuarea de modificări universale la baza de cod.
#2. CSS intern
CSS intern este ideal atunci când aveți un singur document HTML pe care doriți să îl stilați în mod unic. Setul de reguli de stil este scris pe documentul HTML în secțiunea head.
Acesta este un exemplu de CSS intern:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
.main {
text-align:center;
}
.GF {
color:Red;
font-size:70px;
}
.custom {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="GF">Internal CSS Demonstration</div>
<div class ="custom">
The Results
</div>
</div>
</body>
</html>
Pagina web redată va apărea după cum urmează:
CSS intern nu este ideal în majoritatea cazurilor, deoarece face codul dintr-un document HTML atât de mare, afectând viteza de încărcare.
#3. CSS inline
CSS inline conține stilul CSS în interiorul corpului. De exemplu, puteți stila un paragraf, un titlu sau chiar un div folosind CSS inline.
<!DOCTYPE html> <html> <head> <title>Inline CSS</title> </head> <body> <p style = "color:red; font-size:50px; font-style:bold; text-align:center;"> Inline CSS Demonstration </p> </body> </html>
Documentul redat va apărea după cum urmează:
CSS inline nu este ideal dacă doriți să scalați aplicația dvs. web, deoarece adăugarea unei proprietăți CSS la fiecare etichetă HTML necesită timp.
Explorați unele dintre cele mai bune cursuri și cărți online pentru a stăpâni CSS.
Creați site-uri web responsive cu HTML și CSS
Acest curs de creare de site-uri web receptive din lumea reală învață cum să construiți site-uri web receptive folosind HTML5 și CSS3. Nu aveți nevoie de cunoștințe anterioare în dezvoltarea web pentru a învăța acest curs care explorează concepte precum modelul cutiei, rezolvarea conflictelor de selecție, schemele de poziționare și moștenirea.
Este, de asemenea, cursul ideal dacă doriți să învățați cum să faceți brainstorming, să planificați, să schițați, să codificați, să testați și să optimizați un site web profesional.
CSS și Sass avansat
Cursul avansat de CSS și Sass vă prezintă cum funcționează CSS în culise, explorând subiecte precum cascada, specificitatea și moștenirea.
Cursul are multe tehnici CSS moderne pentru a crea pagini web puternice, receptive. Cursul prezintă Saas și cum să îl utilizați în proiecte în timp ce proiectați CSS, variabilele globale și gestionați interogări media.
Este, de asemenea, cursul ideal dacă doriți să învățați animația CSS, deoarece atinge @keyframes, animație și tranziție.
Învață CSS
Learn CSS by Codecademy vă învață cum să utilizați CSS pentru a transforma HTML în site-uri web atrăgătoare din punct de vedere vizual. Cursul este împărțit în 8 lecții și are 6 proiecte pentru a vă testa înțelegerea.
Principalele lucruri pe care le veți învăța din acest curs sunt cum să adăugați stil la elementele HTML, să conectați fișiere HTML și CSS și să creați machete unice pentru paginile web.
Construiește-ți prima pagină web cu HTML și CSS
Cursul de creare a primei pagini web vă învață cum să utilizați HTML5 și CSS3 pentru a crea site-uri web receptive. Acest curs gratuit este prezentat în 4 module și necesită aproximativ 10 ore pentru a fi finalizat. Nu aveți nevoie de cunoștințe anterioare de programare pentru a învăța acest curs.
Bazele CSS
CSS Basics este creat de W3Cx. Unele dintre lucrurile pe care le veți învăța în acest curs sunt: cele mai bune practici în design web, selectoare CSS fundamentale și cum să selectați proprietățile CSS. Cursul este împărțit în 5 module; ai nevoie de aproximativ 5 săptămâni pentru a-l finaliza când studiezi 5-7 ore pe săptămână.
Introducere în CSS3
Acest curs despre CSS3 prezintă foile de stil în cascadă. Cursul este pregătit de Universitatea din Michigan și învață cum să scrieți reguli CSS, să stabiliți obiceiuri bune de programare și să testați codul. Aveți nevoie de aproximativ 12 ore pentru a finaliza acest curs, care vine cu un certificat care poate fi partajat la finalizare.
Introducere în HTML și CSS
Acest curs introductiv despre HTML și CSS învață cum să creați site-uri web stilate și bine structurate folosind HTML și CSS. Cursul îi învață pe cursanți cum să creeze site-uri web folosind o structură arborescentă și apoi să le stilizeze folosind CSS.
Acest curs gratuit este potrivit pentru începători și folosește un model de învățare în ritm propriu. Aveți nevoie de aproximativ 3 săptămâni pentru a finaliza acest curs pe care îl predau experții din industrie.
Tutorial CSS
Tutorial CSS este un curs gratuit pe W3schools. Cursul este împărțit în capitole pentru o înțelegere ușoară. Fiecare capitol oferă exemple și exerciții. Platforma are un online unde puteți experimenta diferite concepte prin intermediul butonului „Încercați-l singur”.
CSS: Ghidul definitiv
Cartea CSS: Ghidul definitiv este utilă dacă doriți să învățați elementele de bază ale CSS, de la Selectori și specificitate până la cascadă. Cartea, de asemenea, flexbox, poziționare și trucuri de float în detaliu.
Este, de asemenea, cartea de comandat dacă doriți să învățați cum să utilizați CSS pentru a produce transformări 2D și 3D, tranziții și animații. Ghidul definitiv este disponibil atât în versiunea Kindle, cât și în versiunea broșată.
Web Design responsive cu HTML5 și CSS
Această carte despre Responsive Web Design cu HTML5 și CSS învață cum să creați site-uri web adaptabile pentru viitor folosind HTML5 și CSS.
După ce ați învățat trucurile din această carte, site-urile web pe care le creați vor rula impecabil pe desktop-uri, tablete și telefoane mobile. Cartea este scrisă într-un format ușor de urmărit și este disponibilă în format broșat și Kindle.
HTML și CSS: Proiectați și construiți site-uri web
Această carte despre HTML și CSS este ideală pentru toți, fie că sunteți pasionat, student sau profesionist.
Scriitorul oferă conținutul acestei cărți prin grafică informativă și fotografie de stil de viață pentru a facilita înțelegerea diferitelor concepte. Resursa este prezentată într-o structură unică, ceea ce face ușoară navigarea prin toate capitolele.
CSS modern
Această carte despre CSS modern: Stăpânește conceptele cheie ale CSS pentru dezvoltarea web modernă învață CSS prin exemple de cod, diagrame și capturi de ecran.
Cartea prezintă culori, selectoare, modele de cutie, combinatoare și specificitate în primele sale capitole. Cartea introduce apoi textul de stil, poziționarea, gradienții, marginile, indexul Z și contextele de stivuire. Învățați și subiecte avansate, cum ar fi tranziții, animații, transformări, casete flexibile și grile CSS.
Cuvinte finale
Rolul CSS în site-urile web moderne nu poate fi subliniat suficient. Pe lângă faptul că face paginile web atractive din punct de vedere vizual, CSS facilitează navigarea în diverse pagini web.
Învățarea CSS poate fi ușoară dacă utilizați resursele enumerate mai sus. Unele dintre aceste cursuri sunt gratuite, în timp ce altele sunt plătite.
Apoi, puteți consulta foile de cheat CSS pentru dezvoltatori și designeri.