Css - Lecția 3

Să încercăm în practică. Deschideți pagina HTML și CSS-pagină creată în lecția anterioară. Să ne cerem pagină de fundal albastru nostru. După cum vă amintiți, este responsabil pentru această etichetă . apoi du-te la pagina style.css și scrie următorul cod:

Deschideți HTML-pagină în browser-ul și asigurați-vă că fundalul devine albastru. Acum, hai să facem textul de pe pagina de culoare albă:

Actualizați-vă pagina HTML în browser (Ctrl + F5) și asigurați-vă că tot textul este acum alb. Acum face culoarea roșie a antetului (pentru h1) și galben (pentru h2):

refresh din nou browser-ul și asigurați-vă că totul este așa cum doriți.

Cred că principiul este deja clar: punctul de selectare, și anume elementul la care se aplică, și bretele - proprietățile și valorile lor. Proprietăți și valori vor face obiectul unor clase separate, între timp, considerăm că principiul general al elaborării unei foi de stil.

selectoare CSS

selectoare ID

În exemplul nostru, selectorii utilizate elemente de pagină: corp, H1, H2. Dar ce se întâmplă dacă există mai multe elemente identice (de exemplu, paragrafele), și dorim să facem textul paragrafelor a fost negru, iar unul dintre ei HTML pe pagina - roz. Apoi, trebuie să specificați un identificator unic pentru această secțiune și de a crea un stil pentru ea.

Identificatorul element HTML este setat de parametrul id. ca valoarea care indică un nume unic. De exemplu:

Secțiunea text cu un identificator (ID).

Numele pot fi dat orice alta decât un cuvânt rezervat (aceasta include numele tag-ul și parametrii elementelor HTML si CSS), de exemplu, nu poate da numele corpului de identificare. Sa adaugam nostru pagina HTML câteva paragrafe, iar unul dintre ele atribuit un identificator:

Aici este un text

Acest al doilea nivel de antet

Aici este un text

Identificator de trecere (id)

Dacă te uiți chiar acum la pagina noastră în browser-ul, pasajele noastre sunt ambele de culoare albă. Adăugați la foaia de stil (style.css) stiluri pentru punctele noastre:

Am identificat mai întâi pentru a face textul tuturor punctelor de negru și paragraful text cu id-ul „roz“ pentru a face roz. Selector nostru constă în acest caz elementului (p), separatorul (#) și identificatorul de nume (roz).

Este important să ne amintim că pagina nu poate fi decât un singur identificator (ID). Ie De exemplu nostru, nu puteți crea două paragrafe cu id-ul „roz“. secțiune cu ID-ul poate fi doar unul. Dar fiecare secțiune poate avea propria sa identitate, de exemplu, puteți crea un paragraf cu id = „verde“ și a stabilit stilul pentru această secțiune în foaia de stil.

clasa selectoare

In exemplul de mai sus am creat o secțiune cu text roz și a indicat că acest id poate fi doar unul. Dar ce se întâmplă dacă vrem o culoare roz a textului a fost în două sau trei secțiuni. Pentru a face acest lucru, există o clasă de parametru HTML. ca valoarea indicată de numele său.

Sa adaugam nostru pagina HTML câteva paragrafe și să alocați class = „roz“.

Aici este un text

Acest al doilea nivel de antet

Aici este un text

identificator de trecere

Pasajul cu o clasa (clasa) roz

Pentru a specifica stilul pentru această clasă în foaia de stil a scrie o regulă, în cazul în care elementul selector p și numele roz va fi folosit din nou. dar, în acest caz, numele clasei, astfel încât punctul va fi folosit ca separator (.):

Punctele cu clasa poate fi orice număr.

Să-i dăm rezultate intermediare:

în cazul în care toate aceste elemente (de exemplu, toate antetele H1) trebuie să aibă același stil, selectorul este format din numai acel element (de exemplu, p)

în cazul în care elementul (fie :. punctul, titlul) trebuie să fie diferit de toate celelalte, atunci acesta este atribuit un identificator (ID) și separatorul în foaia de stil este un semn de lire (#), de exemplu, p # roz.

Dacă pagina va fi mai multe articole cu același stil, vi se atribuie o clasă (clasa) și separatorul în foaia de stil este o perioadă de (.), De exemplu, p.pink.

ID-ul are o prioritate mai mare decât clasa. Prin urmare, în cazul în care pentru orice element va fi listat și clasa, și ID-ul (care nu contrazice principiile CSS), se aplică stilul de identitate.

Ca ID-uri și clase menționate Puteți seta orice element HTML. Dar se întâmplă de multe ori că ne dorim să evidențiem o serie de elemente diferite în același stil, de exemplu, verde. În acest caz, se poate folosi un selector unificat. În aceste selecții, numele elementului nu este specificat, indică faptul că punctul sau grila, ca semn de clasă sau de identificare și numele. De exemplu:

Astfel, ceea ce ar fi elementul nu am specificat class = „roșu“ (titlu, paragraf sau link-ul), culoarea textului, se va transforma roșu. Un element de pe pagina (orice) putem seta id = „galben“ și culoarea textului acestui articol va deveni galben.

Să avem o pagină HTML cu codul aici:

Selectoare pentru elementul

Acest text este într-un paragraf

Acesta este un text. Acest text este cursiv

Acest text este într-un paragraf, dar această parte este italice

Ne dorim cursul a fost, de asemenea, evidențiată în verde. Apoi vom scrie elementul selector de foi de stil, și anume,

Acum, pagina noastră în browser-ul arata ca acest lucru:

Dar dacă dorim să evităm tot textul cursiv evidențiat în verde, iar singurul care se află în secțiuni. Pentru a face acest lucru, vom face modificări la foaia de stil:

Așa că am arătat, pentru a aplica stilul elementelor i. care sunt în celulele p. Denumirile astfel, separate printr-un spațiu. Acestea sunt numite selectori contextuale. Acum, pagina noastră în browser-ul arata ca acest lucru:

Să presupunem că, în plus față de culori, dorim să întreb dimensiunea noastră antet. Apoi, putem adăuga doar în foaie de stilul nostru:

titlurile noastre vor fi de mărimea specificată, dar ele sunt verzi.

De fapt, există un dezacord cu privire la grupurile. Unii cred codul corect de mai sus, deoarece gruparea a ajutat pentru a evita repetarea proprietăți identice pentru cele trei elemente, se reduce codul.

Alții cred că astfel deteriorând codul logic. Deoarece găsirea unui selector pentru antet h3 nu este imediat clar de ce textul în ea verde. Susținătorii logica recomanda de grup numai elementele care blochează descrierile se potrivesc exact.

În această lecție pe selectorii de peste. În următoarea lecție familiarizat cu concepte, cum ar fi pseudo-și pseudo-clase.

În cazul în care acest site a fost util pentru tine, vă poate ajuta în dezvoltarea sa prin punerea una dintre aceste link-uri către site-ul tau.