Text-decoration: Onderstrepen van teksten en links

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

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.

Met de css eigenschap 'text-decoration' kun je een lijn plaatsen boven, onder of dwars door de tekst.

Dat doe je respectievelijk met de waarde underline, overline en line-through.

Met de waarde 'none' zorg je ervoor dat er geen lijn wordt geplaatst.

Je kunt hiermee een al geplaatste lijn overschrijven naar geen lijn.

Zo worden links bijvoorbeeld door browsers standaard onderstreept.

En als je dat niet wilt, dan kun je voor de links de waarde 'text-decoration : none' opgeven.

In ons document staan drie links.

En deze worden standaard onderstreept door de browser. weggehaald.

Op zich vind ik het onderstrepen best oké.

Iedereen ziet dan snel dat dit een link is.

Alleen het feit dat deze onderstrepingen de staarten raken vind ik niet mooi.

Dat los ik op zodra ik deze standaard onderstreping heb weggehaald.

Om deze links te benaderen in mijn stijlblad kun je de a-selector gebruiken.

Maar het is gebruikelijker om deze links te voorzien van een aparte class-naam

Als bijvoorbeeld class="link".

Deze class-naam geef ik dan ook aan de overige twee links op de pagina.

Plaats dan als selector in het stijlblad .link en typ de css-eigenschap text-decoration.

Met de waarde none en weg zijn de standaard onderstrepingen.

Je kunt ook gebruik maken van het boxmodel om deze woorden toch te laten onderstrepen.

Daarvoor gebruik je dan de css-eigenschap border-bottom

Met de waarden een px voor de randdikte.

Solid voor het soort rand en de kleur maak ik nu eerst black.

En dit levert ook aan de onderkant van de tekst een zwarte rand op van een pixel.

Wil je de lijn meer of minder afstand geven dan kun je hiervoor de padding gebruiken met padding-bottom.

Voer een positief getal in om de lijn verder naar beneden te plaatsen.

Of een negatief getal om deze juist dichter op de tekst te plaatsen.

Met deze methode heb je veel meer mogelijkheden.

Ik kan de lijn ook een andere stijl geven In plaats van solid maak ik er een stippellijn van met dotted.

Of ik maak de lijn dikker. Terug naar de eigenschap text-decoration.

Ik gebruik nu even de koppen om het een en ander uit te leggen.

Daarvoor gebruik ik de verzameling selector voor de h-een, h-twee en h-drie.

Opnieuw text-decoration maar dit maal de optie 'overline'.

Underline is de standaard onderstreping.

Die je ook onder de links ziet. Maar je kunt het ook combineren. Een overline en een underline.

Best leuk! Behalve als deze uit meerdere zinnen bestaat. Zoals bij de tweede kop.

Dan verschijnen wel erg veel lijnen bij elkaar.

Met de opdracht line-through wordt er eenstreep door de tekst gezet.

Je kunt de lijnen met text-decoration-color ook voorzien van een andere kleur. Ik pak even oranje.

Deze staat bovenop dus voor de line-through niet echt geschikt.

Die wijzig ik weer in een underline en een overline.

Dan is er nog een css-eigenschap en dat is de text-decoration-style.

Waarmee je de soort lijn kunt wijzigen in een golvende lijn met wavy. Erg leuk!

Maar je kan ook kiezen voor dotted, een stippellijn. Of een streepjeslijn met dashed.

En een dubbele lijn met double.

De laatste mogelijkheid is solid. Deze wordt standaard getoond. Dat is de egale lijn.

De lijn wavy is eigenlijk de enige die uniek is voor de opdracht met text-decoration-style.

Deze kun je niet krijgen met de eigenschap border.

Maar al het andere kun je wel bereiken.

Bijvoorbeeld met de border-bottom en border-top kun je ook een lijn naar boven en naar beneden plaatsen.

Dan heb je ook nog meer controle over de afstanden van de lijnen.

En kun je elke lijn apart voorzien van een eigen lijnstijl, lijnkleur, lijndikte

Ga maar eens flink experimenteren met beide opties.

Het maken van lijnen via border-bottom, border-top.

En het creëren van lijnen met de text-decoration.