Background-color toepassen

uit de cursus Webdesign & Layout met css (2019)

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Volgende video: Background-image toepassen

Geef een reactie of stel een vraag

Geef een antwoord

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Webdesign & Layout met css (2019)

perm_identity Belinda | video_library 58 video's | query_builder 03:28:15

Webdesign met CSS

Met css bepaal je de layout en de vormgeving van een webpagina. CSS schrijf je in een apart bestand dat je koppelt aan de html-pagina’s. Hiermee koppel je de inhoud los van de vormgeving en dat biedt heel veel voordelen. Dankzij externe css-stijlbladen zorg je voor een consistente vormgeving en opmaak voor de gehele website. Leer op welke manier je CSS kan verbinden aan webpagina’s en gebruik te maken van de juiste css-selectors.

CSS blijft in ontwikkeling

CSS biedt een groot aantal css-stijlopdrachten waarmee je onder andere teksten en afbeeldingen perfect kunt vormgeven. CSS is continu in beweging omdat hier elke dag aan ontwikkeld wordt. Het is dus een taak om altijd op de hoogte te blijven van de nieuwe mogelijkheden en de veranderingen. Maar de basis is de basis, en die leer je in deze cursus. Vanuit dit startpunt kun je jezelf blijven ontwikkelen in deze krachtige manier van het consistent vormgeven van je HTML-pagina’s.

Doelgroep van deze cursus

Wil jij zelf de vormgeving van html-pagina’s bepalen dan is deze cursus absoluut een must.

Wat ga je leren

In deze online basiscursus  leer je de grondbeginselen van css (Cascading Style Sheets). Waaronder hoe je met grid en flexbox op een waanzinnig snelle, efficiënte en makkelijke manier snel een responsive design kunt maken die zich automatisch op elk formaat beeldscherm perfect aanpast. In deze cursus leer je direct hoe je jouw website responsive maakt met mediaqueries. Klinkt misschien ingewikkeld maar je zult merken dat dit reuze meevalt. En daarnaast is het vaardig worden van responsive design een ‘must’ voor webdesigners.

Vereiste voorkennis en vaardigheden

Voor het volgen van deze cursus heb je kennis en ervaring nodig van het vervaardigen en structureren van html-pagina’s.

De propertie 'background' heeft verschillende eigenschappen.

Je hebt een 'background-color', hiermee kun je een kleur opgeven.

Een 'background-image', waarmee je een afbeelding kunt aanwijzen.

De 'background-repeat', waarmee je kunt instellen of de afbeelding herhalend moet worden toegepast of eenmalig.

Een 'background-position', waarmee je de positie van de achtergrondafbeelding bepaalt.

En een 'background-attachment',

waarmee je het gedrag van een achtergrondafbeelding kunt bepalen zodra de bezoeker gaat scrollen.

We beginnen met de background-color.

Je kunt elk html element een achtergrondkleur meegeven.

De ruimte die het element inneemt, bepaalt de wijze waarop deze wordt toegepast.

Als je een block-level element voorziet van een achtergrondkleur, bijvoorbeeld een h-één.

Dan wordt altijd de gehele regel gekleurd.

Omdat een block-level element altijd de hele regel in beslag neemt en geen andere elementen naast zich verdraagt.

Bij een inline element wordt bijvoorbeeld alleen de ruimte, die het element op de regel inneemt, gekleurd.

Zoals je in dit voorbeeld ziet bij de 'link' wat een inline element is.

Alleen de linktekst krijgt dan een achtergrondkleur.

Je kunt gebruik maken van de verschillende soorten kleurwaarden die toegestaan zijn in html.

Als bijvoorbeeld de kleurnaam, de hexadecimale kleur, de rgb-kleur of hsl-kleur.

Voordeel van rgb en hsl is dat je die kunt uitbreiden met een alphakanaal.

Een vierde waarde waarmee je de kleur transparant kunt maken.

Ik ga dit toepassen in ons document.

Voor dit hoofdstuk maken we gebruik van de local root folder css--.

Ga naar Bestand > Open map en zorg dat je de map css-- toewijst.

Open daarna de bestanden index.html en main.css.

Ik ga de koppen h-één tot en met h-drie een achtergrondkleur meegeven.

Plaats de eigenschap background-color en een kleurwaarde.

Bovenin het stijlblad heb ik een kleurenpalet opgenomen die je kunt gebruiken.

Deze kopieer ik met Commando C. Plak ik als achtergrondkleur met Commando V.

Een h-element neemt de hele regel in beslag.

Dus ook al loopt de tekst niet door over de hele regel.

Toch wordt tot aan het einde van de regel de achtergrondkleur getoond.

De kop h-twee en h-drie krijgen deze achtergrondkleur. Maar de h-één niet. Waarom niet?

Nou meestal komt dat omdat je verderop in het stijlblad een css-stijl hebt staan die deze overschrijft.

Dit soort dingen gebeuren wel vaker als je een pagina aan het stijlen bent.

In plaats dat je enorm gaat lopen zoeken doe je het volgende.

Klik met de rechtermuisknop in de browser en kies voor inspecteren.

Activeer het select-gereedschap en klik eenmaal op de h-één.

Nu kun je precies aflezen welke css-stijlen op deze h-één zijn toegepast.

Mooier nog. Je kunt precies aflezen welke overschreven worden.

En welke css-stijl uiteindelijk de vormgeving bepaalt.

Dat is dus de stijl met de selector .title op regel honderdachtentwintig.

Zoek deze regel op in het css-stijlblad. Daar staat de selector met de achtergrondkleur.

Verwijder deze background-color. En nu overschrijft deze niet meer mijn voorgaande cds-regel.

En kleurt ook de achtergrond van de h-één blauw.

Dan ga ik de links in het maingebied een achtergrondkleur geven.

Links worden gemaakt met het a-element en hebben de class-naam 'link' mee gekregen.

Een link is een inline element en kan altijd ergens op de regel voorkomen, zo ook in dit voorbeeld.

Zoek de selector a.link op. Opnieuw plaats ik hier de eigenschap background-color.

Ditmaal wordt alleen de ruimte die het inline element inneemt gekleurd.

Om de kleur transparant te maken plaats je een a achter hsl om een alphakanaal aan te maken.

Dat wordt dan een vierde waarde.

Het getal één staat voor honderd procent dekking.

Alles lager is transparantie. Dus vijftig procent dekkend is hetzelfde als punt vijf.

Om de achtergrondkleur meer ruimte te geven om de tekst gebruik je een padding.

Bijvoorbeeld van vijf pixels rondom. En dat kun je ook schrijven als punt vijf rem.

Om enkel meer ruimte naar links en rechts te krijgen.

Kun je de waarde voor naar boven en naar beneden, en dat is de eerste waarde, op nul te zetten.

En dan geldt de tweede waarde nu alleen voor naar links en naar rechts.