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

I dag skal vi snakke om CSS eller Cascading Style Sheets. 

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

Så hvordan bruker vi CSS med HTML? Ta denne stakkars 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 opplagte måten mange mennesker i utgangspunktet skrev CSS var å sette det vi kaller stil erklæringer midt i selve elementet hjelp av HTML stil attributt. En stil erklæringen består ganske enkelt av HTML-element CSS egenskapen vi ønsker å endre etterfulgt av et kolon etterfulgt av den nye verdien av eiendommen 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 inne anførselstegn sette en CSS erklæring: "Border: 1px solid black;" Den en piksel henviser til bredden av grensen, viser solid til stilen av grensen, og fargen på slutten bestemmer hva rammens 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 holder det i for konsistens skyld. 

Vi vil spare forklare 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 tag. 

For folk som virkelig liker å være organisert, du kan begynne å få litt irritert på hvor 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. Gross, ikke sant? For å fikse dette, folk etter hvert begynte fanger på å skille sine HTML markup fra deres CSS styling ved å bruke noe som kalles CSS velgere. CSS velgere brukes til å velge elementer som erklæringer er anvendt. En velgeren 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. Deretter 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 innledning ved å skrive hash symbol etterfulgt av div ID, Rob. Nå erklæringene. Vi legger til åpne og lukke bukseseler og skifte våre tidligere inline erklæringer på Rob div innsiden av disse bukseseler, refresh, og, kult, 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." Det 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 en combinator å spesifisere alle forekomster av en velgeren 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 til et mellomrom, og følger det med en h1, en annen enkel velgeren kalt en tag velgeren som velger typer elementer som divs eller avsnitt. Plassen kombinerer våre to enkle velgere, bruke alle CSS-erklæringer og klammeparentes til h1 koder som lever inne i elementet med id = "rane". Bare for å overbevise deg om at det fungerer, vil jeg endre font farge 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 stil 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 markup og CSS er organisert pent i helt separate filer, som er nesten alltid måten 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 velgere for valg av elementer med en bestemt klasse, attributt velgere for å velge elementer av andre attributter som type = "radio" for radio button 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 til å skille velgere. Andre kan oppstå inkluderer pilen for direkte barn bare, tilde for alle søsken som oppstår etter elementet, og plusstegnet for en søsken som kommer umiddelbart etter element. 

Ved å kombinere disse velgere og combinators, du kan utvide utvalget 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 ut som noe sånt som dette. 

Jeg er Josef, 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.