nl.hideout-lastation.com
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.
20 Lessen De wrekers kunnen u leren over ontwerpen
Avengers: Age of Ultron is momenteel het gesprek van de stad, dus laten we het hebben over dit beroemde superteam. Er zijn zes verschillende personages, elk met hun eigen gevestigde franchise en elk met een uniek kleurenschema, persoonlijkheid en algeheel 'gevoel'. En het meest interessante is dat elk van hen een paar lessen heeft om ons les te geven
Adembenemende donkere achtergronden voor uw bureaublad
Als het om wallpapers gaat, geef ik de voorkeur aan donkere of zwarte achtergronden omdat ze niet veel batterijvermogen verbruiken en ook cool zijn om naar te kijken . Hoewel er ook veel kleurrijke bureaubladachtergronden zijn, maar voor mij (en voor andere fans van zwarte kleur), geven donkere achtergronden een vreemd krachtig en dramatisch effect
