Een inleiding tot lessen in html en css

Het spreekt voor zich dat webontwikkeling enorm is. Een groot deel daarvan komt omdat bijna iedereen op internet is. Er is echter een tekort aan ontwikkelaars in het veld en daarom is het webontwikkelingsprogramma zo gemakkelijk en gratis beschikbaar. Met dat in gedachten, zullen we je een beetje laten zien waar HTML en CSS over gaat. Meer specifiek zullen we je laten zien hoe "klassen" werken.

We beginnen niet vanaf het begin, want er is al heel veel gratis leerplan. In plaats daarvan laten we je specifiek zien hoe klassen werken, omdat het een noodzakelijk onderdeel is om je website te stylen. We dachten ook dat het de moeite waard is om te behandelen voordat we onze blik op de Bootstrap-API van Twitter posten, omdat klassen ook een vereist onderdeel daarvan zijn.

Als een disclaimer, als u volledig nieuw bent in HTML en CSS, is dit waarschijnlijk geen goed begin voor u. Als je er bekend mee bent, zou het niet zo moeilijk moeten zijn om het op te pakken. Maar als u op zoek bent naar een complete tutorial voor beginners, zijn er online tal van geweldige opties. Om er een paar te noemen, is er FreeCodeCamp, The Odin Project, CodeAcademy, Code School, Team Treehouse, Udacity en nog veel meer. Als je ervoor kiest om in een van die te gaan graven, raad ik je ten zeerste aan om bij een ervan te blijven (zoals Free Code Camp) en het af te maken voordat je aan een andere begint, omdat veel van de "basis" -inhoud behoorlijk repetitief kan zijn.

Laten we eens kijken waar klassen over gaan.

Hoe klassen werken

Klassen zijn uiterst nuttig. Ze halen de repetitiviteit uit het stileren van HTML. Zonder klassen zou je elk element in je opmaak individueel stylen. En wat als je twee dezelfde elementen had, maar elk van hen anders wilde stylen? Het zou een hele puinhoop zijn. Daarom hebben we lessen. Klassen voegen wat organisatiestructuur toe aan uw HTML, zodat u uw code relatief schoon kunt houden. Niet alleen dat, maar klassen kunnen meer dan eens worden gebruikt. Met andere woorden, u hoeft nooit twee keer dezelfde stijlregels te maken.

Dit is hoe klassen eruit zien in onze label:

Zoals je kunt zien, hebben we er onder onze body-tag twee

elementen met verschillende klassen. De eerste

tag heeft de klasse "head1", terwijl de tweede tag de klasse "head2" heeft. Dus, in onze CSS, in plaats van het toepassen van styling op alleen de

element, kunnen we styling toepassen op die individuele klassen. Waarom zouden we dat willen doen?

De primaire reden is dat u niet al uw wensen wilt

elementen om dezelfde stijl te hebben. Het zou veel hoofdpijn veroorzaken bij het maken van een website en daarnaast zouden websites er niet erg goed uitzien. Klassen stellen ons in staat om stijl toe te passen op alleen dat ene exemplaar van de tag, niet alle

tags over het document. Dus, hoe schrijf je een les in HTML? Zoals dit:

Sommige inhoud

U kunt de eigenschap 'class' aan bijna elk HTML-element toevoegen.

Super goed! We hebben dus klassen, maar in hun huidige staat doen ze eigenlijk niets. Dat komt omdat we nog geen stijlregels aan de klas hebben toegevoegd. Daarvoor moeten we een afzonderlijk .css-document maken. Ik ga het gewoon main.css noemen. In dat document zouden we een klasse als volgt opmaken:

Om een ​​klasse te selecteren die we willen stijlen, doen we dit:

.head1 {kleur: rood; text-align: center; }

Binnen de accolades staan ​​alle 'regels' (of stijlen) die we op die klasse toepassen. Er zijn veel verschillende regels die je in die klasse kunt plaatsen. In mijn geval veranderde ik de kleur van de tekst in rood met behulp van de "kleur" -regel en centreerde ik de tekst met behulp van de "tekst-uitlijning" -regel. U kunt een volledige lijst met CSS-regels en hun documentatie vinden in het ontwikkelaarsnetwerk van Mozilla.

Nu wordt onze stijl nog steeds niet toegepast op de klassen in ons HTML-document, en dat komt omdat we de twee bestanden nog niet aan elkaar hebben gekoppeld. Ga terug naar uw HTML-bestand en in de tag, wilt u uw CSS-bestand op deze manier koppelen:

Uw HTML-document zou er zo uit moeten zien:

En uw ons testproject zou er op internet als volgt uit moeten zien:

Zie hieronder voor een meer gedetailleerde video die deze stappen doorloopt.

Video

Gevolgtrekking

En dat is alles wat er is voor lessen! Ze zijn echt eenvoudig te begrijpen. Het is duidelijk dat op grote en populaire websites die u bezoekt, de regels binnen de klassen een stuk ingewikkelder zijn dan wat we hebben behandeld, maar in hun meest basale vorm, zo werken ze.

Als je nog vragen hebt of problemen hebt gehad met het volgen van een bericht, laat het ons dan weten in de reacties hieronder of op de PCMech-forums! Of, als je geïnteresseerd bent in een complete HTML / CSS-beginnershandleiding op PCMech, laat het ons dan ook weten!