[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 meget meget hints på, hvad CSS gør Det tilføjer stilarter til 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 gøre hjørnerne af en rund boks eller fø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 lige har skrevet. Hvis Rob var at se på dette site lige nu, ville han nok sige noget lignende, "Wow! Min introduktion ser forfærdeligt. Joseph, du er en frygtelig designer." "Brug standard Times skrifttype? Helvetica er så meget bedre." 

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

Hvis vi ønsker flere stilarter på et element, skal du skrive disse erklæringer i rækkefølge. For eksempel, hvis Rob ønsker hans headerteksten i Helvetica med en blå baggrund og mere plads omkring teksten, kan vi gøre dette: style = "font-family: Helvetica, background-farve: 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 bred, så odds er, hvis der er noget du ønsker at gøre - inden for rimelighedens grænser - CSS kan sandsynligvis gøre det. Vi kalder denne form for styling inline styling. Elementet stil er, ja, i tråd med start-tag. 

For folk, der virkelig gerne skal organiseres, du kan begynde at få lidt irriteret over, hvor rodet det hele ser ud. Tænk, hvis du var nødt til at gøre dette for hvert element på siden, plus nu din HTML og CSS er alle sammenblandet og rodet. Gross, right? For at løse dette, mennesker i sidste ende begyndte at fange på at adskille deres HTML markup fra deres CSS styling ved hjælp af noget, der hedder CSS selectors. CSS selectors bruges til at vælge elementer, som erklæringer 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 typografi-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 del af 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 indledning ved at skrive hash symbol efterfulgt af div id, røve. Nu erklæringerne. Vi tilføjer åbne og lukke seler og rykke vores tidligere inline erklæringer om Robs div indersiden af ​​disse seler, refresh, og, cool, Robs intro stadig har en sort ramme omkring det minus rodet inline grimhed. 

Hvad nu, hvis vi ønskede at vælge h1 indersiden af ​​Robs intro? Du vil måske tænke, "Lad os sætte en id på det og derefter flytte vores tidligere stilarter." Det virker, men CSS har andre muligheder for 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 anvendes som Combinator at specificere alle forekomster af 1 selector at bo inde i en anden selector. Det lyder af 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, En anden simpel selector kaldet en tag-vælger, som vælger typer elementer ligesom divs eller afsnit. Rummet kombinerer vores 2 simple selektorer, anvender alle CSS erklæringer og de krøllede parenteser til H1 tags, der lever inde i elementet med id = "røve". Blot for at overbevise dig om, at det virker, vil jeg ændre skriftfarven til hvid, opdatere og, se, Robs header er nu hvid. 

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

Hvis du vil medtage denne nye fil som CSS i dette dokument vil jeg bare bruge HTML s link tag. Her jeg fortæller det, at jeg forbinder med et eksternt typografiark, rel attribut, og angive stien til filen med min href attribut. Nu er min HTML markup og CSS er organiseret pænt i helt separate filer, der er næsten altid den måde, designere foretrækker at arbejde med HTML og CSS. 

Hvis du undrer dig over, de simple selectors omfatter ID-selectors og mærke vælgere som dem, vi lige har set samt klasse selektorer til at vælge elementer med en vis klasse, attribut vælgere til valg elementer af andre egenskaber som type = "radio" for alternativknapper indgange og pseudoselectors som svæve og fokusere for at specificere styling når interaktioner gerne musen over et element forekomme. 

De fælles combinators omfatter mellemrum for alle børn og kommaer til at adskille selectors. 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, du kan udvide spektret 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 lave noget som dette ligne noget som dette. 

Jeg er Josef, og dette er CS50. 

[CS50.TV] 

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