Wat is HTML-stijlbladen?

HTML Cascading Style Sheet is een blad met een set regels en eigenschappen die de browser vertelt hoe HTML moet worden weergegeven met alle opgegeven stijlen.

CSS is de manier waarop we webpagina's opmaken. CSS heeft alle eigenschappen zoals achtergrond, kleuren, lettertypen, spatiëring, randen, enz. Die we voor elk element op de pagina's kunnen definiëren.

HTML-stijlbladen worden ook gebruikt om de lay-out van de pagina in te stellen, zoals waar de koptekst, voetteksten of andere elementen op de pagina moeten worden geplaatst. CSS wordt altijd samen met HTML besproken, omdat pagina's zonder stijl erg bleek zijn, zonder opschriften van koppen, enz. En dezelfde lettergrootte over de hele pagina, die helemaal geen goed beeld geeft aan de gebruikers.

Hoe HTML-stijlbladen te gebruiken?

In het verleden, stijlen, scripts, HTML werd alles overal op dezelfde pagina geschreven. Dit maakte de pagina's extreem lang en extreem moeilijk te lezen en te bewerken. Toen kwam de weg om HTML, stijlen en Javascript te scheiden.

Manieren om HTML-stijlbladen op een webpagina op te nemen:

Er zijn 3 manieren waarop we de stijlen kunnen opnemen:

  1. Inline Styling

Dit is een manier om stijlen te schrijven voor elk element binnen HTML zelf binnen een attribuut genaamd stijl.

Deze manier van stylen wordt helemaal niet aanbevolen, omdat de HTML er rommelig uitziet en we de aanpak "Eenmalig schrijven, op veel plaatsen gebruiken" niet kunnen volgen.

Eg: Hello World!

Eg: Hello World!

  1. Interne styling

Dit houdt in dat stijlen in een stijltag worden opgenomen en op een webpagina boven HTML worden geplaatst. Deze manier van stylen is nog steeds beter dan inline styling, omdat we gemeenschappelijke stijlen kunnen samenknippen voor het geval het voor meerdere elementen tegelijk moet worden gebruikt.

In de ontwikkelingsfase is het eenvoudiger om het HTML-bestand te bewerken en hoeven we niet elke keer het bijbehorende CSS-bestand te openen en elke keer te bewerken.

Eg:

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

Hello World!

  1. Externe styling

Dit is de meest gebruikelijke en de beste manier om stijlen voor een webpagina te hebben. Dit is vergelijkbaar met de interne stijl, maar het verschil is dat de stijlen zijn geschreven in een apart bestand met de extensie .css en dat ernaar wordt verwezen in de head-tag van de webpagina.

De syntaxis voor het koppelen van een CSS-bestand op de webpagina is:

Stijlen moeten worden opgenomen in de head-tag die zich boven de body-tag (dwz de daadwerkelijke inhoud) van HTML bevindt

Wat is de prioriteit tussen inline, interne, externe styling?

Inline stijlen hebben meer prioriteit dan interne en dan komt de laatste prioriteit voor de externe styling.

Inline> Internal> External

Best practices tijdens het gebruik van CSS:

  • CSS kan worden gescheiden in een aantal bestanden in plaats van slechts één.
  • Gescheiden CSS-bestanden kunnen één voor één worden opgenomen in een head-tag met behulp van link-tags.
  • Of een CSS-bestand kan meerdere importinstructies hebben om de rest van de CSS-bestanden te importeren. Hierdoor wordt de CSS logisch gescheiden, maar worden uiteindelijk alle stijlen uit hetzelfde bestand weergegeven.

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

  • Stijlen kunnen worden gedefinieerd voor alle elementen van de webpagina met selectors als HTML-tag zelf, klassennamen, id's, alle kenmerknamen.
  • Er zijn enkele pseudo-selectors beschikbaar zoals:
    • voordat
    • na
    • n-kind
    • eerstgeborene
    • laatste kind
    • zweven
    • bezocht

Dit zijn in feite toestanden van de geselecteerde elementen en niet echt de exacte elementen.

  • Wanneer vermenigvuldigde CSS-bestanden op de pagina zijn opgenomen, heeft de laatste de hoogste prioriteit en vervangt deze de bestaande stijlen van eerdere bestanden met dezelfde selector.
  • Stylesheets moeten vóór HTML zelf worden gebruikt, zodat stijlen worden toegepast terwijl de pagina wordt geladen. Indien opgenomen aan het einde, zou HTML eerst laden en vervolgens langzaam stijlen worden toegepast, wat een zeer slechte ervaring voor de gebruiker geeft.

Verschillende functies van HTML Cascading Style Sheets:

  • CSS biedt animaties : voorheen werd JavaScript alleen gebruikt voor animaties. Maar de nieuwste CSS, dat wil zeggen CSS3 biedt animaties met behulp van eigenschappen zelf.
  • Leveranciersvoorvoegsels: voordat browsers de standaardversie / eigenschapsnaam vrijgeven voor nieuwe functies, bieden browsers ons enige tijd gedurende enige tijd als experiment enkele voorvoegsels van leveranciers. Ontwikkelaars moeten wachten totdat de standaardversies van de browser zijn vrijgegeven en in de tussentijd kunnen experimentele functies worden gebruikt met leveranciersvoorvoegsels.
  • CSS-transformaties: transitie wordt gebruikt om binnen een bepaalde duur geleidelijk naar de ene waarde van een andere eigenschap te gaan.

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

  • CSS Transforms: Transforms in CSS stelt u in staat om elementen te vertalen, roteren, schalen en scheeftrekken.

Mediaquery's:

Mobiel, desktops, iPads gedragen zich anders, maar we kunnen de pagina's niet op dezelfde manier opmaken. Eerdere webstandaarden zijn zo ontworpen dat we voor elk type apparaat verschillende CSS hadden.

Met de voortgang van webstandaarden en de manier waarop internet is gebouwd, zijn browsers ontwikkeld om een ​​enkele CSS te hebben die voor elk type apparaat kan worden gebruikt. Om de stijlen voor apparaten te wijzigen op basis van breedte en hoogte, worden mediaquery's gebruikt waarmee we de minimale of maximale breedte van het apparaat kunnen specificeren en stijlen erin kunnen schrijven.

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

Stijlen zijn absoluut een zegen voor het web. En omdat webontwikkeling de afgelopen tijd exponentieel is toegenomen, heeft CSS3 zeker veel vraag gekregen om de pagina's extreem interactief en intuïtief te maken.

Aanbevolen artikelen

Dit is een gids geweest voor HTML-stijlbladen. Hier bespreken we hoe HTML-stijlbladen, verschillende functies en de manieren om CSS op een webpagina op te nemen worden gebruikt. U kunt ook de volgende artikelen bekijken voor meer informatie -

  1. Inleiding tot CSS
  2. Voordelen van CSS in Web Design
  3. Wat is CSS? | Hoe te gebruiken?
  4. Is CSS hoofdlettergevoelig?
  5. Verschillende HTML-lijststijlen

Categorie:

Web ontwikkelingstools