[Powered by Google Translate] [CSS] [Joseph Ong - Harvard University] [Dit is CS50. - CS50.TV] 

Vandaag gaan we het hebben over CSS of Cascading Style Sheets. 

Dus wat is nu precies CSS? Nou, laten we de term CSS breken in 2 delen: Cascading Style Sheets en. Cascading is een beetje ingewikkelder, en het is iets dat we zullen bespreken in een andere video. Maar voor starters, Style Sheets veel hints naar wat CSS doet. Het voegt stijlen om de HTML van een webpagina, het veranderen van de manier waarop de webpagina esthetisch uitziet. Dit betekent dat alles van het lettertype van de tekst aan de positionering van de inhoud op de pagina om andere leuke dingen zoals het maken van de hoeken van afgerond een doos of het toevoegen van schaduwen naar tekst. U kunt zelfs doen gekke dingen als de dingen animeren op het scherm. 

Dus hoe kunnen we gebruik maken van CSS met HTML? Neem deze arme uitziende site die ik net schreef. Als Rob waren om te kijken naar deze site op dit moment, zou hij waarschijnlijk iets zeggen als: "Wow! Mijn introductie ziet er verschrikkelijk uit. Joseph, je bent een vreselijke ontwerper." "Het gebruik van het standaard lettertype Times? Helvetica is zo veel beter." 

Dus wat zou de eenvoudigste manier om de styling Rob wil toepassen zijn? De meest voor de hand liggende manier heel veel mensen in eerste instantie schreef CSS was aan wat we noemen stijldeclaraties recht te zetten in het element zelf het gebruik van de HTML-stijl attribuut. Een stijl verklaring bestaat simpelweg uit CSS het HTML-element eigendom we willen veranderen gevolgd door een dubbele punt, gevolgd door de nieuwe waarde van het onroerend goed en een puntkomma aan het eind. Bijvoorbeeld, laten we zeggen Rob wil een zwarte rand rond zijn inleiding. We hebben eerst de stijl attribuut op div Rob's hier dan tussen dubbele aanhalingstekens zet een CSS verklaring: "Border: 1px solid black;" De 1 pixel verwijst naar de breedte van de rand, de vaste verwijst naar de stijl van de grens, en de kleur aan het einde bepaalt wat de grens kleur is. 

Als we willen dat meerdere stijlen op een element, schrijf deze verklaringen in de juiste volgorde. Bijvoorbeeld, als Rob wil dat zijn kopbal tekst in Helvetica met een blauwe achtergrond en meer ruimte rond de tekst, kunnen we dit doen: style = "font-family: Helvetica; background-color: blue; padding: 5px;" De laatste puntkomma is eigenlijk optioneel, maar mensen meestal bewaar het op omwille van de consistentie's. 

We bewaren het verklaren een deel van de koeler en meer complexe CSS-eigenschappen een andere video. Als je iets in gedachten, net Googlen het effect dat u wilt, gevolgd door CSS zal waarschijnlijk geven u vrij goede resultaten. Het mooie is dat CSS is vrij breed, dus kansen zijn als er iets is wat je wilt doen - in redelijkheid - CSS kan waarschijnlijk doen. We noemen deze vorm van styling inline styling. Het element stijl is, nou ja, in lijn met de begin-tag. 

Voor mensen die echt graag willen worden georganiseerd, je zou kunnen beginnen een beetje boos op hoe rommelig dit ziet er allemaal. Stel je voor dat je dit moest doen voor elk element op de pagina, plus nu uw HTML en CSS zijn allemaal vermengd en rommelig. Gross, toch? Om dit op te lossen, mensen uiteindelijk begonnen met het vangen van op het scheiden van hun HTML-opmaak van hun CSS styling met behulp van een zogenaamde CSS selectors. CSS selectors worden gebruikt om elementen waarvoor verklaringen worden toegepast kiezen. Een selector in combinatie met een lijst van CSS-declaraties wordt vaak aangeduid als een CSS-regel. Deze regels zou worden gebracht tussen open en dicht HTML-style-tags, vaak in de kop van het document. 

Het is veel gemakkelijker om te zien met een voorbeeld, dus we beginnen laten we door het creëren van een eenvoudige CSS regel. Laten we eerst eens stijl-tags in de head sectie van onze HTML. Vervolgens de selector. We beginnen met een van de eenvoudigste selectors, het hekje, die selecteert een HTML-element door de ID-kenmerk. In dit geval zullen we u de div dat Rob de introductie vertegenwoordigt door het intypen van het hekje gevolgd door de ID van de div's, rob. Nu de verklaringen. We voegen openen en sluiten beugels en verschuiven onze eerdere inline verklaringen over div Rob's binnenkant van deze bretels, vernieuwen, en, koel, Rob intro heeft nog steeds een zwarte rand eromheen minus de rommelige inline lelijkheid. 

Nu, wat als we wilden naar de h1 binnenkant van intro Rob's selecteren? Je zou kunnen denken, "Laten we een ID is, dan en ga onze eerdere stijlen." Dat werkt, maar CSS heeft andere manieren om u te laten selecteren elementen door het gebruik van wat we noemen combinators eenvoudige selectors mengen. Bijvoorbeeld kan een spatieteken worden gebruikt als combinator om alle instanties van 1 selector die leven in een andere kiezer te geven. Dat klinkt een stuk ingewikkelder dan het in werkelijkheid is. Hier is een voorbeeld. We zullen intikken: # beroven, voeg een spatie en het met een h1 volgen, een andere eenvoudige selector genoemd tagkiezer die soorten elementen selecteert zoals divs of paragrafen. De ruimte combineert onze 2 eenvoudige selectors, met toepassing van alle CSS-declaraties en de accolades te h1 tags die leven in van het element met id = "rob". Gewoon om u te overtuigen dat het werkt, ik zal de kleur van het lettertype wijzigen in wit, vernieuwen, en zie, Rob header is nu wit. 

Al dit werk toont aan dat door het gebruik van regels in plaats van inline stijlen kunnen we veel schoner code. In feite, als deze stijl blok begint wel een beetje groot, Ik kan zelfs trek deze stijlen uit in een ander bestand helemaal. 

Om deze nieuwe bestand als CSS zijn in dit document zal ik gewoon gebruik maken van HTML's link tag. Hier ben ik te vertellen dat ik koppelen in een externe stylesheet, de rel attribuut, en met vermelding van de pad naar het bestand met mijn href attribuut. Nu is mijn HTML-markup en CSS zijn mooi georganiseerd in volledig gescheiden bestanden, dat is bijna altijd de manier waarop ontwerpers liever werken met HTML en CSS. 

In het geval dat je je afvraagt, de eenvoudige selectors zijn ID selectors en tag selectors zoals we net zagen en class selectors voor het selecteren van elementen met een bepaalde klasse, attribuut selectors voor het selecteren van elementen door andere attributen, zoals type = "radio" voor radio button ingangen en pseudoselectors zoals zweven en zich richten voor het opgeven van styling als interacties zoals muis over een element optreden. 

De gemeenschappelijke combinators bevatten witruimte voor alle kinderen en komma's om selectors te onderscheiden. Anderen die u kunt tegenkomen zijn onder andere de pijl voor directe kinderen alleen, de tilde voor alle broers en zussen die zich voordoen na het element, en op het plusteken voor de 1 broer of zus die onmiddellijk volgt op het element. 

Door het combineren van deze selectors en combinatoren, kunt u het bereik vergroten van styling u kunt bereiken op een bepaalde webpagina en CSS schrijven efficiënter. Met slechts een paar regels CSS je me ziet Typ hier, Ik kan snel maken zoiets als dit zien eruit als iets als dit. 

Ik ben Jozef en dit is CS50. 

[CS50.TV] 

Uh, waar moet ik beginnen? Laat mij dat doen zonder - [lacht] Oke. Voeg een - Laat me dat veranderen formulering. Ooh. Sorry.