[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 begreppet 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 lägger stilar till HTML på en webbsida, ändra hur webbsidan estetiskt utseende. Detta innebär allt från typsnitt på texten till placeringen av innehållet på sidan till andra coola saker som att göra hörnen på en rundad låda eller lägga skuggor på texten. Du kan även göra galna saker som att göra saker och ting animera på skärmen. 

Så hur använder vi CSS med HTML? Ta detta fattiga utseende plats jag just skrev. Om Rob skulle titta på den här webbplatsen 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 standard 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 det vi kallar stil deklarationer rätt i själva elementet med HTML-format attribut. En stil deklaration består helt enkelt av HTML elementets CSS-egenskapen vi vill förändra följt av ett kolon följt av det nya värdet på fastigheten och ett semikolon på slutet. Till exempel, låt oss säga Rob vill ha en svart ram runt sin inledning. Vi sätter först stilattributet på Rob div här sedan inuti citationstecken sätta en CSS-deklaration: "Border: 1px solid svart;" Den 1 pixel hänvisar till bredden av gränsen, hänvisar fast till stilen på gränsen, och färgen i slutet avgör vad gränsen färg är. 

Om vi ​​vill ha flera stilar på ett element, skriva dessa deklarationer i följd. Till exempel, om Rob vill ha sin header text i Helvetica med en blå bakgrund och mer utrymme runt texten, kan vi göra detta: style = "font-family: Helvetica, background-color: blue; padding: 5px;" Den sista semikolon är faktiskt frivilligt, men folk brukar hålla 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 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 finns något du vill göra - inom anledning - CSS kan nog göra det. Vi kallar denna typ av styling inline styling. Elementet stil är väl i linje med starttaggen. 

För folk som gillar att vara organiserad, kanske du börjar få lite peeved på hur rörigt allt detta ser ut. 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, eller hur? För att åtgärda detta, började folk så småningom fånga den att separera sina 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 vilka deklarationer tillämpas. En väljare i kombination med en lista över CSS deklarationer ofta kallas en CSS-regel. Dessa regler skulle läggas mellan öppna och stänga HTML-format-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. Härnäst väljaren. Vi ska börja med en av de enklaste väljarna, hash symbol, som väljer ett HTML-element av dess ID-attribut. I det här fallet kommer vi välja div som representerar Rob introduktion genom att skriva hash symbol följt av div-ID, Rob. Nu deklarationerna. Vi lägger öppnar och stänger hängslen och flytta våra tidigare inline uttalanden om Rob div insidan av dessa hängslen, uppdatera, och, cool, 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 en blanktecken tecken användas som kombinatorn att specificera alla förekomster av 1 väljare som bor inne i 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öljer det med en h1, annan enkel väljare kallas kodväljaren som väljer typer av element Liksom Divar eller stycken. Utrymmet kombinerar våra 2 enkla väljare, tillämpa alla CSS deklarationer och klammerparenteser till H1-taggar som lever inne i elementet med id = "Rob". Bara för att övertyga dig om att det fungerar, jag ändra teckenfärg till vit, uppdatera, och titta, Rob huvud är nu vitt. 

Allt detta arbete går att visa att genom att använda regler i stället för inline stilar vi kan få mycket renare kod. Faktum är att om denna stil blocket börjar bli lite stor, Jag kan till och med dra dessa stilar ut i en annan fil helt och hållet. 

Om du vill inkludera den nya filen som CSS i detta dokument jag bara använda HTML: s länk-taggen. Här Jag säger det som jag länka 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 nästan alltid hur designers föredrar att arbeta med HTML och CSS. 

I fall du undrar, de enkla väljare inkluderar ID väljare och tag väljare som de som vi just såg samt klass väljare för val av element med en viss klass, attribut väljare för att välja element från andra attribut som type = "radio" för ingångar 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 som kan uppstå inkludera pilen för direkta barn bara, tilde för alla syskon som uppstår efter elementet, och plustecknet för 1 syskon som kommer direkt efter elementet. 

Genom att kombinera dessa väljare och kombinatorer, Du kan bredda 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] 

Eh, var börjar jag? Låt mig göra det utan - [skrattar] Okej. Lägg till ett - Låt mig ändra ordalydelsen. Ooh. Ursäkta.