Tutorial HTML
Aplicarea foilor de stil
Procesul de creare a paginilor web, consumator de timp, poate fi facilitat în mare măsură prin utilizarea tehnologiilor speciale de dezvoltare, precum și a unei varietăți de servicii care sunt de obicei furnizate de furnizori. Unul dintre cele mai importante elemente auxiliare care facilitează crearea de site-uri sunt așa-numitele Cascading Style Sheets (CSS), concepute pentru a personaliza centralizat aspectul paginilor.
HTML a susținut întotdeauna conceptul de stiluri, tipuri predefinite de formatare a textului concepute pentru paginile web. Stilurile HTML încorporate includ stilul corpului paginii utilizat pentru textul neformatat și stilurile de titlu (de la până la ). Inițial, HTML nu avea o modalitate de a schimba setările de stil până când nu au fost inventate foile de stil în cascadă. Au făcut o adevărată revoluție în domeniul creării și structurării paginilor web și au deschis cele mai largi posibilități de a crea designeri. Foile de stil vă permit să implementați o mulțime de caracteristici interesante, dintre care cele mai importante sunt considerate a fi:
- modificarea aspectului textului și a altor obiecte pe toate paginile site-ului fără a edita aceste pagini;
- poziționarea și crearea de efecte de animație pentru text și alte obiecte de pe pagini.
În continuare, vom vorbi despre crearea și aplicarea stilurilor, precum și despre plasarea obiectelor pe pagini.
Concepte de foaie de stil
O foaie de stil este un set de stiluri definite de un web designer pentru formatarea textului și a altor obiecte plasate pe paginile unui site. Prin editarea foilor de stil, un designer modifică aspectul obiectelor fără a face modificări direct paginilor web.
Pentru a utiliza tehnologia CSS, nuasigurați-vă că scrieți manual codul HTML pentru foaia de stil și apoi, din nou manual, legați elementele paginii la stilurile din această foaie de stil. Cele mai recente versiuni ale celor mai populare instrumente de creație a paginilor web acceptă tehnologia CSS, sau cel puțin cele mai importante elemente ale acesteia.
Tipuri de foi de stil
Declarații de stil
Stilurile sunt setate pentru toate elementele HTML standard, inclusiv paragrafele și . Cu ajutorul proprietăților stilului, se determină principalii parametri ai textului, precum dimensiunea, fontul, indentările. Valoarea proprietății poate fi setată după cum urmează:
Redefinirea stilurilor HTML folosind clase
Secțiunea anterioară v-a arătat cum să schimbați stilurile elementelor standard ale documentului HTML, cum ar fi paragrafele și titlurile. Îți poți crea propriul stil? De exemplu, pe un site de poezie pentru copii, ar trebui folosit un stil pentru titlurile poeziei și un stil diferit pentru textul acestora.
Definirea stilurilor cu identificatori
Un stil, definit ca o clasă, este utilizat pentru a formata orice număr de elemente de pagină. Dacă un stil este folosit cel mult o dată pe o pagină, acesta poate fi identificat folosind un identificator. Identificatorul începe întotdeauna cu caracterul „#”: și poate fi aplicat oricărui obiect aflat pe pagină, de exemplu, textului:
Crearea manuală a stilurilor de text
Această secțiune explică cum să creați foi de stil și cum să formatați textul pe paginile web cu acestea. Când formatați mai multe pagini de același tip, este logic să folosiți foi de stil încorporate, iar dacă există multe astfel de pagini, tabele externe.
Creați o foaie de stil încorporată
Aplicarea stilurilor unei pagini web
Stiluri definite de designer (în exemplul de mai sus, aceasta este clasaSIDEBAR și stilul standard H3) sunt aplicate automat tuturor elementelor identificate de etichetele date. De exemplu, toate titlurile formatate cu eticheta vor fi afișate cu verde Desdemona sau Courier dacă computerul nu are primul font. Pentru a specifica cărei clase îi aparține o anumită etichetă, utilizați atributul CLASS: În acest caz, clasa este aplicată etichetei paragraf. Dar, în general, poate fi aplicat oricăror etichete de tipul corespunzător (de exemplu, un stil de text unei etichete de text, ca în acest caz). Pentru a aplica o clasă unui fragment de text, utilizați eticheta:
Creați o foaie de stil externă
O foaie de stil externă este un fișier text care conține doar definiții de stil. Are o extensie css (ex. mystyles.css). Foile de stil externe sunt de obicei stocate în același director ca și paginile web sau, dacă sunt utilizate mai multe foi de stil, într-un director separat. În secțiunea fiecărei pagini web care utilizează stiluri dintr-o foaie externă, includeți eticheta: Înlocuiți mystyles.css cu numele de fișier al foii de stil. Atributele REL și TYPE trebuie să aibă aceleași valori ca în linia de mai sus - indică utilizarea unei foi de stil CSS. (Poate exista și alte tipuri de foi de stil în viitor.)
Utilizarea stilurilor pentru a forma text
Stilurile sunt, de asemenea, folosite pentru a formata bucăți individuale de text. În special, proprietățile de stil pot fi folosite pentru a formata un paragraf întreg sau doar câteva cuvinte. Aceasta pierde unul dintre cele mai importante avantaje ale foilor de stil, și anume capacitatea de a actualiza stilurile de text ale unui grup de pagini sau ale întregului site prin modificarea unui singur fișier. Cu toate acestea, stilurile de text (adică proprietățile de stil care sunt setate direct în textpagini), este convenabil de utilizat în cazurile în care doar un element trebuie formatat într-un mod special.
Pentru a defini stilul de formatare a textului, trebuie să adăugați eticheta care conține textul de formatat cu atributul style="properties". De exemplu, dacă un paragraf trebuie să fie cu tipul Arial mare în albastru, îl puteți formata astfel:
Eticheta este folosită pentru a formata textul dintr-un paragraf: