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

I dag vil vi være snakk om CSS eller Cascading Style Sheets. 

Så hva er CSS? Vel, la oss bryte begrepet CSS ned i to deler: Cascading og stilark. Gjennomgripende er litt mer komplisert, og det er noe vi vil dekke i en annen video. Men for startere, Style Sheets veldig mye hint på hva CSS gjør. Det legger stiler til HTML av en webside, endre hvordan nettsiden estetisk utseende. Det betyr alt fra skriften på teksten til plassering av innholdet på siden til andre kule ting som gjør hjørnene av en boks avrundet eller legge skygger til tekst. Du kan selv gjøre gale ting som gjør ting animere på skjermen. 

Så hvordan bruker vi CSS med HTML? Ta dette dårlig utseende nettsted jeg nettopp skrev. Hvis Rob var å se på dette området akkurat nå, ville han sannsynligvis si noe sånt, "Wow! Min introduksjon ser forferdelig. Joseph, du er en forferdelig designer." "Bruke standard Times-skriften? Helvetica er så mye bedre." 

Så hva kan være den enkleste måten å bruke styling Rob ønsker? Den mest åpenbare måten mange mennesker i utgangspunktet skrev CSS var å sette det vi kaller stil erklæringer rett i selve elementet ved hjelp av HTML stil attributt. En stil erklæring består ganske enkelt av HTML elementets CSS egenskapen vi ønsker å endre etterfulgt av et kolon etterfulgt av den nye verdi av egenskapen og et semikolon på slutten. For eksempel, la oss si Rob ønsker en svart ramme rundt sin innledning. Vi først sette stilen attributtet på Rob div her deretter innsiden anførselstegn sette en CSS erklæring: "Border: 1px solid svart;" Den 1 piksel henviser til bredden av grensen, viser solid til stilen av grensen, og fargen på slutten bestemmer hva grensen farge er. 

Hvis vi ønsker flere stiler på et element, skrive disse erklæringene i rekkefølge. For eksempel, hvis Rob ønsker hans header tekst i Helvetica med en blå bakgrunn og mer plass rundt teksten, kan vi gjøre dette: style = "font-family: Helvetica; background-color: blue; padding: 5px;" Den siste semikolon er faktisk valgfritt, men folk vanligvis holde den i for konsistens skyld. 

Vi vil spare forklarer noen av de kjøligere og mer komplekse CSS egenskaper for en annen video. Hvis du har noe i tankene, bare Googling den effekten du ønsker etterfulgt av CSS vil trolig gi deg ganske gode resultater. Det kule er at CSS er ganske bred, så oddsen er hvis det er noe du ønsker å gjøre - innenfor rimelighetens grenser - CSS kan sikkert gjøre det. Vi kaller denne typen styling inline styling. Elementet stil er, vel, i tråd med start-taggen. 

For folk som virkelig liker å være organisert, du kan begynne å få litt irritert på hvordan rotete alt dette ser ut. Tenk om du måtte gjøre dette for hvert element på siden, pluss nå HTML og CSS er alle blandede og rotete. Brutto, ikke sant? For å fikse dette, folk etter hvert begynte fanger på å skille sine HTML markup fra deres CSS styling ved hjelp av noe som kalles CSS velgere. CSS selectors brukes til å velge elementer som erklæringer er brukt. Velgermekanisme kombinert med en liste over CSS erklæringer er ofte referert til som en CSS-regel. Disse reglene vil bli satt mellom åpne og lukke HTML stilmerkene, ofte i hodet av dokumentet. 

Det er mye lettere å se med et eksempel, så la oss begynne med å lage en enkel CSS-regel. Først, la oss sette stilmerkene i hodet delen av HTML vår. Neste, velgeren. Vi vil starte med å bruke en av de enkleste velgere, hash symbol, som velger et HTML-element ved sin ID-attributt. I dette tilfellet vil vi velge div som representerer Rob introduksjon ved å skrive hash symbol etterfulgt av div ID, Rob. Nå erklæringene. Vi legger åpne og lukke bukseseler og skifte våre tidligere inline erklæringer på Rob div innsiden av disse bukseseler, refresh, og kjølig, har Rob intro fortsatt en svart ramme rundt det minus rotete inline stygghet. 

Nå, hva om vi ønsket å velge h1 innsiden av Rob intro? Du tenker kanskje: "La oss sette en ID på den og deretter flytte våre tidligere stilarter." Som fungerer, men CSS har andre måter å la deg velge elementer ved hjelp av det vi kaller combinators å blande enkle velgere. For eksempel, kan et mellomrom tegn brukes som Combinator å angi alle forekomster av en selektor som lever inne i en annen velgeren. Det høres mye mer komplisert enn det faktisk er. Her er et eksempel. Vi vil skrive # rane, legge inn et mellomrom, og følger det med en h1, en annen enkel selektor som kalles en kode velgeren som velger typer elementer som divs eller avsnitt. Plassen kombinerer våre 2 enkle velgere, søker alle CSS erklæringer og klammeparentes til H1 koder som lever inne i elementet med id = "Rob". Bare for å overbevise deg om at det fungerer, vil jeg endre skriftfargen til hvit, refresh, og se, Rob header er nå hvit. 

Alt dette arbeidet går for å vise at ved å bruke regler i stedet for inline stiler vi kan få mye renere kode. Faktisk, hvis denne stilen blokken begynner å bli litt stor, Jeg kan selv trekke disse stilene ut i en annen fil helt. 

Å inkludere denne nye filen som CSS i dette dokumentet vil jeg bare bruke HTML link tag. Her Jeg sier det som jeg kobler i et eksternt stilark, rel-attributtet, og angi banen til filen med min href attributt. Nå er min HTML kode og CSS er organisert pent i helt separate filer, som er nesten alltid veien designere foretrekker å arbeide med HTML og CSS. 

I tilfelle du lurer, de enkle velgere inkluderer ID-velgere og tag velgere som de vi nettopp så samt klasse selektorer for velge elementer med en viss klasse, attributt velgere for å velge elementer av andre attributter som type = "radio" for radioknapper innganger og pseudoselectors som svever og fokusere for å spesifisere styling når interaksjoner liker å bevege musen over et element oppstår. 

De vanligste combinators inkluderer mellomrom for alle barn og komma for å skille velgere. Andre kan oppstå inkludere pilen for direkte barn bare, tilde for alle søsken som oppstår etter elementet, og plusstegnet for 1 søsken som kommer umiddelbart etter elementet. 

Ved å kombinere disse velgere og combinators, du kan utvide rekkevidden av styling du kan oppnå på en gitt nettside og skrive CSS mer effektivt. Med bare et par linjer med CSS du ser meg å skrive her, Jeg kan raskt gjøre noe sånt som dette ser ut som noe som dette. 

Jeg er Joseph, og dette er CS50. 

[CS50.TV] 

Uh, hvor skal jeg begynne? La meg gjøre det uten - [ler] Okay. Legg til en - La meg endre det ordlyden. Ooh. Unnskyld.