Cum se creează css

O foaie de stil cascadă (CSS) este un sistem de codificare a site-ului web care permite designerilor să manipuleze mai multe caracteristici prin atribuirea anumitor elemente grupurilor. De exemplu, prin utilizarea unui cod pentru fundalul site-ului web, designerii pot schimba culoarea sau imaginea de fundal pe toate paginile site-ului web cu o singură modificare a fișierului CSS. Iată cum puteți crea CSS pentru un site web de bază.

Pași

Partea 1 din 4:
Scrierea inline CSS
  1. Imagine intitulată Creați CSS Pasul 1
1. Asigurați-vă că aveți o înțelegere de bază a etichetelor HTML. Ar trebui să știți cum funcționează etichetele și SRC și href atributes.
  • Imagine intitulată Creați CSS Pasul 2
    2. Aflați o parte din Proprietăți CSS de bază. Veți găsi că există foarte multe proprietăți. Cu toate acestea, nu este necesar să le învățați pe toți.
  • Unele proprietăți bune de bază CSS de știință sunt culoare și familie de fonturi.
  • Imagine intitulată Creați CSS Pasul 3
    3. Aflați despre valori pentru fiecare proprietate respectivă. Toate proprietățile au nevoie de o valoare. Pentru culoare proprietate, de exemplu, ați putea pune roșu valoare.
  • Imagine intitulată Creați CSS Pasul 4
    4. Aflați despre stil Atributul HTML. Se folosește într-un element cum ar fi href sau SRC. Pentru ao folosi, în ghilimele după semnul egal, puneți atributul CSS, un colon și apoi valoarea proprietății. Aceasta este cunoscută ca o regulă CSS.
  • Imagine intitulată Creați CSS Pasul 5
    5. Înțelegeți că Inline CSS nu este utilizat, de obicei, pentru site-uri web de către dezvoltatorii web profesioniști. Inline CSS poate adăuga o dezordine inutilă într-un document HTML. Cu toate acestea, este o modalitate excelentă de a fi introdus în modul în care funcționează CSS.
  • Partea 2 din 4:
    Scrierea CSS de bază
    1. Imagine intitulată Creați CSS Pasul 6
    1. Lansați programul dorit să utilizați. Ar trebui să vă permită să creați fișiere HTML și CSS.
    • Dacă nu aveți instalat un program special, puteți utiliza Notepad sau un alt editor de text. Salvați pur și simplu fișierul atât ca fișier text cât și un fișier CSS.
  • Imagine intitulată Creați CSS Pasul 7
    2. Deschideți fișierul HTML pentru site-ul dvs. Web. Ar trebui să deschideți acest lucru cu un editor HTML, dacă aveți unul instalat.
  • Editorii HTML vă permit să editați în același timp HTML și CSS.
  • Imagine intitulată Creați CSS Pasul 8
    3. Creați o etichetă în capul HTML. Acest lucru vă va permite să scrieți CSS fără a fi nevoie de un fișier separat.
  • Imagine intitulată Creați CSS Pasul 9
    4. Alegeți un element pe care doriți să îl adăugați și introduceți numele elementului urmat de un set de bretele curat ({ }). Pentru a face codul mai lizibil, puneți întotdeauna cea de-a doua brățară curly pe propria linie.
  • Imagine intitulată Creați CSS Pasul 10
    5. Între bretele, introduceți regulile CSS pe măsură ce ați folosi stil atribut. Fiecare linie trebuie sa Sfârșitul cu un punct și virgulă (-). Pentru a face codul lizibil, fiecare regulă ar trebui să înceapă pe propria linie și fiecare linie ar trebui să fie indentată.
  • Este foarte important să rețineți că acest stil va afecta toate Elemente ale tipului selectat pe pagină. Stilul mai specific va fi acoperit în următoarea secțiune.
  • Partea 3 din 4:
    CSS mai avansată
    1. Imagine intitulată Creați CSS Pasul 11
    1. Creați un fișier CSS, nu un fișier HTML și salvați-l folosind .css extensie. Deschideți și fișierul HTML.
  • Imagine intitulată Creați CSS Pasul 12
    2. Creeaza o Etichetă în capul dvs. HTML. Acest lucru vă va permite să conectați un fișier CSS separat în documentul HTML. Eticheta dvs. de legătură are nevoie de trei atribute: relații, tip, și href.
  • relații mijloace "relaţie" și spune browserului ce este relația la documentul HTML. Aici ar trebui să aibă o valoare "Stylesheet".
  • tip spune ce tip de mass-media este legat de. Aici ar trebui să aibă o valoare "Text / css"
  • href aici este folosit în mod similar cu modul în care este folosit într-un element, dar aici trebuie să se conecteze la un fișier CSS. Dacă fișierul CSS este amplasat în același folder ca și fișierul HTML, numai numele fișierului trebuie să fie scris în mărcile de cotare.
  • Imagine intitulată Creați CSS Pasul 13
    3. Selectați elemente de diferite tipuri pe care doriți să le adăugați același stil. Adauga o clasă Atribuiți aceste elemente și le-a stabilit egal cu un nume de clasă la alegere. Acest lucru vă va da elementele aceleași stiluri.
  • Imagine intitulată Creați CSS Pasul 14
    4. Atribuiți ce stil o clasă va primi o clasă. Introduceți numele clasei în fișierul CSS cu o perioadă (.) precedent (i.E. .clasă).
  • Imagine intitulată Creați CSS Pasul 15
    5. Selectați elementele unice pe care doriți să le adăugați și adăugați un stil special ID atribut. ID-urile sunt create în CSS folosind un simbol de lire (#) mai degrabă decât o perioadă.
  • ID-urile sunt mai specifice decât clasele, astfel încât un ID va suprascrie orice stil de clasă dacă are un atribut cu o valoare diferită de clasă.
  • Partea 4 din 4:
    Învățarea mai mult
    1. Imagine intitulată Creați CSS Pasul 16
    1
    Vizitați școlile W3. Este un site oficial care vizează predarea abilităților de dezvoltare web. W3 are o mulțime de referințe listate pentru HTML și CSS, precum și alte limbi web.
  • Imagine intitulată Creați CSS Pasul 17
    2. Găsiți alte site-uri care vizează în mod specific învățarea și predarea HTML și CSS. Site-uri ca CSS trucuri.COM În mod specific, vizează predarea abilităților CSS și de proiectare web. Găsirea surselor de reputație vă va ajuta în călătoria dvs. de învățare.
  • Imagine intitulată Creați CSS Pasul 18
    3. Contactați-vă cu designerii web și dezvoltatorii. Experiența și know-how-ul lor vă pot învăța cunoștințe și abilități valoroase.
  • Imagine intitulată Creați CSS Pasul 19
    4. Vizualizați codul sursă al site-urilor pe care le întâlniți. Vizualizarea CSS de site-uri web bine dezvoltate vă poate arăta modalități de a proiecta părți ale site-urilor web. Copierea acestuia ca practică și Fiddling cu codul vă poate ajuta să învățați cum să utilizați diferite atribute CSS.
  • Video

    Prin utilizarea acestui serviciu, unele informații pot fi împărtășite cu YouTube.

    sfaturi

    Există multe proprietăți diferite pe care le puteți manipula cu CSS. Găsiți un site web cu un stil vă place și vizualizați fișierul sursă. Dacă există un nume de fișier CSS legat în partea de sus în interiorul etichetelor capului, puteți face clic pe acesta pentru a vedea diferitele proprietăți și valori atribuite elementelor.

    Avertizări

    Copierea directă a codului HTML și CSS vă pot ajuta să învățați, dar trebuie să utilizați propriile idei de design. Luarea designului altcuiva este furtul și plagiatul.
    Partajați pe rețeaua socială:
    Similar