Instrucțiuni pentru crearea de nume pentru CSS. Moștenire și cascadă
Acasă - Setări - Setări utilizatorși configurați afișarea bannerelor:
O puteți face diferit dacă doriți să fie afișate alte bannere.
Nume de utilizator
Acum să trecem mai departe: " Utilizatori» => « Grupuri de utilizatori» => « Lista de grupuri» alege grupul doritși să începem coafarea.
Pentru a face acest lucru, trebuie să setați un stil CSSîn paragraful „ Stilul CSS pentru numele de utilizator" Vom folosi stiluri pentru text:
culoare
- culoarea poreclei. Puteți utiliza valorile de culoare: format RGB- rgb(r, g, b); notație hexazecimală - #RRGGBB; Format RGBa - rgba(r, g, b, a); Nume de culori de bază: aqua, negru, albastru, fucsia, gri......
familie de fonturi
- familia de fonturi pentru poreclă (Arial, Georgia, Verdana....) Lista fonturilor poate include unul sau mai multe nume, separate prin virgulă. Dacă numele fontului conține spații, de exemplu Trebuchet MS, acesta trebuie inclus într-un singur sau ghilimele duble. Când browserul întâlnește primul font din listă, verifică prezența acestuia pe computerul utilizatorului. Dacă nu există un astfel de font, următorul nume din listă este luat și, de asemenea, analizat pentru prezență. Prin urmare, fonturile multiple crește probabilitatea ca cel puțin unul dintre ele să fie detectat pe computerul client.
dimensiunea fontului
- dimensiunea fontului porecla. Aveți voie să utilizați orice valid unități CSS: em (înălțimea fontului elementului), ex (x înălțimea caracterelor), puncte (pt), pixeli (px), procente (%) etc. Dimensiunea fontului este considerată 100% (sau nespecificată) element părinte.
stil de font
- determină stilul fontului poreclei - normal, italic sau oblic (normal, italic, oblic).
greutatea fontului
- setează saturația (îndrăzneală) fontului (bold, bolder, lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900).
De asemenea, puteți utiliza o umbră de text pentru porecla dvs.:
text-umbră
- sunt specificati patru parametri: x-shift, y-shift, raza de estompare si culoare (1px 1px 2px black). Este permisă specificarea mai multor parametri de umbră, separându-i prin virgulă (1px 1px 2px negru, 0 0 1em roșu)
Exemplu:
Indicăm CSS stilul poreclei:
Culoare: roșu; greutate font: bold; dimensiunea fontului: 12px;
Aliniază porecla la centruSetări stil>>Elemente mesaje>>Nume utilizator
În blocul „Altele” adăugați
Alinierea textului: centru;
Ce avem
Fundal animat pentru numele de utilizator
ÎN „Stil CSS pentru numele de utilizator” adăugați fundal
Fundal: url(dosarul cu imaginea/glitter_001.gif) fără repetare
Există 14 fundaluri diferite în arhiva de mai jos.
Titluri de utilizator
„Text banner utilizator„Noi scriem oricare, nu va fi vizibil”,” – numele clasei, de exemplu admin, V EXTRA.css seteaza stilul:
Administrator ( fundal: url(image folder/admin.gif) fără repetare; afișare: bloc; lățime: 120px; înălțime: 30px; culoare: rgba(0, 0, 0, 0); margin-left: -5px; )
Să vedem ce s-a întâmplat
„Text banner utilizator„Noi scriem numele grupului” Un altul, folosind propriul nume de clasă CSS" - numele clasei, de exemplu admin-ribbon, V EXTRA.css seteaza stilul:
/* Clasificarea utilizatorului */ .admin-ribbon, .moder-ribbon, .member-ribbon (culoare: #FCE2E3; display: block; font-size: 12px; font-weight: bold; height: 38px; line-height: 38px; text-align: 0 0 transparent: "styles/default/icons/admin_ribbon.png") .moder; panglică ( background: url("styles/default/xenforo/icons/moder_ribbon.png") no-repeat scroll 0 0 transparent; ) .member-ribbon ( background: url("styles/default/xenforo/icons/member_ribbon.png) ") derulare fără repetare 0 0 transparent; ) /* END Clasifică utilizator */
În arhiva de mai jos veți găsi 3 panglici pentru banner.
Culoare personalizată pentru bannere:
Accesați pagina cu lista de grupuri: /admin.php?user-groups/ - selectați grupul de care aveți nevoie - În câmpul „Text banner utilizator:”, introduceți numele de care aveți nevoie - În setarea „Design banner utilizator:”, selectați opțiunea „Altul, folosind numele tău CSS” -class:” și în acest câmp indicăm: userBanner stilul meu- Salvam toată chestia asta într-un șablon EXTRA.css adauga acest cod:
UserBanner.my-style (culoare: alb; culoare de fundal: verde; )
sau așa
UserBanner.my-style (culoare: alb; culoare de fundal: verde; culoare chenar: verde; )
Exemplu de bannere care utilizează stiluri CSS.
Să facem bannere folosind doar CSS. După cum am menționat deja, pentru aceasta folosim „Altul, folosind propriul nume de clasă CSS”, stabilim pentru fiecare grup propria sa clasă, iar în EXTRA.css, specificați stilurile pentru aceste clase:
Admin_style, .lamer_style, .moder_style, .user_style ( imagine de fundal: liniar-gradient(în sus, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)); bordura-radius: 3px ; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) dimensiunea fontului: 11px 0 5px; ; poziție: text-align: text-shadow: 0 0 0 transparent, 1px .admin_style (color de fundal: rgba, 0,5, 0,7); ; .moder_style (culoare de fundal: rgba(0, 155, 4, 0,5); chenar: 1px rgba(0, 155, 4, 0,7); ) .user_style (culoare de fundal: rgba(0, 51, 155, 0,5); bordura: 1px rgba solid (0, 51, 155, 0.7); );
CSS (Foi de stil în cascadă) sau foi de stil în cascadă, sunt folosite pentru a descrie aspect document scris în limbaj de marcare. De obicei, stilurile CSS sunt folosite pentru a crea și schimba stilul elementelor paginii web și interfețe cu utilizatorul scris în Limbi HTMLși XHTML, dar poate fi aplicat și oricărui tip de document XML, inclusiv XML, SVG și XUL.
Foile de stil în cascadă descriu regulile de formatare a elementelor folosind proprietăți și valorile permise pentru acele proprietăți. Pentru fiecare element pe care îl puteți folosi set limitat proprietăți, alte proprietăți nu vor avea niciun efect asupra acesteia.
O declarație de stil constă din două părți: elementul paginii web − selector, și comenzi de formatare - bloc de anunțuri. 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 de declarare a stilului CSS 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ă fișier text cu extensia .css, care conține un set de stiluri CSS pentru elemente. Fișierul este creat într-un editor de cod, la fel ca o pagină HTML. Fișierul poate conține doar stiluri, fără marcaj HTML. O foaie de stil externă este conectată la o pagină web folosind o etichetă , situat in interiorul sectiei
. Aceste stiluri funcționează pentru toate paginile site-ului.Puteți atașa mai multe foi de stil la fiecare pagină web adăugând mai multe etichete în succesiune , indicând scopul acestei foi de stil în atributul etichetă media. rel="stylesheet" specifică tipul de link (link către o foaie de stil).
Atributul type="text/css" nu este cerut de standardul HTML5, deci poate fi omis. Dacă atributul lipsește, valoarea implicită este type="text/css" .
1.2. Stiluri interne
Stiluri interneîncorporat într-o secțiune
document HTML și sunt definite în interiorul etichetei. Stilurile interne au prioritate față de cele externe, dar sunt inferioare stilurilor inline (specificate prin atributul stil)....
1.3. Stiluri încorporate
Când scriem stiluri inline, scriem codul CSS în fișierul HTML, direct în interiorul etichetei element folosind atribut de stil:
Fii atent la acest text.
Astfel de stiluri afectează doar elementul pentru care sunt setate.
1.4. regulă @import
regulă @import Vă permite să încărcați foi 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 unei pagini web. Acestea ajută la crearea regulilor pentru formatarea elementelor paginii 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;) se va reseta la zero marginile pentru toate elementele site-ului. Selectorul poate fi folosit și în combinație cu o pseudo-clasă sau pseudo-element: *:after (stiluri CSS) , *:checked (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 font: homar, cursiv;) ar seta stilul general formatarea tuturor titlurilor h1.
2.3. Selector de clasă
Selectorii de clasă vă permit să specificați stiluri pentru unul sau mai multe elemente cu acelasi nume clasa situată în locuri diferite pagini sau pe pagini diferite site-ul. De exemplu, pentru a crea un titlu cu clasa de titlu, trebuie să adăugați atributul de clasă cu titlul de valoare la eticheta de deschidere
și setați stilul pentru clasa specificată. Stilurile create folosind o clasă pot fi aplicate altor elemente, nu neapărat de acel tip.
Instructiuni de utilizare computer personal
.titlu (text-transform: majuscule; culoare: albastru deschis; )2.4. Selector ID
Selectorul ID vă permite să formatați unul element specific. Id-ul trebuie să fie unic și poate apărea o singură dată pe o singură pagină.
#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 copii ale tuturor elementelor ul.
Dacă trebuie să formatați descendenții element specific, acestui element trebuie să i se dea o clasă de stil:
p.întâi a (culoare: verde;) — acest stil se va aplica tuturor legăturilor descendente ale unui paragraf cu clasa întâi;
p .first a (culoare: verde;) - dacă adăugați un spațiu, linkurile situate în interiorul oricărei etichete .first class care este un descendent 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 class.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 părinte. Selectorul copil vă permite să aplicați stiluri numai dacă elementul copil vine imediat după elementul părinte și nu există alte elemente între ele, adică elementul copil nu este imbricat în nimic altceva.
De exemplu, p > strong va selecta toate elementele puternice care sunt copii ale elementului p.
2.7. Sora selectoare
Fraternitatea apare între elemente care au un părinte comun. Selectoarele de frați vă permit să selectați elemente dintr-un grup de elemente de același nivel.
h1 + p - va selecta toate primele paragrafe imediat după orice etichetă
fără a afecta paragrafele rămase;
h1 ~ p - va selecta toate paragrafele care sunt sora oricărui titlu h1 și imediat după acesta.
2.8. Selector de atribute
Selectorii de atribute selectează elemente în funcție de numele sau valoarea atributului:
[atribut] - toate elementele care conțin atributul specificat - toate elementele pentru care este specificat atributul alt;
selector[atribut] - elemente de acest tip care conțin atributul specificat, img - doar imagini pentru care este specificat atributul alt;
selector[attribute="valoare"] - elemente de acest tip care conțin atributul specificat cu o anumită valoare, img - toate imaginile al căror titlu conține cuvântul floare;
selector[atribut~="valoare"] - elemente care conțin parțial valoare dată, 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 caracteristica ;
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[attribute^="valoare"] - elemente a căror valoare de atribut începe cu valoarea specificată, a - toate legăturile care încep cu http://;
selector[attribute$="valoare"] - elemente a căror valoare de atribut se termină cu valoarea specificată, img - toate imaginile în format png;
selector[attribute*="valoare"] - elemente a căror valoare de atribut conține cuvântul specificat oriunde, a - toate linkurile al căror nume conține book .
2.9. Selector de pseudo-clase
Pseudo-clasele sunt clase care nu sunt atașate etichetelor HTML. Acestea vă permit să aplicați reguli CSS elementelor atunci când are loc un eveniment sau respectă o anumită regulă. Pseudoclase caracterizează elemente cu următoarele proprietăți:
:hover - orice element peste care este plasat cursorul mouse-ului;
:focus - element interactiv, care a fost accesat folosind tastatura sau activat cu mouse-ul;
:activ - 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 se potrivește cu tipul de date specificat;
:activat - toate câmpurile de formulare active;
:disabled — câmpuri de formular blocate, adică într-o stare inactivă;
:in-range - câmpuri de formular ale căror valori sunt în intervalul specificat;
:outof-range - câmpuri de formular ale căror valori nu sunt în intervalul specificat;
:lang() - elemente cu text în limba specificată;
:not(selector) - elemente care nu conțin selectorul specificat - clasă, identificator, nume sau tip câmp de formular - :not() ;
:target este un element cu simbolul # care este referit în document;
:checked — elemente de formular selectate (selectate de utilizator).
2.10. Selector structural de pseudoclase
Pseudoclase structurale selectează elementele copil conform parametrului specificat în paranteze:
:nth-child(odd) - elemente copil impar;
:nth-child(even) - chiar elemente copil;
: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 element copil;
:nth-last-child() - în lista de elemente copil, selectează elementul cu locație specificată, asemănător cu:nth-child() , dar începând de la ultimul, în sens invers;
:first-child - vă permite să stilați doar primul element copil al etichetei;
:last-child - vă permite să formatați ultimul element copil al etichetei;
:only-child - selectează un element care este singurul element copil;
:empty - selectează elemente care nu au copii;
:root - selectează elementul care este rădăcina documentului - element html.
2.11. Selector de pseudoclase de tip structural
arata spre tip specific eticheta copil:
:nth-of-type() - selectează elemente similare cu :nth-child() , dar ia în considerare doar tipul elementului;
:first-of-type - selectează primul copil dintr-un anumit tip;
:last-of-type - selectează ultimul element de acest tip;
:nth-last-of-type() - selectează un element de tipul dat într-o listă 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 elementele fiu ale elementului părinte.
2.12. Selector de pseudo-element
Pseudoelementele sunt folosite pentru a adăuga conținut, care este generat folosind proprietatea conținut:
:first-letter - selectează prima literă a fiecărui paragraf, se aplică doar elementelor bloc;
:first-line - selectează prima linie a textului elementului, se aplică numai elementelor bloc;
:before - inserează conținutul generat înaintea elementului;
:after - adaugă conținut generat după element.
3. Combinație selectoare
Pentru a selecta mai precis elementele pentru formatare, puteți utiliza combinații de selectoare:
img:nth-of-type(even) - va selecta toate imaginile cu numere 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, trebuie să enumerați selectorii necesari în partea stângă a declarației, 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 este locul în care elementele moștenesc proprietăți de la părintele lor (elementul care le conține). Cascada se manifestă în modul în care diferite tipuri foile 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 text al paginii, 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. În multe cazuri, acest lucru este convenabil deoarece nu trebuie să setați dimensiunea și familia de fonturi pentru fiecare element de pe pagina web.
Proprietățile legate de formatarea 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 , outline , overflow , padding , position , text-decoration , vertical-align and z-index .
Moștenirea forțată
Prin utilizarea cuvânt cheie moștenire poate forța un element să moștenească orice valoare de proprietate a elementului său 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 situate în tabelul de mai sus;
3) Pot fi aplicate stiluri dintr-un element surse diferite. Puteți verifica ce stiluri sunt aplicate în modul dezvoltator browser. Pentru a face acest lucru, faceți clic pe element clic dreapta mouse-ul și selectați „Vizualizare cod” (sau ceva similar). Coloana din dreapta va lista toate proprietățile care sunt setate pe acest element sau moștenite de la un element părinte, împreună cu fișierele de stil în care sunt specificate și numărul ordinal al liniei de cod.
Orez. 2. Modul dezvoltator în browser Google Chrome 4) Când definiți un stil, puteți utiliza orice combinație de selectori - un selector de element, o pseudo-clasă de element, o clasă sau un identificator de element.
div (chenar: 1px solid #eee;) #wrap (lățime: 500px;).box (float: stânga;).clear (clear: ambele;)
5.2. Cascadă
În cascadă este mecanismul care controlează rezultatul finalîntr-o situație în care unui element sunt aplicate diferite reguli CSS. Există trei criterii care determină ordinea în care sunt aplicate proprietățile — regula!importantă, specificitatea și ordinea în care sunt incluse foile de stil.
Regulă!important
Greutatea unei reguli poate fi specificată folosind cuvântul cheie!important, care este adăugat imediat după valoarea proprietății, de exemplu, span (font-weight: bold!important;) . Regula trebuie plasată la sfârșitul declarației înaintea parantezei de închidere, fără spațiu. Un astfel de anunț va avea prioritate față de toate celelalte reguli. Această regulă vă permite să anulați o valoare de proprietate ș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 de stil.
Specificitate
Pentru fiecare regulă, browserul calculează specificitatea selectorului, iar dacă un element are declarații de proprietate conflictuale, se ia în considerare regula care are cea mai mare specificitate. Valoarea specificității are patru părți: 0, 0, 0, 0. Specificitatea selectorului este definită după cum urmează:
pentru id, se adaugă 0, 1, 0, 0;
pentru clasa 0, 0, 1, 0 se adaugă;
pentru fiecare element și pseudo-element se adaugă 0, 0, 0, 1;
pentru un stil inline adăugat direct unui element - 1, 0, 0, 0 ;
Un selector 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#main 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;) /*specificitate 0, 1, 0, 0*/ li#sidebar (culoare: aqua;) /*specificitate: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/
Ca rezultat, acele reguli care sunt mai specifice vor fi aplicate elementului. De exemplu, dacă un element are două specificități cu valorile 0, 0, 0, 2 și 0, 1, 0, 1, atunci a doua regulă va câștiga.
Ordinea meselor conectate
Puteți crea mai multe foi de stil externe și le puteți conecta la o singură pagină web. Dacă în mese diferite se va întâlni sensuri diferite proprietățile unui element, apoi ca rezultat regula din foaia de stil listată mai jos va fi aplicată elementului.
În acest articol, vă prezentăm un set de reguli pentru crearea numelor CSS. Au fost deja testate în mai multe proiecte majore. Acest lucru ne-a ajutat să obținem anumite succese. Scopul instrucțiunilor este de a elimina posibilitatea conflictelor de denumire, de a simplifica depanarea, întreținerea și procesul de denumire.
Regulile de denumire prezentate mai jos pot fi considerate cu greu optime pentru browsere. Cu toate acestea, regulile oferă un beneficiu imens, iar impactul lor asupra performanței este neglijabil.
Clasa CSS și numele fișierului
Utilizare litere miciîn numele tuturor claselor și fișierelor CSS. Pentru a separa cuvintele dintr-un nume, utilizați simbolul „-”. De exemplu, am putea denumi clasele așa cum ar fi widget-latest-comments și fișierele post.css.Organizarea fișierelor CSS
Distribuiți stilurile CSS în fișiere separate pentru a facilita echipa de dezvoltare și întreținerea ulterioară a sistemului. Fișierele CSS pot fi denumite conform următoarelor reguli:- global.css - Acest fișier conține stiluri CSS globale care pot fi reutilizate în diferite locuri.
- layout.css - acest fișier conține stiluri CSS utilizate în machete.
- ControllerID.css - acest fișier este accesat de controlerul aplicației. Aceasta înseamnă că fiecare controler poate avea propriul fișier de stil, care este denumit după ID-ul său. De exemplu, un PostController poate avea un fișier CSS numit post.css.
- widget-WidgetClass.css - aici, numele WidgetClass înseamnă clasa widget-ului pentru care este scris dosar separat Stiluri CSS. De exemplu, widgetul LatestComments va accesa fișierul widget-latest-comments.css.
- FeatureName.css - caracteristici grozave pot avea propriile lor propriile dosare CSS numit după funcția în sine. De exemplu, funcția Markdown este probabil să folosească markdown.css.
- Alte fișiere CSS necesare, cum ar fi cadrele CSS.
Denumirea claselor CSS
În general, în CSS, ar trebui să folosim clase în loc de identificatori pentru a stila elementele HTML. Acest lucru se face deoarece același identificator nu poate fi folosit de două ori pe aceeași pagină XHTML.Pentru a atribui nume claselor, ne bazăm pe următoarele reguli:
- Clasele CSS pentru care sunt concepute partajarea, trebuie să înceapă cu prefixul g-. De exemplu, putem avea clase g-submit-button, g-link-button, a căror descriere stil ar trebui plasată în fișierul global.css menționat mai sus. Veți obține sintaxa următorul tip: .g-link-button ( ... )
- Fiecare fișier care scoate orice înregistrare trebuie să aibă un container rădăcină care conține conținutul. Declară o clasă al cărei nume repetă exact calea către fișier. De exemplu, pentru un fișier disponibil la post/index.php, această construcție arată astfel: ...vezi conținutul aici...
- Descrierea stilurilor CSS trebuie plasată în fișierul CSS corespunzător controlerului. Fiecare declarație de stil trebuie să înceapă cu numele clasei container rădăcină. De exemplu, pentru a declara stiluri CSS pentru clasa de iteme a containerului post-index rădăcină, am introduce următoarea intrare în fișierul post.css: /* în fișierul post.css */ .post-index .item ( .. )
- Crearea numelor și stilurilor de clasă CSS pentru widget-uri urmează exact instrucțiunile descrise mai sus. De exemplu, widgetul LatestComments ar trebui să folosească numele CSS rădăcină al clasei widget-latest-comments și să se refere la fișierul widget-latest-comments.css pentru stiluri de comentarii: /* în fișierul widget-latest-comment.css */ . widget-ultimele-comentarii(...)
Inclusiv fișierele CSS
În modul dezvoltator (când modul YII_DEBUG este activat), fiecare fișier CSS trebuie conectat la fișierul de aspect principal.În modul de producție, toate fișierele CSS trebuie combinate și comprimate într-un singur fișier. Numele fișierului trebuie să conțină data (de exemplu, styles-201010221550.css).
Făcând acest lucru, permitem browserului să memoreze în cache fișierul CSS combinat și astfel eliminăm nevoia de a descărca fișierul CSS de fiecare dată.
Îmbinați și comprimați fișierele CSS
Aici introducem strategii pentru atingerea obiectivului menționat.În primul rând, declarăm toate numele fișierelor CSS ca matrice în setările aplicației.
În al doilea rând, scriem comanda consolei pentru a combina și comprima fișiere CSS. Compresorul YUI poate fi utilizat în aceste scopuri. Această comandă va citi numele fișierelor CSS din setările aplicației, va combina tot conținutul fișierelor într-un singur fișier și va apela compresorul YUI pentru a comprima stilurile CSS. Fișierul creat trebuie să fie denumit cu un marcaj de timp.
În al treilea rând, modificați fisierul principal layout prin inserarea următorului cod în secțiunea de cap:
...... params["css.files.compressed"]): ?> params["css.files.compressed"]; ?>" /> params["css.files"] ca $css): ?> " />Presupunem că fișierele CSS sunt listate în setarea aplicației css.files. Și dacă fișierele sunt îmbinate și comprimate, atunci numele fișierului trebuie inclus în cele din urmă în setarea aplicației css.files.compressed. Comanda consolei trebuie să facă modificări în fișierul de configurare al aplicației pentru a actualiza setarea css.files.compressed după ce fișierul CSS combinat și comprimat este creat.
Instrucțiuni pentru denumirea selectorilor jQuery
Putem folosi regulile pentru crearea numelor CSS pentru selectoarele JQuery în codul JavaScript al aplicației. În special, atunci când selectăm unul sau mai multe elemente folosind selectoare JQuery, trebuie să respectăm reguli similare pentru declararea stilurilor CSS. De exemplu, dacă dorim să atașăm handlere „clic” la toate hyperlinkurile din blocurile de știri, atunci vom folosi următorii selectori JQuery: $(".news-index .item a").click(function())( .. )) ;Adică, selectorul trebuie să înceapă cu numele containerului rădăcină al clasei CSS (în acest caz, news-index).
1. Ce sunt foile de stil CSS în cascadă?
Aşa, ce sunt foile de stil în cascadă CSS?
css(engleză) Foi de stil în cascadă - foi de stil în cascadă) este un limbaj pentru descrierea aspectului unui document scris folosind un limbaj de marcare. Pentru a face mai ușor de înțeles pentru un începător, foile de stil în cascadă css sunt concepute pentru a crea modele frumoase și ușor de editat de pagini de site web html.
Foile de stil în cascadă au fost folosite pentru prima dată în anii 90 ai secolului trecut. Dar la început nu erau la fel de populare ca acum, deoarece diferite browsere percepeau și afișau paginile html care foloseau css diferit.
După ceva timp, pentru a simplifica munca constructorilor de site-uri, browserele au început să fie „adaptate” la aceleași standarde. Astăzi, aproape toate programele folosite pentru a vizualiza paginile de Internet reproduc în mod egal site-uri care utilizează foi de stil în cascadă CSS.
Observatiile mele!!! Conform observațiilor mele personale, așa ultimele versiuni Browsere precum Opera, Mazilla ForeFox, Maxthon, Google Chrome și Internet Explorer arată pagini care folosesc foi de stil în cascadă aproape identic, dar dacă browserele nu sunt de ultimă generație, atunci paginile site-ului în sine vor arăta diferit. Și pentru ca site-ul dvs. să arate la fel în aproape toate browserele, există tehnologii speciale pentru specificarea foilor de stil în cascadă.
Deci, să începem să creăm o nouă foaie de stil și să o atașăm la documentul nostru.
2. Cum se creează o foaie de stil CSS în cascadă?
În această parte a articolului vom crea și vom conecta o foaie de stil în cascadă la cea mai simplă pagină html.
Deci, hai să facem asta:
1. Creăm un folder care va conține pagina noastră html și foaia de stil în cascadă. Lasă folderul meu să se numească „css”
2. Creăm o pagină html simplă (index.html). Puteți citi cum se face acest lucru aici.
3. Acum creăm un document text simplu (similar cu crearea unei pagini html), numim doar style.css.
Ca urmare, ar trebui să obțineți acest lucru:
Gata, fișierul care va conține stilurile css este gata.
Acum să conectăm foaia de stil creată la fișierul index.html.
3. Cum se conectează o foaie de stil în cascadă css?
Deci, pentru a conecta o foaie de stil la o pagină html, trebuie să introduceți fișierul index.html din etichetă
adauga tag:
Aici în atribut href="style.css" este specificată calea către fișierul cu stiluri CSS. În acest caz, fișierele css și index.html se află în același folder.
De exemplu, dacă fișierul nostru index.html avea următorul cod:
Important!!! Apropo, nu uitați să setați codarea la 1251 (ANSI-Cyrillic) când salvați fișierul index.html în Notepad. Pentru că dacă nu faceți acest lucru și salvați fișierul într-o codificare diferită, browserul vă va afișa „doodle-uri” în loc de texte.
Dacă totul este făcut și salvat corect, atunci în browser veți vedea următoarele:
Asta e tot, fișierul index.html a fost creat și la el au fost conectate și foile de stil CSS.
Acum să verificăm funcționarea foilor de stil CSS.
Deci, să începem cu cel mai simplu lucru și să setăm eticheta
un stil nou care definește imaginea de fundal a paginii html, culoarea de fundal a paginii (dacă imaginile sunt dezactivate în browserul vizitatorului paginii), umplutura de sus și de jos, fontul implicit, dimensiunea și culoarea acesteia.Pentru a seta o imagine de fundal, trebuie să o marcați în folderul cu fișierele noastre.
Descărcați arhiva bg.zip, dezarhivați-o și plasați fișierul bg.jpg în folder css. Ar trebui sa o ai asa:
Acum să setați stilul pentru etichetă
document html, în foaia de stil trebuie să scrieți următoarele:|
body ( imagine de fundal:url(bg.jpg); culoarea de fundal:#f6f6f6; margin-top:0px; margin-bottom:0px; font-family:Verdana; font-size:12px; color:#000066; ) |
corp (...) - setarea stilurilor CSS pentru etichetă
imagine de fundal:url(bg.jpg); - imagine de fundal, unde parametrul url(...jpg) specifică calea completă către imaginea care va fi fundalul
culoare de fundal:#f6f6f6; - fundalul corpului documentului (tag ). Acest atribut este activat dacă browserul vizitatorului are imaginile dezactivate
margin-top:0px; - distanța de la corpul documentului până la partea de sus a browserului. În acest caz, Cascading Style Sheets css setează spațierea la 0 px.
margin-bottom:0px; - distanța de la corpul documentului până la partea de jos a browserului. În acest caz, foile de stil CSS în cascadă setează spațierea la 0px
font-family:Verdana; - setarea fontului implicit pentru un document
dimensiunea fontului: 12px; - dimensiunea fontului documentului 12 pixeli
culoare:#000000; - culoarea textului. În acest caz, foile de stil CSS setează culoarea fontului la albastru închis.
După ce salvați fișierul style.css, veți vedea următoarele în browser:
|
Despre tehnologia CSS. Stiluri CSS |
|
Introducere în CSS. Stiluri Modalități de aplicare a stilurilor: Stiluri interne Stiluri globale Stiluri conexe/externe Ați început să învățați despre foile de stil în cascadă CSS. Deci sunteți deja familiarizat cu limbajul de marcare hipertext HTML , deoarece nu are rost să porniți CSS fără a cunoaște HTML. CSS ( Foi de stil în cascadă- foi de stil în cascadă ) este o tehnologie folosită pentru a proiecta pagini web folosind stiluri. Ideea principală a CSS este de a separa structura și conținutul paginilor web de designul lor: Stiluri Folosind HTML, se creează o pagină - cadrul acesteia și se introduce și conținutul acesteia. - un design este creat folosind CSS - designul este setat pentru elementele paginii. este un set de reguli de formatare aplicate elementelor de pagină pentru a le modifica proprietățile și parametrii de prezentare pe pagină: aceasta se referă în principal la aspectul și poziția acestora. Stilurile sunt reprezentate de proprietăți CSS. Fiecare proprietate are propria sa influență asupra designului unui anumit element de pagină. Unele proprietăți nu se aplică unor elemente. Elementele paginii sunt etichete HTML sau conținutul acestora. Există trei moduri de a aplica stiluri elementelor paginii: Metoda I - Stiluri interne Stilul este stabilit cu ajutorul parametrului stil 20px #3366CC Folosind parametrul stil, este specificat stilul pentru textul acestui paragraf, dimensiunea și culoarea acestuia sunt setate. Această metodă de proiectare a elementelor paginii este rar folosită. La urma urmei, veți fi de acord că setarea aceluiași design, să zicem, pentru fiecare paragraf al paginii, în primul rând, necesită forță de muncă și, în al doilea rând, nu este practică, deoarece pe măsură ce volumul codului sursă crește, timpul de încărcare a paginii va crește. Metoda II – Stiluri globale Stilul este setat folosind o etichetă Capul documentului are un singur design de stil pentru toate paragrafele paginii curente! Și pentru acest paragraf designul este setat individual! Design uniform. #3366CC Capul documentului are un singur design de stil pentru toate paragrafele paginii curente! Și pentru acest paragraf designul este setat individual! Design uniform. Această metodă de proiectare a paginilor este folosită în cazurile în care nu există multe dintre ele sau când este nevoie de a da un design original oricărei pagini a site-ului din restul multor pagini de același tip. Metoda III - Stiluri legate sau externe Stilurile sunt descrise într-un fișier separat cu extensia .css, care poate fi asociat cu unul sau mai multe fișiere html, afectând astfel designul acestora. Dacă nu sunteți încă familiarizat cu editorul HTML vizual Dreamweaver, apoi pentru a crea un fișier CSS puteți folosi un editor de text simplu, care face parte din sistemul de operare Windows - Notepad. De exemplu, avem un document html - fișier index.html, la designul căruia trebuie să aplicați stilurile descrise în fișier stil.css. În acest scop fișierele index.htmlŞi stil.css trebuie legat. Comunicarea se realizează folosind o etichetă , care se află la capul documentului index.html(între etichete Şi ), și în care trebuie să scrieți următoarele: "foaia de stil"tip=„text/css”href=„style.css”>. Această linie indică faptul că regulile de proiectare pentru fișier index.html preluat din fișierul de stil stil.css. Folosind atributul href etichetă se face un link către un fișier cu stiluri ( specificați o cale absolută sau relativă către fișier (mai multe detalii aici...) ). Astfel, puteți aplica stiluri dintr-un fișier aflat chiar și pe alt site oricărui document HTML. Fragment de cod:
Pentru paragrafe și titluri de al doilea nivel Stilul a fost stabilit.
.Fragment de cod din fișierul de stil: p(frontieră: #FF0000 solid 2px; culoare: #33CC99; căptușeală: 5px} h2 (frontieră: #33CC99 solid 2px; culoare de fundal: #FF0066; culoare: #FFFFFF; căptușeală: 5px} #3366CC Pentru paragrafe și titluri de al doilea nivel Stilul a fost stabilit. Stilurile sunt descrise în fișierul style.css, care este asociat cu acest fișier folosind o etichetă . Utilizarea acestei metode vă permite să legați un fișier cu stiluri stil.css cu orice număr de fișiere html și lucrează la designul lor, editând doar codul css al unui fișier. Ceea ce este foarte convenabil! |
Foi de stil în cascadă sau CSS pentru începători (un atelier despre HTML „corect”)
Partea rusă a internetului crește pe zi ce trece. În ultimii doi ani, volumul total al paginilor în limba rusă s-a dublat. Astăzi în Rusia nu vei mai surprinde pe nimeni cu fraza<домашняя страничка>sau un cuvânt englezesc
Vom vorbi aici despre<правильном>HTML pentru începători, și anume despre câteva funcții suplimentare aprobate oficial de Internet Consortium (http://www.w3.org/). În special, despre unele dintre capabilitățile oferite de HTML dinamic (DHTML). Și chiar mai precis - despre cum să utilizați CSS (foi de stil în cascadă sau foi de stil în cascadă) pentru a crea o pagină care va arăta mai bine decât paginile create folosind<классического>HTML, în timp ce ocupă mai puțin spațiu și, în consecință, se încarcă mai rapid.
Puțini oameni care decid să-și creeze propria prezență pe web pentru prima dată se înarmează cu Notepad sau alt editor de text precum HomeSite De obicei, un începător gândește așa:<Все свои привычные документы я создаю посредством программ WYSIWYG (<что вижу, то и получаю>) - Eu creez texte în MS Word, prezentări în MS PowerPoint, așa că voi lua un program similar pentru a crea o pagină web - MS FrontPage...> După ce a luat o astfel de decizie, sculptorul web nou creat se jefuiește de două ori.
Prima dată - în sensul utilizării raționale a spațiului web. Faptul este că toți editorii vizuali ai paginilor web, care includ MS FrontPage menționat, se introduc în paginile create<отсебятину>- o mulțime de etichete suplimentare inutile. Excepție, poate, este Macromedia Dreamweaver (pentru care a câștigat o popularitate binemeritată atât în rândul începătorilor, cât și al profesioniștilor). Dar nici măcar el nu este ideal în această privință - îi place să împrăștie textul sursă cu ghilimele (în cele mai multe cazuri complet inutile) și, de asemenea, inserează caractere spațiale care nu se rup în locurile cele mai nepotrivite. Pentru dreptate, este de remarcat faptul că toți editorii vizuali oferă utilizatorului posibilitatea de a lucra cu codul sursă al paginii care este creată, dar FrontPage, atât de iubit de mulți, va reface totul în felul său, de îndată ce vei reveniți la modul vizual.
Rezultă de aici că pentru a doua oară un începător se jefuiește tocmai în ceea ce privește flexibilitatea și controlul complet asupra conținutului paginii create - editorii vizuali nu oferă aceeași libertate de creativitate pe care o va oferi lucrul direct cu codul sursă al paginii create. da-ti.
Ei bine, acum să trecem direct la subiect - crearea de pagini web frumoase și mici folosind foi de stil în cascadă (în textul ulterioar voi folosi numele lor prescurtat - CSS). Se presupune că, dragi cititori, citind introducerea, sunteți de acord cu mine, ați abandonat editorii vizuali, ați primit o carte despre HTML, ați studiat cel puțin un număr mic de etichete și atribute de bază și sunteți dornici să știți ce este CSS și ce este este folosit cu.
Formatare logica si fizica
Versiunea HTML clasică 3.2, cea mai răspândită în acest moment pe Web, ne oferă mijloace de formatare fizică a documentelor, pentru care există etichete speciale (de exemplu, etichete). , , ) și multe atribute diferite (dimensiune, culoare, înălțime, lățime etc.). Caracteristicile formatării web ne obligă să scriem aceste etichete și atribute din nou și din nou pentru fiecare paragraf nou, ceea ce, desigur, crește foarte mult dimensiunea codului paginii. În plus, cu această metodă de formatare, în cazul analizării structurii documentului, rămâne neclar de ce acest cuvânt este evidențiat cu caractere aldine – doar pentru frumusețe sau pentru a atrage atenția deosebită a utilizatorului final? Dacă o persoană în viață este încă capabilă să înțeleagă cel puțin construcția logică a paginilor în HTML clasic, atunci acest lucru nu se poate spune despre motoarele de căutare sau, de exemplu, despre browserele vocale. Scoate-le și pune logica pură în structura paginii. Tocmai din această cauză<неподвластности>Pentru analiza logică, această metodă de formatare a fost numită formatare fizică. În schimb, la crearea noii specificații HTML 4.0, formatarea logică a fost pusă în prim-plan, adică formatarea în care structura și designul documentului să fie clar separate. Această metodă de formatare este recomandată pentru utilizarea de către consorțiul de Internet, deoarece oferă capabilități îmbunătățite de căutare a informațiilor pe Internet, vă permite să structurați și să analizați mai precis informațiile folosind motoarele de căutare și, de asemenea, reduce semnificativ dimensiunea paginilor și timpul necesar. pentru a încărca complet. Separarea structurii documentului și a designului este realizată folosind CSS.
Este de remarcat faptul că începuturile formatării logice au fost prezente și în etichetele HTML clasice
, ,
, desigur, a contribuit la împărțirea documentelor în niște blocuri logice. Însă mulți autori de pagini au folosit și continuă să folosească aceste etichete în alte scopuri: din cauza deficitului de resurse pentru designul paginii, etichetele de titlu, de exemplu, au fost folosite pentru a evidenția elemente din pagină care nu erau de fapt titluri. CSS, pe de altă parte, oferă suficiente instrumente de stil pentru a vă permite să urmați mai îndeaproape regulile de formatare logică și să separați cu adevărat structura paginii de prezentarea sa vizuală.Atribuirea stilurilor elementelor individuale ale paginii
CSS vă permite să atribuiți propriul stil vizual oricărei etichete HTML, inclusiv
. Dacă stilul este setat pentru etichetă , este moștenit de toate elementele (paragrafe, titluri etc.) plasate în interiorul acestei etichete container, în cazul în care nu există stiluri personalizate pentru aceste elemente. Astfel, nu mai trebuie să scriem etichete și atribuie culoarea, dimensiunea etc. pentru fiecare paragraf de pe pagină - doar setați un anumit stil pentru etichetă , iar toate paragrafele de pe pagină vor fi afișate conform acestui stil. Cum să faci asta?Să presupunem că vrem ca toate paragrafele să fie afișate cu font Times New Roman de 12 puncte, verde închis. Pentru a face acest lucru, trebuie să specificați atributul de stil al etichetei
, atribuindu-i valoarea corespunzătoare. Sintaxa este:12pt; culoare: verde închis;">
Astfel, toate paragrafele de pe pagină sunt afișate așa cum ne-am dorit, iar codul nu este înfundat cu etichete și atributele acestora. Imaginează-ți economiile legate de dimensiunea fișierului dacă pagina ta constă dintr-o mulțime de text!
Vă rugăm să rețineți că atunci când am specificat stilul fontului, după numele Times New Roman am specificat stilul serif, care înseamnă orice font cu serif. Dacă computerul utilizatorului final nu are instalat fontul Times New Roman, browserul va înlocui oricare dintre fonturile serif disponibile, iar afișarea paginii va fi cât mai aproape de ceea ce ați dorit. Mai mult, exemplul dat va fi de înțeles atât pentru IE (4.0 și mai mare) cât și pentru NN (4.0 și mai mare). Deși trebuie să facem imediat o rezervare că Netscape Navigator nu acceptă toate caracteristicile oferite de CSS și DHTML, iar acest lucru, desigur, nu crește numărul fanilor săi.
Exemplul de mai sus folosește încorporarea stilului direct în eticheta documentului - așa-numitul stil inline. Această metodă de a lega CSS la un fișier HTML este recomandată în cazuri izolate - dacă acest stil este planificat să fie aplicat unui singur element dintr-o singură pagină a site-ului. Dacă stilul trebuie aplicat mai multor elemente de pe aceeași pagină sau mai multor pagini deodată, sunt recomandate alte metode de legare CSS și HTML, despre care vom discuta în continuare.
Atribuirea stilurilor mai multor elemente de pe aceeași pagină - crearea unei foi de stil încorporate
Până acum am vorbit despre stabilirea unui singur stil pentru un element. Acum vom învăța cum să creăm foi de stil.
Să presupunem că vrem ca toate paragrafele de pe pagină să arate ca exemplul anterior, cu toate titlurile de primul nivel în verde Arial aldine de 16 puncte și toate titlurile de al doilea nivel în 14 puncte Helvetica aldine, galben-verde. Pentru a face acest lucru, trebuie să creăm în<голове>pagini (oriunde între etichete
Şi) o foaie de stil încorporată în care vom scrie mai multe reguli deodată. Pentru a face acest lucru, creați o etichetă de container pentru foaie de stil, începând cu o etichetă de deschidere. În interiorul acestei etichete container, suntem liberi să definim orice număr de reguli CSS, constând dintr-un selector (numele etichetei HTML căreia i se va aplica regula) și definiția acestuia (direct un set de formatoare), cuprinse între acolade. . Sintaxa pentru exemplul de mai sus este:dimensiunea fontului: 12pt;
culoare: verde închis;
dimensiunea fontului: 16pt;
greutate font: bold;
familie de fonturi: Arial, sans-serif;
dimensiunea fontului: 14pt;
culoare: verdegalben;
greutate font: bold;
font-style: italic;
Acest mod de a lega CSS și HTML se numește încorporare. Este recomandat să îl utilizați în cazurile în care decideți să setați un anumit set de reguli de formatare pentru o singură pagină a site-ului și, conform planului dvs., toate celelalte pagini ar trebui să arate diferit.
Atribuirea de stiluri mai multor pagini de site simultan
Pe lângă încorporare și încorporare, importarea și legarea foii de stil sunt folosite pentru a lega CSS și HTML. Acestea sunt, desigur, cele mai bune modalități de a oferi un aspect și o senzație consistentă mai multor pagini (sau chiar tuturor) paginilor aceluiași site. În acest caz, întreaga foaie de stil este stocată într-un singur fișier (extensia fișierului trebuie să fie standard - .css).
Iată un exemplu de conținut al unui astfel de fișier (de exemplu, my.css):
font-family: „Times New Roman”, serif;
dimensiunea fontului: 12pt;
culoare: verde închis;
familie de fonturi: Arial, sans-serif;
dimensiunea fontului: 16pt;
greutate font: bold;
familie de fonturi: Arial, sans-serif;
dimensiunea fontului: 14pt;
culoare: verdegalben;
greutate font: bold;
font-style: italic;
Vă rugăm să rețineți: etichete nu sunt folosite foi de stil în interiorul fișierului - extensia .css indică în mod clar browserului că fișierul este o foaie de stil. Un astfel de fișier poate fi legat la mai multe pagini simultan (sau importat în mai multe pagini deodată). În fișierul html pentru legare trebuie să scrieți oriunde între etichete
Şi urmatoarea linie:Această linie indică faptul că fișierul care este legat este o foaie de stil (rel="stylesheet"), formatul acestui fișier este .css (type="text/css") și se află în același director cu fișierul html, sau are o adresă URL diferită (href="my.css"). Evident, putem scrie această linie în oricare (sau în toate) fișierele noastre html. Astfel, un singur design de stil va fi prescris pentru mai multe pagini simultan.
Vă rugăm să rețineți că stilurile încorporate (stilurile specificate pentru elementele individuale ale paginii folosind atributul stil) și stilurile încorporate (stilurile specificate în<голове>pagini în interiorul unei etichete de container
, desigur, a contribuit la împărțirea documentelor în niște blocuri logice. Însă mulți autori de pagini au folosit și continuă să folosească aceste etichete în alte scopuri: din cauza deficitului de resurse pentru designul paginii, etichetele de titlu, de exemplu, au fost folosite pentru a evidenția elemente din pagină care nu erau de fapt titluri. CSS, pe de altă parte, oferă suficiente instrumente de stil pentru a vă permite să urmați mai îndeaproape regulile de formatare logică și să separați cu adevărat structura paginii de prezentarea sa vizuală.Atribuirea stilurilor elementelor individuale ale paginii
CSS vă permite să atribuiți propriul stil vizual oricărei etichete HTML, inclusiv
. Dacă stilul este setat pentru etichetă , este moștenit de toate elementele (paragrafe, titluri etc.) plasate în interiorul acestei etichete container, în cazul în care nu există stiluri personalizate pentru aceste elemente. Astfel, nu mai trebuie să scriem etichete și atribuie culoarea, dimensiunea etc. pentru fiecare paragraf de pe pagină - doar setați un anumit stil pentru etichetă , iar toate paragrafele de pe pagină vor fi afișate conform acestui stil. Cum să faci asta?Să presupunem că vrem ca toate paragrafele să fie afișate cu font Times New Roman de 12 puncte, verde închis. Pentru a face acest lucru, trebuie să specificați atributul de stil al etichetei
, atribuindu-i valoarea corespunzătoare. Sintaxa este:12pt; culoare: verde închis;">
Astfel, toate paragrafele de pe pagină sunt afișate așa cum ne-am dorit, iar codul nu este înfundat cu etichete și atributele acestora. Imaginează-ți economiile legate de dimensiunea fișierului dacă pagina ta constă dintr-o mulțime de text!
Vă rugăm să rețineți că atunci când am specificat stilul fontului, după numele Times New Roman am specificat stilul serif, care înseamnă orice font cu serif. Dacă computerul utilizatorului final nu are instalat fontul Times New Roman, browserul va înlocui oricare dintre fonturile serif disponibile, iar afișarea paginii va fi cât mai aproape de ceea ce ați dorit. Mai mult, exemplul dat va fi de înțeles atât pentru IE (4.0 și mai mare) cât și pentru NN (4.0 și mai mare). Deși trebuie să facem imediat o rezervare că Netscape Navigator nu acceptă toate caracteristicile oferite de CSS și DHTML, iar acest lucru, desigur, nu crește numărul fanilor săi.
Exemplul de mai sus folosește încorporarea stilului direct în eticheta documentului - așa-numitul stil inline. Această metodă de a lega CSS la un fișier HTML este recomandată în cazuri izolate - dacă acest stil este planificat să fie aplicat unui singur element dintr-o singură pagină a site-ului. Dacă stilul trebuie aplicat mai multor elemente de pe aceeași pagină sau mai multor pagini deodată, sunt recomandate alte metode de legare CSS și HTML, despre care vom discuta în continuare.
Atribuirea stilurilor mai multor elemente de pe aceeași pagină - crearea unei foi de stil încorporate
Până acum am vorbit despre stabilirea unui singur stil pentru un element. Acum vom învăța cum să creăm foi de stil.
Să presupunem că vrem ca toate paragrafele de pe pagină să arate ca exemplul anterior, cu toate titlurile de primul nivel în verde Arial aldine de 16 puncte și toate titlurile de al doilea nivel în 14 puncte Helvetica aldine, galben-verde. Pentru a face acest lucru, trebuie să creăm în<голове>pagini (oriunde între etichete
Şi) o foaie de stil încorporată în care vom scrie mai multe reguli deodată. Pentru a face acest lucru, creați o etichetă de container pentru foaie de stil, începând cu o etichetă de deschidere. În interiorul acestei etichete container, suntem liberi să definim orice număr de reguli CSS, constând dintr-un selector (numele etichetei HTML căreia i se va aplica regula) și definiția acestuia (direct un set de formatoare), cuprinse între acolade. . Sintaxa pentru exemplul de mai sus este:dimensiunea fontului: 12pt;
culoare: verde închis;
dimensiunea fontului: 16pt;
greutate font: bold;
familie de fonturi: Arial, sans-serif;
dimensiunea fontului: 14pt;
culoare: verdegalben;
greutate font: bold;
font-style: italic;
Acest mod de a lega CSS și HTML se numește încorporare. Este recomandat să îl utilizați în cazurile în care decideți să setați un anumit set de reguli de formatare pentru o singură pagină a site-ului și, conform planului dvs., toate celelalte pagini ar trebui să arate diferit.
Atribuirea de stiluri mai multor pagini de site simultan
Pe lângă încorporare și încorporare, importarea și legarea foii de stil sunt folosite pentru a lega CSS și HTML. Acestea sunt, desigur, cele mai bune modalități de a oferi un aspect și o senzație consistentă mai multor pagini (sau chiar tuturor) paginilor aceluiași site. În acest caz, întreaga foaie de stil este stocată într-un singur fișier (extensia fișierului trebuie să fie standard - .css).
Iată un exemplu de conținut al unui astfel de fișier (de exemplu, my.css):
font-family: „Times New Roman”, serif;
dimensiunea fontului: 12pt;
culoare: verde închis;
familie de fonturi: Arial, sans-serif;
dimensiunea fontului: 16pt;
greutate font: bold;
familie de fonturi: Arial, sans-serif;
dimensiunea fontului: 14pt;
culoare: verdegalben;
greutate font: bold;
font-style: italic;
Vă rugăm să rețineți: etichete nu sunt folosite foi de stil în interiorul fișierului - extensia .css indică în mod clar browserului că fișierul este o foaie de stil. Un astfel de fișier poate fi legat la mai multe pagini simultan (sau importat în mai multe pagini deodată). În fișierul html pentru legare trebuie să scrieți oriunde între etichete
Şi urmatoarea linie:Această linie indică faptul că fișierul care este legat este o foaie de stil (rel="stylesheet"), formatul acestui fișier este .css (type="text/css") și se află în același director cu fișierul html, sau are o adresă URL diferită (href="my.css"). Evident, putem scrie această linie în oricare (sau în toate) fișierele noastre html. Astfel, un singur design de stil va fi prescris pentru mai multe pagini simultan.
Vă rugăm să rețineți că stilurile încorporate (stilurile specificate pentru elementele individuale ale paginii folosind atributul stil) și stilurile încorporate (stilurile specificate în<голове>pagini în interiorul unei etichete de container