Hvad er HTML stilark?

HTML Cascading Style Sheet er et ark med et sæt regler og egenskaber, der fortæller browseren, hvordan man gengiver HTML ved hjælp af alle specificerede stilarter.

CSS er den måde, hvorpå vi styler alle websider. CSS har alle egenskaber som baggrund, farver, skrifttyper, afstand, rammer osv., Som vi kan definere for hvert element på siderne.

HTML-stilark bruges også til at indstille layoutet på siden, ligesom hvor header, sidefødder eller andre elementer skal placeres på siden. CSS tales altid sammen med HTML, da sider uden styling er meget bleg uden markering af overskrifter osv. Og samme skriftstørrelse overalt på siden, hvilket overhovedet ikke giver et godt look til brugerne.

Sådan bruges HTML stilark?

Tidligere blev stilarter, scripts, HTML alt skrevet over på samme side. Dette gjorde siderne ekstremt lange og ekstremt vanskelige at læse og redigere. Derefter kom vejen til at adskille HTML, stilarter og Javascript.

Måder at inkludere HTML-stilark på en webside:

Der er 3 måder, hvorpå vi kan inkludere stilarter:

  1. Inline Styling

Dette er en måde at skrive stilarter på for hvert element i HTML i sig selv i en attribut kaldet stil.

Denne måde af styling anbefales slet ikke, da HTML ser rodet ud, og vi kan ikke følge fremgangsmåden "Skriv en gang, brug mange steder"

Eg: Hello World!

Eg: Hello World!

  1. Intern styling

Dette har stilarter inkluderet i et typografi og placerer det på en webside øverst på HTML. Denne måde at style på er stadig bedre end inline styling, da vi kan have fælles stilarter, der er sammenklappet, i tilfælde af at den skal bruges til flere elementer ad gangen.

På udviklingsstadiet er det lettere at redigere HTML-filen, og vi behøver ikke hver gang at åbne tilsvarende CSS-fil og redigere hver gang.

Eg:

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

Hello World!

  1. Ekstern styling

Dette er den mest almindelige og den bedste måde at have stilarter til en webside. Dette svarer til den interne styling, men forskellen er, at typografierne er skrevet i en separat fil med udvidelse .css, og henvisning til den er placeret i hovedmærket på websiden.

Syntaks til linking af CSS-fil på websiden er:

Styles skal inkluderes i hovedmærket, der er over kropskoden (dvs. det faktiske indhold) af HTML

Hvad er prioriteten mellem inline, intern, ekstern styling?

Inline-stilarter har større prioritet end intern, og derefter kommer sidste prioritet for den eksterne styling.

Inline> Intern> Ekstern

Bedste fremgangsmåder, mens du bruger CSS:

  • CSS kan opdeles i et antal filer i stedet for kun en.
  • Separerede CSS-filer kan enten inkluderes en efter en i et hovedtag ved hjælp af linkmærker.
  • Eller en CSS-fil kan have flere importangivelser til at importere resten af ​​CSS-filer. Dette vil logisk adskille CSS, men får i sidste ende alle stilarter gengivet fra den samme fil.

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

  • Stilarter kan defineres for alle elementer på websiden med vælgere som HTML-tag i sig selv, klassenavne, id'er, alle attributnavne.
  • Der er nogle pseudo-vælgere tilgængelige som:
    • Før
    • efter
    • nth-barn
    • første-barn
    • sidste barn
    • hover
    • besøgt

Dette er dybest set tilstande for de valgte elementer og ikke rigtigt de nøjagtige elementer.

  • Når multipliserede CSS-filer er inkluderet på siden, tager den sidste højeste prioritet og tilsidesætter de eksisterende stilarter fra tidligere filer med samme valg.
  • Stilark skal bruges før HTML i sig selv, så stilarter bliver anvendt, mens siden indlæses. Hvis det inkluderes i slutningen, indlæses HTML først og derefter anvendes langsomt typografier, hvilket giver en meget dårlig oplevelse for brugeren.

Forskellige funktioner i HTML Cascading Style Sheets:

  • CSS indeholder animationer : Tidligere blev javascript kun brugt til animationer. Men nyeste CSS dvs. CSS3 leverer animationer ved hjælp af egenskaber selv.
  • Sælgerpræfikser: Før browsere frigiver standardversion / ejendomsnavn for nye funktioner, giver browsere os nogle leverandørpræfikser i nogen tid i et stykke tid som et eksperiment. Udviklere skal vente til browseren frigiver sine standardversioner, og i mellemtiden kan eksperimentelle funktioner bruges med leverandørpræfikser.
  • CSS-transformeringer: Overgang bruges til gradvis at gå til en værdi fra en anden af ​​en egenskab inden for en given varighed.

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

  • CSS Transforms: Transforms i CSS giver dig mulighed for at oversætte, rotere, skalere og skæve elementer.

Mediespørgsmål:

Mobil, desktops, iPads opfører sig forskelligt, men vi kan ikke style siderne på samme måde. Tidligere webstandarder er designet på en sådan måde, at vi havde forskellige CSS til enhver type enhed.

Med udviklingen af ​​webstandarder og den måde, hvorpå nettet er bygget, udvikles browsere til at have et enkelt CSS, der kan bruges til enhver type enhed. For at ændre stilarter for enheder baseret på bredde og højde bruges medieforespørgsler, som vi kan specificere enhedens min eller maks. Bredde og skrive stilarter inden for.

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

Stilarter er bestemt en velsignelse for Internettet. Og da webudvikling er steget eksponentielt i nyere tid, har CSS3 bestemt fået en stor efterspørgsel efter at gøre siderne ekstremt interaktive og intuitive.

Anbefalede artikler

Dette har været en guide til HTML stilark. Her diskuterer vi, hvordan man bruger HTML stilark, forskellige funktioner og måder til at inkludere CSS på en webside. Du kan også se på de følgende artikler for at lære mere -

  1. Introduktion til CSS
  2. Fordele ved CSS i webdesign
  3. Hvad er CSS? | Sådan bruges?
  4. Er CSS-case følsom?
  5. Forskellige HTML-listestilarter

Kategori:

Webudviklingsværktøjer