[Powered by Google Translate] [CSS] [Joseph Ong - Harvard University] [Detta är CS50. - CS50.TV] 

Idag ska vi prata om CSS eller Cascading Style Sheets. 

Så vad exakt är CSS? Nåväl, låt oss bryta termen CSS ned i 2 delar: Cascading och Style Sheets. Cascading är lite mer komplicerat, och det är något vi kommer att täcka i en annan video. Men till att börja, Style Sheets så mycket tips på vad CSS gör. Det tillför stilar till HTML på en webbsida, ändra hur webbsidan estetiskt utseende. Detta innebär allt från typsnitt för texten till positioneringen av innehållet på sidan till andra coola saker som att göra hörnen av en rundad box eller lägga till skuggor för text. Du kan även göra galna saker som att göra saker animera på skärmen. 

Så hur använder vi CSS med HTML? Ta den här stackars proffsiga plats jag just skrev. Om Rob skulle titta på denna plats just nu, skulle han förmodligen säga något i stil med, "Wow! Min inledning ser fruktansvärt. Joseph, du är en hemsk designer." "Använda den förvalda teckensnittet Times? Helvetica är så mycket bättre." 

Så vad kan vara det enklaste sättet att tillämpa styling Rob vill? Det mest uppenbara sättet massor av människor skrev inledningsvis CSS var att sätta vad vi kallar formatdeklarationer rätt i själva elementet använda HTML stilattribut. En stil uttalande består helt enkelt av HTML-element: s CSS-egenskapen vi vill förändra följt av ett kolon följt av det nya värdet på fastigheten och ett semikolon i slutet. Till exempel, låt oss säga Rob vill ha en svart ram runt sin inledning. Vi satte först stilattributet på Robs div här sedan inuti citattecken sätta en CSS-deklaration: "Border: 1px solid black;" Den 1 pixel hänvisar till bredden av gränsen, hänvisar fast till stilen av gränsen, och färgen i slutet bestämmer vad gränsen färg är. 

Om vi ​​vill ha flera stilar på ett element, skriver dessa deklarationer i sekvens. Till exempel, om Rob vill målvakt text i Helvetica med en blå bakgrund och mer utrymme runt texten, kan vi göra det här: style = "font-family: Helvetica, background-color: blue; padding: 5px;" Den sista semikolon är faktiskt frivilligt, men folk brukar ha det i för konsekvensens skull. 

Vi sparar förklarar några av de svalare och mer komplexa CSS-egenskaper för en annan video. Om du har något i åtanke, bara googla den effekt du vill ha följt av CSS kommer förmodligen att ge dig ganska bra resultat. Det häftiga är att CSS är ganska bred, så oddsen är om det är något du vill göra - inom rimliga gränser - CSS kan förmodligen göra det. Vi kallar denna typ av styling inline styling. Elementet stil är, väl i linje med start-taggen. 

För folk som gillar att vara organiserad, du kanske börjar bli lite irriterad på hur rörigt det hela ser. Tänk om du var tvungen att göra detta för varje element på sidan, plus nu din HTML och CSS är alla blandade och rörig. Gross, rätt? För att åtgärda detta, började folk så småningom fånga på att skilja deras HTML-kod från deras CSS med hjälp av något som kallas CSS-selektorer. CSS-selektorer används för att välja element för vilka deklarationer tillämpas. En väljare i kombination med en lista med CSS deklarationer ofta kallas en CSS-regel. Dessa regler skulle sättas mellan öppna och stäng HTML stil taggar, ofta i huvudet på dokumentet. 

Det är mycket lättare att se med ett exempel, så låt oss börja med att skapa en enkel CSS-regel. Först, låt oss sätta stil taggar i huvudet på vår HTML. Därefter väljaren. Vi börjar med en av de enklaste väljarna, hash symbol, som väljer ett HTML-element av dess ID-attribut. I detta fall väljer vi den div som representerar Rob introduktion genom att skriva hash symbolen följt av div ID, Rob. Nu deklarationerna. Vi lägger öppna och stäng hängslen och flytta våra tidigare inline förklaringar om Robs div insidan av dessa hängslen, uppdatera, och kyla, har Rob intro fortfarande en svart ram runt det minus rörigt inline fulhet. 

Nu, tänk om vi ville välja h1 insidan av Rob intro? Du kanske tänker, "Låt oss sätta ett ID på den och sedan flytta våra tidigare stilar." Det fungerar, men CSS har andra sätt att låta dig välja element genom att använda vad vi kallar kombinatorer att blanda enkla väljare. Till exempel kan ett blanktecken användas som en combinator att specificera alla förekomster av en väljare som lever inuti en annan väljare. Det låter mycket mer komplicerat än det egentligen är. Här är ett exempel. Vi kommer att skriva # råna, ett mellanslag och följa det med en h1, annan enkel väljare kallas kodväljaren som väljer olika typer av element som divar eller stycken. Utrymmet kombinerar våra två enkla väljare, tillämpa alla CSS deklarationer och klammerparentesen till H1 taggar som lever inne i elementet med id = "rob". Bara för att övertyga dig om att det fungerar, ska jag ändra teckenfärg till vitt, uppdatera, och, ser, Rob sidhuvud är nu vit. 

Allt detta arbete visar att genom att använda regler i stället för infogade format Vi kan få mycket renare kod. I själva verket, om denna stil blocket börjar bli lite stor, Jag kan även dra dessa stilar ut i en annan fil helt och hållet. 

Att inkludera denna nya fil som CSS i detta dokument ska jag bara använda HTML: s länk-taggen. Här säger jag det som jag länkar i en extern formatmall, rel attribut, och ange sökvägen till filen med min attributet href. Nu min HTML-kod och CSS är organiserade fint i helt separata filer, vilket är nästan alltid sättet designers föredrar att arbeta med HTML och CSS. 

I fall du undrar, de enkla väljarna inkluderar ID väljare och tagga väljare som de som vi just såg samt klass väljare för val av element med en viss typ, attribut väljare för val av element från andra attribut som typ = "radio" för insatsvaror knappen och pseudoselectors som hovra och fokusera för att specificera styling när interaktioner gillar musen över ett element förekomma. 

De gemensamma kombinatorer inkluderar tomrum för alla barn och kommatecken för att skilja väljare. Andra du kan stöta inkludera pilen för direkta barn bara, tilde för alla syskon som inträffar efter elementet, och på plustecknet för 1 syskon som kommer omedelbart efter elementet. 

Genom att kombinera dessa väljare och kombinatorer, Du kan bredda utbudet av styling du kan uppnå på en viss webbsida och skriva CSS mer effektivt. Med bara ett par rader CSS du ser mig skriva här, Jag kan snabbt göra något sånt här ser ut ungefär så här. 

Jag är Josef, och det här är CS50. 

[CS50.TV] 

Öh, var ska jag börja? Låt mig göra det utan - [skrattar] Okej. Lägga till en - låt mig ändra denna formulering. Ooh. Ursäkta.