Să dăm un exemplu de foaie de stil - creați un fișier stil.cssși scrieți stilurile:

body (familie de fonturi: Arial, Verdana, Sans-serif; /* Familia de fonturi */ dimensiunea fontului: 12pt; /* Dimensiunea fontului principal în puncte */ culoarea fundalului: #f0f0f0; /* Culoare de fundal a paginii web * / culoare: #000000; /* Culoarea textului corpului */ ) h1 ( culoare: #a52a2a; /* Culoare antet */ dimensiunea fontului: 24pt; /* Dimensiunea fontului în puncte */ familia fonturilor: Georgia, Times, serif ; /* Familia de fonturi */ greutatea fontului: normal; /* Greutatea normală a textului */ )

Aici am setat stiluri pentru corpul paginii iar pentru titlu

. De asemenea, puteți seta stiluri specifice pentru orice alte elemente ale paginii de pe site-ul dvs. web.

Acum să conectăm foaia noastră de stil la site:

Salut Lume!

Aceasta este prima mea pagină cu stiluri CSS

Așa că ne-am dat seama ce este CSS, de ce se folosește această tehnologie, am învățat cum să conectați stilurile la site. Această lecție este un fel de introducere în foile de stil în cascadă. În alte lecții vom vorbi mai detaliat despre tehnologia CSS.

Conectarea CSS apare în mai multe moduri, care sunt utilizate în funcție de situație. Acum ne vom uita la aceste metode mai detaliat. Vor fi destul de multe informații, așa că nici nu încercați să le memorați, dar asigurați-vă că încercați să vă dați seama ce este.

Da, și încă un punct despre care a fost deja atins în lecția anterioară, dar îl voi repeta din nou. Adesea, mulți începători se tem de expresia „Foaie de stil în cascadă” sau pur și simplu „fișe de stil”, așa că atunci când întâlnesc astfel de expresii în text, subconștient li se pare că nu înțeleg ceea ce se spune. Deci, de fapt, nu există tabele în forma cu care sunteți obișnuit - nu. Și aceste cuvinte descriu un singur lucru - tot ce se referă la CSS, adică diverse reguli, proprietăți, valori CSS și așa mai departe. În general, tot ceea ce vom studia în acest manual. Apropo, aceasta poate include și pur și simplu cuvintele „CSS” și „stiluri”.

Stiluri încorporate

Conectarea stilurilor încorporate (inline) implică aplicarea atributului de stil unei anumite etichete de pe pagină. În acest caz, valoarea atributului este una sau mai multe (separate prin punct și virgulă) cu valorile corespunzătoare. De regulă, această metodă este utilizată în cazurile în care este necesară modificarea caracteristicilor unui anumit element pe o anumită pagină.

Sintaxă generală

<тег style="свойство:значение; свойство:значение; ...">...

Un exemplu de conectare a stilurilor inline la CSS

Paragraful 1

paragraful 2

Rezultat în browser

Paragraful 1

paragraful 2

Stiluri interne

Stilurile interne sunt indicate în antetul documentului și sunt conectate folosind eticheta. În acest caz, CSS-ul nu mai afectează un element, ci toate elementele specificate în stilurile care sunt prezente pe această pagină. De obicei, această metodă este utilizată atunci când este necesar să se schimbe stilurile mai multor elemente identice într-o pagină HTML.

Un exemplu de conectare a stilurilor interne la CSS

Paragraful 1

paragraful 2

Rezultat în browser

Paragraful 1

paragraful 2

Stiluri externe

Stilurile externe sunt incluse într-un fișier separat folosind fișierul . În acest caz, toate stilurile sunt localizate într-un fișier text obișnuit cu extensia .css și afectează elementele tuturor paginilor la care este conectat acest fișier. De obicei, crearea stilurilor de site începe cu această metodă, deoarece numai cu ajutorul ei se simt toate avantajele CSS, deoarece prin modificarea datelor într-un singur fișier puteți controla afișarea unui număr mare de pagini deodată. Și deja în proces de lucru pe site, sunt adăugate stiluri interne sau încorporate, dacă este necesar.

Atunci când folosesc stiluri externe, autorii acționează în moduri complet diferite. Unele stochează toate stilurile de site într-un singur fișier, altele - în mai multe. De exemplu, un fișier conține stiluri pentru întregul site și este prezent pe toate paginile, altul este conectat suplimentar doar la anumite secțiuni, un al treilea - la anumite subsecțiuni etc. Ceea ce faci depinde de tine să decizi.

Exemplu de conectare a stilurilor externe la CSS

Paragraful 1

paragraful 2

Conținutul fișierului style.css

Corp ( fundal: #ccccff; /* culoarea fundalului paginii */ ) p ( culoare: roșu; /* culoarea textului paragrafului */ familia de fonturi: Helvetica, sans-serif; /* font paragraf */ dimensiunea fontului: 150 % ; /* dimensiunea fontului */ text-align: center; /* text centrat */ chenar: 5px verde dublu; /* stiluri de chenar */ )

Rezultat în browser

Paragraful 1

paragraful 2

După cum puteți vedea, totul este foarte simplu. În general, după numele aproape tuturor proprietăților CSS puteți înțelege deja ce modificări fac, desigur, dacă știți măcar puțin engleză.

În majoritatea exemplelor în acest sens Tutorial CSS Voi folosi stiluri interioare, deoarece sunt cele mai vizuale pentru demonstrație. Pentru studii suplimentare, este mai bine să creați imediat un fișier cu stiluri externe și să vă obișnuiți să le utilizați. De exemplu, creați un subdosar de stil, creați un fișier style.css în el și includeți-l în pagina dvs. HTML.

Inclusiv CSS prin regula @import

O altă modalitate de a conecta stiluri situate în fișiere separate este să folosești regula . Această regulă este folosită pentru a combina mai multe foi de stil într-una singură, ceea ce uneori este destul de convenabil. Conexiunea are loc în foi de stil externe sau interne; pentru aceasta, după numele regulii, se scrie construcția url(), unde adresa fișierului CSS este indicată între ghilimele (" "). Sau url() nu este scris deloc, dar ghilimele și adresa fișierului sunt imediat incluse. Sintaxa generală este următoarea.

Într-o foaie de stil externă

@import url ("adresa fisierului"); @import „adresă fișier”; ...

În interior

Să ne uităm la utilizarea acestei reguli în foile de stil externe, pentru aceasta vă voi da două exemple pentru comparație.

Exemplul 1: conexiune normală a stilurilor externe

Conținutul paginii.

Exemplul 2: conectarea stilurilor externe împreună cu regula CSS @import

Conținutul paginii.

Conținutul fișierului style1.css

@import url("style/style2.css"); @import url("style/style3.css"); Mai jos aici, în plus, pot exista stiluri obișnuite cu proprietăți, valori etc.

A conduce funcționat corect, trebuie specificat chiar la începutul foii de stil. Singura excepție este regula de aici , care este întotdeauna pe primul loc, deși în practică este folosit extrem de rar.

Nu vă recomand să utilizați imediat toată această varietate de metode CSS - concentrați-vă pe foile de stil externe obișnuite, deoarece aceasta este opțiunea principală. Dacă vrei, poți, desigur, să experimentezi, dar nimic mai mult. În general, puteți decide oricând cum să conectați CSS, principalul lucru ar fi ce să vă conectați. :)

Stiluri personalizate

Multe browsere au capacitatea de a include un fișier cu CSS de către utilizatorii înșiși, astfel încât aceștia să poată schimba aspectul site-urilor pe care le vizualizează, așa cum spun ei, „pentru a se potrivi”. De exemplu, modificați dimensiunea fontului și fontul, culoarea textului și fundalul unor elemente etc. Desigur, în acest caz, stilurile sunt create chiar de utilizator. De exemplu, în Internet Explorer puteți activa stiluri personalizate accesând: Instrumente → Opțiuni Internet → General → Aspect.

În acest tutorial veți învăța cum să conectați css la html. Să ne uităm la mai multe opțiuni cu exemple. Vom vorbi, de asemenea, despre încărcarea asincronă a stilurilor și hack-urilor pentru diferite browsere.

Cum se conectează css la html într-un fișier separat

Acum vă voi arăta cum să conectați css la html cu un fișier de stiluri separat. Este creat un fișier css separat. Apoi, folosind comenzi speciale, se conectează la documentele necesare. Acest tip se numește foaie de stil externă.

Această metodă este cea mai preferată. Vă permite să dezvoltați stiluri de site web separat de documentele HTML. Stilul poate fi apoi folosit într-un singur fișier style.css pe mai multe pagini.

Scriem calea exact în eticheta head. Specifică toate informațiile de sistem necesare pentru afișarea paginii. Se conectează astfel:

Există și alte metode de conectare. Folosiți-le doar ca opțiune suplimentară.

Merită spus că stilurile inline au cea mai mare prioritate. Chiar dacă includeți CSS extern, browserul va acorda preferință stilurilor inline pentru o anumită etichetă. Pe locul doi în prioritate se află stilurile interne. Sunt inferioare celor încorporate, dar superioare celor externe.

În general, ca opțiune suplimentară, s-ar putea să vă fie util să folosiți stiluri interne sau interne. Acest lucru este foarte util dacă trebuie să stilați un element pe o anumită pagină fără a afecta fișierul CSS principal.

În primul capitol, ați învățat că designul site-ului web este creat folosind CSS. Pentru o mai bună înțelegere a ceea ce trebuie utilizat și de ce, să ne uităm la un exemplu ilustrativ. Gândiți-vă la HTML ca la un cadru structurat alb-negru al unei case fără decorațiuni, iar CSS este ceea ce folosim pentru a crea un aspect unic.

După cum puteți vedea, casa din dreapta are acum culori, materiale și decorațiuni suplimentare. Același lucru se întâmplă și pe o pagină web: cu ajutorul regulilor CSS, pe ea apar culori și indentări, stilul fontului și dimensiunile elementelor se modifică și se creează un stil întreg, complet.

Foaie de stil simplă

Să aruncăm o privire la cum arată cea mai simplă foaie de stil și din ce elemente constă. Acesta este un exemplu de stil CSS pentru toate etichetele

Care sunt pe pagina web:

Cum va arăta textul acum?

În browser și ce înseamnă fiecare linie? Este foarte simplu: fontul va avea un stil îndrăzneț și culoarea #1E824C (cod de culoare hexazecimal) și va fi afișat la 1em (o unitate relativă egală cu dimensiunea implicită a fontului din browser).

Stilul descris mai sus, ca oricare altul, include un set de elemente care au propriile nume. Amintiți-le, astfel încât când veți citi capitolele următoare să înțelegeți ce se întâmplă.

Selector Specificându-l, îi spunem browserului la ce anume vrem să aplicăm stilul. În cazul nostru, selectorul este p. Bloc de declarație Acesta este numele întregului conținut situat între acolade () după selector. Proprietate stil Aceasta este o comandă care specifică opțiunea de formatare dorită (de exemplu, doriți să schimbați stilul font-greutatea fontului, culoarea culorii, dimensiunea fontului dimensiunea fontului etc.). După numele proprietății trebuie plasate două puncte. Veți afla mai multe despre proprietățile CSS mai târziu. Valoarea proprietății După două puncte se scrie valoarea proprietății în sine, pe care o definiți singur, creându-vă astfel propriul stil. În funcție de proprietate, trebuie să specificați valoarea corespunzătoare.

De exemplu, stilul fontului este specificat de cuvintele cheie bold , bolder , etc., culoarea este specificată prin valoare hexazecimală, RGB(A), HSL(A) sau cuvintele cheie roșu , portocaliu , alb etc., dimensiunea fontului este specificată de CSS unități (procent) % , pixeli px, puncte pct, înălțimea fontului em) sau constantele mici , medii , mari etc. După specificarea valorii proprietății, se pune punct și virgulă.

Deoarece CSS este insensibil la rupturi de rând, spații, file și majuscule, vă puteți formata codul într-un mod care să fie ușor de citit și editat ulterior. De exemplu, am putea scrie codul de mai sus pe o singură linie:

P (greutatea fontului:bold;culoare:#1E824C;dimensiunea fontului:1em;)

Funcționează și el, dar este ușor de înțeles? Mai ales când codul CSS este destul de lung. Bineînțeles, n-ar strica să-l despart măcar cu spații. Există mai multe reguli de bune maniere și, dacă le înveți imediat, îți vei spune „mulțumesc” pe viitor.

Foarte des, atunci când descrieți un stil, se utilizează o formă compactă de notație, în care toate proprietățile pentru un selector sunt indicate într-un singur bloc:

P (greutatea fontului: aldine; culoare: #1E824C; dimensiunea fontului: 1em; )

Și această formă de notație este foarte greoaie, deși funcționează:

P (greutatea fontului: aldine;) p (culoarea: #1E824C;) p (dimensiunea fontului: 1em;)

Pentru a facilita navigarea prin cod, se recomandă să scrieți fiecare proprietate pe o linie nouă și să folosiți tab-uri sau spații atunci când listați proprietăți. Uneori există un spațiu între două puncte și valoarea proprietății, dar acesta depinde de tine să decizi ce preferi.

Pentru un plus de confort, puteți adăuga comentarii direct în CSS. În ele puteți scrie explicații și note care să vă ajute să navigați în foile de stil.

Comentariile în CSS sunt scrise între caracterele /* și */. Ele nu sunt afișate pe pagina web în browser și sunt vizibile doar în cod. Dezvoltatorii folosesc adesea comentarii pentru a ascunde temporar secțiunile de cod CSS care nu sunt necesare. Comentariile arată astfel:

/* Stil pentru corpul textului */ p (greutatea fontului: bold; culoare: #1E824C; dimensiunea fontului: 1em; )

Foi de stil interne și externe

După ce ați creat o foaie de stil, puteți alege cum să o atașați la pagina dvs. web. Există două opțiuni pentru tabele - interne, care sunt adăugate direct în pagină și externe, care se află într-un fișier separat cu extensia .css și sunt conectate la pagină folosind un link.

Foile de stil interne sunt scrise într-un document HTML între etichete. Trebuie să adăugați o foaie de stil la fiecare pagină web. Dacă site-ul are un număr mare de pagini care necesită același design, atunci adăugarea și editarea stilurilor devine o muncă ingrată - procesul va dura foarte mult. Prin urmare, foile de stil interne sunt considerate incomode.

Foile de stil externe sunt mult mai frecvente. Trebuie doar să conectați tabelul la toate paginile web necesare folosind eticheta cu atributul rel (definește relația dintre pagină și fișierul inclus) și valoarea foii de stil, ceea ce înseamnă că fișierul inclus conține o foaie de stil. Atributul href este calea (URL) către fișierul dvs. .css:

Editând un singur fișier, puteți schimba simultan stilul întregului site, indiferent de câte pagini există. Acest lucru este foarte convenabil, mai ales pentru resurse mari.

Lecție: crearea unei foi de stil

Deoarece foile de stil externe sunt cele mai convenabile și utilizate pe scară largă în dezvoltarea designului, vom învăța cum să le creăm. Puteți descărca arhiva cu fișierele pentru această lecție de pe această pagină.

În folder veți găsi un document HTML cu un exemplu de pagină simplă și o imagine (pentru a fi folosită în tutorial). Deschideți documentul HTML în browser. Veți vedea că pagina arată complet normal. Pentru a-i oferi un aspect mai atractiv, haideți să-l stilăm.

Deocamdată, nu trebuie să aprofundați prea mult în ceea ce înseamnă orice bucată de cod. Acum trebuie să înțelegeți principiul de funcționare. Să începem.

Conectarea CSS la HTML

Pentru a începe, deschideți orice editor de text de pe computer (notepad-ul va funcționa) și creați un fișier gol numit style , salvându-l cu extensia .css (ar trebui să ajungeți cu un fișier style.css). Salvați fișierul în folderul în care se află documentul HTML descărcat.

Deschideți documentul HTML într-un editor de text, precum și într-un browser (pentru a vedea cu ușurință modificările în aspectul paginii). Adăugați între etichete următorul cod:

Rezumați pe scurt ceea ce tocmai ați făcut. Lipind acest cod în documentul HTML, veți:

• a furnizat un link către un font numit Roboto Condensed, care va fi preluat de pe serverul Google (vă vom spune mai multe despre fonturile Google mai târziu);
• a conectat foaia de stil externă style.css (gol deocamdată).

Stilul de scriere CSS

Salvați modificările aduse documentului HTML și accesați fișierul .css gol pe care l-ați creat. Să adăugăm ceva stil paginii:

Html ( padding-top: 5px; background-image: url(background.jpg); )

Salvați modificările. Felicitări, ați scris prima regulă - se referă la etichetă . Prima proprietate - padding-top - va adăuga o umplutură superioară de 5 pixeli între fereastra browserului și conținutul paginii web. Cu a doua proprietate, background-image , ați inclus o imagine pentru fundalul întregii pagini, specificând calea către fișierul grafic (situat în același folder cu documentul HTML).

Actualizează pagina web deschisă în browser. Dacă totul este făcut corect, veți vedea că pe pagină a apărut un fundal, iar spațiul dintre partea de sus a ferestrei și text a crescut ușor.

Corp ( lățime: 75%; umplutură: 40px; marjă: 15px automat; culoarea fundalului: #EBEBEB; raza chenarului: 30px; )

Salvați modificările la fișier. Acum tu:

• setați zona pentru conținutul etichetei , care este egal cu 75% din lățimea ferestrei browserului;
• a furnizat o marjă de 40 de pixeli din toate părțile zonei de conținut;
• a poziționat zona în centrul paginii și a făcut, de asemenea, o indentare în partea de sus și de jos de 15 pixeli;
• setați culoarea de fundal #EBEBEB pentru zona de conținut;
• a rotunjit colțurile zonei dreptunghiulare, specificând o rază de rotunjire de 30 de pixeli.

Actualizați din nou documentul HTML. În același timp, asigurați-vă că memoria cache este dezactivată sau reîncărcați pagina cu toate fișierele asociate actualizate, folosind o combinație specială de taste (de exemplu, pentru Chrome aceasta este Ctrl+F5).

Veți vedea că în centrul paginii a fost adăugată o zonă dreptunghiulară cu colțuri rotunjite. Acesta este rezultatul acțiunilor dvs. în fișierul CSS. De asemenea, puteți încerca să micșorați fereastra browserului și să admirați modul în care lățimea zonei dreptunghiulare se adaptează la dimensiunea acesteia. Acest lucru se datorează faptului că lățimea este specificată ca procent.

Schimbarea fontului folosind CSS

Este timpul să ne decoram textul. Adăugați acest cod în foaia de stil și salvați modificările:

H1 (culoare: #E87E04; dimensiunea fontului: 2em; margin-left: 20px; font-family: „Roboto Condensed”, sans-serif; ) h2 (culoare: #E87E04; dimensiunea fontului: 1.7em; margin-left : 20px; font-family: „Roboto Condensed”, sans-serif; ) p ( culoare: #22313F; line-height: 150%; margin-top: 20px; margin-left: 20px; font-family: „Roboto Condensed ", sans-serif;)

După ce ați scris acest lucru, ați setat culorile fontului pentru etichetele h1 , h2 , p, ați indicat dimensiunile acestora, ați adăugat o marjă de la marginea din stânga de 20 de pixeli și, în plus, pentru

Am indentat partea de sus cu 20 de pixeli și am stabilit înălțimea liniilor (spațierea dintre linii a textului) la 50% mai mare decât cea standard. În plus, ați conectat fontul Roboto Condensed la toate cele trei etichete (de aceea a trebuit să furnizați un link către el în fișierul HTML de la început).

Reîmprospătați pagina în browser și admirați rezultatul. În acest tutorial vom încerca încă un lucru. Adăugați acest cod la CSS:

Accentuare (greutatea fontului: bold; )

Salvați și reîmprospătați pagina în browser. Veți vedea că în ultimul paragraf fontul a devenit aldine în unele părți ale textului. Pentru a înțelege ce s-a întâmplat, accesați fereastra editorului de text unde ați deschis fișierul HTML de la început. Uită-te la ultimul paragraf: o parte a propoziției este învelită într-o etichetă cu clasa de accentuare. În acest fel ați scris un stil pentru o singură linie de text dintr-un paragraf. Vom vorbi mai multe despre cursuri în capitolul următor.

Ar trebui să ajungi cu o pagină ca aceasta:

Ca practică, încercați să schimbați dimensiunea textului pentru

(să spunem 1.1em) și, de asemenea, crește spațiul dintre

Și marginea din stânga a zonei de conținut cu încă 10 pixeli.

concluzii

Acest capitol a analizat sintaxa CSS și cum să creați o foaie de stil de bază. Ați învățat cum să încorporați CSS într-o pagină HTML și cum să creați stiluri simple. Să evidențiem principalele lucruri pe care trebuie să le rețineți din acest capitol:

Orice stil CSS constă din mai multe elemente: un selector, o proprietate de stil și valoarea acestei proprietăți.

Toate proprietățile și valorile lor sunt scrise într-un bloc de declarație între două acolade () după specificarea selectorului.

Trebuie să urmați cu atenție semnele: două bretele (se deschid la începutul blocului de anunțuri și se închid la sfârșit). Fără aceste paranteze, CSS nu va funcționa corect.

Este necesar să plasați două puncte după proprietate și un punct și virgulă după valoare.

Pentru comoditate și o mai bună lizibilitate a codului dvs. CSS, scrieți fiecare proprietate pe o linie nouă și nu vă zgâriți cu spații și file.

Bună ziua! În acest articol, voi arăta diferite metode pentru includerea CSS în HTML. De asemenea, voi explica diferitele subtilități și nuanțe ale diferitelor moduri de a conecta stiluri.

Conexiune internă

O foaie de stil internă este un set de stiluri, o parte a codului unei pagini web care ar trebui să apară întotdeauna între etichetele de deschidere și de închidere Cod HTML în corpul unei etichete de pagină web. Exemplu:

Text galben cu font Verdana