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

body ( font-family: Arial, Verdana, Sans-serif; /* Font family */ font-size: 12pt; /* Mărimea fontului principal în puncte */ background-color: #f0f0f0; /* Culoarea fundalului paginii web * / culoare: #000000; /* Culoare text al corpului */ ) h1 ( culoare: #a52a2a; /* Culoare titlu */ dimensiunea fontului: 24pt; /* Dimensiunea fontului în puncte */ familia fonturilor: Georgia, Times, serif ; /* Familie de fonturi */ font-weight: normal /* Stil text normal */ )

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.

Există patru moduri de a conecta stiluri la documentul dvs. HTML. Cele mai frecvent utilizate metode sunt CSS inline și CSS extern.

CSS inline în elementul HTML

Mai jos este un exemplu de implementare a CSS pe baza sintaxei de mai sus:

Titlu

Paragraf.

Obtinem urmatorul rezultat:

Atribute

CSS inline - atribut de stil

Puteți utiliza atributul pe orice element HTML pentru a defini regulile de stil. Aceste reguli se vor aplica numai acestui element. Iată sintaxa generală:

<элемент style = "...правила стиля...">

Atribute

Exemplu

Mai jos este un exemplu de CSS inline bazat pe sintaxa de mai sus:

CSS inline

Obtinem urmatorul rezultat:

Stiluri CSS externe - element

Element poate fi folosit pentru a include fișiere CSS externe în documentul HTML.

O foaie de stil CSS externă este un fișier text separat cu extensia .css. Definiți toate regulile de stil în acest fișier text și apoi puteți include fișierul CSS în orice document HTML folosind elementul .

Iată sintaxa generală pentru includerea unui fișier CSS extern:

Atribute

Atributele sunt asociate elementelor sau reguli definite în orice fișier de foaie de stil extern.

Manipulare de către browsere mai vechi

Există multe browsere mai vechi care nu acceptă CSS. Prin urmare, trebuie să avem grijă să scriem CSS inline în documentul nostru HTML. Următorul fragment de cod arată cum pot fi folosite etichetele de comentarii pentru a ascunde CSS din browserele mai vechi:

Acum este dificil să ne imaginăm schimbarea aspectului și formatării documentelor HTML fără a folosi foile de stil CSS, deoarece HTML a încetat de mult să mai fie un limbaj autonom pentru design și a început să-și îndeplinească funcțiile originale de structurare și marcare a documentelor web. În acest articol, vom detalia diferitele moduri în care puteți încorpora CSS într-un document HTML.

Pe scurt despre CSS și HTML

Anterior, paginile web erau concepute exclusiv folosind HTML. În zilele noastre această abordare nu este practicată, iar instrumentele CSS sunt folosite pentru styling, care au posibilități foarte largi de a crea design-uri uimitoare.

Pentru ca designul site-ului să fie afișat corect, trebuie să conectați CSS la documentul HTML, aceste instrumente funcționează inseparabil unul de celălalt - HTML creează structura, iar foile de stil sunt responsabile de aspect.

Există mai multe moduri de bază în care puteți personaliza afișarea stilurilor în codul HTML, fiecare cu propriile sale avantaje și dezavantaje.

Conectarea fișierului CSS

Aceasta este metoda principală considerată de dezvoltatori drept cea mai practică și convenabilă.

Folosind această metodă, puteți schimba rapid designul unei pagini web dacă există o anumită structură a documentului HTML - de exemplu, pentru același site puteți scrie mai multe opțiuni de design și le puteți conecta în funcție de nevoia corespunzătoare.

Pentru a include un fișier cu stiluri, trebuie mai întâi să configurați structura fișierului - acest lucru se face astfel încât să puteți scrie calea corectă către documentul dorit direct în cod.

Creați un director în care va fi localizat documentul HTML principal, în același folder creați un fișier numit stil într-un editor de text și salvați-l în rezoluție .css. Acesta va conține cod CSS cu toate regulile de stil pentru documente specificate.

Conexiunea CSS se face folosind o etichetă HTML cu atributul href. Arata cam asa:

Aici codul se află în ceea ce este considerat optim, dar nu obligatoriu. Poate fi localizat oriunde în document.

Această metodă este convenabilă deoarece toate modificările aduse foii de stil sunt făcute într-un fișier separat, ceea ce face codul mai ușor de înțeles și de citit și face documentul mai ordonat.

Dacă faceți modificări la style.css și deschideți index.html în browser, veți putea vedea toate modificările care au fost introduse.

În același mod, puteți seta nu numai calea către fișier în structura site-ului, ci și un link către pagina cu stilul aflat pe Internet. În acest caz, se încadrează și între ghilimele după atributul href.

Metoda includerii unei foi de stil dintr-un fișier separat optimizează performanța site-ului, deoarece permite browserului să încarce date din cache, ca urmare a căror pagini se încarcă mai repede.

Foi de stil în interiorul unui document HTML

Uneori, valoarea unui parametru de stil este setată direct în corpul documentului HTML folosind atributul style.

Sintaxă:

Textul din acest paragraf este roșu

Dezavantajul evident este lipsa de universalitate, va trebui să specificați o valoare pentru fiecare etichetă.

De asemenea, conectarea folosind foi de stil interne nu permite browserului să memoreze informații în cache, spre deosebire de metoda anterioară.

Stilul global

Dacă trebuie să stilați un anumit element într-un document HTML, utilizați eticheta

Stilul specificat va fi aplicat etichetei

, de îndată ce este înregistrat pe pagină.

Includerea CSS în acest fel va fi citită cu o prioritate mai mare de către browser decât foaia de stil externă.

Cum să adăugați un font pe un site web

Fontul este unul dintre principalele elemente de design ale oricărei pagini web. Impresia pe care o face un site web asupra unui utilizator depinde direct de fontul folosit. Din fericire, nu trebuie să vă limitați la căști standard, puteți conecta orice altele - vă vom spune cum se face acest lucru.

Folosind CSS, fonturile sunt conectate după cum urmează:

• Găsiți și descărcați un set cu cască potrivit.
• Deschideți fișierul CSS și scrieți următorul cod în el:

Mai întâi, este specificat numele fontului, apoi calea către acesta și, în final, parametrii. Vă rugăm să rețineți că, în acest exemplu, fișierul cu fonturi se află în folderul fonturi, care, la rândul său, se află în directorul rădăcină. Pentru comoditate, este mai bine să creați foldere separate pentru diferite fișiere și elemente (imagini, scripturi, foi de stil etc.).

Deci, în folderul fonturi avem un fișier numit OpenSans.ttf, cu parametrii obișnuiți. Acum va fi afișat în browser.

Conectarea fontului prin Google Fonts

Una dintre cele mai comune moduri de a include fonturi în CSS și HTML este serviciul Fonturi Google.

Interfața este intuitivă - trebuie să găsiți un font potrivit după nume sau parametri specificați, faceți clic pe butonul Selectați acest font, iar serviciul generează instantaneu un cod care este inserat în câmpul de etichetă. Document HTML, precum și fișierul CSS corespunzător cu stiluri.

Cum ar trebui să arate în HTML:

Și în fișierul CSS cu stiluri:

Familia de fonturi: „Open Sans”, sans-serif;

Această metodă este convenabilă deoarece vă permite să găsiți rapid fontul dorit dintr-o bază de date foarte mare și economisește mult timp, precum și elimină problemele care apar din cauza afișării incorecte a fonturilor în unele browsere.

Să rezumam

Deci, ne-am uitat la principalele modalități de a conecta stilurile CSS la documentele HTML. Pe baza sarcinilor stabilite pentru dezvoltator în fiecare caz specific, puteți alege opțiunea cu cea mai mare prioritate.

Proiectarea paginilor web este un proces creativ care necesită, totuși, o abordare atentă. Profită de posibilitatea de a comenta codul și nu uita de optimizarea site-ului.

Bună ziua, dragii mei cititori ai blogului. Articolul de astăzi va vorbi despre metode sau modalități de a include o foaie de stil CSS. Îți spun cum poți conectați CSS la site-ul html patru moduri. Aceste patru metode de conectare vă vor fi utile în viitor, deoarece există momente când trebuie să utilizați toate aceste metode de conectare pe un site. Pentru cei care nu știu ce sunt foile de stil CSS, .

Să începem...

Foi de stil aferente.

Metoda de conectare CSS - Nr. 1

Metoda nr. 1 este cea mai convenabilă modalitate de a defini stilurile pentru un site. Toate stilurile pentru site sunt stocate într-un singur fișier separat și sunt folosite pentru orice pagină web. Pentru a conecta sau lega un tabel CSS la o pagină html, utilizați eticheta LINK din titlul paginii.

Titlu

Avantajele acestei metode:

1. Folosiți un fișier de stil CSS pentru toate paginile web ale site-ului web;

2. Puteți schimba aspectul site-ului prin foaia de stil fără a edita pagini web;

3. Când schimbați stilul într-un fișier style.css, stilul este aplicat automat tuturor paginilor în care există o conexiune în fișierul CSS. Este foarte confortabil;

4. Atunci când un site web este încărcat prima dată, fișierul în stil CSS este stocat în cache pe computerul local al utilizatorului, separat de paginile web, din acest motiv site-ul se încarcă mult mai repede.

Foi de stil globale.

Metoda de conectare CSS - Nr. 2

Metoda nr. 2 nu este la fel de eficientă și convenabilă ca metoda nr. 1, dar există momente când această metodă de conectare a CSS este necesară.
Acest stil este conectat și scris în documentul în sine și este plasat în antetul paginii web între etichete . Conectați eticheta de stil

Titlu

În acest exemplu am arătat schimbarea stilului antetului

. Acum, pe această pagină web, trebuie doar să specificați eticheta

iar stilurile vor fi adăugate automat.

Stiluri interne.

Metoda de conectare CSS - nr. 3

Metoda nr. 3 este folosită în cazuri rare. Un stil inline este folosit pentru a modifica o singură etichetă pe o pagină web. Pentru a conecta un stil, utilizați parametrul stil.

Exemplu de conectare a unui tabel CSS:

Titlu

Metodă combinată de conectare a stilurilor.

Metoda de conectare CSS - nr. 4

Această metodă folosește mai multe stiluri simultan, pe care le-am folosit mai sus (metoda nr. 1 - nr. 3).

Exemplu de conectare a unui tabel CSS:

Titlu

Titlu

Ca urmare, urmând exemplul, vom obține primul titlu în roșu cu dimensiunea de 50 de pixeli, iar următorul în verde și cu dimensiunea de 90 pixeli.

Repet că toate metodele descrise de utilizare a CSS pot fi utilizate independent sau pot fi combinate între ele. Acest lucru poate fi văzut în metoda nr. 4.

Foi de stil externe

Să creăm o pagină HTML obișnuită cu următorul cod:

Antet de primul nivel

Acum creați un document gol în Notepad stil.cssși salvați-l în același folder în care se află pagina html:

Aceasta este pagina noastră de stiluri. Să conectăm stilurile (style.css) la pagina html. Există o etichetă în html , care este responsabil pentru conectarea fișierelor externe. Adăuga la pagina html:

Antet de primul nivel

Foi de stil interne

Această foaie de stil este specificată în interiorul unui element HTML folosind atributul stil. Iată un exemplu:

Acesta este titlul în roșu

Dezavantajul acestei metode este evident: parametrul stil trebuie să specificați fiecare titlu și, prin urmare, pierdeți avantajul CSS.

Foi de stil încorporate

În acest caz, foaia de stil este încorporată în capul paginii html. HTML are etichete , cu parametru tip, indică faptul că este inclusă o foaie de stil CSS. Iată un exemplu:

Toate titlurile h1 de pe pagina noastră sunt roșii. Dacă doriți, puteți revopsi unul dintre ele în albastru pentru a face acest lucru, trebuie să utilizați foaia de stil internă:

Acest titlu va fi roșu

În această situație, se aplică principiul în cascadă, acesta va rezolva conflictul. În exemplul nostru, tabelul intern are o prioritate mai mare și, prin urmare, titlul va deveni albastru.

Dezavantajele acestei metode sunt evidente... Pentru fiecare pagină HTML trebuie creată o foaie de stil, așa că vom folosi o foaie de stil externă.

Acum ne-am uitat la modalități de a conecta CSS la HTML, apoi ne vom uita la sintaxa CSS.