CSS okvir: Impromptu in učinek

Slogi kaskadiranja (CSS) za vse njene logične preprostosti omogočajo ne le ustvarjanje spektakularne rešitve za oblikovanje, temveč tudi zagotavljanje elementov z dejanskim delovanjem, da bi posnemali izvajanje dejanske kode.

Vsaka vizualna oznaka oznake HTML je pravokotno območje določene strukture in vsebine. Element vsebuje koordinate, velikosti, indente, barve, pisavo, njegove obrise itd. Okvir elementa CSS določa območje, ki ga zaseda, ki se nahaja od njegove meje navznoter do širine, navedene v opisu.

Opis Sintaksa

Področje postavitve elementa določajo koordinate glede na zgornji levi kot strani (levo, zgoraj), velikost vodoravne in navpične (širina, višina). Vsa zasnova in animacija elementa se izvajajo v parih: "lastnost: vrednost".

Opis se izvede neposredno v kodi strani, v slognem vložku ali v ločeni datoteki, ki jo povezuje s povezavo LINK. Sintaksa:

#name {property: vrednost-lastnost: vrednost-lastnost: vrednost- ...}

ali

.ime {lastnost: vrednost-lastnina: vrednost-lastnina: vrednost -...}

Ime je lahko tudi p, telo, html, tabela, td ..., to je ime oznake oznake HTML. Opisu sloga je dovoljeno neposredno povezati z elementom.

Preden ustvarite lastne različice pri pisanju slogov, ne bo bolelo, da bi videli, kako je bilo to storjeno na priljubljenih spletnih mestih, da shranite kodo strani ali pritisnete Ctrl-U, da si jo ogledate neposredno v brskalniku.

Osnovni parametri

Dejanski CSS okvir za element predstavlja slog (mejni slog), barva (barvna meja), širina (meja-širina). Vse lahko opišete z isto lastnostjo - mejo. Vsako okvirno okno je mogoče samostojno opisati (mejno, mejno spodaj, mejno levico, mejo desno).

Okvir CSS opisujejo splošna pravila kaskadnih listov slogov:

border: 3px;
barva meje: rdeča-
border-style: dvojno črtasto trdno pikčasto.

Ta opis določa širino okvirja do 3 pik, barva je rdeča, stranski slog: zgornja stran je dvojna, desna je črta, dno je trdno, levo pa pikčasto.

border-width: 1px 2px 4px 8px;
mejna barva: modro-
border-style: pikčasto.

Tukaj so dimenzije vsake strani prikazane tudi zaporedno, od zgoraj, v smeri urinega kazalca, barvno modro in slogu.

mejna barva: modra rdeča zelena črna;

v tem opisu je barva vsake strani posebej označena. Območje lahko vsebuje več parametrov hkrati, robovi pa se lahko zaokrožijo:

meja: 1px zelena trdna-
meja-polmer: 0px 4px 8px 12px;
-moz-border-radius: 0px 4px 8px 12px;
-webkit-meja-polmer: 0px 4px 8px 12px;

O tem, kako narediti okvir v CSS, je odvisno udobje obiskovalca, ker se navadno uporablja ta stilski učinek za tehnične namene: ko je pomembno natančno prikazati kraj ali velikost območja na strani.

Debelina okvirja in njen namen

Če izberete debelino okvira, lahko uporabite px, pt, em ..., vendar morate upoštevati, da je vedno znotraj območja elementa. Težko si je predstavljati, da ima okvir CSS namen projekta, vendar je tehnično zelo uporabno za označevanje elementov strani.

Če je okvir zaklenjen v glavnem razredu, to pomeni, da manjka, potem pa ga označite v pseudo-razredu: hover, lahko obiskovalcu prikažete element strani, ko je kurzor miške na njem, na primer izberite element menija. Včasih morate nekaj izbrati s klikom na sliko ali povlecite nekaj na nekoga. Zelo je priročno uporabiti pikčast okvir in ne spreminjati ozadja elementa ali njegove vsebine.

Nekatere aplikacije morajo izbrati območje strani ali izbrati elemente za kasnejšo obdelavo. V tem primeru lahko v trenutku klikom ustvarite div z okvirjem in dokler obiskovalec ne izpusti gumba miške, ga spremeni v velikost in vizualno prikaže rezultat izbora.

Zunaj predpisanega

Učenje CSS je zelo zanimivo, prav tako je pomembno preučiti kodne strani priljubljenih spletnih mest. Vendar lasten vir mora biti edinstven, mora imeti svoj obraz.

Okvir CSS, ki ga zagotavlja sintaksa, ne daje toliko raznolikosti kot lastna pobuda. Impromptu je odličen začetek in nič ne preprečuje, da razvijalec oblikuje svoj lastni okvir. Zlasti z vsemi dosežki internetnih tehnologij in zmožnostmi obstoječih standardov obstaja veliko obetavnih idej, ki temeljijo na resničnih napakah v obstoječi sintaksi, ki (po definiciji) je bila vedno dosledno formalna.

Zlasti če želimo ustvariti okvir teh ali drugih elementov, se zdi smiselno to narediti na celovit način. Z označevanjem strani in kotov določenega območja v ločenih oznakah lahko dosežete čudovite učinke. In z dodelitvijo ustreznih vodnikov lahko ustvarite dinamične elemente strani, spreminjate položaj, obliko in vsebino.