Share
We hebben een nieuwe en uitgebreide leergids om je te helpen online CSS te leren, of je nu net begint met de basis of als je meer geavanceerde CSS wilt verkennen. Uitchecken Leer CSS: de complete gids.
CSS werkt hand in hand met HTML; HTML sorteert de paginastructuur, CSS maakt het er mooi uit en voegt subtiele interactieniveaus toe. Als webdesigner moet u deze beide talen echt begrijpen. Zelfs als u de codering niet zelf uitvoert, zal het begrijpen van hoe ze werken u helpen ontwerpen voor het web.
C.S.S. betekent Cascading Style Sheets; documenten die stijlregels bevatten voor toepassing op HTML (of XML, samen met enkele andere structurele indelingen). Meerdere stijlregels kunnen verwijzen naar één HTML-element, in welk geval er een manier moet zijn om te bepalen welke regel van kracht moet worden. De voorwaarde cascading beschrijft het proces van filteren van algemene regels, totdat de meest specifieke regel wordt aangetroffen. Die regel wordt dan gekozen om zijn werk te doen ...
Via CSS kan de presentatie van de structuur worden gescheiden. Het lost de noodzaak op om stijlregels in HTML te fijnmaken, zoals dit:
Presentatie binnen de structuur. Ew. die documenten netter en DROGER houdt.
CSS wordt gelezen door webbrowsers. Ze nemen het markeringsdocument en passen de stijlregels toe op de elementen in dat document.
Ze interpreteren stijlregels niet altijd hetzelfde als anderen, en naarmate browsers zich ontwikkelen, gedragen ze zich ook op nieuwere stylingvoorstellen. Het zijn vaak de browserfabrikanten zelf die met CSS-eigenschappen experimenteren, in de hoop dat hun suggesties door gebruikers worden overgenomen.
Uiteindelijk is het aan het World Wide Web Consortium (W3C) of CSS-eigenschappen al dan niet gestandaardiseerd zijn.
CSS-syntaxis bestaat uit enkele fundamentele stukjes; regels, selectors, verklaringen, eigenschappen en waarden.
Deze CSS-regel bevat alle andere bits en bobs die we zojuist noemden.
Selectoren wijzen naar elementen binnen de HTML-markup en de declaraties binnen de accolades bepalen hoe die elementen moeten worden gestileerd. Er kunnen meerdere verklaringen binnen één regel zijn; elke verklaring bestaande uit een eigenschap met een bijbehorende waarde.
Er zijn veel manieren om HTML-elementen te selecteren, van eenvoudig typ selectors:
Hiermee worden alle afbeeldingen geselecteerd en wordt nul opvulling toegepast op alle afbeeldingen. Dan hebben we klasse selectors, die verwijzen naar alle elementen waarop een specifieke klasse is toegepast. Bekijk deze markup met de bijbehorende CSS:
Hier is een anker, waarvan er veel zouden kunnen zijn ... 
... dan selecteert dit alle ankers met een klasse van "highlight" en maakt deze oranje. Notitie: in tegenstelling tot wat je zou kunnen horen, bestaat er niet zoiets als een CSS-klasse. Er zijn CSS selectors welk doel HTML-klassen. Je kunt hierover meer lezen op tantek.com en 456 Berea St.
Er zijn heel veel mogelijke selectors om te leren. Er zijn nog meer eigenschappen om grip op te krijgen (bekijk deze lijst op de W3C-site). Later zullen we kijken naar opdrachten waarin u wordt gevraagd om veel van elk te leren. Met zo veel mogelijk tips voor je zal je een betere CSS-coder maken!
Nu heb je een fundamenteel begrip van wat CSS is, het is tijd om goed te duiken. Er zijn een aantal beginnerscursussen online die je kunnen helpen; hier zijn slechts een paar die zeker de moeite van het bekijken waard zijn:
Toen Dave Shea in mei 2003 CSS Zen Garden op de markt bracht, wilde hij laten zien dat een enkel HTML-document op oneindige manieren kon worden gestileerd met behulp van verschillende stylesheets. Het was een briljant concept en een echt gloeilampmoment voor ontwerpers over de hele wereld.
Waarom doe je zelf niet iets soortgelijks? Neem een simpel stukje markup (de ongeordende lijstnavigatie van Chris Coyier is de perfecte kandidaat):
Bekijk hoeveel verschillende effecten u kunt bereiken, alleen door de stijlen aan te passen.
Bekijk deze Webdesigntuts + Community Workshop waar bijna 100 lezers hun stylesheets hebben ingediend voor een eenvoudige ongeordende lijst. Zoals je zult zien aan de resultaten, kan een beetje fantasie CSS ver brengen!
Als mensen CSS kennen, tweeten ze erover - dat is een wetenschappelijk feit. Besteed aandacht aan wat CSS-beroemdheden aan het doen zijn en je zult veel leren. Hier zijn slechts een paar twitteraars die u zou moeten volgen:
... en ...
Waarom vindt u uw eigen helden niet op een sociale codeersite zoals GitHub of CodePen? Het beste ding over netwerken zoals deze is het advies dat iedereen elkaar geeft; Als je een CSS-probleem hebt, zal iemand het voor je hebben gehad en bereid zijn om een handje te helpen.
CodePen Zoals we eerder al zeiden, interpreteren browsers uw stijlen niet altijd evenveel. Dit is met name het geval als u op oudere versies van Internet Explorer let, die qua CSS-acceptatie ver achterlopen. Moderne browsers (zoals Google Chrome, Mozilla Firefox, Apple Safari, Opera en zelfs Internet Explorer 10) hebben een meer proactief updatebeheer, waardoor de kans kleiner wordt dat oudere versies lang blijven rondzweven.
Zeggen dat, er zijn verschillen tussen elk van deze browsers, ongeacht hoe up-to-date ze toevallig zijn. Sommige CSS worden goed ondersteund in één browser, anders geïnterpreteerd in een andere, dus om deze reden is het een goed advies om aandacht te besteden aan browsers.
Hier zijn enkele nuttige bronnen die je op weg helpen:
Of u ze nu als dekking bekijkt of gewoon bij de hand hebt als u snel een referentie nodig hebt, de beste brancheboeken zijn ongeëvenaard om te leren.
CSS is al vele malen geschreven, maar deze publicaties zijn mijn neusje bij de zalm:
Naarmate je meer zelfvertrouwen krijgt, groeit je CSS-vocabulaire. U gaat CSS-eigenschappen in het geheugen vastleggen en ook de verschillende manieren om elementen te selecteren. Dit is het moment om het echt een beetje op te waarderen en serieus enkele CSS-kiezers te leren.
Leren van CSS-selectors betekent ook grip krijgen op de specificiteit.
Stormtrooper Icon door Jory Raphael Welke selectors zullen anderen negeren? Wat is de minimale syntaxis die ik in mijn selectors moet gebruiken om efficiënt te zijn in mijn codering? De enige plaats waar ik altijd mensen naartoe stuur om de regels van specificiteit te leren, is Andy Clarke's CSS: Specificity Wars. Een geïnspireerde visualisatie van hoe selectors het doen als ze tegen elkaar aan zitten (en de duistere krachten).
CSS is een zeer betrokken discipline. Zodra u de basisbeginselen onder uw riem hebt, zijn er veel mogelijkheden voor verder onderzoek. Bijvoorbeeld:
CSS3 is constant in beweging. Nieuwe eigenschappen worden aangenomen, andere worden volledig weggelaten door browsers, soms verandert de syntaxis zelfs. Om grip te krijgen op CSS-gradiënten, zal een nieuwe spijker in de kist van je Photoshop-gebruik zijn; waarom gebruik je gesnipte afbeeldingen als je CSS kunt gebruiken?!
Refereer naar CSS3 Gelieve alle correcte CSS3-implementatie te bekijken, met aanbevolen fallbacks voor niet-ondersteunende browsers. Kijk ook eens naar CSS3 Essentials op Tuts + Premium om je kennis een boost te geven.
Met Responsive Web Design kunnen uw vloeiende weblay-outs worden gewijzigd, afhankelijk van hoe de pagina wordt geopend. CSS3-mediaquery's helpen dit proces en leveren afhankelijk van de omstandigheden verschillende CSS-regels. Bekijk Responsive Web Design: een visuele gids om te beginnen.
Het blijkt dat CSS beter zou kunnen zijn. Zodra u CSS voor projecten in de echte wereld bent gaan gebruiken, zult u waarschijnlijk dezelfde conclusie trekken. Het onderhouden van grote CSS-bestanden is moeilijk, herhaling is normaal - en waarom kun je een variabele niet gebruiken om de waarde van een HEX-kleur op te slaan in plaats van steeds opnieuw te typen ?! CSS preprocessors zoals Sass, LESS en Stylus lossen al deze problemen op en meer. Zonder zelfs een soortgelijke taal opnieuw te moeten leren (gewoon vasthouden aan vanille CSS als je dat wilt) kun je de kracht van preprocessors benutten.
Ga eens naar Get Into LESS, Mastering SASS en Sass vs. LESS vs. Stylus: Preprocessor Shootout als je meer wilt weten.
SMACSS (of Scalable and Modular Architecture voor CSS) is een concept ontwikkeld door Jonathan Snook, dat de onhandige onderhoudbaarheid van CSS-bestanden wil bestrijden. Het leert geen nieuwe taal, maar suggereert manieren waarop u uw huidige CSS beter georganiseerd kunt maken.
Door modulaire CSS te schrijven, kun je stukjes code opnemen en deze in andere projecten invoegen, zonder de rest van je stijlen te verpesten. Specificiteitsbeheer op zijn best.
Er is geen twijfel dat met vaardigheden zoals HTML en CSS onder uw riem, u een veel betere webdesigner zult zijn. Volg de twee leerprocessen die we hebben beschreven en je bent goed op weg.
Als je CSS-leeraanbevelingen hebt, roep ze dan in de comments!
Accentsconagua