CSS Back To Basics Terminologies Explained
CSS of Cascading Stylesheets vervolledigen de definiërende taal van ontwerpregels voor ons web. Artiesten overal gebruiken CSS dagelijks om reeksen regels voor basiswebsiteopmaken te maken, organiseren en coderen. Dit is de populairste taal voor front-end design geworden en biedt geweldige mogelijkheden met de recente release van CSS3. Maar wat betekent al deze code eigenlijk??
De taal zelf is al een paar jaar volledig ontwikkeld. Verwarring kan vooral ontstaan door miscommunicatie en misbruik van vergelijkbare termen. CSS brengt veel nieuwe concepten naar de tafel. We behandelen een aantal van de populairste terminologie die je kunt beheersen als een CSS-goeroe.
Waarom specialiseren met CSS?
Deze vraag is eerder gesteld en zelfs in 2011 kunnen we dezelfde resultaten zien verschijnen. CSS is een robuuste taal die je niet graag in scripting of programmeren vindt. Het is een stijltaal, meer specifiek code die wordt gebruikt om te beschrijven hoe een webpagina zich zou moeten gedragen.
Met behulp van CSS kunnen we kenmerken van individuele HTML-elementen direct manipuleren. Alle blokken, alinea's, links en afbeeldingen kunnen worden beïnvloed door CSS-regels. Het verfijnen van presentatiesemantiek voor het web is altijd al een grote stap geweest. Dit is de belangrijkste reden waarom CSS nog steeds de leidende speler is voor ontwerpers - niemand heeft iets beters gecreëerd!
Eigenschappen en waarden
Dit is de eenvoudigste manier om in te breken in CSS. Alle code valt uiteen in twee acties: een element kiezen om ontwerpen toe te passen en wat toe te passen. Dit laatste wordt gemaakt door eigenschappen / waardeparen.
Als voorbeeld kleur rood; is een heel eenvoudig paar eigenschappen / waarden. De woning die we hebben gebruikt is kleur wat ons in staat stelt om een aanvaardbaar door te geven waarde om tekstkleur te veranderen. Dit kunnen ook hexadecimale of RGB (rood-groen-blauw) kleurgegevens zijn. Vaak noemen ontwerpers het idee van waarden niet omdat het misleidend kan zijn.
Eigenschappen en waarden zijn eigenlijk een enkel idee. Elke eigenschapsverklaring heeft een waarde nodig en waarden op zich zijn zinloos. Er is online veel documentatie die over de vele verschillende eigenschappen gaat en hoe deze HTML-elementen beïnvloeden. Ik zou aanraden om een CSS-naslagwerk te kopen in een boekwinkel in de buurt. Ze zijn redelijk goedkoop en bevatten vrijwel alle informatie die je nodig hebt.
Selectorwaarden
Selectors zijn nodig om een volledige regel CSS-code te voltooien. Dit is wat we aangeven te bepalen welk type element we targeten. Er zijn veel selectors en veel zijn zo ingewikkeld dat de gemiddelde ontwerper de vaardigheden niet nodig zou hebben. Controleer de selectordocumenten van W3 als u meer wilt weten.
De eenvoudigste manier om stijldefinities te starten is om kale elementen te gebruiken als eigenschapselectoren. Dit betekent het manipuleren van root-code zoals p voor alinea's, div voor divisies en zelfs lichaam en html kan worden gebruikt om het volledige webpaginadocument te manipuleren. Hieronder is een snel voorbeeld van het stylen van alle alinea-elementen.
p font-family: Arial, sans-serif; kleur: # 222; lettertype: vet;
Wat CSS echt belangrijk maakt, is hoe nauwkeurig het snipen van selecties kan zijn. De beste manier om gerichte stijlen te bereiken, is door middel van 2 methoden die bekend staan als klassen en IDs. Dit zijn alledaagse ideeën in HTML, waar u elk element kunt instellen om een ID en een klassewaarde te krijgen door attributen. Dan met behulp van CSS is het eenvoudig om stijlen toe te passen op dat specifieke blok.
p # firstpar font-size: 14px; / * stijlen paragraaf met ID van "firstpar" * / p.comment font-size: 1.0em; regelhoogte: 1.3em; / * stijlen alinea ('s) met klasse van "opmerking" * / Lengte-eenheden en waarden
Vaak worden deze termen door elkaar gehaald, geen grote verrassing. Waarden werden eerder uitgelegd als de plaatsing die we gebruiken om een eigenschap te beschrijven. Lengte-eenheden zijn ook waarden omdat ze worden gebruikt om een eigenschap te beschrijven.
Het verschil is dat deze waarden numerieke gegevens vereisen en daarom een bepaalde vorm van eenheden moeten teruggeven. Pixels (px) zijn de meest voorkomende en kunnen voor bijna alles worden gebruikt: breedte / hoogte, tekengrootte, opvulling / marges, om er een paar te noemen.
Anders dan deze kunt u percentages (%) zien die vaak worden gebruikt door middel van vloeiende lay-outs. Wanneer u de breedtewaarden instelt op een percentage, neemt de compiler 100% over als de volledige breedte van de webbrowser. Dit geeft veel precisie aan ontwerpers bij het toepassen van stijlen op lay-outstructuren en zelfs paginatypografie.
Het aangifteblok
Nu we al deze voorwaarden hebben samengebracht, kunnen we eindelijk de kerngedachte achter stylesheets bespreken. Blokjes code worden gebruikt om onderwerpgebieden af te bakenen en elementdetails te specificeren. Hieronder ziet u bijvoorbeeld een coderegel voor een eenvoudige navigatiecontainer:
div # nav display: block; breedte: 100%; opvulling: 3px 6px; margin-bottom: 20px;
De gemakkelijkste manier om deze code weer te geven, is om lijneigenschappen één na één te gebruiken. CSS-ontwikkelaars hebben blokken code gebruikt om elke eigenschap op een eigen regel te splitsen. Deze agenda neemt niet alleen veel meer ruimte in beslag, maar vermindert ook de mogelijkheid om “afromen” uw blad om precies te vinden wat u nodig heeft.
Een betere manier om codeblokken te doorbreken, is door ingewikkelde elementen op zichzelf te scheiden nadat ze een drempel hebben bereikt. Dit nummer is persoonlijk en zal verschillen tussen ontwikkelaars. Het is het kantelpunt waar logica het dwaas dicteert om alles op één regel te houden, voornamelijk vanwege de leesbaarheid.
Hieronder heb ik een voorbeeld van een blok navigatie-eigenschappen bij elkaar geschreven. Deze oefening houdt diepere elementen op dezelfde locatie, zodat bewerkingen voor alle navigatie-elementen veel eenvoudiger zijn.
div # nav display: block; breedte: 100%; opvulling: 3px 6px; margin-bottom: 20px; div # nav ul lijststijl: geen; weergave: blok; div # nav ul li float: left; margin-right: 10px; lettergrootte: 12px; div # nav ul li a color: # 0f0f0f; tekstdecoratie: geen; weergave: inline-block; opvulling: 2px 5px;
Mogelijke verbeteringen van CSS2 / CSS3
In de krantenkoppen is de laatste tijd non-stop gepraat over de geweldige voordelen van CSS3. Maar wat heeft het echt veranderd in de taal? Het is duidelijk dat de oude code nog steeds prima werkt. Dit toont tenminste complete backwards-compatibiliteit tussen compilers (altijd een goede zaak).
Grote verschillen zijn meestal gerelateerd aan nieuwe eigenschappen. Hiermee kunnen afgeronde hoeken en slagschaduweffecten in de browser worden weergegeven. CSS3 biedt ook nieuwe hulpmiddelen voor het beschrijven van kleuren in documenten. HSL (Hue-Saturation-Lightness) is de nieuwste toevoeging aan HSLA, die een alfakanaal bevat om de dekking te verminderen.
Attribuutselectoren zijn een enorme stap voorwaarts met betrekking tot het rechtstreeks markeren van stijlen. Met deze codestijl kunt u een specifieke elementnaam targeten die attributen met bepaalde waarden bevat. Deze zijn vooral handig bij het werken met opmaak zoals XML, waar er geen standaard ontwerpprincipes zijn om knooppunten te manipuleren. Het onderstaande voorbeeld is een relatief eenvoudig idee:
div [attrib ^ = "1"] / * stijlen hier * /
De bovenstaande code is onderdeel van de CSS selectors-bibliotheek. Dit zou alle div-elementen met een attribuut beïnvloeden “attrib” die ook de waarde behoudt “1”. Als dit is nog steeds verwarrend verwijzing het onderstaande voorbeeld om te verduidelijken. In theorie zouden deze twee selectors dezelfde acties moeten uitvoeren.
p [id ^ = "primair"] / * stijlen * / p # primaire / * stijlen * /
Conclusie
Na het doorbreken van enkele van de meest overdreven verwarde termen lijkt CSS een wandeling in het park. De taal is erg intuïtief en beginners kunnen binnen de eerste paar uur beginnen met ontwerpen. Dit is wat CSS zo populair maakt bij webontwikkelaars.
De voordelen van CSS3 zijn nog maar net begonnen. Gedurende de nieuwe paar jaar evoluerende webtrends laten we zien hoeveel controle we echt hebben over het ontwerpen van webpagina's. CSS is momenteel trots op de dominante taal voor de styling van een front-end website. Het oefenen in zelfs rudimentaire vaardigheden op gemiddeld niveau kan een overvloedige ontwerpervaring en verdere kennis opleveren.
