HTML stilark - Funksjoner og måter å inkludere CSS på en webside

Innholdsfortegnelse:

Anonim

Hva er HTML stilark?

HTML Cascading Style Sheet er et ark med et sett med regler og egenskaper som forteller nettleseren hvordan du gjengir HTML ved å bruke alle angitte stiler.

CSS er måten vi styler alle websider på. CSS har alle egenskapene som bakgrunn, farger, skrifter, avstand, kanter osv. Som vi kan definere for hvert element på sidene.

HTML stilark brukes også til å angi layout av siden som hvor topptekst, bunntekst eller andre elementer skal plasseres på siden. CSS snakkes alltid sammen med HTML ettersom sider uten styling er veldig bleke uten utheving av overskrifter etc. og samme skriftstørrelse over hele siden som ikke gir et godt utseende i det hele tatt til brukerne.

Hvordan bruker du HTML-stilark?

Tidligere ble stiler, skript, HTML alt skrevet over på samme side. Dette gjorde sidene ekstremt lange og ekstremt vanskelige å lese og redigere. Så kom veien til å skille HTML, stiler og Javascript.

Måter å inkludere HTML stilark på en webside:

Det er tre måter vi kan inkludere stiler på:

  1. Inline Styling

Dette er en måte å skrive stiler på for hvert element i HTML i seg selv i et attributt som heter stil.

Denne måten å style på anbefales ikke i det hele tatt, da HTML ser uoversiktlig ut og vi ikke kan følge tilnærmingen "Skriv en gang, bruk mange steder"

Eg: Hello World!

Eg: Hello World!

  1. Intern styling

Dette har stiler inkludert i en stilkode og plasserer den på en webside på toppen av HTML. Denne måten å style på er fremdeles bedre enn inline styling, ettersom vi kan ha vanlige stiler klubbbundet sammen i tilfelle det må brukes til flere elementer om gangen.

På utviklingsstadiet er det lettere å redigere HTML-filen, og vi trenger ikke hver gang å åpne tilsvarende CSS-fil og redigere hver gang.

Eg:

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

Hello World!

  1. Ekstern styling

Dette er den vanligste og beste måten å ha stiler på en webside. Dette ligner på den interne stylingen, men forskjellen er at stilene er skrevet i en egen fil med utvidelse .css og henvisning til den er plassert i head taggen på websiden.

Syntaks for kobling av CSS-fil på websiden er:

Stiler bør inkluderes i hodetaggen som er over hovedkoden (dvs. faktisk innhold) av HTML

Hva er prioriteten mellom inline, intern, ekstern styling?

Innlagte stiler har større prioritet enn interne, og deretter kommer siste prioritet for den eksterne stylingen.

Inline> Intern> Ekstern

Beste praksis mens du bruker CSS:

  • CSS kan deles i et antall filer i stedet for bare en.
  • Separerte CSS-filer kan enten inkluderes en etter en i en hodetagg ved å bruke lenketagger.
  • Eller en CSS-fil kan ha flere importerklæringer for å importere resten av CSS-filene. Dette vil logisk skille CSS, men til slutt blir alle stiler gjengitt fra den samme filen.

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

  • Stiler kan defineres for alle elementer på websiden med velgere som HTML-kode i seg selv, klassenavn, id-er, eventuelle attributtnavn.
  • Det er noen pseudovelgere tilgjengelig som:
    • før
    • etter
    • NTH-barn
    • første barn
    • siste barn
    • sveve
    • besøkt

Dette er i utgangspunktet tilstander for de valgte elementene og ikke egentlig de eksakte elementene.

  • Når multipliserte CSS-filer er inkludert på siden, tar den siste høyeste prioritet og overstyrer de eksisterende stilene til tidligere filer som har samme velger.
  • Stilark bør brukes før HTML selv, slik at stiler blir brukt mens siden lastes inn. Hvis den er inkludert på slutten, vil HTML først lastes inn og deretter sakte brukes stilene som gir en veldig dårlig opplevelse for brukeren.

Ulike funksjoner i HTML Cascading Style Sheets:

  • CSS inneholder animasjoner : Tidligere ble javascript bare brukt til animasjoner. Men nyeste CSS dvs. CSS3 gir animasjoner ved å bruke egenskapene selv.
  • Leverandørprefikser: Før nettlesere slipper standard versjon / egenskapenavn for nye funksjoner, gir nettlesere oss noen leverandørprefikser i noen tid i et tidsrom som et eksperiment. Utviklere må vente til nettleseren slipper standardversjonene, og i mellomtiden kan eksperimentelle funksjoner brukes med leverandørprefikser.
  • CSS Transforms: Overgang brukes til gradvis å gå til en verdi fra en annen av en eiendom innen en gitt varighet.

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

  • CSS Transforms: Transforms i CSS lar deg oversette, rotere, skalere og skjøre elementer.

Mediesøk:

Mobil, stasjonære maskiner, iPads oppfører seg annerledes, men vi kan ikke style sidene på samme måte. Tidligere nettstandarder har designet slik at vi hadde forskjellige CSS for alle typer enheter.

Med fremgangen til webstandarder og måten nettet bygges på, utvikles nettlesere for å ha en enkelt CSS som kan brukes til alle typer enheter. For å endre stilene for enheter basert på bredde og høyde, brukes mediesøk som vi kan spesifisere min eller maks bredde på enheten og skrive stiler i den.

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

Stiler er definitivt en velsignelse for nettet. Og ettersom nettutvikling har økt eksponentielt i nyere tid, har CSS3 definitivt fått mye etterspørsel etter å gjøre sidene ekstremt interaktive og intuitive.

Anbefalte artikler

Dette har vært en guide til HTML stilark. Her diskuterer vi hvordan du bruker HTML stilark, forskjellige funksjoner og måtene for å inkludere CSS på en webside. Du kan også se på følgende artikler for å lære mer -

  1. Introduksjon til CSS
  2. Fordeler med CSS i webdesign
  3. Hva er CSS? | Hvordan å bruke?
  4. Er CSS-sak følsom?
  5. Ulike HTML-listestiler