CSS (Foi de stil în cascadă)- un limbaj pentru foi de stil care permite atașarea stilului (cum ar fi fonturile și culoarea) documentelor structurate (cum ar fi documentele HTML și aplicațiile XML). În mod obișnuit, stilurile CSS sunt folosite pentru a crea și modifica stilul elementelor paginii web și interfețe cu utilizatorul scris în HTML și XHTML, dar poate fi aplicat și oricărui tip de document XML, inclusiv XML, SVG și XUL. Separând stilul de prezentare al documentelor de conținutul documentelor, CSS facilitează crearea de pagini web și întreținerea site-urilor.
CSS menține foi de stil specifice media, astfel încât autorii să își poată adapta prezentarea documentelor browsere vizuale, aparate auditive, imprimante, dispozitive braille, dispozitive portabile etc.
Foile de stil în cascadă descriu regulile de formatare a elementelor folosind proprietăți și valorile permise pentru acele proprietăți. Pentru fiecare element, puteți utiliza un set limitat de proprietăți, restul proprietăților nu vor avea niciun efect asupra acestuia.
O declarație de stil are două părți: selectorși reclame... În HTML, numele elementelor nu țin seama de majuscule și minuscule, așa că „h1” funcționează la fel ca „H1”. O declarație constă din două părți: numele proprietății (de exemplu, culoarea) și valoarea proprietății (gri). Selectorul spune browserului ce element să formateze, iar blocul de declarație (cod între acolade) listează comenzile de formatare - proprietăți și valorile acestora.
Orez. 1. Structura declarației În timp ce exemplul de mai sus încearcă doar să afecteze câteva proprietăți necesare pentru a reda un document HTML, se califică ca o foaie de stil în sine. Atunci când este combinată cu alte foi de stil (o caracteristică fundamentală a CSS este că foile de stil sunt combinate), regula va determina prezentarea finală a documentului.
Tipuri de foi de stil în cascadă și specificul acestora
1. Tipuri de foi de stil
1.1. Foaie de stil externă
Foaie de stil externă reprezintă fisier text extensia css, care conține un set de elemente în stil CSS. Fișierul este creat într-un editor de cod, la fel ca o pagină HTML. Fișierul poate conține doar stiluri, fără markup HTML. O foaie de stil externă este conectată la o pagină web folosind eticheta situat in interiorul sectiei
... Aceste stiluri funcționează pentru toate paginile de pe site.Mai multe foi de stil pot fi atașate fiecărei pagini web prin adăugarea mai multor etichete în succesiune prin specificarea scopului acestei foi de stil în atributul media tag. rel = "stylesheet" indică tipul link-ului (style sheet link).
Atributul tip = „text / css” este opțional în standardul HTML5 și poate fi omis. Dacă atributul este absent, implicit este type = „text / css”.
1.2. Stiluri interne
Stiluri interneîncorporat în secțiune
document HTML și sunt definite în interiorul etichetei... Stilurile interne au prioritate față de stilurile externe, dar sunt inferioare stilurilor inline (specificate folosind atributul style)....
1.3. Stiluri inline
Când scriem stiluri inline, scriem codul CSS într-un fișier HTML, direct în interiorul etichetei elementului folosind atributul style:
Fii atent la acest text.
Aceste stiluri afectează doar elementul pentru care sunt specificate.
1.4. @Regulă de import
@Regulă de import permite încărcarea foilor de stil externe. Pentru ca directiva @import să funcționeze, trebuie să apară în foaia de stil (externă sau internă) înaintea tuturor celorlalte reguli:
Regula @import este folosită și pentru a include fonturi web:
@import URL (https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);
2. Tipuri de selectoare
Selectoare reprezintă structura paginii web. Sunt folosite pentru a crea reguli pentru formatarea elementelor unei pagini web. Selectorii pot fi elemente, clasele și identificatorii acestora, precum și pseudo-clase și pseudo-elemente.
2.1. Selector universal
Se potrivește cu orice element HTML. De exemplu, * (marja: 0;) va reduce zero căptușeală exterioară pentru toate elementele site-ului. De asemenea, selectorul poate fi folosit în combinație cu pseudo-clasa sau pseudo-elementul: *: după (stiluri CSS), *: bifat (stiluri CSS).
2.2. Selector de elemente
Selectoarele de elemente vă permit să formatați toate elementele de acest tip pe toate paginile site-ului. De exemplu, h1 (familie de fonturi: homar, cursiv;) va seta stilul general de formatare pentru toate titlurile h1.
2.3. Selector de clasă
Selectorii de clasă vă permit să setați stiluri pentru unul sau mai multe elemente cu același nume de clasă situat în locuri diferite pagini sau pe diferite pagini ale site-ului. De exemplu, pentru a crea un titlu cu clasa de titlu, adăugați un atribut de clasă cu titlul de valoare la eticheta de deschidere
și setați stilul pentru clasa specificată. Stilurile create cu clasa pot fi aplicate altor elemente, nu neapărat de acest tip.
.titlu (text-transform: majuscule; culoare: albastru deschis;)
Dacă un element are mai multe atribute de clasă, valorile acestora sunt concatenate cu spații.
Instrucțiuni pentru utilizarea unui computer personal
2.4. Selector de identificare
Selectorul de id vă permite să formatați unu articol specific. Valoarea id-ului trebuie să fie unică, poate apărea o singură dată pe o pagină și trebuie să conțină cel puțin un caracter. Valoarea nu trebuie să conțină spații.
Nu există alte restricții cu privire la forma pe care o poate lua un id, în special, identificatorii pot fi doar numere, să înceapă cu un număr, să înceapă cu un caracter de subliniere, să fie doar semne de punctuație etc.
ID-ul unic al unui element poate fi folosit pentru o varietate de scopuri, cum ar fi o modalitate de a face referire la anumite părți ale unui document folosind ID-uri de fragment, ca o modalitate de a viza un element în scripting și ca o modalitate de a stila un anumit element din CSS .
#sidebar (lățime: 300px; float: stânga;)
2.5. Selector de descendenți
Selectorii descendenți aplică stiluri elementelor dintr-un element container. De exemplu, ul li (text-transform: majuscule;) va selecta toate elementele li care sunt descendente ale tuturor elementelor ul.
Dacă doriți să formatați descendenții unui anumit element, trebuie să setați o clasă de stil pentru acel element:
p.mai întâi a (culoare: verde;) - stilul dat se va aplica tuturor legăturilor care sunt descendenți ai unui paragraf cu clasa întâi;
p .first a (culoare: verde;) - dacă adăugați un spațiu, atunci linkurile situate în interiorul oricărei etichete de clasă .first, care este un copil al elementului, vor fi stilate
Mai întâi a (culoare: verde;) - acest stil va fi aplicat oricărui link situat în interiorul altui element desemnat de clasa .first.
2.6. Selector de copii
Un element copil este un copil direct al elementului său care îl conține. Un element poate avea mai multe elemente copil, iar fiecare element poate avea doar un element părinte. Selectorul copil vă permite să aplicați stiluri numai dacă elementul copil urmează imediat elementul părinte și nu există alte elemente între ele, adică copilul nu mai este imbricat.
De exemplu, p> strong va selecta toate elementele puternice care sunt copii ale elementului p.
2.7. Sora selectoare
O relație de soră apare între elemente cu un părinte comun. Selectoarele de frați vă permit să selectați articole dintr-un grup de frați.
h1 + p - va selecta toate primele paragrafe imediat după orice etichetă
fără a afecta restul paragrafelor;
h1 ~ p - selectează toate paragrafele care sunt frați cu orice titlu h1 și imediat după acesta.
2.8. Selector de atribute
Selectorii de atribute selectează elemente pe baza numelui sau valorii unui atribut:
[atribut] - toate elementele care conțin atributul specificat - toate elementele pentru care este setat atributul alt;
selector [atribut] - elemente de acest tip care conțin atributul specificat, img - doar imagini pentru care este setat atributul alt;
selector [atribut = „valoare”] - elemente de acest tip care conțin atributul specificat cu o anumită valoare, img - toate imaginile ale căror nume conțin cuvântul floare;
selector [atribut ~ = „valoare”] - elemente care conțin parțial această valoare, de exemplu, dacă pentru un element sunt specificate mai multe clase separate printr-un spațiu, p - paragrafe al căror nume de clasă conține caracteristică;
selector [atribut | = „valoare”] - elemente a căror listă de valori de atribut începe cu cuvântul specificat, p - paragrafe al căror nume de clasă este caracteristică sau începe cu caracteristică;
selector [atribut ^ = „valoare”] - elemente a căror valoare de atribut începe cu valoarea specificată, a - toate legăturile care încep cu http: //;
selector [atribut $ = „valoare”] - elemente a căror valoare de atribut se termină cu valoarea specificată, img - toate imaginile în format png;
selector [atribut * = "valoare"] - elemente a căror valoare de atribut conține cuvântul specificat oriunde, a - toate linkurile al căror nume conține carte.
2.9. Pseudo selector de clasă
Pseudo-clasele sunt clase care nu sunt atașate etichetelor HTML. Acestea vă permit să aplicați reguli CSS elementelor atunci când un eveniment este declanșat sau respectând o anumită regulă. Pseudoclase caracterizează elemente cu următoarele proprietăți:
: hover - orice element peste care trece cursorul mouse-ului;
: focus - un element interactiv la care a fost navigat folosind tastatura sau activat cu mouse-ul;
: activ - un element care a fost activat de utilizator;
: valid - câmpuri de formular al căror conținut a fost verificat în browser pentru conformitatea cu tipul de date specificat;
: invalid - câmpuri de formular al căror conținut nu corespunde tipului de date specificat;
: activat - toate câmpurile de formular active;
: disabled - câmpuri de formular dezactivate, adică într-o stare inactivă;
: în interval - câmpuri de formular ale căror valori sunt în intervalul specificat;
: out-of-range - câmpuri de formular ale căror valori nu sunt incluse în intervalul specificat;
: lang () - elemente cu text în limba specificată;
: not (selector) - elemente care nu conțin selectorul specificat - clasa, identificatorul, denumirea sau tipul câmpului formular -: not ();
: target - elementul cu simbolul # la care se face referire în document;
: bifat - elemente de formular selectate (selectate de utilizator).
2.10. Selector structural de pseudoclase
Pseudoclase structurale selectează copiii conform parametrului specificat în paranteze:
: nth-child (odd) - copii impari;
: nth-child (even) - chiar copii;
: nth-child (3n) - fiecare al treilea element dintre copii;
: nth-child (3n + 2) - selectează fiecare al treilea element începând cu al doilea copil (+2);
: nth-child (n + 2) - selectează toate elementele începând cu al doilea;
: nth-child (3) - selectează al treilea copil;
: nth-last-child () - în lista de copii selectează elementul cu locația specificată, similar cu: nth-child (), dar începând de la ultimul, în sens invers;
: first-child - vă permite să stilați doar primul copil al etichetei;
: last-child - vă permite să formatați ultimul copil al etichetei;
: only-child - selectează elementul care este singurul copil;
: gol - selectează elemente care nu au copii;
: root - selectează elementul care este rădăcina documentului - elementul html.
2.11. Selector de pseudoclase de tip structural
Indică un anumit tip de etichetă copil:
: nth-of-type () - selectează elemente prin analogie cu: nth-child (), luând în considerare doar tipul elementului;
: first-of-type - selectează primul copil al tipului dat;
: last-of-type - selectează ultimul element din tipul dat;
: nth-last-of-type () - selectează un element de tipul dat în lista de elemente în funcție de locația specificată, începând de la sfârșit;
: only-of-type - Selectează singurul element de tipul specificat dintre copiii elementului părinte.
2.12. Selector de pseudo-element
Pseudo-elementele sunt folosite pentru a adăuga conținut care este generat folosind proprietatea conținut:
: prima literă - selectează prima literă a fiecărui paragraf, se aplică numai elementelor bloc;
: prima linie - selectează prima linie a textului elementului, se aplică numai elementelor bloc;
: înainte - inserează conținutul generat înaintea elementului;
: după - adaugă conținut generat după element.
3. Combinație de selectoare
Pentru o selecție mai precisă a elementelor pentru formatare, puteți utiliza combinații de selectoare:
img: nth-of-type (even) - va selecta toate imaginile pare, al căror text alternativ conține cuvântul css.
4. Gruparea selectoarelor
Același stil poate fi aplicat mai multor elemente în același timp. Pentru a face acest lucru, în partea stângă a declarației, enumerați selectorii necesari, separați prin virgule:
H1, h2, p, span (culoare: roșie; fundal: alb;)
5. Moștenire și cascadă
Moștenirea și cascada sunt două concepte fundamentale în CSS care sunt strâns legate. Moștenirea înseamnă că elementele moștenesc proprietăți de la părintele lor (elementul care le conține). Cascada se manifestă prin modul în care diferitele tipuri de foi de stil sunt aplicate unui document și modul în care regulile conflictuale se suprascriu reciproc.
5.1. Moştenire
Moştenire este mecanismul prin care anumite proprietăți sunt transmise de la un strămoș la descendenții săi. Specificația CSS prevede moștenirea proprietăților legate de conținutul de text al unei pagini, cum ar fi culoarea, fontul, spațierea literelor, înălțimea liniilor, stilul listei, alinierea textului, indentarea textului, transformarea textului, vizibilitatea, alb. -spațiu și spațiere între cuvinte. Acest lucru este convenabil în multe cazuri, deoarece nu trebuie să setați dimensiunea și familia de fonturi pentru fiecare element de pe pagina web.
Proprietățile de formatare a blocurilor nu sunt moștenite. Acestea sunt fundal, chenar, afișare, float și clar, înălțime și lățime, margine, min-max-înălțime și -lățime, contur, overflow, padding, poziție, text-decor, vertical-align și z-index.
Moștenirea forțată
Prin intermediul cuvânt cheie moștenire Puteți forța un element să moștenească orice valoare de proprietate de la elementul părinte. Acest lucru funcționează chiar și pentru proprietăți care nu sunt moștenite în mod implicit.
Cum sunt setate și cum funcționează stilurile CSS
1) Stilurile pot fi moștenite de la elementul părinte (proprietăți moștenite sau folosind valoarea de moștenire);
2) Stilurile situate în foaia de stil de mai jos suprascrie stilurile din tabelul de mai sus;
3) Un element poate fi stilat din diferite surse. Puteți verifica ce stiluri sunt aplicate în modul dezvoltator de browser. Pentru a face acest lucru, peste element, trebuie să faceți clic dreapta și să selectați „Vizualizare cod” (sau ceva similar). Coloana din dreapta va lista toate proprietățile care sunt setate pentru acest element sau moștenite de la elementul părinte, precum și fișierele de stil în care sunt specificate și numărul ordinal al liniei de cod.
Orez. 2. Modul dezvoltator în browser Google Crom 4) Când definiți un stil, puteți utiliza orice combinație de selectoare - selector de element, pseudo-clasă de element, identificator de clasă sau element.
div (chenar: 1px solid #eee;) #wrap (lățime: 500px;) .box (float: stânga;) .clear (clear: ambele;)
5.2. Cascadă
În cascadă Este un mecanism care controlează rezultatul final atunci când diferite reguli CSS sunt aplicate aceluiași element. Există trei criterii care determină ordinea în care sunt aplicate proprietățile - regula! Important, specificul și ordinea în care sunt incluse foile de stil.
Regulă! importantă
Greutatea regulii poate fi setată folosind cuvântul cheie! Important, care este adăugat imediat după valoarea proprietății, de exemplu, span (greutate font: bold! Important;). Regula trebuie pusă la sfârșitul declarației, înainte de paranteza de închidere, fără spațiu. Un astfel de anunț va avea prioritate față de toate celelalte reguli. Această regulă vă permite să suprascrieți valoarea proprietății și să setați una nouă pentru un element dintr-un grup de elemente în cazul în care nu există acces direct la fișierul cu stiluri.
Specificitate
Pentru fiecare regulă, browserul calculează specificitatea selectorului iar dacă elementul are declarații de proprietate contradictorii, se ia în considerare regula cu cea mai mare specificitate. Valoarea specificității are patru părți: 0, 0, 0, 0. Specificitatea unui selector este determinată după cum urmează:
pentru id, adăugați 0, 1, 0, 0;
Se adaugă 0, 0, 1, 0 pentru clasă;
Se adaugă 0, 0, 0, 1 pentru fiecare element și pseudo-element;
pentru stilul inline adăugat direct la un element - 1, 0, 0, 0;
selectorul universal nu are specificitate.
H1 (culoare: albastru deschis;) / * specificitate 0, 0, 0, 1 * / em (culoare: argintiu;) / * specificitate 0, 0, 0, 1 * / h1 em (culoare: auriu;) / * specificitate: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2 * / div # principal p.about (culoare: albastru;) / * specificitate: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2 * / .sidebar (culoare: gri;) / * specificitate 0, 0, 1, 0 * / #sidebar (culoare: portocaliu;) / * specificity 0, 1, 0, 0 * / li # sidebar (culoare: aqua;) / * specificity: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1 * /
Ca urmare, acele reguli vor fi aplicate elementului, a cărui specificitate este mai mare. De exemplu, dacă un articol are două specificități cu valorile 0, 0, 0, 2 și 0, 1, 0, 1, atunci a doua regulă câștigă.
Ordinea tabelelor anexate
Puteți crea mai multe foi de stil externe și le puteți conecta la o singură pagină web. Dacă tabele diferite conțin valori de proprietăți diferite pentru un element, atunci regula găsită în foaia de stil din lista de mai jos va fi aplicată elementului.
După cum vă amintiți, HTML este un limbaj de marcare, dar creatorii săi au dorit să îmbunătățească viața creatorilor de site-uri atât de mult încât i-au adăugat elemente și parametri care sunt responsabili pentru aspectul paginii: etichete
,
,
,
Dar la un moment dat, codul paginii a devenit atât de greoi și de ilizibil, încât a devenit clar că această cale nu duce „nicăieri”. Apoi s-a decis să se separe marcajul paginii (HTML) și designul său vizual (CSS). Împreună, HTML și CSS pot face minuni, așa cum veți vedea în curând.
Ce este CSS
CSS (Cascading Style Sheets) - foi de stil în cascadă.Stil- un set de parametri care specifică reprezentarea externă a obiectului. De exemplu, să presupunem că vrem toate titlurile de primul nivel (etichete
) pe o pagină ar fi roșu, dimensiunea 24 și erau cu caractere cursive, iar pe altă pagină ar fi albastru, dimensiunea 12. Titlul nostru este un obiect, iar culoarea, dimensiunea și stilul sunt opțiuni. Doar că parametrii obiectului nostru sunt diferiți pentru diferite pagini, adică. se deosebesc prin stil.
Fiecare element de pe pagină poate avea propriul stil (paragrafe, titluri, rânduri, text...). Setul de stiluri pentru toate elementele este numit foaia de stil.
Dacă sunt specificate mai multe stiluri pentru un element (ca în exemplul cu titluri), atunci în cascadă, care determină prioritatea unui anumit stil.
Beneficiile CSS
- CSS vă permite să reduceți semnificativ dimensiunea codului și să îl faceți lizibil.
- CSS vă permite să setați parametri care nu pot fi setați numai în HTML. De exemplu, eliminați sublinierea din linkuri.
- CSS facilitează schimbarea aspectului paginilor dvs. Imaginează-ți că ai creat un site web de 50 de pagini cu toate titlurile în albastru. După un timp, ai vrut să te schimbi culoarea albastra spre verde. Va trebui să parcurgeți toate cele 50 de pagini și să schimbați culoarea atributului corespunzător. Cu CSS, trebuie să faci asta o singură dată, în foaia de stil.
- Așa-numitul aspect bloc al site-ului este asociat cu CSS.
Sau, dacă sunteți familiarizat cu HTML, după ce ați adunat cunoștințele necesare din alte surse, atunci este timpul să începeți să învățați CSS.
CSS (Foi de stil în cascadă)- Foile de stil în cascadă sunt o colecție de descrieri de stil, anumite etichete HTML (denumite în continuare elemente HTML), care pot fi aplicate atât unei singure etichete - un element, cât și simultan tuturor elementelor identice de pe toate paginile site-ului. CSS este în esență o completare a HTML care își extinde foarte mult capacitățile.
Și ce dacă? Vă întrebați .. De ce am nevoie de acest CSS notoriu? M-am descurcat destul de bine cu HTML în forma sa pură!
Voi da o serie de motive în favoarea folosind CSS:
HTML în forma sa pură are un set foarte limitat de instrumente care nu permit rezolvarea anumitor idei de design și funcțional ale webmasterului. Ei bine, cel puțin, de exemplu, luați punctul dureros al tuturor artizanilor web începători "Cum să eliminați sublinierea unui link?" sau „Cum să-l faci să-și schimbe culoarea și să evidențiezi trecând cu mouse-ul peste acest link?” nu există nicio modalitate de a face asta numai cu HTML !! Și câte încă din aceste „întrebări dureroase”? - întuneric .. Aici vine în ajutor CSS, care rezolvă majoritatea problemelor legate de proiectarea site-ului.
Să presupunem că ai scris un site cu 100 de pagini în el .. un site bun, informativ, oamenii îl vizitează .. Și dintr-o dată, dintr-un anumit motiv, a trebuit să-i schimbi designul, nu știu, moda s-a schimbat, ai a gasit unul mai bun soluție de proiectare, clientului nu i-a plăcut .. dar nu știi niciodată de ce .. Cât timp și efort îți va lua să refaci complet toate cele 100 de pagini ale site-ului? CSS oferă o soluție rezonabilă la această problemă. Dar ce se întâmplă dacă o dată într-un fișier separat pentru a descrie complet întregul design al site-ului? Să spunem: toate anteturile
faceți în roșu, paragrafe
scrie cu italice, link-uri
nu subliniați :) fundalul de pe toate paginile este umplut cu verde, și așa mai departe ... și apoi faceți doar aceste 100 de pagini HTML să acceseze fișierul CSS și să tragă informațiile necesare din el? Acum, când decideți, de exemplu, să recolorați toate titlurile de la roșu la verde, nu este nevoie să deschideți toate cele 100 de pagini pentru a găsi etichete în ele
si indica in fiecare ca acum nu esti rosu, ci verde! Trebuie doar să deschideți descrierea fișierului și să schimbați culoarea elementului din acesta
pe verde si gata!! Toate titlurile de pe toate paginile site-ului vor deveni verzi ca prin farmec.
Datorită faptului că CSS permite descrieri de stil repetitive ale acelorași elemente într-un fișier, are loc o „descărcare” semnificativă a documentelor HTML, iar acest lucru economisește volum, trafic, timp, bani .. Codul HTML devine ușor, ușor de citit și editat .
Cum este? Intrigat? Dacă da, atunci recomand să treceți la învățarea directă a CSS. În capitolele acestui tutorial, veți învăța cum să încorporați foi de stil în cascadă pe paginile site-ului dvs., să vă familiarizați cu proprietățile de bază ale stilului elementelor folosind exemplul de creare a unui site folosind CSS, să vă aprofundați în complexitățile și trucurile materie. Dacă sunteți deja familiarizat cu foile de stil în cascadă și sunteți interesat doar de informații de referință, atunci vă sugerez să căutați referința CSS unde sunt colectate și descrise pe scurt proprietățile CSS și posibilele lor valori.
Buna ziua. E timpul să scriem ceva pe această temă. Din titlu reiese clar despre ce este vorba în această postare, dar aș vrea să clarific puțin.
Nu voi face un manual despre elementele de bază ale limbilor de pe blogul meu, nu voi vorbi despre ce sunt o clasă, un selector, ghilimele și punctele. S-a mestecat deja atât de mult material pe Web încât nu are sens să îl repet. Nu vreau să-mi încep blogul pe drumul de a rescrie articole de pe alte site-uri cu propriile mele cuvinte (cum fac majoritatea „bloggerilor”).
Dar voi fi bucuros să vă împărtășesc trucuri interesante, trucuri și tehnici utile în general pe care le folosesc în munca mea!
Treci la subiect
Voi lua definițiile de pe Wikipedia:
HTML(din limba engleză HyperText Markup Language - „hipertext markup language”;) - un limbaj de marcare standard pentru documente World Wide Web... Majoritatea paginilor web sunt create folosind HTML (sau XHTML). HTML este interpretat de browsere și afișat ca document într-o formă prietenoasă pentru oameni.
CSS(Engleză Cascading Style Sheets - foi de stil în cascadă) - un limbaj de descriere formal aspect un document scris folosind un limbaj de marcare. Este folosit în principal ca mijloc de descriere, decorare a aspectului paginilor web scrise folosind limbaje de marcare HTML și XHTML, dar poate fi aplicat și oricăror documente XML, cum ar fi SVG sau XUL.
Pare a fi atât de clar ce este HTML și CSS, dar tot o voi spune cu propriile mele cuvinte.
HTML este un fel de material de construcție pentru pagini web. Citind etichete speciale (comenzi, cuvinte care au o semnificație specială pentru browser), browserul construiește o pagină cu conținut de text, imagini și alte lucruri în fereastra sa.
CSS este materialul de placare care face toată frumusețea.
În linii mari, HTML este ce ar trebui sa fie pe site, iar CSS este responsabil pentru cum ar trebui sa arate... Datorită CSS-ului, vedem diverse efecte, animații și alte bunătăți pe site-uri.
Un pic din istoria mea
Ce voi scrie acum este deja pe pagină, dar o voi scrie din nou și o voi adăuga :)
Am creat primul meu site web în 2008. Funcționează pe sistemul Ucoz. Nu-mi amintesc exact cum, dar unul dintre colegii mei mi-a spus despre Ucoz și cât de ușor este să-ți creezi propriul site acolo. M-am întrebat. Nu știu de ce, dar a fost cam „mișto” să-mi fac propriul site. Atunci am aflat despre HTML. Dar am invatat, nu am invatat :) Se pare ca era clasa a IX-a a scolii. Aplicand cunostinte de baza folosind Photoshop și Ucoz, am putut încă să fac un site web.
Site rock. Pe fluxul de știri principal și un forum confortabil) Este păcat să o arăt acum, dar cred că voi avea curaj în viitor.
A doua mențiune de etichete în viața mea a fost în primul meu an în informatică. Da, au fost o mulțime de sarcini absurde pe acest subiect și ar fi mai bine să studiem AutoCAD în loc de MS Access (planificatori urbani, totuși), dar încă sunt recunoscător pentru sarcina de a face un site web din câteva pagini HTML . La început chiar nu mi-a păsat nimic de asta, dar mi-a plăcut când m-am așezat să o fac.
Am luat notele de curs și am început să scriu structura paginii prin etichete pe care le-am copiat de pe tablă, dar... mi-am dat seama că nu pot face nimic din ceea ce am venit și am început să citesc mai multe detalii despre html pe Internetul (habar nu aveam de css atunci). Drept urmare, munca mea a fost cea mai bună din grup, dar, din păcate, aproape nimeni nu a apreciat acest lucru, deoarece au dat note pentru a avea un loc de muncă, dar dacă a existat un rating pentru muncă...
Ei bine, încă eram mulțumit de mine. Sarcina în fața mea era să plasez elementele de pe pagină așa cum vreau eu, și nu așa cum a rezultat din notele de curs. Problema este că HTML nu are funcționalitatea de a plasa un element la 20 de pixeli din marginea dreaptă a ferestrei browserului. Și apoi m-am gândit... dar dacă aș pune elementul necesar într-un tabel, pe care l-am pus într-o celulă a tabelului principal, a cărui margine nu este vizibilă, dar care ocupă întreaga pagină și setând dimensiunile tabelului. celule, pot plasa acel element cu o indentație de 20px de la marginea dreaptă ??... Am încercat - a funcționat!
Am învățat doar că aceasta era o practică obișnuită înainte ca CSS să fie atunci când am început să devin serios cu privire la tehnologiile web. Nu, nu că mă laud pe mine, dar a fost mișto să muți semnificațiile și să ajung la ceea ce oamenii folosesc în munca lor.
Ce este nevoie pentru asta?
În octombrie 2011, am început să studiez serios întreaga chestiune, care s-a revărsat fără probleme în activitatea principală a vieții mele. Am vrut să fac site-uri web. Știam că am nevoie de HTML pentru asta. Apoi am dat peste referințe la CSS. Am decis să înțeleg puțin mai în detaliu ce este și... a fost foarte strâns! Acele site-uri pe care am ajuns, păreau să ofere cunoștințe de bază, dar nu a existat niciun moment care să aducă un ceainic complet de la ignoranță la punctele de bază. Și apoi am dat din greșeală videoclipuri gratuite lecții de la Evgheni Popov. În primul rând, am fost confuz de necesitatea de a-mi introduce e-mailul și numele pentru a obține un curs video gratuit. Ei bine, la naiba, mă vor spama, sau chiar îmi vor sparge e-mailurile, nu vreau! Dar tot am decis)
Dar... nimic nu a venit în cutia mea poștală (ar fi trebuit să primesc un link pentru a descărca cursuri gratuite HTML și CSS). Așa că m-am dus pe ex.ua și le-am descărcat acolo :) Gândind eroic, m-am gândit că nu am nevoie de un curs de HTML, parcă știu puțin, dar o să arunc o privire la CSS. M-am uitat la prima lecție - mi-am dat seama că mai întâi trebuie să caut și să învăț HTML.
Ce pot să vă spun, băieți... este mai bun decât toate site-urile de tutoriale adunate. Peste tot autorul scrie cât se poate de simplu, așa cum vede el, dar totuși acest lucru nu este suficient pentru un ceainic. Doar că autorul nici măcar nu-și poate imagina că „acest lucru” poate fi ignorat. Iar E. Popov nu numai că explică cum să fii mic și prost, dar și-i arată fiecare pas și de asta ai nevoie dacă vrei să înveți HTML/CSS!
Nu îmi aduce niciun beneficiu din faptul că îți ofer acest curs, dar Eugene cel mai probabil o va face. Și nu mă deranjează. Datorită lui, mi-a fost mai ușor să mă plonjez în dezvoltarea web.
Dar există un mic „Dar”. În cursul său CSS, el nu a spus un cuvânt despre CSS3 - fundamentul tuturor efectelor moderne. Dar credeți-mă, știind și înțelegând ce este CSS, va fi foarte ușor să găsiți informații despre CSS3 pe Internet. Ei bine, și diverse tehnici (cum am spus mai sus) le voi descrie pe blogul meu.
După ce am studiat acele cursuri, am creat primul meu site real (în ceea ce privește găzduirea personală etc.). Da, habar n-aveam ce PHP și MySQL, și WordPress, etc...
DAR aceasta este o cu totul alta poveste...
Există multe site-uri utile pe Internet cu lecții, dar atunci când aveți nevoie de o soluție foarte bună la întrebarea dvs., atunci cel mai bine este să vă uitați la habrahabr.ru.
La început, am folosit adesea cheat sheets: unu și doi.
Poate voi adăuga câteva link-uri utile aici, sau voi lansa a doua parte a acestui articol, așa că vă recomand să vă abonați la știri în formularul de mai jos.
Salutare dragi cititori ai site-ului blogului. Astăzi vreau să încep să vorbesc în detaliu despre CSS (materialele se vor acumula în cel adecvat).
Este timpul să treceți la el după ce învățați Html. Limbajul de marcare de stil este responsabil pentru designul extern al paginilor site-ului și fără a-l înțelege, va fi foarte dificil să corectezi, să muți sau să aliniezi ceva.
Bineînțeles, Css în comparație cu Html pare mult mai complicat, dar aici vine vorba de problema aspectului încrucișat, dar când vine vorba de remedierea unor fleacuri în designul propriului site web, nu aveți nevoie de mult. inteligență. În general, vom încerca să dezasamblam elementele de bază în detaliu și deja nuanțele utilizării lor în filigran vor rămâne pentru studiu opțional (opțional). Dar toți webmasterii trebuie să cunoască conceptele de bază.
Ce este CSS și pentru ce este?
Abrevierea CSS înseamnă foi de stil în cascadă sau, în traducere rusă, foi de stil în cascadă. Ce este și de ce a fost inventat acest limbaj la un moment dat?
Deci, pe baza a ceea ce am studiat puțin mai devreme, putem spune că marcarea unui document web se realizează folosind etichetele acestui limbaj. Acestea. cu ajutorul HTML creăm structura documentelor noastre (pagini web). De exemplu, în Html pur, putem defini și alte elemente ale structurii documentului și chiar să le dăm aspectul pe care ni-l dorim în browser.
Dar timpul a dictat nevoia de a folosi din ce în ce mai multe atribute ale designului vizual în HTML, care a împrăștiat foarte mult sursă... În acest sens, a fost propusă o altă variantă de dezvoltare, mai promițătoare - crearea unui limbaj de markup stil separat CSS. Și această opțiune a avut o serie de avantaje față de o simplă creștere a numărului de atribute de design.
De ce? Îți amintești cum poți seta o culoare pentru o bucată de text în Html pur? Așa e, cu ajutor. Ce se întâmplă dacă vrei să pictezi mai multe paragrafe în textul tău în culoarea dorită simultan?
Apoi va trebui să inserați etichete Font cu valoarea dorită culori în atributul Culoare.
Toate acestea vor aglomera teribil codul sursă, ceea ce este foarte, foarte nedorit, deoarece viteza de încărcare a site-ului va avea de suferit și va fi creată o sarcină inutilă pe echipamentul de comunicație al internetului. Dezvoltatorii nu au putut „accepta” acest lucru.
Prin urmare, au venit cu următoarea cale de ieșire din această situație. Dezvoltatorii de la W3C au decis să proiecteze toate reprezentările vizuale ale unui document web sub forma unui limbaj special de marcare a stilului, pe care l-au numit foi de stil în cascadă sau pur și simplu CSS (se citește ca c-es-es). Care este esența tehnologiei?
Și esența este următoarea - prin conectarea limbajului de marcare a stilului la orice document (pagini), vom putea seta reprezentarea vizuală a tuturor acelor elemente ( html generat etichete) care vor apărea în acest document.
Există o resursă pe Internet care vă ajută să vedeți foarte clar cum o pagină web își poate schimba aspectul doar pentru că este conectat un alt fișier de foaie de stil în cascadă. După părerea mea, acesta ar fi cel mai bun răspuns la întrebare: ce este CSS și de ce este necesar.
Puteți vedea vizualizarea de bază a documentului (pagina web) făcând clic pe acest link:
Nimic special, dar dacă dați clic pe linkul „Vedeți toate modelele” din meniul din stânga, puteți vedea zeci sau chiar sute de opțiuni de design pentru aceeași pagină web conectând un stil diferit (un alt fișier de foaie de stil).
Vă rugăm să rețineți că codul HTML original rămâne exact același, dar se modifică doar stilul CSS... Uimitor, nu-i așa?!
CSS nu este un limbaj de marcare în același sens ca, de exemplu, HTML. Acesta este un limbaj de marcare a stilului - are propria sa sintaxă, propriul conținut intern și, în multe privințe, va fi foarte diferit de ceea ce a fost deja studiat mai devreme.
De asemenea, în comparație cu Html, limbajul de stil este mult mai complex. Există o mulțime de nuanțe pe care va trebui să le cunoașteți în afară de conceptele de bază. Nu au existat nuanțe speciale în HTML - am studiat toate elementele și puteți lucra în siguranță cu codul. Mi se pare că CSS poate fi comparat cu șahul - nu este suficient să știi cum se mișcă toate piesele, trebuie și să poți juca.
Deci, ce este și în ce constă? Acest pretins limbaj poate fi împărțiți în două părți:
- Reguli care spun browserului cum ar trebui să apară un element pe ecran.
- Selectorii sunt etichete care permit browserului să înțeleagă la ce elemente ale codului HTML va trebui să aplice aceste reguli.
Acum să vedem cum este conectat stilul la codul sursă al paginii web. Există trei moduri principale folosind CSS împreună cu Html:
- Atașament - codul CSS este scris direct în eticheta elementului dorit folosind atributul Style
- Încorporare - tot codul de stil pentru un document web este scris în antetul acestuia (în interiorul etichetelor Head) folosind elementul Style
- Conectare - tot codul CSS este plasat (redat) într-un fișier extern separat, care este conectat la document folosind elementul Link din antetul acestuia
Ei bine, vedeți, am învățat deja multe despre limbajul de marcare a stilului. Acum este momentul să vorbim despre el sintaxă... În general, este destul de simplu:
O regulă din codul CSS constă din două elemente - o proprietate (în exemplul nostru este) și valoarea acesteia (în exemplul nostru este roșu și #CCCCCC). O condiție prealabilă este separând o proprietate de valoarea sa cu două puncte.
Mai departe. O regulă trebuie separată de cealaltă. punct şi virgulă... După ultima regulă, nu mai poți pune punct și virgulă, dar pentru a evita excesele, cel mai bine este să faci o regulă să o pui mereu. nu contează în codul CSS și le poți seta la discreția ta.
Utilizarea stilului pentru a conecta Css la codul HTML
Ei bine, acum să ne uităm la exemple ale tuturor acelor moduri de aplicare a regulilor de stil documentului nostru care există și care au fost descrise în termeni generali chiar mai sus.
Prima cale se numește metoda încorporarea css în html folosind atributul Stil:
Să vedem cum poți folosi această metodă pentru a seta culoarea și fundalul unui paragraf:
Ce este metoda de cuibărit
După cum puteți vedea, cu o glisare ușoară, am vopsit textul paragrafului în roșu (culoare: roșu) și, în același timp, am pus un fundal gri sub el (fundal: #cccccc). Stilul se referă la cele șase care pot fi utilizate împreună cu absolut orice etichete (sunt listate în partea de jos a capturii de ecran):
În Css, vom folosi în mod activ și universal, dar acest lucru va fi discutat în articolele următoare, dar deocamdată am luat în considerare posibilitatea de a folosi Style pentru a conecta regulile de design de stil la anumite elemente Cod HTML... Vă permite să utilizați un set de aceste reguli (în cantități nelimitate) ca valoare.
Metoda de imbricare folosind atributul Style este foarte ușor de implementat în practică, dar cu toate acestea este în aspect real folosit foarte rar... Dar, pe de altă parte, cu ajutorul acestuia puteți încerca foarte simplu și experimentați ceva și abia apoi transferați toate aceste reguli în dosar separat cu foi de stil CSS.
Următorul mod de a conecta limbajul de marcare a stilului se numește metoda încorporarea CSS în html... Această metodă este fundamental diferită de metoda de cuibărit discutată anterior.
În loc să includem în fiecare etichetă de pe pagină atributul Style care conține regulile limbajului de stil, acum vom scrie toate regulile CSS de care avem nevoie pentru acest document web într-un singur Etichetă de stil, care la rândul său va fi plasat în capul acestui document (între elementele Head).
Vă amintiți ce este Head și unde este scris în structura unui document web? Dacă nu vă amintiți, uitați-vă la această diagramă bloc:
Acestea. în cod ar putea arăta astfel:
... ...
Nu e destul de clar? Ei bine, deocamdată voi încerca să ilustrez asta:
Pentru ca browserul să nu accepte regulile de stil pentru limbajul de marcare hipertext, atributul necesar va trebui să fie scris în elementul Stil Tastați cu valoarea „text / css”(antetul conținutului media pentru foile de stil în cascadă). Acea. codul din interiorul acestui element va fi interpretat de browser ca CSS.
Ne uităm mai departe la exemplul dat chiar mai sus. După cum puteți vedea, stilul guvernează închis în bretele , iar în fața lor se află așa-numitul selector sub forma literei latine „P”. De ce este nevoie de acest selector?
În caz contrar, putem spune browserului că aceste reguli CSS vor trebui aplicate numai etichetelor de paragraf (selectorul P) ale acestui document web și la nimic altceva.
Aici am atins din nou problema sintaxei. Când utilizați metodele de încorporare și imbricare, toate regulile CSL trebuie să fie cuprinse între acolade și trebuie să fie precedate de asigurați-vă că stați în picioare sau mai multe selectoare:
Selector CSS (proprietate: valoare; proprietate: valoare)
Când am folosit metoda de cuibărit, nu am folosit selectorul și bretele, deoarece era deja clar pentru browser că aceste reguli CSS trebuie aplicate exact etichetei, în interiorul căreia este scris atributul Style.
La utilizarea metodei de încorporare sau de cuibărire, situația de a stabili cui se adresează aceste reguli de stil a devenit mai complicată și a devenit necesară utilizarea bretelelor și selectoarelor. Acea. îi spunem browserului că acest set de reguli CSS (închis între acolade) îl aplicați cu amabilitate tuturor paragrafelor, iar acest set este pentru altceva.
În cel mai simplu caz, ca selector, poți folosi numele etichetei, căruia trebuie aplicate regulile limbajului CSS, încadrat în acolade care se deschid imediat după numele selectorului. În exemplul nostru, numele etichetei de paragraf „P” este folosit ca selector. Despre selectoarele din limbajul de markup stil vom vorbi mai detaliat în următorul articol (vezi linkul de mai sus).
Să rezumam metoda de încorporare a codului CSS într-un document HTML - toate regulile de stil necesare pentru acest document vor fi descrise într-o singură etichetă de stil și nu în multe elemente diferite, așa cum ar fi dacă folosiți metoda de încorporare descrisă mai sus. .
Eliminarea foilor de stil CSS într-un fișier separat folosind Link
Ultimul mod de a integra codul de stil într-un document web este numit metoda de legare... Cel mai simplu mod de a ilustra această metodă este:
Principala sa diferență față de metodele discutate mai sus (imbricare și încorporare) este că atunci când utilizați metoda de legare, toate regulile limbajului CSS sunt plasate într-un fișier extern separat... Va fi din nou textual (ca orice document HTML) și, de obicei, va avea extensii .css atribuite, astfel încât să-l deschidă pe computerul local sub Control Windows ar putea fi numit program special ().
Când utilizați un fișier CSS extern, special Etichetă de link, care este scris din nou între elementele Head de deschidere și de închidere din antetul paginii web. Linkul nu este vizibil în browser.
În acest caz, browserul va găsi fișierul de foaie de stil specificat (înainte de a fi specificat în atributul Href al etichetei Link), îl va încărca și va aplica regulile CSS specificate pentru designul extern al documentului HTML curent.
În general, legătura este foarte asemănătoare cu utilizarea etichetei Style descrisă puțin mai devreme, dar vă permite să accelerați semnificativ încărcarea paginilor site-ului și să reduceți încărcarea echipamentului de comunicație al Internetului.
Când utilizați elementul Style (metoda de încorporare), browserul va trebui să se încarce de fiecare dată împreună cu codul HTML al documentului și cu regulile și selectoarele CSS conectate în acesta, iar dacă este utilizat un fișier extern de foaie de stil, browserul are nevoie doar de pentru a încărca Style.css o dată și abia apoi să-l ia din propriul cache (o zonă de pe hard disk-ul computerului utilizatorului) atunci când proiectați alte pagini ale site-ului dvs.
Atributul tip = „text / css” al etichetei Link înseamnă că acest conținut media nu va fi altceva decât un limbaj de marcare de stil. Dar și atunci când se conectează un fișier CSS și un document Html este folosit un atribut Rel cu o valoare Stylesheet... Ideea este că Link (un hyperlink de serviciu) poate fi folosit în scopuri complet diferite.
Dacă te uiți la codul sursă pentru această pagină într-un browser, vei vedea că zona Head are o mulțime de etichete Link diferite:
Și scopul fiecăruia dintre aceste hyperlinkuri de servicii este determinat de valoare atributul Rel... De exemplu, rel = „pictogramă de comandă rapidă” este folosită pentru a specifica calea către un fișier, iar rel = „alternativ” poate fi folosit pentru a specifica o versiune alternativă a unei pagini (este un exemplu de reprezentare alternativă a unui document HTML).
Ei bine, în cazul utilizării atributului rel = „stylesheet” în Link, setăm browserul calea către fișierul foaie de stil(în atributul Href, această cale poate fi specificată în formă absolută sau relativă). Acestea. folosind atributul Rel, îi spunem browserului cum va arăta fișierul, calea către care este specificată în Href (foaia de stil - cu CSS).
Pe site-uri metoda bind este folosită aproape întotdeauna CSS și Html (fișier de foaie de stil extern). Atributele și etichetele de stil sunt de obicei folosite doar pentru testare, deși pot exista astfel de sarcini specifice atunci când utilizarea lor va fi justificată (de exemplu, la proiectare). Dar în munca reală pe site-uri, fișierele externe sunt folosite, adică. metoda de legare.
Pentru aceasta îmi voi permite să-mi iau concediu și vă promit că continuarea va urma în viitorul foarte apropiat. Încă o dată, repet că învățarea CSS este de obicei mult mai dificilă decât învățarea CTML, așa că voi încerca să fiu cât mai detaliat și vizual posibil.
Multă baftă! Ne vedem curând pe paginile site-ului blogului
S-ar putea să fiți interesat
Stilul listei (tip, imagine, pozitie) - reguli Css pentru personalizarea aspectului listelor in cod HTML 
Afișare (blocare, niciunul, inline) în CSS - setați tipul de afișare Elemente HTML pe pagina web 
Pentru ce este CSS, cum să conectați foile de stil în cascadă document HTMLși elementele de bază ale sintaxei acestui limbaj 
Fundal în CSS (culoare, poziție, imagine, repetare, atașament) - totul pentru a seta fundalul sau culoarea de fundal imagini html elemente 
Priorități și îmbunătățire CSS cu stiluri importante, combinare și grupare de selectoare, personalizate și de autor 
Înălțime, lățime și depășire - reguli CSS pentru descrierea unei zone de conținut într-un aspect de bloc 
Unități de dimensiune (Pixeli, Em și Ex) și Moștenirea regulilor CSS Stil diferit pentru link-urile interne și externe prin CSS 
Selectoare pentru pseudo-clase și pseudo-elemente în CSS (hover, first-child, first-line și altele), relația dintre etichete html cod 
Float și clar în CSS - instrumente de aspect bloc
