nl.hideout-lastation.com
Paradijs Voor Ontwerpers En Ontwikkelaars


CSS Back To Basics: Terminologies Explained

Dit artikel maakt deel uit van onze "HTML5 / CSS3 Tutorials-serie" - speciaal bedoeld om u een betere ontwerper en / of ontwikkelaar te maken. Klik hier om meer artikelen uit dezelfde serie te zien.

CSS of Cascading Stylesheets vervolledigen de definiërende taal van ontwerpregels voor ons web. Artiesten overal gebruiken CSS dagelijks om reeksen regels te maken, organiseren en coderen voor basiswebsite-indelingen. 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 meest populaire termen om te 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 afzonderlijke 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 een enorme stap geweest. Dit is de belangrijkste reden waarom CSS nog steeds de leidende speler is voor ontwerpers - niemand heeft iets beters gemaakt!

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 color: red; is een zeer eenvoudig paar eigenschappen / waarden. De eigenschap die we hebben gebruikt is kleur waarmee we elke acceptabele waarde kunnen doorgeven om de tekstkleur te wijzigen. Dit kunnen ook hexadecimale of RGB (rood-groen-blauwe) 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 vereist een waarde en waarden op zich zijn zinloos. Er is veel online 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 bijna alle informatie die je nodig hebt.

Selectorwaarden

Selectors zijn nodig om een ​​hele regel CSS-code te voltooien. Dit is wat we aangeven welk type element we richten. Er zijn veel selectors en veel zijn zo ingewikkeld dat de gemiddelde ontwerper de vaardigheden niet nodig heeft. 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 dat je root-code manipuleert, zoals p voor alinea's, div voor divisies, en zelfs body en html kunnen worden gebruikt om het hele webpaginadocument te manipuleren. Hieronder staat 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 via 2 methoden die bekend staan ​​als klassen en ID's . Dit zijn alledaagse ideeën in HTML waarin u elk element kunt instellen om een ​​ID en een klassewaarde te krijgen via 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 retourneren. Pixels (px) zijn de meest voorkomende en kunnen voor vrijwel alles worden gebruikt: breedte / hoogte, tekengrootte, opvulling / marges, om er maar 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 ervan uit dat 100% de volledige breedte van de webbrowser is. 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. Blokken met 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 eenvoudigste 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 uw blad te "skimmen" om precies te vinden wat u nodig hebt.

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 allemaal 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 is er echt veranderd in de taal? Het is duidelijk dat de oude code nog steeds prima werkt. Dit toont op zijn minst volledige achterwaartse 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 straight markup styling. 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 beïnvloeden met een attrib-attribuut dat ook de waarde "1" bevat. Als dit nog steeds een verwarrende verwijzing is naar het onderstaande voorbeeld om dit 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 front-endwebsites. Het oefenen in zelfs rudimentaire vaardigheden op gemiddeld niveau kan een overvloedige ontwerpervaring en verdere kennis opleveren.

Maak elementen op uw site dragelijk met Draggabilly.js

Maak elementen op uw site dragelijk met Draggabilly.js

Er zijn veel tutorials over hoe je dingen dragbaar kunt maken op een webpagina . jQuery is een van de gemakkelijkste manieren. U hebt zelfs de gebruikersinterface van jQuery niet nodig, slechts een klein beetje hulp van de muisrichtingsfunctie en misschien enige optionele bediening. Maar wat als u geen jQuery-code wilt aanraken en toch dingen dragelijk wilt maken

(Technische en ontwerptips)

20 gave cadeaus Ontwerpers zouden dol zijn op elkaar

20 gave cadeaus Ontwerpers zouden dol zijn op elkaar

Het is nooit een slecht moment om uzelf of uw webdesignervrienden een traktatie te geven! Als je je ooit hebt afgevraagd wat de creatieve persoon zou moeten worden die alles lijkt te hebben, dan zou deze showcase van 20 gave cadeaus voor webontwerper in je leven je een paar frisse ideeën geven. De prijzen variëren van $ 10 tot $ 100, dus iedereen moet iets vinden dat geschikt is voor hun gelegenheden (en hun portemonnee).H

(Technische en ontwerptips)