gtemata.com

Cum se creează o foaie de stil (CSS)

CSS (foaia de stil cascadă)

, în foi de stil italiene, ele reprezintă un sistem de codificare utilizat pentru a gestiona, într-un mod centralizat, diferite aspecte și funcții ale tuturor elementelor prezente pe un site web. De exemplu, efectuând o singură modificare a codului foii de stil pentru elementul care se potrivește cu fundalul, puteți schimba culoarea sau imaginea pe toate paginile web care alcătuiesc un site. Acest articol arată cum se creează un fișier CSS simplu pentru un site Web.

paşi

1
Porniți programul "Notepad" prezent în Microsoft Windows. Puteți face acest lucru prin intermediul meniului "Programe" Windows sau tastând cuvântul cheie "Notepad" în câmpul de căutare din meniu "start" apoi apăsați butonul "prezenta".
  • 2
    Din fereastra programului "Notepad" a apărut, accesați meniul "fișier" și alegeți opțiunea "Salvați ca".
  • 3
    În interiorul câmpului "Numele fișierului" în caseta de dialog care apare, tastați un nume pentru fișierul în cauză, care este simplu și scurt, apoi adăugați extensia ".css", alegeți formatul fișierului "Toate fișierele" și apăsați butonul "Salvați".
  • Numele fișierului dvs. CSS ar trebui să fie direct legat de site-ul web menționat de foaia de stil pe care o creați. De exemplu, dacă numele domeniului dvs. este "createcss.com", atribuiți numele "createcss.css" la fișierul CSS relevant.
  • 4
    Deschideți fișierul "index.html" a site-ului web folosind programul "Notepad".
  • 5
    Introduceți codul următor înainte de eticheta de închidere "/ cap": < link rel ="stylesheet" type ="text / css" href ="createcss.css" >.
  • Această linie de cod spune site-ul dvs. în care să găsiți definițiile foii de stil pe care să o utilizați.


  • 6
    În paginile HTML ale site-ului dvs., introduceți toate elementele necesare pentru realizarea designului pe care îl aveți în vedere, apoi utilizați foaia de stil asociată pentru a determina aspectul și stilul.
  • Elementele dintr-un fișier CSS descriu aspectul și stilul obiectelor, cum ar fi eticheta HTML < DIV > folosit pentru a crea o secțiune delimitată, eticheta < P > folosit pentru a crea un paragraf sau o etichetă < H1 > folosit pentru a identifica un titlu sau o rubrică mare.
  • În foaia de stil, puteți crea o definiție pentru a descrie aspectul oricărui element care apare pe paginile dvs. Web. De exemplu, stilul fontului și dimensiunea textului de utilizat pentru titlu și paragrafe, imaginea sau culoarea de utilizat pentru fundal și orice alt aspect al tot ceea ce este inclus în etichete
    .
  • 7
    În fișierul dvs. "createcss.css", introduceți lista tuturor elementelor CSS, urmând fiecare o pereche de bretele "{}".
  • Regulile dintr-o foaie de stil sunt toate caracterizate printr-o serie de "proprietate" urmată de valoarea sa. "proprietate" identificați aspectul elementului HTML relevant pe care doriți să-l modificați, cum ar fi culoarea de fundal. Valoarea relativă reprezintă o cantitate numerică sau numele entității care urmează să fie atribuită proprietății, în exemplul nostru numele sau numărul culorii de utilizat ca fundal. Sintaxa de utilizat pentru definiție este următoarea {property: value-}. Să vedem un exemplu concret:
  • De exemplu, dacă ați decis că fundalul tuturor paginilor de pe site-ul dvs. web ar trebui să fie albastru, trebuie să definiți următorul element "pagina {culoare-fundal: albastru-}".
  • 8
    Fiecare element din paginile HTML trebuie caracterizat prin a "ID-ul" sau "CLASA" Distins.
  • În foaia de stil, declarația unui atribut "ID-ul" trebuie să înceapă cu simbolul "#", în timp ce declarația unui atribut "CLASA" trebuie să înceapă cu simbolul ".".
  • Dacă doriți ca foaia paginilor dvs. web să arate diferit de restul paginii, creați elementul "#footer" în cadrul documentului HTML folosind următoarea sintaxă < div id ="subsol"> și introduceți codul la începutul secțiunii, apoi închideți zona în cauză utilizând eticheta de închidere corespunzătoare < / div >.
  • În fișierul dvs. CSS, "createcss.css", declară o regulă de stil legată de id "subsol" utilizând următoarea sintaxă "#FOOTER {font-size: x-small-}" (fără citate). În acest fel, tot textul introdus în secțiunea indicată cu id-ul "subsol" va fi afișat cu o dimensiune foarte mică a fontului.

    • Sfaturi

    • Folosind foile de stil poți gestiona multe aspecte și proprietăți ale paginilor tale web. Găsiți un design web satisfăcător și vizualizați codul sursă. Dacă se află în partea de sus a paginii, în interiorul etichetelor "HEAD", există un link către un fișier CSS, îl puteți selecta pentru a-și afișa conținutul și pentru a observa cum sunt gestionate diferitele proprietăți și cum sunt atribuite valorile elementelor asociate afișate.

    Avertismente

    • Copierea directă a fișelor HTML și a foilor de stil din alte surse vă poate ajuta să înțelegeți cum funcționează, dar, pe scurt, va trebui să utilizați codul pe care l-ați creat. Utilizarea realizărilor altora corespunde furtului și plagiatului.
    Distribuiți pe rețelele sociale:

    înrudit