O foaie de stil în cascadă (CSS) este un sistem de codificare a site-ului web care permite proiectanților să manipuleze mai multe caracteristici simultan prin atribuirea anumitor elemente grupurilor. De exemplu, utilizând un cod pentru fundalul site-ului web, proiectanții pot schimba culoarea de fundal sau imaginea de pe toate paginile site-ului web cu o singură modificare a fișierului CSS. Iată cum să creați CSS pentru un site de bază.
Pași
Partea 1 din 4: Scrierea CSS Inline
Pasul 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
atribute.
Pasul 2. Aflați câteva dintre proprietățile CSS de bază
Veți descoperi că există foarte multe proprietăți. Cu toate acestea, nu este necesar să le învățați pe toate.
-
Unele proprietăți CSS de bază bune de știut sunt
culoare
și
familie de fonturi
- .
Pasul 3. Aflați despre valorile pentru fiecare proprietate respectivă
Toate proprietățile au nevoie de o valoare. Pentru
culoare
proprietate, de exemplu, puteți pune
roșu
valoare.
Pasul 4. Aflați mai multe despre
stil
Atribut HTML.
Este folosit în cadrul unui element ca
href
sau
src
. Pentru a-l utiliza, în ghilimele după semnul egal, puneți atributul CSS, două puncte și apoi valoarea proprietății. Aceasta este cunoscută ca o regulă CSS.
Pasul 5. Înțelegeți că CSS inline nu este de obicei folosit pentru site-uri web de către dezvoltatorii web profesioniști
CSS în linie poate adăuga dezordine inutile unui document HTML. Cu toate acestea, este o modalitate excelentă de a vă prezenta modul în care funcționează CSS.
Partea 2 din 4: Scrierea CSS de bază
Pasul 1. Lansați programul pe care doriți să îl 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. Pur și simplu salvați fișierul atât ca fișier text, cât și ca fișier CSS
Pasul 2. Deschideți fișierul HTML pentru site-ul dvs. web
Ar trebui să deschideți acest lucru și cu un editor HTML, dacă aveți unul instalat.
Editorii HTML vă permit să editați HTML și CSS în același timp
Pasul 3. Creați o etichetă în capul dvs. HTML
Acest lucru vă va permite să scrieți CSS fără a fi nevoie de un fișier separat.
Pasul 4. Alegeți un element la care doriți să adăugați stilul și tastați numele elementului urmat de un set de acolade ({})
Pentru a face codul mai lizibil, puneți întotdeauna a doua acoladă pe propria linie.
Pasul 5. Între paranteze, tastați regulile CSS așa cum ați utiliza cu
stil
atribut.
Fiecare linie trebuie să se încheie cu un punct și virgulă (;). Pentru a vă 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 elementele tipului selectat de pe pagină. Stilul mai specific va fi acoperit în secțiunea următoare
Partea 3 din 4: CSS mai avansat
Pasul 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.
Pasul 2. Creați o etichetă în capul HTML
Acest lucru vă va permite să legați un fișier CSS separat la documentul dvs. HTML. Eticheta de link are nevoie de trei atribute:
rel
tip
și
href
-
rel
înseamnă „relație” și îi spune browserului care este relația cu documentul HTML. Aici ar trebui să aibă o valoare de
„foaie de stil”
- .
-
tip
spune cu ce tip de suport media este conectat. Aici ar trebui să aibă o valoare de
„text / css”
-
href
- aici este folosit în mod similar cu modul în care este utilizat într-un element, dar aici trebuie să facă legătura cu un fișier CSS. Dacă fișierul CSS se află în același folder cu fișierul HTML, numai numele fișierului trebuie să fie scris între ghilimele.
Pasul 3. Selectați elemente de diferite tipuri la care doriți să adăugați același stil
Adauga o
clasă
atribuiți acestor elemente și setați-le egale cu numele clasei la alegere. Acest lucru va oferi elementelor tale același stil.
Pasul 4. Alocați ce stil va primi o clasă
Tastați numele clasei în fișierul dvs. CSS cu o punctă (.) Care o precedă (adică
.clasă
).
Pasul 5. Selectați elemente individuale la care doriți să adăugați un stil special și adăugați un
id
atribut.
ID-urile sunt create în CSS folosind mai degrabă un simbol lire (#) decât o perioadă.
ID-urile sunt mai specifice decât clasele, deci un id va înlocui orice stil de clasă dacă are un atribut cu o valoare diferită de clasă
Partea 4 din 4: Aflați mai multe
Pasul 1. Vizitați școlile w3
Este un site oficial care are ca scop predarea abilităților de dezvoltare web. W3 are o mulțime de referințe listate pentru HTML și CSS, precum și alte limbi web.
Pasul 2. Găsiți alte site-uri special destinate învățării și predării HTML și CSS
Site-uri precum CSS tricks.com vizează în mod special predarea abilităților CSS și de web design. Găsirea unor surse de încredere vă va ajuta în călătoria dvs. de învățare.
Pasul 3. Luați legătura cu proiectanții și dezvoltatorii web
Experiența și know-how-ul lor vă pot învăța cunoștințe și abilități valoroase.
Pasul 4. Vizualizați codul sursă al site-urilor web pe care le întâlniți
Vizualizarea CSS a site-urilor web bine dezvoltate vă poate arăta modalități de a proiecta părți ale site-urilor web. Copierea acestuia ca practică și jocul cu codul vă pot ajuta să învățați cum să utilizați diferite atribute CSS.
