Cum se configurează smartphone-uri și PC-uri. Portal informativ
  • Acasă
  • Windows 10
  • Crearea stilului css. Stiluri CSS de bază gata de utilizare

Crearea stilului css. Stiluri CSS de bază gata de utilizare

29.06.2020 Windows 10

Știm deja că, pentru ca site-ul web să arate frumos și elegant, trebuie să lucrăm cu un fișier CSS. Și pentru ca stilurile noastre să fie aplicate, trebuie să conectați fișierul HTML și fișierul CSS.

Există mai multe opțiuni pentru efectuarea acestei operații: utilizarea foilor de stil imbricate, foilor de stil externe și stilul inline.

Astăzi vom vorbi despre această din urmă metodă.

Stilul etichetei HTML

Esența acestei metode este că încorporăm designul necesar în interiorul etichetei. Pentru aceasta, un separat atribut – stil... Acest atribut poate fi aplicat la orice etichetă, dar numai în corpul site-ului, adică în interiorul corpului... Valoarea acestui atribut sunt instrucțiunile de stil care trebuie aplicate elementului specificat.

De exemplu, să setăm diferite dimensiuni de font pentru două paragrafe diferite de text:

< p style= "font-size:25px;" >Dați acestei porțiuni de text o înălțime a literei de 25 de pixeli. < p style= "dimensiune font: 15px; culoare: # 2400ff;"> Și acest text va fi cu litere, înălțimea de 15 pixeli și, de asemenea, nuanța în albastru pentru a demonstra aplicarea mai multor stiluri în același timp.

Defecte

Exemplul demonstrează perfect modul în care acest tip de stil blochează codul paginii.

De asemenea, puteți observa câteva dezavantaje ale utilizării acestei tehnici de styling. Prima dintre ele poate fi numită răspândirea stilului în întregul document, ceea ce, din perspectiva editării, va complica uneori procesul.

De asemenea, va fi dificil să formatați volume mari de text. Cred că nimeni nu este mulțumit de perspectiva de a prescrie o dimensiune a fontului pentru fiecare paragraf, mai ales dacă există 40 de astfel de paragrafe.

Chiar și atunci când utilizați stiluri inline, devine imposibil să folosiți pseudo-clase, ceea ce leagă în mare măsură mâinile unui designer web.

De asemenea, merită remarcată confuzia care va apărea cu siguranță în utilizarea atributului stil. Această confuzie va apărea din utilizarea diferitelor ghilimele la stiluri de scriere.

Pentru claritate, să aruncăm o privire la exemplul de mai jos:

< div style= "familie de fonturi:" Roboto Condensed ", sans-serif"> Intrarea este corectă. < div style= "familie de fonturi:" Roboto Condensed ", sans-serif"> Și asta este corect. < div style= "font-family: " Roboto Condensed ", sans-serif" >Aceasta nu este o intrare validă. < div style= "font-family: " Roboto Condensed ", sans-serif" >Și nici asta nu este adevărat

Privind calculele prezentate mai sus, concluzia logică sugerează că utilizarea stilurilor inline este asociată cu o serie de complicații și inconveniente semnificative.

Când să folosiți stilul inline

În ciuda tuturor defectelor, stilul inline nu a fost inventat degeaba. Webmasterii se referă adesea la ele pentru stilul programatic. De exemplu, să ne uităm la acest cod.

< div id= "productRate" > < div style= "width: 40%" >

Scrierea lățimii necesare pentru acest bloc va fi cea mai simplă operație.

O situație similară poate apărea atunci când este necesară înlocuirea imaginii de fundal (de exemplu) a unui utilizator sub rolul de administrator. În acest caz, eticheta img poate să nu funcționeze. Prin urmare, merită să ne referim la atributul stil:

< div style= "background:url(fon.jpg)" >

De asemenea, programatorii apelează adesea la stiluri inline atunci când proiectează ferestre pop-up. Adesea, acest proces decurge după cum urmează: blocului, asupra căruia se lucrează, i se atribuie afișare: bloc, iar restul ferestrelor sunt ascunse de afișare: niciunul, astfel încât să nu interfereze vizual cu munca programatorului . Iată un exemplu:

< div class = "element" style= "display:block" >Fereastra pop-up care este redată în prezent

Rezultat

Utilizarea stilurilor inline este asociată cu o serie de dificultăți și inconveniente, totuși, în procesul de stilare a unor elemente, webmasterii apelează adesea la această metodă pentru a-și optimiza munca.

Fiecare etichetă poate avea proprietăți individuale, culoare, fundal, chenar și alte proprietăți. Formatul vizual se numește css (Cascading Style Sheets), ceea ce înseamnă „cascading style sheets”.

În acest articol, vom lua în considerare 3 modalități de a conecta stilurile CSS la codul html al unei pagini de site pentru a schimba aspectul.

Metoda 1. Includeți un fișier css separat în codul html al paginii

Acest fișier conține proprietăți pentru etichete. Acesta este cel mai convenabil și practic mod de a seta stiluri css pentru html, mai ales dacă site-ul are mai mult de 1 pagină. Schimbând doar un fișier, puteți modifica designul tuturor paginilor pe care este conectat. Încercați să scrieți proprietățile într-un fișier separat.

Cum să setați fișierul de stiluri CSS la html

Puteți seta stiluri css la codul html al paginii site-ului dintr-un fișier folosind eticheta care ar trebui plasat între etichete și... Extensie de fișier comună: .css .

Exemplu de conectare a unui fișier (pagina code.html)








Conținut text




Exemplu de cod al fișierului de stiluri în sine (page code.css)

P (culoare: verde;)

În exemplul de mai sus, fișierul se numește my_style.css și se află în folderul /my_css.

Acest fișier conține o proprietate pentru etichetă

Codul p (culoare: verde;) înseamnă: faceți culoarea textului în interiorul etichetei

Verde. În acest exemplu, este conectat un singur fișier, dar dacă este necesar, puteți conecta un număr nelimitat dintre ele.

Metoda 2. Scrieți la începutul paginii în sine

Această metodă este aproape identică cu conectarea unui fișier, dar are un dezavantaj semnificativ - dacă aveți mai multe pagini, atunci pentru a le schimba designul vizual, trebuie să le schimbați pe fiecare. Este logic să utilizați această metodă numai dacă:

Aveți un site web de o pagină;

Acest design vizual este destinat numai paginii curente. De exemplu, pentru designul vizual al elementelor care nu sunt pe alte pagini.

În alte cazuri, este mai bine să adăugați stiluri CSS la pagină folosind un fișier separat, conform metodei descrise mai sus. Dar chiar și o apariție individuală este în multe cazuri mai convenabil să fie setată într-un fișier separat, astfel încât această metodă poate să nu fie folosită deloc.

Cum să adăugați stiluri CSS la codul html al paginii unui site web

Puteți adăuga stiluri ccs la pagina html a site-ului în același mod ca în fișier, și anume între și... Numai etichetele sunt scrise în locul unui link către fișier, în interiorul căruia sunt scrise stilurile în sine.

Exemplu de adăugare mai întâi a proprietăților etichetei (page code.html)








Conținut text





Metoda 3. Scrieți stilul în atributul stil pentru fiecare etichetă separat

Această metodă este utilizată pe scară largă atunci când în interiorul unei pagini există elemente care nu diferă foarte mult unele de altele, de exemplu, doar prin culoare (indentație, dimensiune etc.). În acest caz, este mai rapid și mai convenabil să includeți un stil CSS general în html folosind un fișier separat și să adăugați mici modificări pentru anumite elemente. Atributul stil are cea mai mare prioritate, astfel încât eticheta va primi toate proprietățile specificate în stil, chiar dacă anterior au fost specificate într-un mod diferit.

De fapt, logica este următoarea: scriem stilurile generale și cele mai frecvent utilizate în fișier (1 way), iar ajustările detaliate în elementele în sine. De exemplu, dacă aveți 5 titluri pe pagină care diferă ca culoare, atunci este mai bine să scrieți în fișier proprietăți generale care determină dimensiunile și indentările acestor titluri, precum și culoarea elementelor în sine, conform acestei metode. la etichetă

Metoda 3 are cea mai mare prioritate, deci eticheta va primi proprietățile specificate în atributul style = "", chiar dacă acestea au fost specificate anterior folosind o altă metodă.

Foile de stil în cascadă sunt un standard de stil anunțat de W3C. Termen în cascadă indică posibilitatea îmbinării diferitelor tipuri de stiluri și moștenirea stilurilor prin etichete interne de la cele externe.

CSS este un limbaj care conține un set de proprietăți pentru definirea aspectului unui document. Specificația CSS definește proprietăți și un limbaj descriptiv pentru asocierea elementelor HTML.

CSS este o abstractizare în care aspectul unui document Web este definit separat de conținutul său.


Unele stiluri nu sunt acceptate de toate browserele. Cu toate acestea, puteți atribui orice stil, deoarece stilurile neacceptate vor fi pur și simplu ignorate.


Este posibil să aveți nevoie și de:


Există trei tipuri de stiluri care se disting prin metodele de adăugare a stilurilor la un document.

Stiluri interne

Stilurile interioare sunt definite de atribut stil etichete specifice. Stilul interior afectează doar elementele definite de astfel de etichete. Această metodă diferă puțin de HTML tradițional.

Exemplu

Un paragraf cu text în albastru

REZULTAT:

Un paragraf cu text în albastru

Paragraf cu text roșu

Nu ar trebui să utilizați prea des stiluri interne, deoarece acestea pot deveni supraîncărcate de cod și aspectul său este dificil de schimbat.

Stiluri globale

Stilurile CSS globale sunt situate într-un container , situat la rândul său în container ... .


Atribut tip = "text / css", obligatoriu anterior pentru etichetă .........

Text gri în toate paragrafele unei pagini Web

REZULTAT:

Text gri în toate paragrafele unei pagini Web

Text gri în toate paragrafele unei pagini Web

Stiluri externe (legate).

Stilurile externe (legate) sunt definite într-un fișier separat cu extensia css... Stilurile externe permit tuturor paginilor de pe site-ul dvs. să arate coerente.

Pentru a conecta la fișierul în care sunt descrise stilurile, se folosește eticheta situat în container ... .

Această etichetă trebuie să aibă două atribute: rel = "foaia de stil"și href specificând adresa foii de stil.

Exemplu
......... ......... .........

Stiluri de legătură

Regula pentru conectarea stilurilor globale și externe constă în selectorși declarații de stil.

Selectorul din partea stângă a regulii identifică elementul(ele) pentru care este setată regula. În continuare, declarațiile de stil sunt enumerate în acolade, separate prin punct și virgulă. De exemplu:

P (indentarea textului: 30px; dimensiunea fontului: 14px; culoare: # 666;)

O declarație de stil este o pereche Proprietate CSS: valoare CSS.

De exemplu: culoarea rosie

Când conectați stilul intern, regula CSS care este valoarea atributului stil, constă din declarații de stil separate prin punct și virgulă. De exemplu:

selectoare CSS

SelectorDescriereMai multe detalii
* Orice element
EElement identificat prin eticheta E
E # myidElement E cu identificatorul „myid”
E.myclassElementul E al clasei „myclass”
ESelector de existență a atributelor
ESelector de egalitate de atribute
ESelector de atribute cu o listă de valoriSelectori de atribute
ESelector de prefix de atribut
ESelector de sufix de atribut
ESelector de subșir de atribut
E: linkElementul E este un link care nu a fost încă vizitat de utilizatorPseudoclase dinamice
E: vizitatElementul E este un link deja vizitat de utilizatorPseudoclase dinamice
E: planeazăElementul E când treceți cu mouse-ul peste elPseudoclase dinamice
E: activElement activat de utilizator EPseudoclase dinamice
E: concentrareElementul E focalizatPseudoclase dinamice
E: țintăElementul E care este ținta legăturiiPseudo-clasă țintă
E: langElementul E scris în limba specificatăPseudoclasa de limbaj
E: activatElementul E este un element de formular accesibilPseudoclase de stat
E: dezactivatElement E - Element de formular inaccesibilPseudoclase de stat
E: verificatElement E - Casetă de selectare sau buton radio activatPseudoclase de stat
E: nedeterminatElement E - casetă de selectare sau buton radio nedefinitPseudoclase de stat
E: rădăcinăElementul E, rădăcina documentuluiPseudoclase structurale
E: al-lea copil (n)Elementul E, al n-lea copil al părinteluiPseudoclase structurale
E: al-al-lea-ultimul-copil (n)Elementul E, al n-lea copil al părintelui, numărând de la sfârșitPseudoclase structurale
E: nth-of-type (n)al n-lea element de tip EPseudoclase structurale
E: al-al-lea-ultimul-de-tip (n)al n-lea element de tip E, numărând de la capătPseudoclase structurale
E: primul copilElementul E, primul copil al părinteluiPseudoclase structurale
E: ultimul copilElementul E, ultimul copil al părinteluiPseudoclase structurale
E: primul de tipPrimul element de tip EPseudoclase structurale
E: ultimul de tipUltimul element de tip EPseudoclase structurale
E: singurul copilUnicul copil al părinteluiPseudoclase structurale
E: numai de tipElement unic părinte de tip EPseudoclase structurale
E: golElementul E fără copiiPseudoclase structurale
E: nu (X)Elementul E care nu se potrivește cu selectorul simplu XPseudoclasă de negație
E :: prima liniePrima linie a elementului EPseudo-elemente
E :: prima literăPrima literă a elementului EPseudo-elemente
E :: înainteConținut înainte de elementul EPseudo-elemente
E :: dupaConținut după elementul EPseudo-elemente
E :: selecțieSelecția în elementul EPseudo-elemente
E FElementul F care se află în interiorul elementului E
E> FUn element F care se află direct în interiorul unui element E
E + FElementul F care urmează imediat elementului E
E ~ FElementul F care urmează elementului E

Selector universal

Selectorul universal se potrivește cu orice element din documentul html.

Simbolul asterisc (*) este folosit pentru a indica un selector universal.

Este folosit atunci când trebuie să setați același stil pentru toate elementele unei pagini Web. De exemplu:

* (marja: 0; umplutură: 0;)

În unele cazuri, asteriscul (*) poate fi omis:
* .clasa meași .clasa mea echivalente,
* # ID-ul meuși #ID-ul meu sunt echivalente

Selectoare de etichete

Selectorul poate fi orice etichetă html pentru care sunt definite reguli de stil. De exemplu:

H1 (culoare: roșu; text-align: center;)

Dacă mai multe elemente au un stil comun, atunci selectorii corespunzători pot fi listați în foaia de stil, despărțiți prin virgule. De exemplu:

H1, h2, h3, h4 (culoare: roșu; text-align: center;)

selectoare ID

HTML oferă posibilitatea de a atribui un identificator unic oricărei etichete. Identificatorul este specificat de atribut id... De exemplu:

...

Valoarea identificatorului trebuie să înceapă cu o literă latină și poate conține litere (,), cifre (), „cratime” (-) și „litere de subliniere” (_).

Valorile tuturor atributelor idîn documentul html trebuie să fie unic. Dacă se întâlnesc id cu aceleași valori, acești identificatori sunt ignorați, iar codul paginii Web devine invalid.

În codul CSS, selectorul de identificare este notat cu semnul lire sterline (#). Din moment ce identificatorul id se aplică numai elementelor unice, numele etichetei înainte de semnul lire sterline (#) este de obicei omis:

Div # a1 (culoare: verde;)

în mod similar

# a1 (culoare: verde;)

Este recomandabil să se folosească id nu pentru stilizarea unui element, ci pentru accesarea acestuia prin scripturi sau urmărirea unui link.

Selectori de clasă

Selectoarele de clasă sunt cel mai frecvent utilizate pentru stilizare. Clasa pentru etichetă este specificată de atribut clasă... De exemplu:

...

Numele clasei trebuie să înceapă cu o literă latină și poate conține litere (,), cifre (), cratime (-) și litere de subliniere (_).

Dacă atributul id este folosit pentru identificarea unică, apoi folosind atributul clasă o etichetă aparține unui anumit grup.

În codul CSS, un selector de identificare este notat cu un punct (.). Etichete diferite pot fi atribuite aceleiași clase. În acest caz, numele etichetei este omis înainte de semnul punctului (.):

I.verde (culoare: # 008000;) b.roșu (culoare: # f00;) .albastru (culoare: # 00f;)

Pentru o etichetă, puteți specifica mai multe clase în același timp, listându-le în atribut clasă separate printr-un spațiu. În acest caz, stilurile fiecăreia dintre clasele specificate sunt aplicate elementului.

...

Dacă unele dintre aceste clase conțin aceleași proprietăți de stil, dar cu valori diferite, atunci se vor aplica valorile stilului clasei, care se află mai jos în codul CSS.

Selectori de atribute

Există mulți selectori de atribute pe care îi puteți folosi pentru a stila o etichetă în funcție de atributele acesteia.


h1 (culoare: # 800000;) / * un element h1 care are un atribut titlu * /
intrare (chenar: 1px solid # ccc; umplutură: 4px 6px; lățime: 300px;)
a (decor text: niciunul; marginea de jos: 1px solid # 06c; culoare: # 06c;)
span (afișare: bloc inline; imagine de fundal: url ("/ img / icon_sprite.png");)
a, a (fundal: url ("pic.gif") stânga jos fără repetare; afișare: bloc inline; lățime: 32 px;)
(afișare: bloc; float: stânga; lățime: 280px;)

Nu trebuie să existe spațiu între numele etichetei și paranteza pătrată ([)!


Selectoarele generice, selectoarele pentru etichete, identificatori, clase și atribute și pseudoclase sunt toți selectori simpli.

Selectoarele simple pot fi înlănțuite în secvențe specifice bazate pe relațiile elementelor din arborele documentului Web. Astfel de construcții se numesc combinatoare.

Selectori contextuali

Unul dintre cele mai frecvent utilizate combinatoare este selectorul de context.

Selectorii contextuali sau descendenți definesc mai multe elemente, dintre care unul se află în celălalt. Într-un selector contextual, selectoarele simple sunt separate printr-un spațiu.

Exemplu
  1. Pușkin A.S.
    • "Lovitură"
    • "Viscol"
    • "Dubrovsky"
  2. Gogol N.V.
    • "Inspector"
    • „Taras Bulba”
    • "Suflete moarte"
  3. Tolstoi L.N.
    • "Razboi si pace"
    • Anna Karenina
    • "Înviere"

REZULTAT:

  1. Pușkin A.S.
    • "Lovitură"
    • "Viscol"
    • "Dubrovsky"
  2. Gogol N.V.
    • "Inspector"
    • „Taras Bulba”
    • "Suflete moarte"
  3. Tolstoi L.N.
    • "Razboi si pace"
    • Anna Karenina
    • "Înviere"

Selectoare pentru copii

Un selector copil definește un element care se află în interiorul altuia direct. Într-un selector copil, selectoarele simple sunt separate printr-un semn mai mare decât (>).

Exemplu
  1. Pușkin A.S.
    • "Lovitură"
    • "Viscol"
    • "Dubrovsky"
  2. Gogol N.V.
    • "Inspector"
    • „Taras Bulba”
    • "Suflete moarte"
  3. Tolstoi L.N.
    • "Razboi si pace"
    • Anna Karenina
    • "Înviere"

REZULTAT:

  1. Pușkin A.S.
    • "Lovitură"
    • "Viscol"
    • "Dubrovsky"
  2. Gogol N.V.
    • "Inspector"
    • „Taras Bulba”
    • "Suflete moarte"
  3. Tolstoi L.N.
    • "Razboi si pace"
    • Anna Karenina
    • "Înviere"

Selectoare adiacente

Selectorul adiacent definește un semn plus (+) care separă două secvențe de selectori simpli. Elementele reprezentate de aceste secvențe sunt conținute într-un singur container și urmează imediat primul, neseparate de alte etichete.

Exemplu

REFLEXOLOGIE

REZULTAT:

REFLEXOLOGIE

Selectoare adiacente

Un selector adiacent definește un caracter tilde (~) care separă două secvențe de selectori simpli. Elementele reprezentate de aceste secvențe sunt în interiorul unui container și urmează pe primul (nu neapărat direct) de al doilea.

Exemplu

REFLEXOLOGIE

„Toate actele vieții conștiente și inconștiente după modul de origine sunt reflexe.” LOR. Sechenov

Reflexologie - tratamentul bolilor prin control reflex. Este folosit cu succes în programe complexe de tratament sau ca tehnică individuală.

REZULTAT:

REFLEXOLOGIE

„Toate actele vieții conștiente și inconștiente după modul de origine sunt reflexe.” LOR. Sechenov

Reflexologie - tratamentul bolilor prin control reflex. Este folosit cu succes în programe complexe de tratament sau ca tehnică individuală.



În acest tutorial, vom folosi editorul Notepad ++ pentru a crea fișiere HTML și CSS, acesta fiind destinat utilizatorilor Microsoft Windowsși toate exemplele vor fi executate în el.

Dacă aveți un Mac, atunci puteți rula exemplele în editorul Paranteze, cum ar fi Notepad ++ absolut gratuit. Cât despre redactor Paranteze, atunci este potrivit și pentru utilizatori Microsoft Windows, poți alege ulterior ce este mai aproape de tine.

Crearea unei foi de stil interne

Să ne uităm la un exemplu în care vei crea prima foaie de stil internă.

Pasul 1: Deschideți un editor de text

Apăsați butoanele WIN + R în același timp (analogic Start - Run), aceasta va deschide un dialog "Alerga" tastați și apăsați Enter (programul se va deschide ), sau rulați programul prin eticheta ei.

Fereastra principală a programului se va deschide în fața ta:

Pasul 2: creați structura documentului

Copiați sau introduceți următorul cod HTML în editor:

</span> Foaie de stil internă

În codul pentru exemplele din acest tutorial, voi oferi comentarii suplimentare evidențiate cu verde deschis. HTML folosește o etichetă specială pentru a crea comentarii în codul dvs, textul din interiorul unui astfel de element nu este afișat de browser. În codul CSS, pentru a adăuga un comentariu, trebuie să plasați textul comentariului în următoarea construcție: / * text comentariu * /... Puteți face comentarii în cod CSS atât în ​​interiorul stilurilor inline, cât și în cele externe (într-un fișier separat).

Pasul 3: Adăugați stiluri inline

Următorul pas este să adăugați stiluri inline la pagina dvs.: pentru primul nivel, culoarea textului este roșie (culoare: roșu), iar pentru paragrafe este albastră (culoare: albastru). În plus, pentru antetul primului nivel, vom face alinierea la centru a textului (text-align: center). Asigurați-vă că fiecare proprietate CSS și valoarea acesteia sunt separate prin două puncte și că există un punct și virgulă la sfârșitul fiecărei declarații.

</span> Foaie de stil internă

E bine că sunt angajat în auto-dezvoltare.

Voi învăța CSS într-o lună sau chiar mai repede

Pasul 4: Vizualizați pagina HTML într-un browser

Deschideți exemplul într-un browser și verificați dacă rezultatul exemplului nostru se potrivește cu imaginea:

Conectarea unei foi de stil externe

Acum vom crea un fișier separat cu dvs. care va conține foaia de stil și o va conecta la documentul nostru HTML.

  1. În Notepad ++, creați un nou fișier gol și salvați-l ca page.css (când salvați fișierul, trebuie să selectați Foi de stil în cascadă * .css) în același folder în care ați creat documentul HTML.
  2. Transferați codul CSS din exemplul anterior (conținutul etichetei