CSS

CSS je pripomoček, s katerim urejamo HTML dokument, in skrbi za prezentacijo spletnih strani. Z njim definiramo slog HTML strani. Določimo lahko barve, velikosti, odmike, poravnave, obrobe, pozicije in ogromno drugih stvari. Pravila so sestavljena iz izbirnika (ang. Selector), in označevanja bloka.

CSS

Zbirnik kaže na HTML element, ki ga želimo oblikovati, oblikovalski blok pa vsebuje izjave ločene s podpičji. Vsaka izjava vključuje CSS lastnosti in vrednosti, ločenih s podpičjem, medtem ko se izjava konča s podpičjem, se bloki končajo z zavitimi oklepaji. Zbirniki (ang. Selectors) se uporabljajo za 'iskanje' HTML elementov, ki jih želimo preoblikovati, in jih delimo v pet kategorij.

Kaj je CSS?

CSS se uporablja za definiranje oblike, naše spletne strani, vključno z zasnovo, postavitvijo in spremembami zaslona, na različnih napravah. To so mobilni aparati, tablice, prenosniki. CSS je rešil velik problem pri oblikovanju, in izdelavi spletnih strani. HTML sam nikoli ni bil namenjen oblikovanju spletne strani. Problem za spletne razvijalce je prišel ob specifikaciji HTML 3.2, ko so prišle oznake (tags), kot so pisave, in barve. Ker je bilo delo v HTML izredno zamudno, je W3C (World Wide Web Consortium) ustvaril CSS.

Izbirniki

Izbirnik kaže na HTML element, ki ga želimo oblikovati, oblikovalski blok pa vsebuje izjave ločene s podpičji. Vsaka izjava vključuje CSS lastnosti in vrednosti, ločenih s podpičjem. Medtem ko se izjava konča s podpičjem, se bloki končajo z zavitimi oklepaji. Izbirniki se uporabljajo za "iskanje" HTML elementov, ki jih želimo preoblikovati, in jih delimo v pet kategorij.

Izbirniki
IZBIRNIK OPIS
Simple selector izbere element gleda na ime, id...
Combinator selector izbere elemente na podlagi razmerja med njimi
Pseudo-razredi izbere elemente na podlagi določenega stanja
Pseudo-elementi izbere element in del elementa preoblikujemo
Attribute selector izbere element na podlagi atributa ali njegove vrednosti

Oblikovanje spletne strani

Kadarkoli brskalnik prebere CSS vstavek, bo oblikoval HTML dokument v skladu s podatki zapisanih v tej obliki. Poznamo tri oblikovne vrste, ki so napisane v spodnji tabeli.

Oblikovanje spletne strani
Zunanji CSS

Celotni videz spletne strani lahko spremenimo z External CSS, tako da spremenimo samo eno datoteko. Vsaka HTML stran mora vsebovati sklic na zunanjo stilsko datoteko, ki se nahaja znotraj elementa <link>. Če delamo samo na eni spletni strani, lahko uporabimo Internal CSS, ki je določen znotraj stilskega atributa, prav tako tudi <heading>. Za Inline obliko se uporabi, kar notranji slog, in če želimo uporabljati vgrajeni CSS, dodamo stilski atribut ustreznemu elementu. Stilski atribut lahko vsebuje katerokoli CSS lastnost.

Kar se tiče zunanjega (ang. External CSS) css-a, moramo napisati css datoteko v beležnici. Ni potrebno dodajati atributa <style>, samo napišemo celoten css, shranimo pod .css, in ga nato naložimo na naš strežnik. Povezavo, ki jo dobimo iz strežnika, samo prilepimo v <link>. Če želimo dodati samo ime zunanje css datoteke, kot to prikazuje primer, moramo css datoteko kopirati v isto mapo kjer se nahaja index.

External CSS 1
External CSS 2

Stvar deluje zelo dobro, in če delamo na več straneh, je ta rešitev idealna.

Notranji CSS

Za notranjo (ang. Internal) obliko moramo iti takoj pod </head>, kamor vpišemo <style> in nato dodamo stilsko obliko po naših željah, na koncu moramo obliko zapreti s </style>.

Vse kar je napisano v <style> se bo spremenilo, torej vsi <h4> in vsi <p> elementi bodo spremenjeni.

Vgrajeni CSS

Vgrajeni (ang. Inline) CSS vpišemo v element sam. Jaz sem napisal obliko za element <kbd>, lahko je to <div>, <p>, itd. kamorkoli želimo, seveda, če želimo uporabiti enako obliko v več elementih, potem uporabimo zunanji ali notranji CSS.

Tukaj sta potem še Multiple Style Sheets in Cascading order, ki spadata pod Inline CSS. S tem dvema slogoma se vgrajeni CSS približa zunanjemu. Deluje tako, da enako kot pri zunanjemu videzu napišemo obliko v beležnico, jo shranimo pod .css, in damo na strežnik. Potem samo uporabimo <link>. Dodajam še delo s CSS v VisualStudi Code.

VisualStudio Code - CSS