Preglednice HTML sloga - Funkcije in načini za vključitev CSS na spletno stran

Kazalo:

Anonim

Kaj so tabele v stilu HTML?

Cascading Style Sheet HTML je list z naborom pravil in lastnosti, ki brskalniku pove, kako lahko upodobi HTML z vsemi določenimi slogi.

CSS je način, s katerim oblikujemo poljubne spletne strani. CSS ima vse lastnosti, kot so ozadje, barve, pisave, razmiki, obrobe itd., Ki jih lahko določimo za vsak element na straneh.

Tabele s slogom HTML se uporabljajo tudi za nastavitev postavitve strani, na primer, kam naj se na strani postavijo glava, podnožja ali drugi elementi. O CSS-ju se vedno govori skupaj s HTML-om, saj so strani brez kakršnega koli oblikovanja zelo blede, brez poudarjanja naslovov itd. In enake velikosti pisave po celotni strani, kar uporabnikom ne daje dobrega pogleda.

Kako uporabljati tabele HTML slog?

V preteklosti so bili slogi, skripti, HTML vse napisani na isti strani. Zaradi tega so bile strani izjemno dolge in izjemno težko brati in urejati. Nato je prišla pot do ločevanja HTML-ja, slogov in Javascripta.

Načini za vključitev tabel HTML s slogom na spletno stran:

Na tri načine lahko vključimo sloge:

  1. Inline Styling

To je način pisanja slogov za vsak element znotraj HTML-ja znotraj atributa, imenovanega slog.

Ta način oblikovanja sploh ni priporočljiv, saj je HTML videti zamašen in ne moremo slediti pristopu "Enkrat piši, uporabljaj na več mestih"

Eg: Hello World!

Eg: Hello World!

  1. Notranji styling

To vključuje sloge, ki so vključeni v oznako sloga, in umestitev na spletno stran na vrhu HTML-ja. Ta način oblikovanja je še vedno boljši od vgrajenega stiliranja, saj lahko imamo skupne sloge, pritrjene v skupino, v primeru, da ga je treba uporabiti za več elementov hkrati.

Na razvojni stopnji je lažje urejati datoteko HTML in ne potrebujemo vsakič, ko odpremo ustrezno datoteko CSS in uredimo.

Eg:

container-block(
font-size: 10px;
margin-top: 10px;
)

Hello World!

  1. Zunanji stil

To je najpogostejši in najboljši način oblikovanja slogov za spletno stran. To je podobno notranjemu stylingu, razlika pa je v tem, da so slogi zapisani v ločeni datoteki z razširitvijo .css in sklicevanje nanjo je postavljeno v glavno oznako spletne strani.

Sintaksa za povezavo datoteke CSS na spletni strani je:

Sloge je treba vključiti v glavno oznako, ki je nad oznako telesa (tj dejanske vsebine) HTML-ja

Kakšna je prednost med linijskim, notranjim in zunanjim stilom?

Vrtni slogi imajo večjo prednost kot notranji in nato zadnja prednostna naloga je zunanja oblika.

Inline> Internal> Zunanja

Najboljše prakse pri uporabi CSS:

  • CSS lahko ločite na več datotek namesto samo na eno.
  • Ločene datoteke CSS lahko v glavno oznako vključite eno za drugo z uporabo oznak povezav.
  • Ali lahko ena datoteka CSS vsebuje več stavkov uvoza za uvoz preostalih datotek CSS. To bo logično ločilo CSS, vendar bodo na koncu vsi stili upodobljeni iz iste datoteke.

Uporaba: @import './process.css';

  • Sloge lahko določite za vse elemente spletne strani z izbirniki kot HTML oznako, imena razredov, ID-jev, poljubna imena atributov.
  • Na voljo je nekaj psevdo izbirnikov, kot so:
    • prej
    • po
    • nth-otrok
    • prvorojenca
    • zadnji otrok
    • lebdenje
    • obiskali

To so v osnovi stanja izbranih elementov in v resnici ne natančni elementi.

  • Ko so na strani vključene pomnožene datoteke CSS, zadnja ima največjo prednost in preglasi obstoječe sloge prejšnjih datotek z istim izbirnikom.
  • Pred samim HTML-jem je treba uporabiti stilske liste, tako da se stili uporabljajo med nalaganjem strani. Če je na koncu vključen, se HTML najprej naloži, nato pa počasi začnejo uporabljati sloge, kar uporabniku daje zelo slabo izkušnjo.

Različne funkcije kaskadnih tabel HTML:

  • CSS ponuja animacije : prej je bil JavaScript uporabljen samo za animacije. Toda najnovejši CSS, tj. CSS3, ponuja animacije z uporabo lastnosti sam.
  • Prefiksi prodajalca: Preden brskalniki za preizkus izdajo standardno različico / ime lastnosti za kakršne koli nove funkcije, nam brskalniki za nekaj časa ponujajo nekatere prodajne predpone. Razvijalci morajo počakati, da brskalnik izda svoje standardne različice, vmes pa se lahko uporabijo eksperimentalne funkcije s predponami ponudnikov.
  • CSS Transforms: Prehod se uporablja za postopno prehajanje ene vrednosti lastnosti v določenem času.

Eg: -webkit-transition: width 2s, height 4s;

  • CSS Transforms: Preoblikovanje v CSS vam omogoča prevajanje, vrtenje, spreminjanje in spreminjanje elementov.

Poizvedbe v medijih:

Mobilni računalniki, namizni računalniki in iPadi se obnašajo drugače, vendar strani ne moremo oblikovati na enak način. Prejšnji spletni standardi so bili zasnovani tako, da smo imeli za vsak tip naprave različne CSS.

Z napredkom spletnih standardov in načinom gradnje spleta se razvijejo brskalniki, ki imajo en sam CSS, ki ga je mogoče uporabiti za katero koli vrsto naprav. Za spreminjanje slogov za naprave, ki temeljijo na širini in višini, se uporabljajo medijske poizvedbe, s katerimi lahko določimo min ali največjo širino naprave in v njo zapišemo sloge.

Eg: @media screen and (max-width: 767px)(
container(
width: 60%;
padding: 20px;
)
)

Slogi so vsekakor blagodejnost spleta. In ker se je v zadnjem času razvoj spleta eksponentno povečal, je CSS3 zagotovo pridobil veliko povpraševanja, da so strani izjemno interaktivne in intuitivne.

Priporočeni članki

To je vodnik za tabele HTML Style. Tukaj razpravljamo, kako uporabljati tabele s stili HTML, različne funkcije in načine vključevanja CSS na spletno stran. Če želite izvedeti več, si oglejte tudi naslednje članke -

  1. Uvod v CSS
  2. Prednosti CSS v spletnem oblikovanju
  3. Kaj je CSS? | Kako uporabiti?
  4. Je CSS primer občutljiv?
  5. Različni slogi seznama HTML