Mis on HTML-i stiililehed?

HTML-i astmeline stiilileht on reeglite ja omadustega komplekt, mis annab brauserile teada, kuidas HTML-i renderdada, kasutades kõiki määratletud stiile.

CSS on viis, kuidas me mistahes veebilehti stiilime. CSS-il on kõik omadused, nagu taust, värvid, fondid, vahed, äärised jne, mida saame määratleda iga elemendi jaoks lehekülgedel.

HTML-i stiililehti kasutatakse ka lehe paigutuse määramiseks, näiteks päise, jaluse või muude elementide paigutamiseks lehele. CSS-ist räägitakse alati koos HTML-iga, kuna ilma stiilita lehed on väga kahvatud, pealkirju jms pole esile tõstetud ja kogu lehe ühesugune kirjasuurus, mis ei anna kasutajatele head pilti.

Kuidas kasutada HTML-i stiililehti?

Varem olid stiilid, skriptid, HTML kõik kirjutatud samale lehele. See muutis leheküljed eriti pikaks ja äärmiselt raskesti loetavaks ning redigeeritavaks. Seejärel tuli viis HTML, stiilide ja Javascripti eraldamiseks.

HTML-i stiililehtede kaasamise viisid veebisaidile:

Stiile saab kaasata kolmel viisil:

  1. Sisekujundus

See on viis HTML-i iga elemendi stiilide kirjutamiseks atribuudis, mida nimetatakse stiiliks.

Seda stiiliviisi ei soovitata, kuna HTML näeb välja segaduses ja me ei saa järgida lähenemisviisi “Kirjutage üks kord, kasutage mitmel pool”

Eg: Hello World!

Eg: Hello World!

  1. Sisemine stiil

See tähendab stiilide lisamist stiilimärgendisse ja nende paigutamist veebilehele HTML-i peale. See stiiliviis on ikkagi parem kui tekstisisene stiil, kuna meil on võimalik ühiseid stiile omavahel ühendada, kui seda tuleb kasutada mitme elemendi jaoks korraga.

Arendusetapis on HTML-faili lihtsam redigeerida ja me ei pea iga kord vastavat CSS-faili avama ja iga kord redigeerima.

Eg:

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

Hello World!

  1. Väline stiil

See on kõige tavalisem ja parim viis veebilehtede stiilide kasutamiseks. See sarnaneb sisemise stiiliga, kuid erinevus seisneb selles, et stiilid kirjutatakse eraldi faili laiendiga .css ja sellele viidatakse veebilehe päisesildil.

Veebilehe CSS-faili linkimise süntaks on järgmine:

Stiilid peaksid sisalduma HTML-i peasildi (st tegeliku sisu) kohal olevas peasildis

Milline on prioriteet tekstisisese, sisemise ja välise kujundamise vahel?

Tekstilised stiilid on rohkem prioriteetsed kui sisemised ja siis on viimane prioriteet välimine stiil.

Inline> Internal> External

Parimad tavad CSS-i kasutamisel:

  • CSS-i saab jagada ühe faili asemel mitmeks failiks.
  • Eraldatud CSS-failid saab lingimärgendite abil päisesildisse ükshaaval lisada.
  • Või võib ühel CSS-failil olla ülejäänud CSS-failide importimiseks mitu impordi avaldust. See eraldab CSS-i loogiliselt, kuid lõpuks saavad kõik stiilid samast failist renderdatud.

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

  • Stiile saab veebisaidi mis tahes elementide jaoks määratleda valijatega nagu HTML-märgend ise, klasside nimed, ID-d ja atribuutide nimed.
  • Saadaval on mõned pseudovalijad, näiteks:
    • enne
    • pärast
    • n-laps
    • esimene laps
    • viimane laps
    • hõljuma
    • külastatud

Need on põhimõtteliselt valitud elementide olekud ja mitte tegelikult täpsed elemendid.

  • Kui lehele on lisatud korrutatud CSS-failid, võtab viimane kõige kõrgema prioriteedi ja alistab sama valijaga varasemate failide olemasolevad stiilid.
  • Stiililehti tuleks kasutada enne HTML-i enda kasutamist, et stiile rakendataks lehe laadimise ajal. Kui see lisada lõppu, laaditakse HTML esmalt sisse ja seejärel rakendatakse aeglaselt stiile, mis annab kasutajale väga halva kogemuse.

HTML-i astmeliste stiililehtede erinevad funktsioonid:

  • CSS pakub animatsioone : varem kasutati javascripti ainult animatsioonide jaoks. Kuid uusim CSS, st CSS3, pakub animatsioone, kasutades ise atribuute.
  • Müüja eesliited: enne kui brauserid vabastavad kõigi uute funktsioonide standardse versiooni / atribuudi nime, pakuvad brauserid meile mõneks ajaks mõneks ajaks hankija eesliited. Arendajad peavad ootama, kuni brauser vabastab selle standardversioonid ja vahepeal saab müüja eesliidetega kasutada eksperimentaalseid funktsioone.
  • CSS-teisendused: üleminekut kasutatakse vara kestuse järkjärguliseks muutmiseks ühe väärtuse teisest.

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

  • CSS teisendused: teisendused CSSis võimaldavad elemente tõlkida, pöörata, mastaapida ja viltustada.

Meediumipäringud:

Mobiiltelefonid, lauaarvutid ja iPads käituvad erinevalt, aga me ei saa lehti samamoodi kujundada. Varasemad veebistandardid on kujundatud nii, et meil oli igat tüüpi seadme jaoks erinev CSS.

Veebistandardite arengu ja veebi ülesehituse abil on brauserid välja töötatud nii, et neil oleks üks CSS, mida saab kasutada igat tüüpi seadme jaoks. Seadmete stiilide muutmiseks laiuse ja kõrguse alusel kasutatakse meediumipäringuid, millega saame määrata seadme minimaalse või maksimaalse laiuse ja kirjutada sellesse stiilid.

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

Stiilid on kindlasti veebi jaoks õnnistuseks. Ja kuna veebiarendus on viimasel ajal hüppeliselt kasvanud, on CSS3 kindlasti omandanud palju nõudmisi, et muuta lehed äärmiselt interaktiivseteks ja intuitiivseteks.

Soovitatavad artiklid

See on olnud HTML-i stiililehtede juhend. Siin arutatakse, kuidas kasutada HTML-i stiililehti, erinevaid funktsioone ja võimalusi CSS-i kaasamiseks veebilehele. Lisateabe saamiseks võite vaadata ka järgmisi artikleid -

  1. CSS-i sissejuhatus
  2. CSS-i eelised veebidisainis
  3. Mis on CSS? | Kuidas kasutada?
  4. Kas CSS on tõstutundlik?
  5. Erinevad HTML-i loendistiilid

Kategooria:

Veebiarenduse tööriistad