[MUSIK SPELA] 

DOUG LLOYD: Så låt oss ta en mer video tala om ytterligare ett språk. Denna gång ska vi prata om CSS. Så CSS, som är en förkortning för Cascading Style Sheets, finns något annat språk som vi använder när du bygger webbplatser. Tänk på det så här. Om HTML är vad vi använder för att organisera innehåll som vi vill sätta på vår sida, CSS är det verktyg som vi använder i allmänhet att anpassa hur våra webbplatser ser, och hur användarupplevelsen verkligen är, interagerar med vår webbplats. 

I likhet med HTML, CSS är inte ett programmeringsspråk. Det har inte logik. Det har inte variabler. Den har inte någon form av att flöde relaterade saker som C gör. Det är en styling språk. Och dess syntax är ganska enkel, och bara beskriver hur delar av vår sida har vissa HTML element bör ändras. För detta ändamål, om du inte Ännu sett vår video på HTML, eller är obekant med HTML allmänhet, du kanske vill ta en titt på det första, eftersom denna diskussion av CSS kommer att bero på vissa kunskaper i HTML. 

Så här är ett riktigt enkel CSS stylesheet. Även om du har aldrig programmerad med CSS före, Jag är ganska säker på att du kan räkna ut exakt vad detta mallen gör. Vad gör den? Tja, appliceras på kroppen av vår hemsida sida, allt mellan body-taggarna på vår HTML, och det sätter bakgrundsfärg på den sidan till blått. Tja, det är en mycket enkel format. Det är faktiskt mycket mänsklig vänligt språk, CSS. Så även om du har aldrig använt det tidigare, du förmodligen kunde gissa vad det gjorde. I själva verket, om vi lastade en sida, där denna format var inbäddad på något sätt, bakgrundsfärg på vår sida skulle vara blå, och inte den vita standard. 

Så hur bygger vi mallar? Tja först måste vi identifiera en väljare. I det sista exemplet, att väljar var kropp. Då vi har en öppen klammerparentes, och vi är kommer att börja definiera formatmall för att väljaren. Mellan klammerparenteserna, vi bara har en lista över nyckelpar värde. Det tidigare värdet Paret var bakgrundsfärg blå semikolon, men vi skulle kunna göra mer och mer av dessa. Du kan ha flera saker tillämpar till den taggen att väljaren kropp. Var och en av dem är åtskilda av en semikolon, och vi kallar var och en av dem en deklaration, en CSS deklaration. När vi är klara med alla styling vi vill ansöka till just tag, Vi har bara en avslutande klammer spänna att avsluta format, och vi är klara definierar format för just väljare. 

Vad är några vanliga CSS-egenskaper? Tja, kanske du vill lägga en ram runt något. Så du kan säga, gränsa, som skulle vara din nyckel, och sedan dina värderingar skulle vara, vilken stil, färg och bredd du vill att det ska vara. Så stilen kan vara en fast substans linje, en prickad linje, en streckad linje, en nocklinje, vilket skulle vara vågig linje. Kanske du vill ha det vara blå eller svart eller grönt. Kanske du vill att det ska vara 1 eller 2 eller 10 pixlar bred. Du kan ange alla dessa saker. Kanske vill du ställa in bakgrunden färgen på din sida på ett visst sätt. Vi såg redan att ställa in bakgrund av kroppen för att vara blå. 

Då kan du använda ett nyckelord, så CSS har vissa färger som är inbyggda i den, blått, grönt, svart, ett mycket enkla färger vi känner. Men du kan också ange någon hex färg som du vill. Minns att färger kan identifieras genom en uppsättning av tre hexadecimala tal från 0 till 255, rg och B, den röd, grön och blå komponent. Och så att vi kan ange vilken färg vi vill med, istället för att använda blå eller grön eller svart, med hjälp av pundet och sedan sex siffrorna i hex, och som skulle ge oss den sex-siffriga färg. Så det är bakgrundsfärgen. 

Vi har också i förgrunden färg, som vanligtvis är kommer att vara texten på din sida. Och du kan på samma sätt göra det med nyckelord och eller sexsiffrigt hex. Så du kan ange vilken färg du vill ha för text på din sida mot en särskild bakgrundsfärg, upp ovan. Du kan också ändra och ta itu med typsnitt, och hur text återges på sidan. 

Så du kan ändra teckenstorlek. Du kan använda nyckelord, såsom extra, extra små eller xx små eller medelstora, stora, och så vidare. Du kan använda fasta punkter, 10 punkt, 12 poäng, och så vidare. Du kan använda procenttal, 80%, 20%, där 100% är standardteckensnittet storlek, som vanligtvis kommer att vara något i stil med 11 eller 12 poäng. Eller du kan även basera bort den senaste teckenstorlek. Om du bara skrev något och du vet vad du vill är att det ska vara mindre, men du vet inte exakt vilken storlek du vill att det ska vara, ja, du kan bara säga, teckenstorlek mindre. Och det kommer att basera bort av, bara upp ovan, är det teckenstorlek. Och du kan få mindre eller större. Så det finns en massa olika sätt att ange teckenstorlek. 

Du kan också ange vad Typsnitt du vill. Om du har en viss namn, det finns ett sätt CSS-- Vi kommer inte att prata om det här-- att definiera en mycket specifik typsnitt och bädda in den på din sida. Du kan också använda generiska namn. Det finns en hel del webbsäkra typsnitt som är fördefinierade i CSS. Och om du är en användare av Microsoft Office under de senaste 20 åren, Du är förmodligen bekant med en hel del av dessa webbsäkra typsnitt redan, Times New Roman, Arial, Courier New, Georgia, Tahoma, Verdana, och så vidare. De är alla betraktas webbsäkra typsnitt. Och faktiskt, en del av Anledningen till att de kom att bli var att användas för att göra web-- varje sida hade tillgång till denna standardinställning av typsnitt med olika seriffer, och allt detta font saker som vi inte kommer att komma in, men dessa är oftast tillgängliga i din CSS, även om du inte annars definiera teckensnitt. Slutligen, kan du anpassa din text, i stället för att det är som standard, i linje med till vänster, du kan rikta den åt höger, eller så kan du justera den centrerad, eller motiverad så att den drabbade båda marginaler. Så de är alla alternativ som du kan använda att ändra hur din text ser ut, och hur det visas på din sida. 

Dina väljare inte måste vara endast etiketter. Vi såg tidigare en body-taggen väljare, och taggväljaren ser bara sådär. Du namnger en tagg, och sedan definiera en formatmall för den taggen. Men du kan också göra något kallas ett ID väljare. En ID-väljare ser ganska likartade. Men märker, som nu jag inte använder en HTML-tagg, jag använder, i det här fallet, #unique eller hash unika. Om ni minns från vår video på HTML, vi pratade om hur taggar kan ha attribut. 

Och ett attribut som gäller till ganska mycket alla HTML-taggar, men vi inte prata om det, är något som kallas en ID-etikett. Så denna CSS skulle endast tillämpas på HTML-tagg som har en mycket specifik ID, som du har namngett. Så om du har någonstans i din kod, någonstans i HTML-fil, en tagg och du anger som ett attribut till den taggen, ID är lika unik, det här särskilt format här bara kommer att gälla mellan den taggen med ID unik. 

Du kan också göra något kallas en klass väljare. Så förutom att ha ID attribut, kan du också lägga till en klass attribut till HTML-taggar. Och när du använder en klass attribut det kan tillämpas på flera taggar. Så om du har flera saker som är liknande, kanske du vill säga, öppen tag bla, bla, bla, blah, lika klass studenter. Och sedan denna format skulle gälla varje tagg som klass är studenter. I det här fallet skulle vi ställa in bakgrundsfärgen till gul, och vi skulle sätta opacitet, som är en tagg som vi inte tala om, men bara handlar om hur transparent något är, till 70%, i det här fallet. 

Det finns två alternativ för skrivmallar. Du kan skriva dem direkt i din HTML genom att placera mallarna mellan stil taggar. Och de stil taggar gå inne i huvudet taggar på din webbsida. Den kanske mer bästa sättet att göra det är att skriva en separat .css fil, och sedan länka den till din dokument med länk taggar. Länk taggar, återigen, är skiljer sig från hyperlänkar, Om du minns från vår video en HTML. Och länka taggar är hur vi dra i separata filer. Det ungefär som motsvarande #include för webbprogrammering. 

Så låt oss ta en titt på table.HTML. Om ni minns från vår HTML video, visade jag ett exempel på en mycket enkel multiplikation tabell som såg ganska ful, och kanske finns det ett sätt att göra det bättre med CSS, så att det faktiskt ser mer som en multiplikation bord, eller något som inte bara sitter ihop med inga faktiska division mellan raderna och kolumnerna. Så låt oss gå över till CS50 IDE, och ta en titt hur CSS kan, typ av, tweak vad vi började med tidigare, och gör det något mycket bättre. 

Så vi är i CS50 IDE nu, och om främmande, vi dra upp i detta tabell som HTML-sidan. Table.HTML princip bara definierar innehållet av en multiple-- det var tänkt att vara en fyra av fyra multiplikationstabellen. Det är ganska enkelt. Och vi skulle kunna tro att det skulle ser ganska väl organiserad. Men i själva verket, när vi förhandsgranskar den här sidan, Vi ser att det finns en slags ful, eller hur? Klart vi har rader och kolumner här. Det något slags separation. Men det är inte en meningsfull separation. Vi är faktiskt inte får för mycket information här. Och det finns ingen separation mellan rader och kolumner i termer horisontella eller vertikala regler. Vi skulle förmodligen göra detta ser lite bättre. Så låt oss försöka. Så jag kommer att stänga den här fliken upp här. Och jag kommer att avsluta mitt table.HTML, och jag har en annan version här kallas table2.HTML. Vi ska öppna upp det. Kroppen av sidan är ungefär samma, men jag har ändrat en liten bit på toppen. Och jag ska rulla upp här. Lägg märke till att den här gången, jag är med hjälp av inbyggda stil taggar. Jag har öppnat en stil tagg, och jag är nu avgränsar en CSS format innanför av den. Jag har en formatmall som säger, bord. Det är min taggväljaren. Jag använder inte prick eller hash, som jag skulle göra om jag använde ett ID eller en klass väljare. Jag har en kodväljaren här-- bord. Denna stil kommer att tillämpas på varje bord taggen. Tydligen jag vill sätta en pixel bred, helt blå gränsen, inuti mitt bord. Det låter som om det skulle förmodligen hjälpa situationen, eller hur? Vi kommer att ha det ser mycket bättre. Så det här är bra. Stilist, jag har bara inbäddade min stilmall här. Det är verkligen en godtagbart sätt att göra det. Låt oss se vad det ser ut. Så jag ska gå tillbaka hit ner, och Jag kommer att förhandsgranska table2.HTML. Tja, det är inte riktigt vad jag ville, men det är precis vad vi bad om. Vi sade att denna stil är kommer att gälla till vårt bord. Vårt bord har nu en pixel bred, helt blå kant runt det. Vi är faktiskt inte får på tabellcellerna. Vi har precis kommit vid bordet. Så CSS arbetade. Det har tillämpat en format till vårt bord. Men inte riktigt göra vad vi ville göra. Hur får vi göra vad vi vill att det ska göra? 

Nåväl, låt oss ta en titt på ett mer version av denna i table3.HTML. Så jag ska bara stänga dessa flikar. Jag kommer att gå tillbaka hit till min filträdet, och öppna upp table3.HTML. Återigen, det kommer att se ganska liknande här i början. Men varsel, den här gången, istället för att använda en formatmall inbäddad rätt där, Jag kommer att länka in en format via länken taggen. Så jag tydligen bindning i en format kallas tables.CSS, och detta väl lika format bara means-- bra, Vad är den här filen i förhållande till vad Jag är doing-- är en formatmall som jag använder för min sida. Så om jag verkligen vill se vad Jag gör med CSS här, Jag måste gå öppna att table.CSS fil också. Så vi ska gå tillbaka hit igen till vårt filträdet. Det finns table.CSS. Vi kommer att dyka upp den. Nu ser vi lite av CSS. Tydligen har jag ett par saker händer här. Jag vill uppenbarligen att sätta en fem pixel bred, fast röd kant, runt mitt bord. Vi vet redan att det kommer att bara gå på omkretsen. Vi såg att i table2.HTML. Med varje rad, jag tydligen vill ange att radhöjden är 50 pixlar hög. Så för varje rad, kom ihåg det är vad tr taggen gör, Jag gör det 50 pixlar hög. 

Till sist, jag har den här kommentaren. Och det är hur vi gör kommentarer i CSS. Det är mycket lik gripa blockera kommentarer syntax snedstreck stjärna. All text du vill. Det finns ingen snedstreck snedstreck men i CSS. För korta inline kommentarer, vi har att använda detta särskilt format här. Det ser ut som jag gör en massa saker i mina td taggar. Kom ihåg td taggar, eller bord uppgifter, som verkligen är bara kolumnerna inuti våra rader och tydligen för varje del av uppgifter i mitt bord, jag vill för att ställa in bakgrundsfärgen till vara svart, för att färgen vara vit, färg är förgrundsfärgen. Så det här kommer att bli texten på min sida. Jag vill ha stort typsnitt, 22 punkt teckensnitt, och jag vill det vara av typsnittsfamilj, Georgien. Så jag tänker inte har standardteckensnittet. Jag kommer att specificera Georgien, som är en av de webbsäkra typsnitt att vi har sett förut. Jag vill att min text som ska anpassas centralt, i mitten av lådan, Jag vill inte att det ska vara kvar linje eller högerjusterat. Och jag vill att min kolumnbredd att vara 50 pixlar bred också. Låt oss ta en titt på vad det ser ut, och se om detta är kanske en förbättring. Så jag kommer att gå till table3.HTML, som minns, innehåller table.CSS som en länk, och vi kommer att förhandsgranska den. Det är en mycket bättre, eller hur? Detta är faktiskt börjar se mycket mer som en multiplikationstabellen. Jag har den röd ram runt mitt bord men nu Jag har också angett att varje rad är 50 pixlar bred, eller är det 50 pixlar tall-- ursäkt mig-- varje kolumn är 50 pixlar bred. Data i varje kolumn, och endast data, har en svart bakgrund. Så det är därför de vita linjer finns. Eftersom utrymmet i mellan alla dessa celler, det är inte en gräns på och för sig, det är bara Jag bara fylla i celler, som faktiskt gör gränserna i tabellen, som uppenbarligen fanns hela tiden, det var bara tunna vita linjer. Nu är de är synliga. Nu pop de upp på skärmen. Och så detta är en mycket enkel formatmall som jag har tillämpat, och nu mitt bord ser mycket mer ut som en fyra av fyra multiplikationstabellen, i stället för en rättvis rörig röra, där allt är klart rader och kolumner, men inte super väl organiserad. Vi är egentligen bara skrapa på ytan av vad du kan göra med CSS här. Lyckligtvis CSS dokumentation är ganska enkelt. Du kommer att använda flera av dess attribut, ganska ofta. De som vi talat om tidigare i den här videon. Det finns flera som du troligen inte kommer att använda alla. Och det är bra, också. Men bara vet, att det finns en mycket dokumentation där ute. Så även om vi inte täcka allt, du verkligen inte kvar på egen hand. Men CSS är riktigt roligt att experimentera med. Och jag vill starkt uppmuntra dig att leka med dina webbsidor, och se hur du kan göra dem utseende och känsla för att förbättra användar upplevelsen av att besöka din sida. Jag är Doug Lloyd. Detta är CS50.