Welkom bij de vijfde les van onze serie Web Design for Kids, alles over CSS.
We hebben heel hard gewerkt aan onze HTML-inhoud, dus nu is het tijd om het er mooi uit te laten zien! We zullen hier dingen aan onze HTML-pagina toevoegen en een nieuw bestand starten: a CSS document.
Bekijk de voltooide website die we aan het bouwen zijn. De bestanden voor deze les kunnen hier worden gedownload en vergeet niet om vragen te stellen in het opmerkingengedeelte onderaan deze pagina.
Voordat we beginnen met coderen, zorgen we eerst dat we begrijpen wat CSS is. CSS betekent Cascading Style Sheets en het is een taal die ons helpt de manier te veranderen waarop onze HTML-pagina eruitziet.
In de bovenstaande afbeelding toont de browser aan de linkerkant een website zonder CSS, nee styling, terwijl de website aan de rechterkant styling heeft. De styling is geschreven in een CSS-bestand-veel beter!
CSS wordt geschreven in een apart bestand met behulp van onze teksteditor. Ons HTML-document is opgeslagen met een .html extensie, maar ons CSS-document wordt opgeslagen met een .css uitbreiding.
We zullen een gloednieuw document moeten starten in onze teksteditor en dit opslaan als "tutstown.css" in "tutsfolder"; naast de map "index.html" en de map "images".
Om ons CSS-document stijlen toe te passen op ons HTML-document, moeten we ze aan elkaar koppelen. Dit gebeurt via een element binnen het head-element helemaal bovenin ons HTML-document.
We voegen deze link direct onder onze titel toe:
Tuts Town
Er zijn een paar belangrijk attributen opnemen in dit zelfsluitende element, waarvan de eerste is type
. Het typekenmerk vertelt de browser wat de type van inhoud die we koppelen. In dit geval is het een text / css
het dossier.
Het tweede kenmerk dat we hier zien is rel
, die de browser vertelt wat de relatie is tussen de HTML en het gekoppelde document (onze CSS). Het CSS-document is een stylesheet voor onze HTML, dus dat is wat we hier opnemen.
Ten slotte hebben we de href
die je misschien nog herinnert van ons elementen. Het wijst ergens anders. In dit geval vertelt het de browser waar het CSS-bestand te vinden is waarnaar we hebben gelinkt.
Als alles goed is gekoppeld, ziet de pagina er anders uit wanneer u deze in de browser vernieuwt:
In ons CSS-bestand kunnen we de HTML-elementen vermelden die we hebben gebruikt en aangeven hoe we willen dat ze eruit zien. Er zijn veel manieren om naar de elementen te wijzen die we willen, en HTML-klassen zijn een van die manieren.
HTML-klassen zijn attributen die we aan elementen kunnen toevoegen. Als een element een klassenaam heeft, kunnen we dit gebruiken in onze CSS.
De gekozen klassenaam moet een woord zijn of woorden die de inhoud in dat element beschrijven.
Een klas toevoegen aan onze kan er ongeveer zo uitzien:
Klassen zijn niet uniek, dus verschillende elementen kunnen dezelfde klassennaam hebben. Dit maakt het toevoegen van dezelfde stijlen aan veel elementen veel eenvoudiger; we zullen dit in actie zien wanneer we onze winkelfoto's bekijken!
De manier waarop je code schrijft heet het syntaxis. Net als bij HTML moet CSS op de juiste manier worden geschreven om te kunnen werken.
Laten we naar ons CSS-bestand springen en, alleen voor de praktijk, het veranderen Achtergrond kleur
van de koptekst naar blauw
.
.primary-header background-color: blue;Er zijn veel stukken om goed te krijgen!
Dus onze CSS begrijpt dat wat we richten een klassenaam is, we moeten een paar dingen doen:
.
voor de naam.
. Achtergrond kleur
) wordt onmiddellijk gevolgd door een dubbele punt :
blauw
in dit geval). ;
Het kan heel gemakkelijk zijn om deze te vergeten!
Sla dit CSS-bestand op en vernieuw de browser; als je dit nog niet open hebt, kun je dat doen door te dubbelklikken op het "index.html" bestand in de "tutsfolder". Hoe netjes is dat?!
Belangrijk! Laten we nu deze stijl verwijderen, want onze site heeft geen blauwe kop!
CSS stelt ons ook in staat om opmerkingen in ons bestand op te nemen die de browser zal negeren, maar ze zullen er iets anders uitzien dan onze HTML-opmerkingen.
Een CSS-commentaar bevindt zich in deze symbolen: / * * /
/ * Dit is een opmerking in CSS * /
Het CSS-document in de oefenbestanden zal een paar nuttige opmerkingen bevatten om de dingen verder uit te leggen.
Het allereerste stukje echte styling dat we op onze website kunnen doen, is het veranderen van de Achtergrond kleur
naar dat mooie lichtgele. Er zijn enkele kleurwaarden die kunnen worden uitgeschreven in CSS, zoals blauw
in de voorbeeldcode hierboven en de browser begrijpt dit. Voor andere, minder gebruikelijke kleuren moeten we de kleuren opnemen hexadecimaal, of hex, nummer in plaats daarvan.
Alle kleuren hebben een hexadecimaal getal dat overeenkomt. Browsers begrijpen niet veel kleuren als ze worden uitgeschreven, maar ze begrijpen hex-nummers heel goed. Het hex nummer voor onze lichtgele kleur is # FAF8DA
, en we willen dat toepassen op de , om de hele pagina te vullen.
body achtergrondkleur: # FAF8DA;
Belangrijk! Er is geen noodzaak voor een punt in de voorkant van lichaam
hier omdat het geen klassenaam is. In plaats daarvan hebben we meteen naar het lichaamselement gewezen.
Als je nieuwsgierig bent naar de hexadecimale waarde van andere kleuren, kan deze zeshoekige site erg handig zijn.
We kunnen ook de doopvont (de stijl van letters) voor onze website met lichaam
in onze CSS.
Het enige wat we op dit punt moeten weten, is dat we dat moeten doen link
een lettertype van Google naar ons HTML-document. Zodra deze zijn gekoppeld, begrijpt de browser dit en kunnen we deze gebruiken.
Hier is een blik op de link die we moeten toevoegen binnen de van onze HTML (dezelfde plaats waar we ons CSS-document hebben gekoppeld!)
Dan kunnen we dit opslaan en naar ons CSS-document gaan:
body font-family: 'Open Sans';
Hiermee wordt het lettertype voor alle tekst op de pagina ingesteld als Open Sans.
Binnen de koptekst zullen we de tekstkleur en -grootte en de afbeeldingsgrootte van de stad veranderen.
Ten eerste moeten we de juiste HTML-klassen toevoegen aan de elementen in de header, zodat we deze in onze CSS kunnen gebruiken.
In de opening label laten we een klasse van toevoegen
main-titel
en binnen de we zullen een klasse toevoegen van
town-voorvertoning
:
Welkom bij Tuts + Town
In ons CSS-document kunnen we nu naar deze elementen verwijzen door middel van de klassenamen die we hebben ingesteld en beginnen met stileren.
We hebben hier een tamelijk grote lettergrootte ingesteld 70px
. px, of pixels, is als een punt op het scherm. Deze punt is gevuld met kleur en wordt gebruikt als een maateenheid. Het imago van onze stad is ook vrij groot, dus we zullen dat instellen 650 pixels
breed.
De kleur
eigenschap bepaalt de kleur van de tekst, die hier (# 205D76
) Is donkerblauw.
.hoofdtekst font-size: 70px; kleur: # 205D76; .town-preview width: 650px;
Onthoud dat we in het algemeen kleinere secties hebben die een afbeelding en tekst bevatten. We moeten een formaat instellen voor deze afbeeldingen en de koppen en lijsten opmaken met CSS.
Het eerste dat we moeten doen is de grootte van de gebouwafbeeldingen instellen. Om de beeldformaten allemaal samen in te stellen, kunnen we dezelfde klassenaam gebruiken voor verschillende elementen.
We willen dezelfde klassenaam toevoegen, gebouw
, naar alle drie de winkelafbeeldingen in onze HTML en verander ze dan allemaal tegelijk in onze CSS, zoals deze:
.gebouw width: 200px;
Onze drie kleinere koppen kunnen ook dezelfde klassennaam hebben en we zullen die gebruiken om de kleur
en lettertypegrootte
van de tekst.
.categorie-heading color: # 205D76; lettertypegrootte: 30px;
Na het kopje binnen elke sectie hebben we onze ongeordende winkellijsten - onthoud ze? Naast het wijzigen van de grootte en de kleur van de links hier, moeten we ook de kleur van de lijst wijzigen kogel punten.
Laten we een klasse toevoegen store-lijst
naar de
en store-koppeling
naar de in ons HTML-document en sla het vervolgens op.
.winkellijst color: # FFC122; / * Wijzigt de opsommingstekenkleur * / .store-link color: # EA6E2F; lettertypegrootte: 20px;
Als u in de browser naar onze website kijkt, ziet u wellicht dat er niet veel ruimte tussen de lijstitems is, waardoor het er een beetje druk uitziet. We zullen het hier hebben over spacing en hier later wat aan toevoegen in de layout-tutorial in de serie.
Nadat we een klasse hebben toegevoegd primaire-footer
naar en
gemaakt door
naar de element binnen dit voettekst kunnen we de
Achtergrond kleur
evenals de tekst kleur
en lettertypegrootte
:
.primary-footer background-colour: # FFC122; . gemaakt door color: #FFFFFF; lettertypegrootte: 20px;
In deze les leerden we alles over het koppelen van een HTML- en een CSS-document en vervolgens prachtige stijlen aan onze elementen toevoegen klassen. Op dit punt zal wat we in onze browser zien nog steeds niet overeenkomen met het volledig ontworpen websitevoorbeeld waarnaar we verwezen hebben, maar kijk eens welk verschil een kleur en formaat kan maken! Het gaat alleen maar beter worden.
Vervolgens verplaatsen we onze inhoud op het scherm met behulp van extra slimme CSS lay-out technieken.
Ik zie je in de stad!