Herziening van prioriteitsniveau van CSS-stijl

Het Cascading Style Sheet (CSS) is, denk ik, de eenvoudigste van de talen in vergelijking met andere web-gerelateerde talen, dus het is niet verrassend dat veel mensen die net beginnen te leren hoe ze een website moeten maken, deze taal en HTML het eerst zullen leren.

In dit bericht gaan we terug naar CSS-basics. We gaan bekijken hoe de CSS-stijlen aanvankelijk worden toegepast, welke stijlen van toepassing zijn, hoe sommige stijldeclaraties elkaar overschrijven, terwijl andere niet.

Dus deze post is specifiek bedoeld voor beginners die net beginnen met het leren kennen van de uitdagingen, waarschijnlijk nog steeds fouten maken en fouten maken bij het samenstellen van hun eerste stylesheet. Laten we dus beginnen.

Standaard browserstijlen

Firefox, Chrome, Safari, Opera en Internet Explorer zijn momenteel de top vijf van desktop-browsers op de markt. Deze browsers en alle andere browsers volgen een standaardregel om ingebouwde standaardstijlen op te nemen om de HTML-elementen weer te geven.

Dus, wanneer we wat willekeurige HTML-elementen toevoegen zonder toegevoegde stijlen, zul je zien dat het nog steeds correct wordt weergegeven in de browser.

Maar als we die elementen zorgvuldig inspecteren, heeft elke browser (enigszins) verschillende waarden voor zijn “standaard” verklaring die leiden tot inconsistentie tussen de browsers, met name in de oude versie zoals IE6, 7 en Firefox 3.0.

Zoals u bijvoorbeeld kunt zien op de bovenstaande schermafbeelding, heeft de nieuwste Firefox de blockquote standaard met marge: 16px 40px 16px 40px, terwijl aan de andere kant de Internet Explorer 7 zal weergeven blockquote met marge: 0px 40px.

Om de hierboven weergegeven inconsistenties te overwinnen, geven veel webontwerpers en ontwikkelaars er de voorkeur aan al die stijlen te overschrijven CSS opnieuw instellen. Dit CSS-bestand bevat over het algemeen bijna alle HTML Type selectors, definiërend hen met gelijke regels.

Er zijn veel CSS-reset beschikbaar, maar hier zijn mijn top drie favorieten:

• Normalize.css
• CSS opnieuw instellen
• HTML5 Stylesheet opnieuw instellen

selectors

Waarschijnlijk lees je deze term vaak op de webdesign / ontwikkelingblogs die je hebt bezocht; selectors.

De selector in CSS is de syntaxis die wordt gebruikt om delen in het HTML-document te targeten voor de stijlen waarop moet worden toegepast. Er zijn drie basisselecters die we hier zullen bespreken, omdat ze waarschijnlijk de gemeenschappelijke selectors zijn die op je eerste website worden gebruikt. We behandelen anderen in toekomstige berichten.

Typ Selector

We hebben het hierboven genoemd, Type selector zal alle gespecificeerde HTML-elementen op het document targeten. Bijvoorbeeld:

 p / ** verklaring ** / 

zal overeenkomen met alle p of de paragraaf elementen en het gebruik ervan overschrijven uiteindelijk de standaardstijlen die worden gegeven door de browsers.

Class Selector

Wanneer u een klasse of zelfs veel klassen aan een element hebt toegevoegd, kunt u deze klassen ook targeten. De Class Selector begint met een punt parameter.

 .vak / ** verklaring ** / 

Het bovenstaande fragment komt overeen met alle elementen die de doosklasse hebben, of we kunnen ook specifieker selecteren.

 p.box / ** declaration ** / 

Het zal alleen het doelwit zijn p element dat de doos klasse.

Wanneer gebruiken we de Klasse selector, dezelfde stijlverklaring van beide Type selector en de Standaard browser wordt overschreven.

ID selector

De ID kaart is een zeer beperkend kenmerk, we kunnen er maar één hebben ID kaart op een element en het moet ook uniek zijn.

 
Inhoud
 

In het geval dat we een hebben ID kaart in een element kunnen we de id selector om dat element te richten; de id-selector wordt gedefinieerd met een hash # parameter.

 #uniqueID / ** declaration ** / 

Sinds de ID kaart is uniek, het heeft het hoogste prioriteitsniveau van het type selector. Dus, wanneer we stijlen verklaren met de ID kaart selector zal het uiteindelijk allemaal dezelfde verklaring overschrijven van de Klasse, Type selectors en de Standaard browser stijlen.

De stijlen insluiten

We hebben alle essentiële basisselectors doorlopen en nu zullen we onderzoeken hoe die stijlen zijn ingebed in een HTML-document.

Externe stijlen

Externe stijlen zijn de stijlen die in een afzonderlijk bestand worden toegevoegd, meestal in een .css bestand dat vervolgens is gekoppeld aan het HTML-document met behulp van de tag om die stijlen toe te passen.

En alle stijlen die in de bestanden worden gedeclareerd, gedragen zich als wat we in de selectors sectie hierboven, namelijk het zal voornamelijk overschrijven de standaardbrowser stijl en overschrijf naar een andere stijlverklaring afhankelijk van het prioriteitsniveau van de selectors.

Deze oefening is de meest aanbevolen manier om de stijlen aan elkaar te hechten, vooral als je duizenden regels CSS-codes hebt met veel pagina's om aan te hechten.

Door dit te doen, zullen de stijlen ook eenvoudig te beheren zijn, u kunt bijvoorbeeld de CSS-bestanden scheiden in verschillende bestanden, afhankelijk van de specifieke rol ervan, zoals typography.css om alle stijlen met betrekking tot typografie enzovoort te beheren..

Interne stijlen

De interne stijlen zijn de stijlen die rechtstreeks in een HTML-document zijn ingesloten, meestal in de label.

Maar deze oefening wordt niet aanbevolen als je honderden stijlen hebt, omdat je HTML-pagina te lang zal zijn en de stijl alleen van invloed is op de plaatsen waar de stijlen zijn ingesloten. Als je tien pagina's hebt laten zeggen, moet je die stijlen kopiëren en insluiten op alle pagina's en als je de stijlen moet wijzigen, moet je deze wijzigen in tien verschillende pagina's, wat natuurlijk een vervelende taak is.

Op basis van het prioriteitsniveau is de interne stijl hoger, waardoor de externe stijlen worden overschreven.

Inline stijlen

Inlinestijlen zijn de stijlen die direct zijn ingesloten in het HTML-element.

 
Dit is een paragraaf
 

Dit voorbeeld hierboven zal toevoegen 5px marge voor het aline-element en overschrijft ook de marges die voor dat element zijn gedeclareerd, zowel in interne als externe stijlen.

Maar vermijd dit te doen, omdat je opmaak vol zit met al die stijlverklaringen; als je een aantal stijlen ingebed hebt, wordt het zelfs een nachtmerrie om al je html en stijlen te zien en te onderhouden.

Verder lezen: Drie manieren om CSS in te voegen - W3CSchools.

De! Belangrijke regel

Er zijn enkele omstandigheden waarin we een specifieke stijl voor een element moeten toepassen, maar dezelfde stijl voor dat element is ook elders in het stylesheet of in het document aangegeven. Bijvoorbeeld:

We hebben de volgende ankertag met ingesloten stijlen

 Dit is een link 

En we hebben ook een aparte stijl voor die ankertag in de stijlpagina.

 a border: 1px solid # 333; achtergrondkleur: # 555;  

In dat voorbeeld kunnen we de !belangrijk regel om de browser te dwingen de stijlen in de stijlpagina te gebruiken in plaats van die in het element.

 a border: 1px solid # 333! belangrijk; achtergrondkleur: # 555! belangrijk;  

De !belangrijk regel geeft aan dat deze stijl het meest is belangrijk en moet worden toegepast op de andere stijl, zelfs als deze direct in het element is ingebed (Inline Styles).

Verder lezen:! important CSS Declarations: How and When to Use Them - Smashing Magazine.

Conclusie

We hebben het hele onderwerp in dit artikel doorgenomen. We kunnen nu zien dat elke selector en de manier waarop we de stijlen insluiten verschillende prioriteitsniveaus hebben in het mechanisme van de browser. Zoals ik eerder al zei, zijn deze onderwerpen bedoeld voor beginnende niveaus, dus ze zijn zeker niet iets nieuws voor doorgewinterde webontwerpers.

Maar ik denk dat elke webontwerper in het algemeen het ermee eens zal zijn dat teruggaan naar de basis soms nodig is om onze fundamentele kennis van een onderwerp te herzien. In feite missen we vaak enkele van de basismaterialen, omdat we meer onder de indruk zijn van geweldige (en gekke) dingen als deze.

Ten slotte heb ik een demo- en bronbestand voor u ter beschikking gesteld om onze discussie in dit artikel verder te bespreken.

• demonstratie
• Download de bron

Ik hoop dat je geniet van dit bericht en als je enige onnauwkeurigheid vindt, of als ik een aantal belangrijke punten mis, aarzel dan niet om me op de hoogte te stellen in de comments hieronder.