Vad är HTML Style Sheets?
HTML Cascading Style Sheet är ett ark med en uppsättning regler och egenskaper som berättar webbläsaren hur man återger HTML med alla angivna stilar.
CSS är det sätt som vi utformar alla webbsidor. CSS har alla egenskaper som bakgrund, färger, teckensnitt, avstånd, gränser etc. som vi kan definiera för varje element på sidorna.
HTML-formatmallar används också för att ställa in layouten på sidan som där sidhuvud, sidfot eller andra element ska placeras på sidan. CSS pratas alltid med HTML eftersom sidor utan styling är väldigt bleka utan markering av rubriker etc. och samma teckensnittstorlek över hela sidan vilket inte ger ett bra utseende alls för användarna.
Hur använder man HTML-stilark?
Tidigare skrivs stilar, skript, HTML allt överallt på samma sida. Detta gjorde sidorna extremt långa och extremt svåra att läsa och redigera. Sedan kom vägen att separera HTML, stilar och Javascript.
Sätt att inkludera HTML-stilark på en webbsida:
Det finns tre sätt på vilka vi kan inkludera stilarna:
-
Inline Styling
Detta är ett sätt att skriva stilar för varje element inom HTML själv i ett attribut som kallas stil.
Det här sättet att styling rekommenderas inte alls eftersom HTML ser fullständig och vi kan inte följa metoden "Skriv en gång, använd på många platser"
Eg: Hello World!
-
Intern styling
Det här har stilar inkluderade i en stiltagg och placerar den på en webbsida ovanpå HTML. Detta sätt att styling är fortfarande bättre än inline styling eftersom vi kan ha gemensamma stilar klubbor ihop om det måste användas för flera element i taget.
På utvecklingsstadiet är det lättare att redigera HTML-filen och vi behöver inte varje gång öppna motsvarande CSS-fil och redigera varje gång.
Eg:
container-block(
font-size: 10px;
margin-top: 10px;
)
Hello World!
-
Extern styling
Detta är det vanligaste och bästa sättet att ha stilar för en webbsida. Detta liknar den interna stylingen men skillnaden är att stilarna skrivs i en separat fil med förlängning .css och hänvisning till den placeras i huvudetiketten på webbsidan.
Syntaxen för att länka CSS-fil på webbsidan är:
Stilar bör inkluderas i huvudetiketten som är ovanför body-taggen (dvs faktiskt innehåll) i HTML
Vad är prioriteringen mellan inline, intern, extern styling?
Inline-stilar har mer prioritet än interna och sedan kommer den sista prioriteringen för den externa stylingen.
Inline> Inre> Extern
Bästa praxis när du använder CSS:
- CSS kan delas upp i ett antal filer istället för bara en.
- Separerade CSS-filer kan antingen inkluderas en och en i en huvudtagg med hjälp av länktaggar.
- Eller en CSS-fil kan ha flera importmeddelanden för att importera resten av CSS-filerna. Detta kommer logiskt att skilja CSS men blir i slutändan alla stilar återges från samma fil.
Användning: @import './process.css';
- Stilar kan definieras för alla delar av webbsidan med väljare som HTML-tagg själv, klassnamn, id: er, alla attributnamn.
- Det finns några pseudoväljare tillgängliga som:
- innan
- efter
- n: te-barn
- förstfödde
- sista barnet
- sväva
- besökt
Dessa är i princip tillstånd för de valda elementen och inte riktigt de exakta elementen.
- När multiplicerade CSS-filer ingår på sidan tar den sista högsta prioritet och åsidosätter de befintliga stilarna för tidigare filer med samma väljare.
- Stylesheets bör användas före HTML själv, så att stilar tillämpas medan sidan laddas. Om det ingår i slutet laddas HTML först och sedan tillämpas långsamt stilar som ger en mycket dålig upplevelse för användaren.
Olika funktioner i HTML Cascading Style Sheets:
- CSS tillhandahåller animationer : Tidigare användes javascript bara för animationer. Men senaste CSS, dvs CSS3 tillhandahåller animationer med själva egenskaperna.
- Leverantörsprefix: Innan webbläsare släpper standardversion / egendomsnamn för några nya funktioner, tillhandahåller webbläsare vissa leverantörsprefix under en tid under en viss tid som ett experiment. Utvecklare måste vänta tills webbläsaren släpper sina standardversioner och under tiden kan experimentfunktioner användas med leverantörens prefix.
- CSS-omvandlingar: Övergång används för att successivt gå till ett värde från en annan av en egenskap inom en viss tid.
Eg: -webkit-transition: width 2s, height 4s;
- CSS Transforms: Transforms i CSS låter dig översätta, rotera, skala och skeva element.
Medieförfrågningar:
Mobil, stationära datorer, iPads uppför sig annorlunda, men vi kan inte utforma sidorna på samma sätt. Tidigare webbstandarder har utformat på ett sådant sätt att vi hade olika CSS för alla typer av enheter.
Med utvecklingen av webbstandarder och hur webben byggs utvecklas webbläsare för att ha en enda CSS som kan användas för alla typer av enheter. För att ändra formatmallarna för enheter baserade på bredd och höjd används mediefrågor som vi kan ange enhetens min- eller maxbredd och skriva stilar i den.
Eg: @media screen and (max-width: 767px)(
container(
width: 60%;
padding: 20px;
)
)
Stilar är definitivt en välsignelse för webben. Och eftersom webbutvecklingen har ökat exponentiellt på senare tid har CSS3 definitivt fått mycket efterfrågan på att göra sidorna extremt interaktiva och intuitiva.
Rekommenderade artiklar
Detta har varit en guide till HTML Style Sheets. Här diskuterar vi hur man använder HTML-stilark, olika funktioner och sätten att inkludera CSS på en webbsida. Du kan också titta på följande artiklar för att lära dig mer -
- Introduktion till CSS
- Fördelar med CSS i webbdesign
- Vad är CSS? | Hur man använder?
- Är CSS-känslig ärende?
- Olika HTML-listor