Što su HTML stilovi?
Tablica HTML Cascading Style Sheet je list s skupom pravila i svojstava koji govore pregledniku kako dočarati HTML koristeći sve navedene stilove.
CSS je način na koji stiliziramo bilo koju web stranicu. CSS ima sva svojstva poput pozadine, boja, fontova, razmaka, obruba itd. Koje možemo definirati za svaki element na stranicama.
HTML stilovi tablica također se koriste za postavljanje izgleda stranice, na primjer na mjestu na kojem se na zaglavlju trebaju postaviti zaglavlja, podnožja ili bilo koji drugi elementi. CSS se uvijek govori zajedno s HTML-om, jer su stranice bez ikakvog stiliziranja vrlo blijede, bez isticanja naslova itd. I iste veličine fonta po cijeloj stranici što korisnicima ne daje dobar pregled.
Kako koristiti HTML tablice stilova?
U prošlosti su stilovi, skripte, HTML sve pisali na istoj stranici. To je učinilo stranice izuzetno dužim i izuzetno teškim za čitanje i uređivanje. Zatim je došao način za odvajanje HTML-a, stilova i Javascripta.
Načini za uključivanje tablica HTML stila na web stranicu:
Postoje 3 načina na koje možemo uključiti stilove:
-
Inline styling
Ovo je način pisanja stilova za svaki element unutar samog HTML-a unutar atributa koji se zove stil.
Ovakav način stiliziranja se uopće ne preporučuje jer HTML izgleda zbijeno i ne možemo slijediti pristup „Napiši jednom, koristi na mnogim mjestima“
Eg: Hello World!
-
Unutarnji styling
Ovo uključuje uključivanje stilova u oznaku stila i postavljanje unutar web stranice na vrh HTML-a. Ovakav način stiliranja je i dalje bolji od ugrađenog stiliranja, jer možemo imati zajedničke stilove u obliku klupica u slučaju da se moraju koristiti za više elemenata odjednom.
U fazi razvoja lakše je uređivati HTML datoteku i ne trebamo svaki put otvoriti odgovarajuću CSS datoteku i uređivati je.
Eg:
container-block(
font-size: 10px;
margin-top: 10px;
)
Hello World!
-
Vanjski stil
Ovo je najčešći i najbolji način stvaranja stilova za web stranicu. To je slično unutarnjem stylingu, ali razlika je u tome što su stilovi zapisani u zasebnoj datoteci s ekstenzijom .css i referenca na nju stavljena je u glavnu oznaku web stranice.
Sintaksa za povezivanje CSS datoteke na web stranici je:
Stilovi trebaju biti uključeni u glavnu oznaku koja je iznad oznake tijela (tj. Stvarnog sadržaja) HTML-a
Koji je prioritet između unutarnjeg, unutarnjeg i vanjskog stila?
Inline stilovi uzimaju više prioriteta od unutarnjih, a onda im je zadnji prioritet za vanjski stil.
Inline> Interna> Vanjski
Najbolji primjeri iz prakse za upotrebu CSS-a:
- CSS se može odvojiti u više datoteka umjesto samo jedne.
- Odvojene CSS datoteke mogu se dodavati jedna po jedna u zaglavlju pomoću oznaka veza.
- Ili jedna CSS datoteka može imati više izjava o uvozu za uvoz ostatka CSS datoteka. To će logički razdvojiti CSS, ali na kraju će se svi stilovi prikazati iz iste datoteke.
Upotreba: @import './process.css';
- Stilovi se mogu definirati za bilo koje elemente web stranice s odabirom kao HTML oznaka, nazivi klasa, ID-ovi, bilo koja imena atributa.
- Dostupni su neki pseudo selektori poput:
- prije
- nakon
- n-ti-dijete
- prvo dijete
- zadnje dijete
- lebdjeti
- posjetila
To su u osnovi stanja odabranih elemenata, a zapravo nisu točni elementi.
- Kad se na stranicu uključe umnožene CSS datoteke, posljednja ima najveći prioritet i nadjačava postojeće stilove prethodnih datoteka s istim odabirom.
- Tablice stila trebaju se koristiti prije samog HTML-a kako bi se stilovi primjenjivali dok se stranica učitava. Ako se uključi na kraju, HTML se prvo učitava, a zatim se polako primjenjuju stilovi što korisniku pruža vrlo loše iskustvo.
Razne značajke HTML kaskadnih tablica stilova:
- CSS pruža animacije : Prije toga, JavaScript se koristio samo za animacije. Ali najnoviji CSS tj. CSS3 pruža animacije koristeći svojstva sama.
- Prefiksi dobavljača: Prije nego što preglednici izdaju standardnu verziju / naziv svojstva za bilo koje nove značajke, preglednici će nam tijekom eksperimenta pružati neke prefikse dobavljača neko vrijeme, kao eksperiment. Programeri moraju pričekati dok preglednik ne objavi njegove standardne verzije, a u međuvremenu se eksperimentalne značajke mogu koristiti s dobavljačkim prefiksima.
- CSS Transforms: Prijelaz se koristi za progresivno prelazak jedne vrijednosti iz drugog svojstva u određenom trajanju.
Eg: -webkit-transition: width 2s, height 4s;
- CSS Transforms: Transformacije u CSS-u omogućuju vam prevođenje, rotiranje, razmjera i izoliranje elemenata.
Upiti za medije:
Mobilni uređaji, stolovi i iPadi ponašaju se drugačije, međutim, stranice ne možemo oblikovati na isti način. Prethodni web standardi dizajnirani su na takav način da smo imali različit CSS za svaku vrstu uređaja.
S napretkom web standarda i načinom na koji se gradi web, preglednici su razvijeni tako da imaju jedan CSS koji se može koristiti za bilo koju vrstu uređaja. Za promjenu stilova uređaja na temelju širine i visine koriste se medijski upiti pomoću kojih možemo odrediti minimalnu ili maksimalnu širinu uređaja i stilove pisanja unutar njega.
Eg: @media screen and (max-width: 767px)(
container(
width: 60%;
padding: 20px;
)
)
Stilovi su definitivno blagodat za web. A kako se web razvoj u posljednje vrijeme eksponencijalno povećao, CSS3 je definitivno poprimio veliku potražnju kako bi stranice postale izuzetno interaktivne i intuitivne.
Preporučeni članci
Ovo je vodič za HTML tablice stilova. Ovdje smo raspravljali o tome kako koristiti tablice stilova HTML, razne značajke i načine uključivanja CSS-a na web stranicu. Možete pogledati i sljedeće članke da biste saznali više -
- Uvod u CSS
- Prednosti CSS-a u web dizajnu
- Što je CSS? | Kako koristiti?
- Je li CSS slučaj osjetljiv?
- Različiti stilovi popisa HTML-a
