[Musik spiller] 

DOUG LLOYD: Så lad os tage endnu et video til at tale om endnu et sprog. Denne gang vil vi snakke om CSS. Så CSS, som er en forkortelse for Cascading Style Sheets, er et andet sprog vi bruger når konstruere hjemmesider. Tænk over det på denne måde. Hvis HTML er det, vi bruger til at organisere indhold, vi ønsker at sætte på vores side, CSS er det værktøj, vi normalt bruger at tilpasse, hvordan vores websites ser, og hvordan brugeroplevelsen virkelig er, interagere med vores hjemmeside. 

Svarende til HTML, CSS er ikke et programmeringssprog. Det har ikke logik. Det har ikke variable. Det har ikke nogen form for at flow relaterede ting, som C gør. Det er en styling sprog. Og dens syntaks er temmelig enkel, og bare beskriver hvordan elementerne i vores side har visse HTML elementer bør ændres. Med henblik herpå hvis du ikke har endnu set vores video på HTML, eller ikke er bekendt med HTML generelt, du måske ønsker at tage et kig på det første, fordi denne diskussion af CSS kommer til at afhænge af vist kendskab til HTML. 

Så her er en virkelig simpel CSS stylesheet. Selv hvis du aldrig har programmeret med CSS før, Jeg er temmelig sikker på, du kan regne ud præcis, hvad denne typografiark gør. Hvad gør den? Nå, anvendt til kroppen af ​​vores web side, alt mellem krop tags på vores HTML, og det sætter baggrundsfarve denne side til blå. Tja, det er en meget simpel stylesheet. Det er faktisk meget menneskeligt venlige sprog, CSS. Så selv hvis du aldrig har brugt det før, du sandsynligvis kunne gætte, hvad der gjorde. Faktisk, hvis vi indlæst en side, hvor dette stylesheet blev indlejret en eller anden måde, baggrundsfarve vores side ville være blå, og ikke standard hvid. 

Så hvordan kan vi bygger stylesheets? Nå først, er vi nødt til identificere en vælger. I det sidste eksempel, at vælgeren var organ. Så vi har en åben krøllede klammeparentes, og vi er vil begynde at definere stylesheet for at vælgeren. I mellem de krøllede parenteser, vi bare have en liste over de vigtigste værdi par. Den tidligere værdi parret var baggrundsfarve blå semikolon, men vi kunne gøre mere, og flere af disse. Du kunne have flere ting at anvende denne tag, at vælgeren organ. Hver enkelt af dem er adskilt af en semikolon, og vi kalder hver enkelt af dem en erklæring, en CSS erklæring. Når vi er færdig med al den styling, vi vil anvende på den pågældende tag, vi bare have en afsluttende krøllet afstive at afslutte stilarket, og vi er færdig definere stilarket for den pågældende vælgeren. 

Hvad er nogle fælles CSS egenskaber? Nå, måske du ønsker at sætte en ramme om noget. Så du kan sige, grænsekontrol, der ville være din nøgle, og derefter dine værdier ville være, hvad stil, farve og bredde du ønsker det skal være. Så den stil kunne være et faststof linje, en stiplet linje, en punkteret linie, en højderyg linje, hvilket ville være bølgelinie. Måske du vil have det være blå eller sort eller grøn. Måske du ønsker det skal være 1 eller 2 eller 10 pixels bred. Du kan angive alle disse ting. Måske du ønsker at indstille baggrunden farven på din side på en bestemt måde. Vi har allerede set, at indstille baggrund af kroppen til at være blå. 

Derefter kan du bruge et nøgleord, så CSS har visse farver der er bygget ind i det, blå, grøn, sort, en meget enkle farver, vi kender. Men du kan også angive en hvilken som helst hex farve, du gerne vil. Husk på, at der kan identificeres farver ved et sæt af tre hex tal fra 0 til 255, rg og b, den rød, grøn og blå komponent. Og så vi kan angive alle farver, vi ønsker, ved, stedet for at bruge blå eller grøn eller sort, hjælp pund og derefter seks cifre i hex, og det ville give os Den sekscifret farve. Så det er baggrundsfarven. 

Vi har også forgrunden farve, som normalt vil være den tekst på din side. Og du kan ligeledes gøre det med centrale ord og eller sekscifret hex. Så du kan angive en hvilken som helst farve du ønsker til tekst på din side mod en bestemt baggrundsfarve, op over. Du kan også ændre og håndtere med skrifttype, og den måde, teksten gengives på siden. 

Så du kan ændre din skriftstørrelse. Du kan bruge nøgleord, såsom ekstra, ekstra lille, eller xx små eller mellemstore, store, og så videre. Du kan bruge faste punkter, 10 punkt 12 point, og så videre. Du kan bruge procenter, 80%, 20%, hvor 100% er standard skrifttype størrelse, som normalt går til være noget lignende 11 eller 12 point. Eller du kan endda basere det ud af den seneste skriftstørrelse. Hvis du bare skrev noget, og du ved hvad du ønsker, er for det at være mindre, men du ved ikke præcis, hvad størrelse du ønsker det skal være, godt, du kan bare sige, skriftstørrelse mindre. Og det vil basere ud af, lige op over, er det skriftstørrelse. Og du kan få mindre eller større. Så der er en masse forskellige måder at angive skriftstørrelsen. 

Du kan også angive, hvad skrifttype, du ønsker. Hvis du har en særlig navn, der er en måde i CSS-- Vi kommer ikke til at tale om det her-- at definere en meget bestemt skrifttype og integrere den i din side. Du kan også bruge generiske navne. Der er en masse af web sikre skrifttyper der er præ-defineret i CSS. Og hvis du er en bruger af Microsoft Kontor i de sidste 20 år, du er sikkert bekendt med en masse af disse web sikre skrifttyper allerede, Times New Roman, Arial, Courier New, Georgien, Tahoma, Verdana, og så videre. De er alle betragtes web sikker skrifttyper. Og faktisk en del af grund de kom for at være blev der skal bruges til at gøre web-- hver side havde adgang til denne standard sæt skrifttyper med forskellige seriffer, og alt dette font ting, vi vil ikke komme ind, men disse er som regel tilgængelige i din CSS, selv hvis du ikke gør ellers definere skrifttyper. Endelig kan du justere din tekst, i stedet for at det er, som standard, på linie til venstre, kunne du tilpasse den til højre, eller du kan justere det centreret, eller berettiget, så det ramte begge margener. Så dem er alle muligheder, du kan bruge at ændre, hvad din tekst ser ud, og hvordan den vises på din side. 

Dine selektorer ikke nødt til at være kun tags. Vi har tidligere set et organ-tag vælgeren, og tag selector ser bare sådan. Du navngive et tag, og så skal du definere en stylesheet for det mærke. Men du kan også gøre noget kaldes en ID vælgeren. En ID-vælgeren ser temmelig ens. Men bemærke, at nu er jeg ikke bruger en HTML-tag, jeg bruger, i dette tilfælde, #unique eller hash unik. Hvis du husker fra vores video på HTML, vi talte om, hvordan tags kan have attributter. 

Og en attribut, der gælder til stort set alle HTML-tags, men vi talte ikke om det, er noget, der hedder et id-tag. Så denne særlige CSS ville gælder kun for HTML-tag, der har en meget specifik id, at du har navngivet. Så hvis du har et eller andet sted i din kode, et eller andet sted i din HTML-fil, et tag og du angive som en attribut til tag, ID er lig med unikke, det bestemt stylesheet her vil kun gælde i mellem at tag med ID unikke. 

Du kan også gøre noget kaldes en klasse vælgeren. Så ud over at have Id attributter, kan du også tilføje en klasse attribut til HTML-tags. Og når du bruger en klasse attribut, den kan anvendes til flere tags. Så hvis du har flere ting, som er ens, måske du ønsker at sige, åbent tag bla, bla, bla, bla, klasse lig studerende. Og så denne særlige stylesheet ville gælde til hvert mærke som klasse er studerende. I dette tilfælde vil vi sætte baggrundsfarve til gul, og vi ville sætte opacitet, hvilket er et tag, vi ikke taler om, men bare beskæftiger sig med, hvordan gennemsigtige noget er, at 70%, i dette tilfælde. 

Der er to muligheder for skriftligt stylesheets. Du kan skrive dem direkte ind i din HTML ved at placere stylesheets mellem stil tags. Og de stil tags gå inde i hovedet tags på din webside. Den måske mere foretrukne måde at gøre det er at skrive en særskilt .css fil, og derefter knytte den i din dokument ved hjælp link tags. Link tags, igen, er forskellig fra hyperlinks, hvis du husker fra vores video en HTML. Og link tags er, hvordan vi Træk i særskilte filer. Det lidt ligesom hvad der svarer til # include til web programmering. 

Så lad os tage et kig på table.HTML. Hvis du husker fra vores HTML video, viste jeg et eksempel på en meget simpel multiplikation tabel, der kiggede temmelig grimme, og måske er der en måde at gøre det bedre med CSS, at gøre det ser faktisk mere som en multiplikation bord, eller noget der er ikke kun hænger sammen med ingen faktiske division mellem rækkerne og kolonnerne. Så lad os gå over til CS50 IDE, og tage et kig på, hvordan CSS kan, slags, nappe hvad vi startede med før, og gøre det noget meget bedre. 

Så vi er i CS50 IDE nu, og hvis ukendte, vi vil trække op i dette tabel, HTML-side. Table.HTML dybest set bare definerer indholdet af en multiple-- det skulle være en fire af fire store tabel. Det er ret ligetil. Og vi ville synes, at det ville se temmelig godt organiseret. Men i virkeligheden, når vi se et eksempel denne side vi se, at det er lidt grimt, ikke? Klart vi har rækker og kolonner her. Der en slags separation. Men det er ikke en meningsfuld adskillelse. Vi er faktisk ikke får for meget information her. Og der er ingen adskillelse mellem rækker og kolonner i form af vandrette eller lodrette regler. Vi kunne sandsynligvis gøre dette ser en lille smule bedre. Så lad os prøve. Så jeg har tænkt mig at lukke denne fane op her. Og jeg har tænkt mig at lukke min table.HTML, og jeg har en anden version her kaldet table2.HTML. Vi vil åbne det op. Liget af siden er stort set den samme, men jeg har ændret en lidt på toppen. Og jeg vil rulle op her. Bemærk, at denne gang er jeg hjælp indlejrede stil tags. Jeg har åbnet en stil-tag, og jeg er nu definerer en CSS stylesheet lige inden af det. Jeg har en stylesheet, der siger, bord. Det er min tag vælgeren. Jeg bruger ikke punktum eller hash, som jeg ville gøre, hvis jeg var ved hjælp af et ID eller en klasse vælgeren. Jeg har et tag selector her-- bord. Denne stil kommer til at gælder for hver tabel tag. Tilsyneladende jeg ønsker at sætte en en pixel bred, solid blå kant, inde i mit bord. Det lyder som det ville sandsynligvis hjælpe på situationen, ikke? Vi kommer til at have tingene ser meget bedre. Så dette er fint. Stilmæssigt har jeg bare indlejret min stylesheet i her. Det er helt sikkert en acceptabel måde at gøre det. Lad os se, hvad det ser ud. Så jeg vil gå tilbage hernede, og Jeg vil se et eksempel min table2.HTML. Tja, det er ikke helt, hvad jeg ønskede, men det er præcis, hvad vi bad om. Vi sagde, at denne stil er kommer til at gælde for vores bord. Vores bord har nu en en pixel bred, solid blå ramme omkring det. Vi er faktisk ikke får på tabelceller. Vi er kun lige ved bordet. Så CSS arbejdet. Den har anvendt en stylesheet til vores bord. Men ikke helt gøre hvad vi ønskede at gøre. Hvordan får vi at gøre hvad vi ønsker det at gøre? 

Nå, lad os tage et kig på en mere version af denne i table3.HTML. Så jeg bare kommer til at lukke disse faner. Jeg har tænkt mig at gå tilbage over her til min fil træet, og åbne op table3.HTML. Igen, det kommer til at se temmelig lignende her i begyndelsen. Men varsel, denne gang, i stedet for at bruge et stilark indlejret lige derinde, Jeg har tænkt mig at linke i en stylesheet via linket tag. Så jeg tilsyneladende forbinder i en stylesheet hedder tables.CSS, og dette vel lig stylesheet bare means-- godt, hvad er denne fil i forhold til, hvad Jeg er doing-- er et stylesheet, at jeg er bruger til min side. Så hvis jeg virkelig ønsker at se, hvad Jeg gør med CSS her, Jeg har brug for at gå åbent, at table.CSS fil så godt. Så vi vil gå tilbage herovre igen for at vores fil træ. Der er table.CSS. Vi vil pop det åbne. Nu ser vi lidt af CSS. Tilsyneladende, jeg har et par af ting foregår her. Jeg åbenbart ønsker at sætte en fem pixel bred, solid rød kant, omkring mit bord. Vi ved allerede, at der kommer bare gå på omkredsen. Vi så, at i table2.HTML. Med hver række, I tilsyneladende ønsker at angive at rækken højde er 50 pixel højt. Så for hver række, husk det er, hvad det tr tag gør, Jeg gør det 50 pixels højt. 

Endelig har jeg denne kommentar. Og det er sådan vi gør kommentarer i CSS. Det er meget lig gribe blok kommentarer syntaks skråstreg stjerne. Al den tekst, du ønsker. Der er ingen skråstreg skråstreg selv i CSS. For korte inline kommentarer, vi har at bruge denne særlige format her. Det ser ud som jeg gør en masse ting i mit td tags. Husk td tags, eller bord data, som virkelig er lige søjlerne inde i vore rækker, og tilsyneladende for hvert stykke data i mit bord, jeg vil for at indstille baggrundsfarven til være sort, at farven være hvid, farve er forgrundsfarven. Så dette vil være teksten til min side. Jeg vil have store skrifttype, 22 pege skrifttype, og jeg vil at det er af den skrifttype familien, Georgien. Så jeg har ikke tænkt mig at har standardskrifttype. Jeg har tænkt mig at specificere Georgien, som er en af ​​disse web sikre skrifttyper at vi har set før. Jeg vil have min tekst, der skal tilpasses centralt i midten af ​​kassen, Jeg vil ikke have det til at stå justeret eller højrejusteret. Og jeg vil have min kolonnebredde at være 50 pixels bredt så godt. Lad os tage et kig på hvad det ser ud, og se, om dette er måske en forbedring. Så jeg har tænkt mig at gå til table3.HTML, som tilbagekaldelse, omfatter table.CSS som et link, og vi vil se det. Det er meget bedre, ikke? Dette er faktisk begyndt at se meget mere som en multiplikation tabel. Jeg har det rød kant omkring mit bord, men nu Jeg har også angivet, at hver række er 50 pixels bredt, eller det er 50 pixels tall-- undskyldning mig-- hver kolonne er 50 pixels bred. Dataene i hver kolonne, og kun de data, har en sort baggrund. Så det er derfor dem, hvide linjer er der. Fordi rummet i mellem alle de celler, det er ikke en grænse i og for sig selv, det er bare Jeg er kun udfylde celler, som faktisk gør grænserne i tabellen, som tilsyneladende fandtes hele tiden, det var blot tynde hvide linjer. Nu er de synlige. Nu er de pop ud på skærmen. Og så dette er en meget enkel stylesheet, som jeg har anvendt, og nu er min tabel ser meget mere som en fire af fire store tabel, i stedet for en lige brogede rod, hvor alt er klart rækker og kolonner, men ikke super godt organiseret. Vi er egentlig bare ridse overfladen af hvad du kan gøre med CSS her. Heldigvis CSS dokumentation er temmelig ligetil. Du skal bruge flere af sine attributter, temmelig ofte. Dem vi talte om tidligere i denne video. Der er flere, at du formentlig ikke vil bruge alle. Og det er fint, også. Men bare vide, at der er en masse dokumentation derude. Så selv om vi ikke dække alt, du bestemt ikke tilbage på egen hånd. Men CSS er virkelig sjovt at eksperimentere med. Og jeg vil stærkt opfordre dig at lege med dine websider, og se, hvordan du kan gøre dem se og føle at forbedre brugeroplevelsen oplevelse at besøge din side. Jeg er Doug Lloyd. Det er CS50.