Cum se introduce un fișier CSS în HTML

Autor: Eric Farmer
Data Creației: 3 Martie 2021
Data Actualizării: 1 Iulie 2024
Anonim
Easy Fullscreen Landing Page With HTML & CSS
Video: Easy Fullscreen Landing Page With HTML & CSS

Conţinut

Hypertext Markup Language (HTML) determină ce elemente sunt prezente pe o pagină web. Limbajul de programare Cascading Style Sheets (CSS) descrie cum ar trebui să arate aceste elemente.Fișierul CSS poate fi adăugat la HTML ca fișier extern (CSS este adăugat ca fișier separat) sau intern (CSS este inclus în fișierul HTML). Aflați cum să încorporați CSS într-un fișier HTML pentru a vă reproiecta site-ul.

Pași

Metoda 1 din 2: Cum se configurează o foaie de stil externă

  1. 1 Creați un fișier CSS. Pregătiți și salvați un fișier CSS cu extensia „.css”.
  2. 2 Încărcați fișierul CSS pe site-ul dvs.
  3. 3 Copiați adresa (URL) fișierului CSS. Adresa site-ului va arăta cam așa: www.yoursite.com/stylesheet.css.
    • Este o practică bună să eliminați numele de domeniu principal de pe adresa URL. Pe baza acestui fapt, adresa http: //myisite.com/css/default.css va fi scurtată la „/css/default.css”. Nu uitați să includeți slash-ul principal ("/"). Se numește o cale relativă.
  4. 4 Introduceți linkul în fișier. Găsiți eticheta / head> în fișierul HTML și creați o linie goală chiar deasupra acestuia. Lipiți în acea linie LINK rel = stylesheet type = "text / css" href = "www.your_site.com / stylesheet.css">, înlocuind "www.your ..." cu un link în fișierul CSS.
  5. 5 Salvați fișierul HTML și încărcați-l pe site.
  6. 6 Asigurați-vă că totul de pe site arată așa cum ar trebui. În caz contrar, redeschideți fișierul HTML, căutați erori și efectuați modificări.

Metoda 2 din 2: Cum se introduce o foaie de stil internă

  1. 1 Creați un stil de etichetă>. Deschideți fișierul HTML și găsiți eticheta / head>. Adăugați câteva linii goale deasupra acestuia și introduceți următoarele:

STIL tip = "text / css"> / STIL>

  1. 1 Inserați toate CSS-urile între aceste două etichete.
  2. 2 Salvați fișierul HTML (cu extensia .html).
  3. 3 Asigurați-vă că totul de pe site arată așa cum ar trebui. În caz contrar, efectuați modificările dorite.

sfaturi

  • Verificați întotdeauna aspectul site-ului în diferite browsere și pe diferite sisteme de operare. Unele browsere se conectează la CSS în moduri ușor diferite. Se poate întâmpla chiar și în același browser, dar pe versiuni diferite de Mac și Windows. Dacă site-ul dvs. arată diferit într-un alt browser (de exemplu, distanța dintre unele obiecte, cum ar fi listele, are o dimensiune diferită), atunci problema este setările browserului respectiv. Găsiți foaia de stil principală și lipiți-o în partea de sus a fișierului CSS pentru a modifica setările implicite ale browserului. Acest lucru se face astfel încât setările dvs. să nu schimbe nimic în browserul propriu-zis.
  • Dacă puteți, introduceți o foaie de stil externă. Acest lucru vă va permite să schimbați aspectul site-ului modificând codul din fișierul sursă. În acest fel, nu trebuie să schimbați CSS pe fiecare pagină a site-ului dvs.
  • Dacă site-ul dvs. nu răspunde la CSS așa cum vă așteptați, verificați din nou întreaga codificare pentru a vă asigura că este scris corect. În special, acordați o atenție specială punctelor și virgulelor (";") și parantezelor de închidere ("}"). Este destul de ușor să omiți unul dintre aceste caractere într-un fișier CSS.
  • Salvați fișierul HTML pe computer, astfel încât să îl puteți deschide ulterior în diferite browsere web și să verificați dublu aspectul acestuia înainte de al descărca în continuare. Dar, pentru a-l încărca, fișierul CSS trebuie inserat în HTML ca o foaie de stil externă.
  • Dacă foaia de stil se contrazice - de exemplu, spune mai întâi că textul va fi albastru și apoi că va fi roșu - ultima condiție va fi întotdeauna îndeplinită. Dacă o comandă este o foaie de stil externă și cealaltă este o foaie de stil internă, foaia de stil intern va fi activă.

Avertizări

  • Nu utilizați CSS de etapizare „deschis”, adică CSS care este inclus în eticheta HTML. (Exemplu: „align = 'center'” este o setare CSS deschisă). Aceasta este o opțiune depășită, cu o sintaxă slabă. Dacă după un timp trebuie să actualizați site-ul, această setare va fi dificil de modificat.