[Powered by Google Translate] [CSS] [Joseph Ong - Harvard University] [Dette er CS50. - CS50.TV] 

I dag vil vi tale om CSS eller Cascading Style Sheets. 

Så hvad der præcist er CSS? Nå, lad os bryde udtrykket CSS ned i 2 dele: Cascading og Style Sheets. Cascading er en lille smule mere kompliceret, og det er noget, vi vil dække i en anden video. Men for startere. Style Sheets høj grad antyder, hvad CSS gør Det tilføjer typografier i HTML af en webside, ændre, hvordan websiden æstetisk udseende. Det betyder alt fra skrifttypen på teksten til placeringen af ​​indholdet på siden til andre seje ting som at lave hjørnerne af en rund boks eller tilføje skygger til tekst. Du kan endda gøre skøre ting som at gøre tingene animere på skærmen. 

Så hvordan bruger vi CSS med HTML? Tag denne fattige udseende websted, jeg skrev bare. Hvis Rob skulle se på dette site lige nu, ville han nok sige noget lignende, "Wow! Min introduktion ser forfærdeligt ud. Joseph, du er en frygtelig designer." "Brug standard Times font? Helvetica er så meget bedre." 

Så hvad kunne være den enkleste måde at anvende styling Rob vil? Den mest indlysende måde masser af mennesker i første omgang skrev CSS var at sætte det, vi kalder stil erklæringer ret i selve elementet hjælp af HTML style attribut. En stil erklæring blot består af HTML elementets CSS ejendom, vi ønsker at ændre efterfulgt af et kolon fulgt af den nye værdi af ejendommen og et semikolon i slutningen. For eksempel sige, lad os Rob ønsker en sort ramme omkring sin introduktion. Vi først sætte style attribut på Robs div her derefter inde anførselstegn sætte en CSS erklæring: "Kant: 1px solid black;" Den 1 pixel refererer til bredden af ​​grænsen, det faste refererer til den stil af grænsen, og farven i slutningen bestemmer, hvad grænsen farve er. 

Hvis vi ønsker flere stilarter på et element, skriver disse erklæringer i rækkefølge. For eksempel, hvis Rob ønsker hans hovedstød tekst i Helvetica med en blå baggrund og mere plads omkring teksten, kan vi gøre dette: style = "font-family: Helvetica, background-color: blå, padding: 5px;" Det sidste semikolon er faktisk frivilligt, men folk normalt holde det i hensyn til sammenhængen. 

Vi gemmer forklare nogle af de køligere og mere komplekse CSS egenskaber for en anden video. Hvis du har noget i tankerne, bare google den ønskede effekt, efterfulgt af CSS vil sandsynligvis give dig ret gode resultater. Det fede er, at CSS er temmelig bredt, så odds er, hvis der er noget du ønsker at gøre - inden for rimelighedens grænser - CSS kan sikkert gøre det. Vi kalder denne form for styling inline styling. Elementet stil er, ja, i tråd med startkode. 

For folk, der virkelig kan lide at være organiseret, kan du begynde at få lidt irriteret på, hvordan rodet det hele ser ud. Tænk hvis du skulle gøre dette for hvert element på siden, plus nu din HTML og CSS er alle blandede og rodet. Gross, right? For at løse dette, mennesker i sidste ende begyndte at fange på adskille deres HTML markup fra deres CSS styling ved at bruge noget, der hedder CSS selektorer. CSS selektorer bruges til at vælge elementer, som angivelser anvendes. En vælger kombineret med en liste over CSS erklæringer omtales ofte som en CSS regel. Disse regler ville blive sat mellem åbne og lukke HTML stil tags, ofte i hovedet af dokumentet. 

Det er meget nemmere at se med et eksempel, så lad os starte med at oprette en simpel CSS regel. Først, lad os sætte typografi-tags i hovedet sektionen på vores HTML. Dernæst vælgeren. Vi vil starte med en af ​​de enkleste selektorer, hash symbol der vælger et HTML-element ved sin id attribut. I dette tilfælde vil vi vælge den div, der repræsenterer Rob introduktion ved at skrive hash symbol efterfulgt af div id, Rob. Nu erklæringerne. Vi tilføjer åbne og lukke seler og skift vores tidligere inline erklæringer om Robs div indersiden af ​​disse seler, opdateringshastighed, og, cool, Robs intro har stadig en sort ramme omkring det minus rodet inline grimhed. 

Hvad nu, hvis vi ønskede at vælge h1 indersiden af ​​Rob intro? Du tror måske, "Lad os sætte en id på det og derefter flytte vores tidligere stilarter." Det virker, men CSS har andre måder at lade dig vælge elementer ved hjælp af det, vi kalder combinators at blande simple vælgere. For eksempel kan et hvidt tegn bruges som et Combinator at specificere alle forekomster af 1 selector, der lever inde i en anden vælgeren. Det lyder meget mere kompliceret, end det faktisk er. Her er et eksempel. Vi vil skrive # røve, tilføje et mellemrum, og følge den med en h1, anden simpel selector kaldet et tag vælger, der udvælger typer elementer ligesom divs eller afsnit. Rummet kombinerer vores 2 simple vælgere, anvender alle CSS erklæringer og de krøllede parenteser til H1 tags, der lever inde i elementet med id = "rob". Blot for at overbevise dig om, at det virker, vil jeg ændre farven til hvid, opdatere og se, Robs header er nu hvidt. 

Alt dette arbejde går til at vise, at ved hjælp af regler i stedet for inline stilarter kan vi få meget renere kode. I virkeligheden får hvis denne stil blok starter en lille smule stor, Jeg kan endda trække disse stilarter ud i en anden fil helt. 

For at inkludere denne nye fil som CSS i dette dokument vil jeg bare bruge HTML s link tag. Her siger jeg det, at jeg linker i et eksternt style sheet, rel attribut, og med angivelse af stien til filen med min href attribut. Nu er min HTML markup og CSS er organiseret pænt helt separate filer, hvilket er næsten altid den måde designere foretrækker at arbejde med HTML og CSS. 

I tilfælde af du undrer dig, de simple vælgere omfatter ID-vælgere og tag vælgere som dem, vi lige har set samt klasse selektorer til at vælge elementer med en bestemt klasse, attribut vælgere til valg elementer fra andre egenskaber som type = "radio" til radio knap input, og pseudoselectors ligesom svæve og fokusere til angivelse styling når interaktioner lide musen over et element forekomme. 

De fælles combinators inkluderer mellemrum for alle børn og kommaer til at adskille selektorer. Andre, du kan støde omfatte pilen for direkte børn kun, tilde for alle søskende, der opstår efter elementet, og på plus-tegnet for 1 søskende, der kommer umiddelbart efter elementet. 

Ved at kombinere disse selektorer og combinators, kan du udvide rækken af ​​styling, du kan opnå på en given webside og skrive CSS mere effektivt. Med blot et par linjer af CSS du ser mig skrive her, Jeg kan hurtigt få noget som dette ligne noget som dette. 

Jeg er Josef, og dette er CS50. 

[CS50.TV] 

Uh, hvor skal jeg starte? Lad mig gøre det uden - [griner] Okay. Tilføj en - Lad mig ændre ordlyden. Ooh. Undskyld.