[MUSIC SPILLE] 

DOUG LLOYD: Så la oss ta ett mer video for å snakke om en mer språk. Denne gangen skal vi snakke om CSS. Så CSS, som er en forkortelse for Cascading Style Sheets, er et annet språk vi bruker når du bygger nettsteder. Tenk på det som dette. Hvis HTML er det vi bruker til å organisere innhold vi ønsker å sette på vår side, CSS er verktøyet som vi vanligvis bruker å tilpasse hvordan våre nettsider ser, og hvordan brukeropplevelsen virkelig er, i samspill med vår hjemmeside. 

I likhet med HTML, er CSS ikke et programmeringsspråk. Det trenger ikke logikk. Det har ikke variabler. Det trenger ikke noen form for at flyte relaterte ting som C gjør. Det er en styling språk. Og syntaksen er ganske enkel, og beskriver bare hvordan elementene i vår side har visse HTML elementer bør endres. For å nå dette målet, hvis du ikke har ennå så vår video på HTML, eller er ukjent med HTML generelt, du kan være lurt å ta en titt på det første, fordi denne diskusjonen av CSS kommer til å avhenge litt kjennskap til HTML. 

Så her er en virkelig enkel CSS stilark. Selv om du aldri har programmert med CSS før, Jeg er ganske sikker på at du kan finne ut akkurat hva denne stil gjør. Hva gjør det? Vel, brukes til kroppen vår web side, alt mellom body-kodene på vår HTML, og det setter bakgrunnsfargen på den siden til blå. Vel, det er en veldig enkel stilark. Det er faktisk veldig menneskelig vennlig språk, CSS. Så selv om du aldri har brukt det før, du sannsynligvis kunne gjette hva som gjorde. Faktisk, hvis vi lastet en side, hvor Dette stil var innebygd eller annen måte, bakgrunnsfargen på vår side ville være blå, og ikke den standard hvit. 

Så hvordan bygger vi stilark? Vel først må vi identifisere en velger. I det siste eksemplet, at velgeren var kroppen. Så har vi en åpen klammeparentes, og vi er kommer til å begynne å definere stilark for at velgeren. I mellom klammeparentes, vi bare ha en liste over viktige verdi-par. Den forrige verdien paret var bakgrunnsfarge blå semikolon, men vi kunne gjøre mer og mer av disse. Du kan ha flere ting å påføre til at koden, som velgeren kroppen. Hver og en av disse er atskilt med en semikolon, og vi kaller hver og en av dem en erklæring, en CSS erklæring. Når vi er ferdige med all styling vi vil gjelde for den aktuelle koden, vi bare har en avsluttende krøllete spenne å avslutte stylesheet, og vi er ferdig å definere stil for den aktuelle velger. 

Hva er noen vanlige CSS egenskaper? Vel, kanskje du ønsker å sette en ramme rundt noe. Så du kan si, border, som vil være nøkkelen, og deretter dine verdier ville være, hvilken stil, farge og bredde du vil den skal være. Så stil kan være en fast linje, en stiplet linje, en stiplet linje, en mønelinje, noe som ville være krum linje. Kanskje du vil ha det være blå eller svart eller grønn. Kanskje du vil den skal være 1 eller 2 eller 10 piksler bredt. Du kan angi alle disse tingene. Kanskje du ønsker å sette bakgrunns farge på siden din på en bestemt måte. Vi har allerede sett at, sette bakgrunn av kroppen for å være blå. 

Deretter kan du bruke et nøkkelord, så CSS har visse farger som er bygget inn i den, blå, grønn, svart, noen svært enkle farger vi kjenner. Men du kan også angi noen hex fargen du ønsker. Husk at fargene kan identifiseres av et sett med tre hex tall fra 0 til 255, RG og b, den rød, grønn og blå komponent. Og så kan vi spesifisere hvilken som helst farge vi ønsker ved, istedenfor å bruke blå eller grønn eller svart, bruker pund og deretter seks sifrene i hex, og som ville gi oss den sekssifrede farge. Så det er bakgrunnsfargen. 

Vi har også forgrunnen farge, som vanligvis kommer til å være teksten på siden din. Og du kan likeledes gjøre det med stikkordet og eller sekssifret hex. Så du kan angi hvilken som helst farge du ønsker for teksten på siden din mot en spesiell bakgrunnsfarge, opp ovenfor. Du kan også endre og håndtere med skrift, og måten teksten er gjengitt på siden. 

Så du kan endre skriftstørrelse. Du kan bruke stikkord, for eksempel ekstra, ekstra liten, eller xx liten eller medium, store, og så videre. Du kan bruke faste punkter, 10 punkt, punkt 12, og så videre. Du kan bruke prosenter, 80%, 20%, hvor 100% er standard font størrelse, som vanligvis kommer til være noe sånt som 11 eller 12 poeng. Eller du kan selv basere den av av den nyeste skriftstørrelse. Hvis du bare skrev noe, og du vet hva du ønsker er at det skal bli mindre, men du vet ikke nøyaktig hvilken størrelse du vil den skal være, vel, du kan bare si: skriftstørrelse mindre. Og det vil basere seg på, bare opp ovenfor, er det skriftstørrelse. Og du kan få større eller mindre. Så det er mye forskjellig måter å angi skriftstørrelse. 

Du kan også angi hva font familien du ønsker. Hvis du har en bestemt navn, det er en måte i CSS-- Vi kommer ikke til å snakke om det her-- for å definere en meget bestemt skrift og legge den inn på siden din. Du kan også bruke generiske navn. Det finnes en rekke web trygge fonter som er forhåndsdefinert i CSS. Og hvis du er en bruker av Microsoft Kontor i de siste 20 årene, du er sikkert kjent med mange av disse web trygge fonter allerede, Times New Roman, Arial, Courier New, Georgia, Tahoma, Verdana, og så videre. De er alle vurdert web trygge fonter. Og faktisk, en del av Grunnen til at de kom til å bli ble som skal brukes til å lage web-- hver side hadde tilgang til denne standard satt av fonter med forskjellige serifs, og all denne font ting vi vil ikke komme inn, men disse er vanligvis tilgjengelig i CSS, selv om du ikke gjør det ellers definere skrifter. Til slutt kan du justere teksten, i stedet for at det er, som standard, justert til venstre, kan du justere den til høyre, eller du kan justere den sentrert, eller begrunnet slik at den traff både marginer. Så de er alle alternativer du kan bruke å endre hva teksten ser ut, og hvordan den vises på siden din. 

Dine velgere ikke må være tagger bare. Vi tidligere så en body-koden velger, og tag velger ser bare sånn. You name en kode, og deretter definere et stilark for den koden. Men du kan også gjøre noe kalles en ID-velgeren. En ID-velgeren ser ganske lik. Men legg merke til at nå jeg ikke bruker en HTML-kode, jeg bruker, i dette tilfellet, #unique, eller hasj unik. Hvis du husker fra vår video på HTML, vi snakket om hvordan kodene kan ha attributter. 

Og en attributt som gjelder til stort sett alle HTML-koder, men vi snakket ikke om det, er noe som kalles en ID-kode. Så denne spesielle CSS ville gjelder bare for HTML-kode som har en veldig spesifikk ID, som du har navngitt. Så hvis du har et sted i koden din, et sted i HTML-fil, en tag, og du angir som et attributt til den koden, ID lik unik, dette Særlig stilark her vil bare gjelde i mellom at tag med ID unik. 

Du kan også gjøre noe kalles en klasse velgeren. Så i tillegg til å ha ID attributter, kan du også legge en klasse attributt til HTML-koder. Og når du bruker en klasse attributt, det kan brukes til flere koder. Så hvis du har flere ting som er like, kanskje du ønsker å si, åpen tag blah, blah, blah, blah, tilsvarer klasse studenter. Og så denne stilark ville gjelde til hver tag hvis klassen er studenter. I dette tilfellet, vil vi sette bakgrunnsfargen til gul, og vi vil sette opacity, som er en kode vi ikke snakke om, men bare omhandler hvor gjennomsiktig noe, til 70%, i dette tilfellet. 

Det finnes to alternativer for skriving stilark. Du kan skrive dem direkte inn i HTML ved å plassere stilark i mellom stil koder. Og disse stil tags gå på innsiden av hodet kodene på websiden din. Den kanskje mest foretrukne måte å gjøre det er å skrive en egen CSS-fil, og deretter koble den til din dokumentere ved hjelp av link tags. Link tags, igjen, er forskjellig fra hyperkoblinger, hvis du husker fra vår video en HTML. Og link kodene er hvordan vi trekke i separate filer. Det liksom som tilsvarer # include for web-programmering. 

Så la oss ta en titt på table.HTML. Hvis du husker fra vår HTML video, jeg viste et eksempel på et meget enkel multiplikasjon tabell som så ganske stygg, og kanskje det er en måte å gjøre det bedre med CSS, for å gjøre det faktisk ser mer som en multiplikasjon bord, eller noe som ikke bare henger sammen med ingen faktiske divisjon mellom rekkene og søylene. Så la oss gå over til CS50 IDE, og ta en titt på hvordan CSS kan, liksom, tweak hva vi startet med før, og gjør det noe mye bedre. 

Så vi er i CS50 IDE nå, og hvis ukjente, vi vil trekke opp i dette tabell som HTML-side. Table.HTML utgangspunktet bare definerer innholdet av en multiple-- det skulle være en fire av fire multiplikasjonstabellen. Det er ganske grei. Og vi tror at det ville ser ganske godt organisert. Men faktisk, når vi forhåndsvise denne siden Vi ser at det er litt stygg, ikke sant? Åpenbart har vi rader og kolonner her. Det en slags separasjon. Men det er ikke en meningsfull separasjon. Vi faktisk ikke får for mye informasjon her. Og det er noe skille mellom rader og kolonner i form horisontale eller vertikale regler. Vi kunne sannsynligvis gjøre dette ser litt bedre. Så la oss prøve. Så jeg kommer til å lukke denne fanen opp her. Og jeg kommer til å avslutte min table.HTML, og jeg har en annen versjon her kalt table2.HTML. Vi vil åpne den opp. Liket av siden er ganske mye det samme, men jeg har endret en litt på toppen. Og jeg skal bla opp her. Legg merke til at denne gangen, jeg er ved hjelp av innebygde stil koder. Jeg har åpnet en stil tag, og jeg er nå definere en CSS-stilark bare inne av det. Jeg har et stilark som sier, bord. Det er min tag velgeren. Jeg bruker ikke prikk eller hasj, som jeg skulle gjøre hvis jeg var å bruke en ID eller en klasse velgeren. Jeg har en tag velger her-- tabellen. Denne stilen kommer til å gjelde for alle bord tag. Angivelig jeg ønsker å sette en pixel bred, solid blå ramme, inni mitt bord. Det høres ut som det ville trolig hjelpe situasjonen, ikke sant? Vi kommer til å ha ting ser mye bedre. Så dette er greit. Stilistisk, har jeg bare innebygd min stilark her. Det er absolutt en akseptabel måte å gjøre det. La oss se hvordan dette ser ut. Så jeg skal gå tilbake her nede, og Jeg vil forhåndsvise table2.HTML. Vel, det er ikke helt det jeg ønsket, men det er akkurat det vi ba om. Vi sa at denne stilen er kommer til å søke til vårt bord. Vårt bord har nå en én piksel bred, solid blå ramme rundt det. Vi faktisk ikke får på tabellceller. Vi er bare å få på bordet. Så CSS arbeidet. Det har anvendt en stilark til bordet vårt. Men ikke helt gjøre hva vi ønsket å gjøre. Hvordan får vi til å gjøre hva vi vil den skal gjøre? 

Vel, la oss ta en titt på en mer versjon av denne i table3.HTML. Så jeg skal bare lukke disse kategoriene. Jeg kommer til å gå tilbake hit til min fil treet, og åpne opp table3.HTML. Igjen, det kommer til å se pen lignende her i begynnelsen. Men varsel, denne gang i stedet for å bruke et stilark innebygd rett i det, Jeg kommer til å linke en stilark hjelp av koblingen tag. Så jeg tydeligvis knytte i en stilark kalt tables.CSS, og denne brønnen er lik stilark bare means-- godt, hva er denne filen i forhold til hva Jeg er doing-- er et stilark som jeg er hjelp for min side. Så hvis jeg virkelig ønsker å se hva Jeg gjør med CSS her, Jeg trenger å gå åpent som table.CSS fil også. Så vil vi gå tilbake hit igjen til vår fil treet. Det er table.CSS. Vi vil pop den åpen. Nå vi ser litt av CSS. Angivelig, jeg har et par ting skjer her. Jeg ønsker tydeligvis å sette en fem pixel bred, solid rød kant, rundt mitt bord. Vi vet allerede at det kommer å bare gå på omkretsen. Vi så at i table2.HTML. Med hver rad, jeg tilsynelatende ønsker å spesifisere at raden høyden er 50 piksler høy. Så for hver rad, husker det er hva tr tag gjør, Jeg gjør det 50 piksler høy. 

Endelig har jeg denne kommentaren. Og dette er hvordan vi gjør kommentarer i CSS. Det er veldig likt å gripe blokk kommentarer syntaks slash Star. All teksten du vil. Det er ingen slash slash men i CSS. For korte inline kommentarer, har vi å bruke dette formatet her. Det ser ut som jeg gjør en Mange ting i mine td koder. Husk td koder, eller tabellen data, noe som egentlig er bare kolonnene innsiden av våre rekker, og tilsynelatende for hver del av data i mitt bord, jeg vil ha å sette bakgrunnsfargen til være svart, til fargen være hvit, fargen er forgrunnen farge. Så dette kommer til å være teksten på siden min. Jeg ønsker stor skrift, 22 punkts skrift, og jeg vil ha det å være av fontfamilien, Georgia. Så jeg kommer ikke til å har standardskriften. Jeg kommer til å spesifisere Georgia, som er en av disse nett trygge fonter som vi har sett før. Jeg vil at min tekst skal justeres sentralt, i midten av boksen, Jeg vil ikke at det å stå justert eller høyrejustert. Og jeg vil ha min kolonnebredde være 50 bildeelementer bredt også. La oss ta en titt på hva dette ser ut, og se om dette er kanskje en forbedring. Så jeg kommer til å gå til table3.HTML, som tilbakekalling omfatter table.CSS som en kobling, og vi vil forhåndsvise det. Det er mye bedre, ikke sant? Dette er faktisk begynner å se mye mer som en multiplikasjonstabellen. Jeg har den rød kant rundt mitt bord, men nå Jeg har også presisert at hver rad er 50 piksler bred, eller er det 50 piksler tall-- unnskyldning me-- hver kolonne er 50 piksler bredt. Dataene i hver kolonne, og bare dataene, har en svart bakgrunn. Så det er derfor de hvite linjer er der. Fordi plassen i mellom alle disse celler, det er ikke en grense i og for seg selv, det er bare Jeg er bare å fylle ut celler, som faktisk gjør grensene av tabellen, som tilsynelatende fantes alt sammen, det var bare tynne hvite linjer. Nå er de synlige. Nå dukker de av på skjermen. Og så dette er en veldig enkel stilark som jeg har brukt, og nå mitt bord ser mye mer ut som en fire av fire multiplikasjonstabellen, i stedet for en rettferdig jumbled rot, der alt er klart rader og kolonner, men ikke super godt organisert. Vi er egentlig bare toppen av isfjellet om hva du kan gjøre med CSS her. Heldigvis dokumentasjonen CSS er ganske grei. Du bruker flere av sine attributter, ganske ofte. De vi snakket om tidligere i denne videoen. Det er flere som deg sannsynligvis ikke vil bruke alle. Og det er bra, også. Men bare vet at det er en mye dokumentasjon der ute. Så selv om vi ikke dekke alt, du er absolutt ikke igjen på egen hånd. Men CSS er virkelig moro å eksperimentere med. Og jeg vil sterkt oppfordre deg å leke seg med websidene dine, og se hvordan du kan gjøre dem se og føle for å forbedre bruker opplevelsen av å besøke siden din. Jeg er Doug Lloyd. Dette er CS50.