TechCodeview

CSS (cascaderende stijlpagina) beschrijft de HTML-elementen die worden weergegeven scherm, papier , of binnen andere media . Het bespaart veel tijd. Het regelt de lay-out van meerdere webpagina's tegelijk. Het stelt de lettergrootte, lettertypefamilie, kleur, achtergrondkleur op de pagina.

Het stelt ons in staat om toe te voegen Effecten of animaties naar de website. We gebruiken CSS weergeven animaties leuk vinden knoppen, effecten, laders of spinners , en ook geanimeerde achtergronden .

Zonder te gebruiken CSS , zal de website er niet aantrekkelijk uitzien. Er zijn 3 types van CSS die hieronder staan:

• Inline-CSS
• Interne/ingebedde CSS
• Externe CSS

1. Interne CSS

De interne CSS heeft label in de gedeelte van de HTML document. Deze CSS-stijl is een effectieve manier om afzonderlijke pagina's op te maken. Het gebruik van de CSS-stijl voor meerdere webpagina's is tijdrovend omdat we de stijl op elke webpagina.

We kunnen de interne CSS gebruiken door de volgende stappen te volgen:

1. Open eerst de HTML pagina en zoek de

2. Plaats de volgende code na de

3. Voeg de toe reglement van CSS in de nieuwe regel.

Voorbeeld:

 body { background-color: black; } h1 { color: white; padding: 50px; } 

4. Sluit de stijltag.

Na het toevoegen van de interne CSS ziet het volledige HTML-bestand er als volgt uit:

 body { background-color: black; } h1 { color: red; padding: 50px; } <h2>CSS types</h2> <p>Cascading Style sheet types: inline, external and internal</p> 

We kunnen ook de selectors gebruiken (klasse en ID) in het stijlblad.

Voorbeeld:

 .class { property1 : value1; property2 : value2; property3 : value3; } #id { property1 : value1; property2 : value2; property3 : value3; } 

Voordelen van interne CSS

Interne CSSkan niet meerdere bestanden uploaden wanneer we de code toevoegen aan de HTML-pagina.

Nadelen van interne CSS:

• Code toevoegen in de HTML document vermindert de pagina grootte En laad tijd van de webpagina.

2. Externe CSS

In externe CSS koppelen we de webpagina's aan de externe .css bestand. Het is gemaakt door teksteditor . De CSS is een efficiëntere methode voor het stylen van een website. Door het bewerken van de .css bestand, kunnen we de hele site in één keer wijzigen.

Om de externe CSS te gebruiken, volgt u de onderstaande stappen:

1. Maak een nieuwe .css bestand mee teksteditor , en voeg toe Cascading stijlblad regels ook.

Bijvoorbeeld:

 .xleftcol { float: right; width: 35%; background:#608800; } .xmiddlecol { float: right; width: 35%; background:#eff3df; } 

2. Voeg een verwijzing naar het externe toe .css bestand direct daarna label in de gedeelte van HTML-blad :

Voordelen van externe CSS:

• Onze bestanden zijn overzichtelijker van structuur en kleiner van formaat.
• Wij gebruiken hetzelfde .css bestand voor meerdere webpagina's in externe CSS.

Nadelen van externe CSS:

• De pagina's kunnen niet correct worden afgeleverd voordat de externe CSS is geladen.
• Bij externe CSS kan het uploaden van veel CSS-bestanden de downloadtijd van een website verlengen.

3. Inline-CSS

Inline CSS wordt gebruikt om een ​​specifieke stijl op te maken HTML element. Voeg een ... toe stijl attribuut toe aan elke HTML-tag zonder gebruik te maken van de selectors. Het beheren van een website kan moeilijk zijn als we er alleen maar gebruik van maken inline-CSS . Echter, Inline CSS in HTML is in sommige situaties nuttig. Wij hebben geen toegang tot de CSS-bestanden of om stijlen op elementen toe te passen.

In het volgende voorbeeld hebben we de inline CSS gebruikt

applet-applet