[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 breken de term CSS beneden in 2 delen: Cascading Style Sheets en. Cascadering is een beetje complexer, en het is iets wat we laten zien in een andere video. Maar voor starters, Style Sheets heel veel hints naar wat CSS doet. Het voegt stijlen om de HTML van een webpagina, het veranderen van hoe de webpagina ziet er esthetisch. 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 een box afgeronde of het toevoegen van schaduwen naar tekst. U kunt zelfs gekke dingen doen, zoals dingen animeren op het scherm. 

Dus hoe kunnen we gebruik maken van CSS met HTML? Neem deze arme ogende 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 inleiding ziet er verschrikkelijk uit. Joseph, je bent een vreselijke ontwerper." "Met behulp van het standaard lettertype Times? Helvetica is zo veel beter." 

Dus wat zou de eenvoudigste manier om de styling Rob wil toe te passen? De meest voor de hand liggende manier om veel mensen in eerste instantie schreef CSS was in het element zelf om te zetten wat we stijl verklaringen recht te bellen met attribuut HTML stijl. Een verklaring stijl gewoon bestaat uit het HTML element CSS eigenschap willen we 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 om zijn inleiding. We op de eerste plaats het attribuut stijl op Rob's div hier dan tussen dubbele aanhalingstekens zet een CSS declaratie: "Border: 1px solid black;" De 1 pixel verwijst naar de breedte van de grens, de vaste stof betrekking op de stijl van de grens, en de kleur aan het einde bepaalt welke kleur de grens is. 

Als we willen meerdere stijlen op een element, schrijf deze verklaringen in de juiste volgorde. Bijvoorbeeld, als Rob wil 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 blijven meestal in zo consequent zijn. 

We zullen besparen uitgelegd wat de koeler en meer complexe CSS-eigenschappen een andere video. Als je iets in gedachten hebben, maar het gewenste effect, gevolgd door CSS Googlen zal waarschijnlijk geven je vrij goede resultaten. Het koele ding is dat CSS is vrij breed, dus kansen zijn als er iets is wat je wilt doen - in redelijkheid - CSS kan het waarschijnlijk doen. We noemen deze vorm van styling inline styling. De stijl element is, nou ja, in lijn met de begin-tag. 

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

Het is veel gemakkelijker om te zien met een voorbeeld, dus laten we beginnen met het maken van een eenvoudige CSS-regel. Laten we eerst eens gezet stijl tags in de head sectie van onze HTML. Vervolgens wordt de selector. We zullen beginnen met behulp van een van de meest eenvoudige selectors, het hekje, die een HTML-element door zijn ID attribuut selecteert. In dit geval zullen we de div dat de invoering Rob vertegenwoordigt selecteren openen door het hekje gevolgd door de div's ID, rob. Nu de aangiften. We voegen open en dicht beugels en verleggen onze eerdere inline verklaringen over Rob's div binnenkant van deze braces, vernieuwen, en, koele, Rob's intro heeft nog steeds een zwarte rand eromheen minus de rommelige inline lelijkheid. 

Nu, wat als we wilden de h1 binnenkant van Rob's intro te selecteren? Je zou kunnen denken, "laten we een ID op en verplaats dan onze eerdere stijlen." Dat werkt, maar CSS heeft andere manieren om u te laten elementen te selecteren door het gebruik van wat wij noemen combinatoren om eenvoudige selectors mengen. Bijvoorbeeld, kan een scheidingsteken worden gebruikt als een combinator om alle instanties van 1 selector die leven in een andere selector opgeven. Dat klinkt een stuk ingewikkelder dan het in werkelijkheid is. Hier is een voorbeeld. We zullen typt # beroven, voeg een spatie, en volg het met een h1, andere eenvoudige selector genoemd een tagkiezer dat soort elementen selecteert zoals divs of alinea's. De ruimte combineert onze 2 eenvoudige selectors, het toepassen van alle CSS-declaraties en de accolades te h1 tags die binnenkant van het element met id = "rob" wonen. Gewoon om u te overtuigen dat het werkt, zal ik de kleur van het lettertype te veranderen naar wit, vernieuwen, en, kijk, header Rob is nu wit. 

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

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

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

De gemeenschappelijke combinatoren bevatten witruimte voor alle kinderen en komma's om selectors te onderscheiden. Anderen die u kunt tegenkomen zijn onder andere de pijl voor enige rechtstreekse kinderen, de tilde voor alle broers en zussen die zich voordoen na het element, en het plus-teken voor de 1 broer of zus die onmiddellijk na het element komt. 

Door het combineren van deze selectors en combinatoren, kunt u het bereik van styling u kunt bereiken op een bepaalde webpagina te verbreden en schrijf CSS efficiënter. Met slechts een paar regels CSS zie je me hier te typen, Ik kan snel te maken zoiets als dit 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 verwoording veranderen. Ooh. Sorry.