gtemata.com

Cum se utilizează un fișier CSS în HTML

Limba de marcare HyperText, mai bine cunoscut sub numele de HTML, definește standardul cu care informațiile conținute într-o pagină web sunt formatate și formatate. Foi de stil cascadă, mai bine cunoscut sub numele de CSS, este o limbă utilizată pentru a defini aspectul și stilul grafic al fiecărui element care formează o pagină Web. Un fișier CSS poate fi combinat cu un fișier HTML atât ca foaie de stil extern, cât și ca foaie de stil internă. În primul caz, codul CSS va fi stocat într-un fișier separat de codul HTML, în timp ce în al doilea caz acestea vor coexista în același fișier. Continuați să citiți pentru a afla cum să utilizați un fișier CSS în HTML pentru a personaliza designul unui site web.

paşi

Metoda 1
Utilizați un fișier extern CSS

Imaginea intitulată Adăugați un fișier CSS la HTML Pasul 1
1
Creați un fișier CSS. Deschideți un nou fișier text gol, introduceți codul CSS și salvați-l cu extensia ".css".
  • Imaginea intitulată Adăugați un fișier CSS la HTML Pasul 2
    2
    În acest moment, încărcați fișierul CSS pe site-ul web cu care doriți să îl potriviți.
  • Imagine intitulată Adăugați un fișier CSS în HTML Pasul 3
    3
    Copiați adresa URL a fișierului CSS. Adresa lui ar trebui să arate similară sito_web.com/rome_file_CSS.css.
  • Este o idee bună să ștergeți numele domeniului primar de la adresa URL. De exemplu, adresa pentru a se referi la următorul fișier CSS https://mio_sito_web.com/css/default.css ar trebui să fie pur și simplu "/css/default.css". Trebuie inclusă prima bară ("/") deoarece adresa URL funcționează. Acest tip de adresă este numit în jargon "relativă".
  • Imaginea intitulată Adăugați un fișier CSS în HTML Pasul 4
    4
    Adăugați linkul obținut în fișierul HTML. Găsiți eticheta în fișierul HTML în curs de examinare, apoi creați o nouă linie de text exact sub etichetă și inserați codul . În acest moment, editați URL-ul prezent în atribut "href =" cu cel legat de fișierul CSS pe care doriți să îl utilizați.
  • Imaginea intitulată Adăugați un fișier CSS la HTML Pasul 5
    5
    Salvați fișierul HTML și publicați-l pe site-ul web la care se referă.
  • Imaginea intitulată Adăugați un fișier CSS în HTML Pasul 6
    6
    Verificați dacă toate elementele care alcătuiesc site-ul dvs. au aspectul și stilul pe care ar trebui să le aibă. Dacă ceva nu funcționează, va trebui să faceți toate modificările necesare în fișierul CSS pentru a rezolva problema.


    • Metoda 2
    Utilizați un fișier CSS intern

    1
    Creați eticheta în fișierul HTML. Inserați-l după etichetă creând o nouă linie de text în care va fi introdus următorul cod:
    Imagine intitulată Adăugați un fișier CSS în HTML Pasul 7
    Imaginea intitulată Adăugați un fișier CSS în HTML Pasul 8
    1
    Adăugați tot codul CSS necesar pentru a formata aspectul grafic al site-ului în etichete doar creat.
  • Imaginea intitulată Adăugați un fișier CSS în HTML Pasul 9
    2
    Salvați fișierul HTML cu extensia ".html".
  • Imaginea intitulată Adăugați un fișier CSS în HTML Pasul 10
    3
    Verificați dacă toate elementele care alcătuiesc site-ul dvs. au aspectul și stilul pe care ar trebui să le aibă. În caz contrar, efectuați toate modificările necesare în fișierul CSS pentru a rezolva problema.

    • Sfaturi

    • Verificați întotdeauna aspectul site-ului pe care îl lucrați pe acesta folosind browsere de internet și diferite platforme hardware. Unele browsere interpretează codul CSS ușor diferit, iar acest lucru se întâmplă și între diferite versiuni (pentru Mac și pentru Windows) ale aceluiași browser. În cazul în care efectuarea acestui test site-ul arată vizual diferit atunci când vă schimbați browser-ul, mai ales în cazul elementelor grafice specifice, cum ar fi distanța dintre liste, problema este de a fi găsită în (relativă) de setări implicite de configurație din browser (ar elimina). Creați sau descărcați un Master CSS pentru a fi inserat în partea de sus a foii de stil CSS pe care o veți utiliza, astfel încât setările implicite ale browserului de internet să fie ignorate în favoarea celor create.
    • Dacă este posibil, utilizați un CSS extern. În acest fel, puteți modifica (schimba?) Stilul și aspectul site-ului modificând numai codul de fișier CSS, în loc să modificați codul CSS în interiorul fiecărei pagini care îl compune.
    • Dacă site-ul pe care lucrați este insensibil la modificările aduse fișierului CSS, verificați cu atenție codul pe care l-ați creat pentru a vă asigura că nu ați uitat detaliile importante. Acordați o atenție deosebită punctului vestic ("-") și bretele de închidere ("}"). Acestea sunt elemente fundamentale pe care este foarte ușor să le uitați să le inserați în CSS.
    • Dacă salvați un fișier HTML local pe computer, îl veți putea deschide direct în browserul dvs., astfel încât să puteți verifica aspectul și stilul grafic înainte de al publica online. Pentru a face acest lucru, fișierul CSS trebuie inserat în fișierul HTML pentru a vă asigura că regulile acestuia sunt utilizate corect.
    • Atunci când codul unui fișier CSS are contradicții interne, de exemplu, în cazul în care este indicat în două puncte diferite, culoarea care urmează să fie luate cu textul (albastru în primul rând, apoi roșu), amintiți-vă că condiția care va fi aplicată va fi întotdeauna ultima. De asemenea, continuând cu exemplul anterior, dacă prima instrucțiune este în interiorul unui fișier extern CSS, în timp ce al doilea este într-un fișier CSS intern, al doilea va fi întotdeauna aplicat.

    Avertismente

    • Nu utilizați codul CSS "on-line", adică inclusă direct în etichetele HTML. De exemplu, codul "align = `centru`" reprezintă o modalitate de a utiliza CSS online. Acesta este un stil datat și incorect de programare, ceea ce face foarte dificilă modificarea și corectarea ulterioară, de exemplu atunci când aveți nevoie să actualizați un site existent și poate să fiți creat de alte persoane.
    Distribuiți pe rețelele sociale:

    înrudit