Zodra u begint te zoeken in HTML 17 Eenvoudige HTML-codevoorbeelden U kunt leren in 10 minuten 17 Eenvoudige HTML-codevoorbeelden U kunt in 10 minuten leren Als u de volgende 17 HTML-tags kent (en de extra paar die daarbij horen), kunt u In staat zijn om vanaf het begin een basispagina te maken of de code te wijzigen die is gemaakt door een app zoals ... Lees meer, u zult waarschijnlijk geïnteresseerd zijn in het toevoegen van meer kracht aan uw webpagina's. CSS is de beste manier om dat te doen. Met CSS kun je wijzigingen op je hele pagina toepassen zonder veel inline HTML-stijlen te hoeven gebruiken 9 Fouten die je niet zou moeten maken bij het bouwen van een webpagina Fouten die je niet zou moeten maken bij het bouwen van een webpagina Deze volgende HTML-codeerfouten zijn gemakkelijk te maken maken, maar als u ze eerder dan later uitschakelt, ziet uw pagina er beter uit, is deze gemakkelijker te onderhouden en functioneert deze hoe u wilt. Lees verder .
We zullen bespreken hoe je een inline stylesheet kunt maken, zodat je je CSS-vaardigheden kunt oefenen, en dan gaan we verder met 10 eenvoudige voorbeelden die je laten zien hoe je een paar elementaire dingen moet doen. Van daaruit is je verbeelding de limiet!
Als je een iets meer technische introductie wilt, moet je 5 Baby Stappen om CSS te Leren & Kick-Ass CSS te ontdekken CSS Sorcerer 5 Baby Stappen om CSS te leren en een Kick-Ass te worden CSS Sorcerer 5 Baby Stappen om CSS te leren en te worden a Kick-Ass CSS Sorcerer CSS is de allerbelangrijkste verandering die webpagina's in het afgelopen decennium hebben gezien, en het maakte de weg vrij voor de scheiding van stijl en inhoud. Op de moderne manier definieert XHTML de semantische structuur ... Lees meer.
Inline stylesheet
Elk HTML-document bevat een tag. In dat hoofdgedeelte gaat uw inline CSS-stylesheet. Hier is hoe het eruit zal zien:
All of your CSS declarations.Zet dat bovenaan je document, vul het met je CSS, en je bent klaar om te gaan.
1. Eenvoudige paragraafopmaak
Het leuke aan styling met CSS is dat je niet telkens een stijl hoeft te specificeren als je een element maakt. Je kunt gewoon zeggen "alle alinea's moeten deze specifieke stijl hebben" en je bent klaar om te gaan. Hier is een voorbeeld van hoe u dat zou kunnen doen.
Laten we zeggen dat je elke paragraaf wilt (dat is alles met een
HTML-tag Top-11 HTML-tags Elke blogger en website-eigenaar moet weten Top-11 HTML-tags Elke blogger en website-eigenaar moet het weten Het world wide web kent vele talen en is gecodeerd in verschillende talen. De enige taal echter die overal te vinden is en die al bestaat sinds de uitvinding van webpagina's, is de ... Lees meer) op je pagina om iets groter te zijn dan normaal. En donkergrijs, in plaats van zwart. Dit is hoe je dat zou doen met CSS:
p { font-size: 120%; color: dimgray; } Dat is alles wat er is. Nu, telkens wanneer de browser een
alinea, zal de tekst de grootte (120 procent van normaal) en de kleur ("dimgray") erven.
Als je nieuwsgierig bent naar welke kleuren in platte tekst je kunt gebruiken, bekijk dan deze CSS-kleurenlijst in Mozilla.
2. Wijzig de hoofdletter
Oké, dus nu we hebben gezien hoe we elke alinea kunnen veranderen, laten we eens kijken naar hoe we een beetje selectiever kunnen zijn. Laten we een aanduiding maken voor alinea's die in kleine letters moeten zijn. Dit is hoe we dat zouden doen:
p.smallcaps { font-variant: small-caps; } Als u een alinea wilt maken die volledig in kleine letters staat, gebruiken we een iets andere HTML-tag. Hier is hoe het eruit ziet:
Jouw paragraaf hier.
Zoals u kunt zien, geeft het toevoegen van een punt en een klassenaam aan een specifiek element in CSS een subtype op van dat element dat door een klasse is gedefinieerd. U kunt dit doen met tekst, afbeeldingen, links en zo ongeveer alles.
Als u het geval van een reeks tekst in een specifiek geval wilt wijzigen, kunt u deze CSS-regels gebruiken:
text-transform: uppercase; text-transform: lowercase; text-transform: capitalize; De laatste kapitaliseert de eerste letter van elke zin.
3. Wijzig koppelingskleuren
Laten we de stijl van iets anders dan een volledige alinea proberen te veranderen. Er zijn vier verschillende kleuren waaraan een link kan worden toegewezen: de standaardkleur, de bezochte kleur, de zweefkleur en de actieve kleur (die wordt weergegeven terwijl u erop klikt). Dit is hoe we die kunnen veranderen:
a:link { color: gray; } a:visited { color: green; } a:hover { color: rebeccapurple; } a:active { color: teal; } Merk op dat elke "a" wordt gevolgd door een dubbele punt, geen punt.
Elk van deze verklaringen verandert de kleur van een link in een specifieke context. Het is niet nodig om de klasse van een link te veranderen om hem van kleur te laten veranderen. Dit wordt allemaal bepaald door de gebruiker en de staat van de link.
4. Koppelingen onderlijnen verwijderen
Hoewel onderstreepte tekst vrij duidelijk een link aangeeft, ziet het er soms leuker uit om die onderstreping te schrappen. Dit wordt bereikt met het kenmerk "text-decoration". Dit is hoe we de onderstrepingen van links verwijderen:
a { text-decoration: none; } Alles met de link ("a") -tag zal niet-onderstreept blijven. Wilt u het onderstrepen wanneer de gebruiker eroverheen zweeft? Voeg dit hieronder toe:
a:hover { text-decoration: underline; } U kunt deze tekstversiering ook aan actieve koppelingen toevoegen om ervoor te zorgen dat de onderstreep niet verdwijnt wanneer op de koppeling wordt geklikt.
5. Maak een linkknop
Als u meer aandacht wilt vestigen op uw link, is het gebruik van een linkknop een goede manier om dit te doen. Deze vereist nog een paar regels, maar we zullen ze elk afzonderlijk bespreken:
a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; } Door alle vier de linkstatussen op te nemen, zorgen we ervoor dat de knop niet verdwijnt wanneer een gebruiker erop zweeft of erop klikt. Je kunt ook verschillende parameters instellen voor zwevende en actieve koppelingen, zoals het wijzigen van de knop of tekstkleur, om een beetje pop toe te voegen.
De achtergrondkleur is ingesteld met achtergrondkleur en tekstkleur met kleur. Opvulling definieert de grootte van het vak - de tekst is verticaal opgevuld met 10 px verticaal en 25 px horizontaal. Text-align zorgt ervoor dat de tekst in het midden van de knop wordt weergegeven, in plaats van opzij. Tekstdecoratie, zoals we in het vorige voorbeeld hebben gezien, verwijdert de onderstreping.
"Display: inline-block" is iets gecompliceerder. Kort gezegd, hiermee kunt u de hoogte en breedte van het object instellen en ervoor zorgen dat het een nieuwe lijn begint wanneer het wordt ingevoegd.
6. Maak een tekstvak
Een eenvoudige paragraaf is niet erg opwindend. Als u uw call-to-action of een ander element op uw pagina wilt markeren, kunt u een rand eromheen gooien. Hier is de manier om dat te doen met een reeks tekst:
p.important { border-style: solid; border-width: 5px; border-color: purple; } Deze is vrij eenvoudig. Het creëert een effen paarse rand, 5 pixels breed, rond elke alinea van de belangrijkste klasse. Als u een alinea wilt overerven van deze eigenschappen, geeft u dit als volgt aan:
Uw belangrijke alinea hier.
Dit werkt ongeacht de grootte van uw alinea; een enkele regel krijgt een rand de breedte van de pagina, één regel hoog en een langere alinea wordt omringd door een grotere rand.
Er zijn veel verschillende randstijlen die u kunt toepassen; in plaats van "vast", "gestippeld" of "dubbel". En de breedte kan "dun", "medium" of "dik" zijn. Je kunt zelfs de dikte van elke rand individueel definiëren, zoals deze:
border-width: 5px 8px 3px 9px; Dat resulteert in een bovenrand van 5 pixels, een rechterrand van 8, een onderkant van 3 en een linkerrand van 9 pixels.
7. Center-Align Elements
Voor een heel gewone taak is dit een verrassend onintuïtief ding met CSS. Als je het een paar keer hebt gedaan, wordt het veel gemakkelijker. Er zijn een paar verschillende manieren om dingen te centreren.
Voor een blokelement (meestal een afbeelding) gebruiken we het margeattribuut:
.center { display: block; margin: auto; } Dit zorgt ervoor dat het element als een blok wordt weergegeven en dat de marge aan elke kant automatisch wordt ingesteld (waardoor ze gelijk worden). Als u alle afbeeldingen op een bepaalde pagina wilt centreren, kunt u zelfs "marge: auto" toevoegen aan de img-tag:
img { margin: auto; } Om te leren waarom het op deze manier werkt, bekijk de CSS-boxmodel uitleg op W3C. Hier is een korte, grafische versie:
Maar wat als we tekst willen centreren? CSS heeft een specifieke methode om dat te doen:
.centertext { text-align: center; } Als we de klasse "centertext" willen gebruiken om de tekst in een bepaalde alinea te centreren, hoeven we alleen die klasse aan de alinea toe te voegen.
label:
Deze tekst zal gecentreerd zijn.
Het onthouden van die verschillende stappen is echter een andere zaak. Misschien wilt u deze pagina een bladwijzer maken.
8. Vulling aanpassen
De opvulling van een element geeft aan hoeveel ruimte er aan elke kant moet zijn. Als u bijvoorbeeld 25 pixels opvulling aan de onderkant van een afbeelding toevoegt, wordt de volgende tekst 25 pixels naar beneden geschoven. Veel elementen kunnen opvulling hebben, maar hier gebruiken we een afbeelding voor een voorbeeld.
Stel dat u wilt dat elke afbeelding 20 pixels opvulling aan de linker- en rechterkant en 40 pixels aan de boven- en onderkant heeft. Er zijn een aantal manieren waarop u dit kunt doen. De meest elementaire:
img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; } Er is een korte hand die we kunnen gebruiken om al deze informatie te presenteren:
img { padding: 40px 25px 40px 25px; } Hiermee stelt u de bovenste, rechter, onderste en linker paddings in op het juiste aantal. Maar we kunnen het nog korter maken:
img { padding: 40px 25px } Wanneer u slechts twee waarden gebruikt, wordt de eerste waarde ingesteld voor de boven- en onderkant, terwijl de tweede links en rechts wordt weergegeven.
9. Markeer Tabelrijen
CSS kan veel doen om uw tafels er leuk uit te laten zien. Kleuren toevoegen, randen aanpassen en uw tabel responsief maken op mobiele schermen zijn allemaal eenvoudig. We kijken hier naar slechts één cool effect: het markeren van tabelrijen wanneer u er met de muis overheen gaat.
Hier is de code die je daarvoor nodig hebt:
tr:hover { background-color: #ddd; } Telkens wanneer u met de muis over een tabelcel gaat, verandert die rij van kleur. Bekijk de W3C-pagina over fancy CSS-tabellen om enkele van de andere leuke dingen die je kunt doen te bekijken.
10. Afbeeldingen verplaatsen tussen transparant en dekkend
CSS kan je ook helpen om coole dingen met afbeeldingen te doen. Het kan bijvoorbeeld afbeeldingen weergeven met minder dan volledige dekking (ze lijken een beetje "wit gemaakt") en brengen ze volledig opaciteit wanneer je er met de muis overheen beweegt. Dit doen we als volgt:
img { opacity: 0.5; filter: alpha(opacity=50); } Het kenmerk "filter" doet hetzelfde als "dekking", maar Internet Explorer 8 en eerder herkennen de dekkingsmeting niet, dus het is een goed idee om deze op te nemen.
Nu de afbeeldingen enigszins transparant zijn, brengen we ze volledig ondoorzichtig op een muisover:
img:hover { opacity: 1.0; filter: alpha(opacity=100); } Word een CSS Master
Met deze CSS-codevoorbeelden zou u een veel beter idee moeten hebben van hoe CSS werkt. Zodra u ze allemaal hebt doorlopen, zult u een aantal patronen opmerken die u kunt toepassen op verdere CSS-code. Leer HTML en CSS met deze stap voor stap zelfstudies Leer HTML en CSS met deze stapsgewijze handleidingen Benieuwd naar HTML, CSS en JavaScript? Als je denkt dat je de gave hebt om vanaf nul te leren hoe je websites kunt maken - hier zijn een paar geweldige stap-voor-stap tutorials die het proberen waard zijn. Lees verder . En dat is het moment waarop u weet dat u echt een CSS-master bent gaan worden.
En als dit allemaal te gecompliceerd klinkt, onthoud dan dat je gewoon wat CSS-sjablonen neemt. 11 CSS-sjabloonsites: Do not Start From Scratch! 11 CSS-sjabloonlocaties: start niet met krassen! Er zijn duizenden gratis CSS-sjablonen online beschikbaar, die allemaal moderne designtrends en -technologieën omarmen. Je kunt ze in hun oorspronkelijke vorm gebruiken, of ze aanpassen om ze je eigen te maken. Lees Meer en pas ze aan.
Wat doe je met CSS? Welke voorbeelden wilt u in de toekomst zien? Deel je mening in de comments hieronder!