[Muziek] 

DOUG LLOYD: Dus laten we eens een meer video om te praten over één taal. Deze keer zullen we praten over CSS. Dus CSS, die kort voor C.S.S, een andere taal we gebruiken bij de bouw van websites. Denk er eens over als dit. Als HTML is wat we gebruiken om het te organiseren inhoud willen we op onze pagina te zetten, CSS is de tool die we over het algemeen gebruik aanpassen hoe onze websites bezoeken, en hoe de gebruikerservaring echt is, de interactie met onze website. 

Vergelijkbaar met HTML, CSS is geen programmeertaal. Het heeft geen logica. Het hoeft geen variabelen. Het is niet een soort van die moeten vloeien gerelateerde dingen die C doet. Het is een styling taal. En de syntax is vrij eenvoudig, en gewoon beschrijft hoe de elementen van onze pagina hebben bepaalde HTML elementen moeten worden gewijzigd. Te dien einde, als je nog niet maar zag onze video op HTML, onbekend met of HTML algemeen, u Misschien wilt u een kijkje nemen op die rekening eerste, omdat deze discussie van CSS zal afhangen enige kennis van HTML. 

Dus hier is een echt eenvoudige CSS stylesheet. Zelfs als je nog nooit hebt geprogrammeerd met CSS vóór, Ik ben er vrij zeker van dat je kunt achterhalen precies wat dit stylesheet doet. Wat doet het? Welnu, aangebracht op het lichaam van onze website pagina, alles wat tussen de body-tags onze HTML en het zet de achtergrondkleur van die pagina naar blauw. Nou, het is een zeer eenvoudige stylesheet. Het is eigenlijk heel menselijk vriendelijke taal, CSS. Dus zelfs als je nog nooit hebt gebruikt voordat, je waarschijnlijk kon raden wat dat deed. In feite, als we geladen een pagina waar Deze stylesheet werd een of andere manier ingebed, de achtergrond kleur van onze pagina zou zijn blauw, en niet de standaard wit. 

Dus hoe kunnen we bouwen stylesheets? Nou ten eerste moeten we identificeren van een selector. In het laatste voorbeeld, dat was selector lichaam. Dan hebben we een open accolade, en we zijn zal beginnen bepalen van de stylesheet voor die selector. Tussen de accolades, we gewoon een lijst van belangrijke waarde paren. De vorige waardepaar was achtergrond kleur blauw puntkomma, maar we konden meer en meer van deze te doen. Je zou kunnen hebben meerdere dingen toepassen om dat label, dat selector lichaam. Elk daarvan wordt gescheiden door een puntkomma, en we elk één van hen te bellen een verklaring, een CSS-verklaring. Als we klaar met de styling we wilt toepassen op die bepaalde tag, We hebben net een sluiten krullend brace om de stylesheet te beëindigen, en we klaar zijn het definiëren van de stylesheet voor die bepaalde selector. 

Wat zijn een aantal veel voorkomende CSS-eigenschappen? Nou ja, misschien wilt u zetten een rand rond iets. Dus je kunt zeggen, grens, dat uw sleutel zou zijn, en dan je waarden zou zijn, welke stijl, kleur, en de breedte je wilt dat het is. Zodat de stijl zou een solide lijn, een stippellijn, een stippellijn, een nok lijn, die golvende lijn zou zijn. Misschien wil je het hebben zijn blauw of zwart of groen. Misschien heb je het wilt zijn 1 of 2 of 10 pixels breed. U kunt al die dingen opgeven. Misschien wilt u de achtergrond in te stellen kleur van uw pagina op een bepaalde manier. We zagen al dat het instellen van de achtergrond van het lichaam blauw zijn. 

Dan kunt u een sleutel woord te gebruiken, dus CSS heeft bepaalde kleuren die zijn ingebouwd in het, blauw, groen, zwart, een zeer eenvoudige kleuren die we kennen. Maar je kunt ook elke opgeven hex kleur die je wilt. Bedenk dat kleuren kunnen worden geïdentificeerd door een set van drie hexadecimale getallen 0-255, rg en b, de rood, groen en blauw component. En zo kunnen we opgeven elke kleur die we willen door, in plaats van blauw of groen of zwart, met behulp pond en vervolgens zes cijfers van hex, en dat zou ons de zescijferige kleur. Dus dat is de achtergrondkleur. 

We hebben ook de voorgrond kleur, die meestal gaat de tekst van uw pagina zijn. En je kon dezelfde wijze doen met sleutel woord en of zes cijferige hex. Dus je kunt elke kleur opgeven u wil voor de tekst van uw pagina tegen een bepaald achtergrondkleur, boven. U kunt ook en omgaan met doopvont, en de manier waarop de tekst wordt weergegeven op de pagina. 

Zo kunt u uw lettergrootte te wijzigen. U kunt de sleutelwoorden, zoals extra gebruiken, extra kleine, en xx kleine of middelgrote, grote, enzovoort. U kunt gebruik maken van vaste punten, 10 punt 12 punt, enzovoort. U kunt percentages, 80%, 20% gebruikt, waar de 100% is het standaard lettertype size, die meestal gaat iets als 11 of 12 punten. Of u kunt zelfs baseren off van de meest recente lettergrootte. Als je gewoon schreef iets en je weet wat je wilt is voor het te kleiner zijn, maar je weet niet precies weet welke maat je wil dat het is, nou ja, je kunt gewoon zeggen, lettergrootte kleiner. En het zal baseren off van de, net boven, het is de lettergrootte. En u kunt kleiner of groter te krijgen. Dus er is een heleboel verschillende manieren om de lettergrootte te geven. 

U kunt ook wat opgeven lettertype familie je wilt. Als je een bepaalde naam, is een weg in CSS-- we gaan niet over praten hier-- een zeer specifiek font definiëren en verankeren het in uw pagina. U kunt ook gebruik maken van generieke namen. Er is een hoop web safe fonts die zijn vooraf gedefinieerd in CSS. En als je een gebruiker van Microsoft Kantoor in de laatste 20 jaar, je bent waarschijnlijk bekend met veel van deze web safe fonts al, Times New Roman, Arial, Courier New, Georgia, Tahoma, Verdana, enzovoort. Die worden allemaal beschouwd als een veilige web fonts. En inderdaad, een deel van de reden waarom ze kwam te zijn werd om te worden gebruikt om web-- maken elke pagina had toegang tot deze standaard set van lettertypen met diverse schreven, en dit alles lettertype dingen zullen we niet krijgen, maar deze zijn meestal toegankelijk in uw CSS, zelfs als je dat niet doet de lettertypen anders definiëren. Ten slotte kunt u uw tekst af te stemmen, in plaats van dat het standaard, uitgelijnd naar links, je kon uitlijnen naar rechts, of je kan uitlijnen gecentreerd, of gerechtvaardigd, zodat het te raken beide marges. Dus dat zijn allemaal opties die u kunt gebruiken om te veranderen wat je tekst eruit ziet, en hoe het wordt weergegeven op uw pagina. 

Uw selecteurs niet moet alleen labels zijn. We eerder zagen een body-tag selector en tagkiezer ziet er net als dat. Noem een ​​tag, en dan moet je definiëren van een stylesheet voor die tag. Maar je kunt ook iets doen riep een ID selector. Een ID-selector lijkt redelijk vergelijkbaar. Maar let op, dat nu ik ben niet met behulp van een HTML-tag, ik gebruik, in dit geval, #unique of hash uniek. Misschien herinner je je van onze video op HTML, we praatten over hoe labels attributen kunnen hebben. 

En een eigenschap die van toepassing is vrijwel alle HTML-tags, maar we hebben niet over praten, is zoiets als een ID-tag. Dus deze bijzondere CSS zou alleen van toepassing op HTML-tag die heeft een zeer specifieke ID, die u hebt genoemd. Dus als je ergens in uw code, ergens in uw HTML-bestand, een tag en u opgeven als een attribuut dat label, ID gelijk uniek, dit bijzonder stylesheet hier zal alleen gelden in tussen dat tag met de ID van de unieke. 

U kunt ook iets doen riep een klasse selector. Dus naast het hebben ID attributen, kunt u ook voeg een attribuut klasse HTML-tags. En wanneer u een attribuut klasse te gebruiken, kan worden toegepast op meerdere tags. Dus als je een aantal dingen die zijn vergelijkbaar, misschien je wilt zeggen, geopend tag blah, blah, blah, blah, klasse gelijk aan studenten. En dan dit specifieke stylesheet zou gelden elk label waarvan klasse studenten. In dat geval zouden we de achtergrondkleur naar geel, en we zouden ondoorzichtigheid ingesteld, dat is een label dat we niet over praten, maar gewoon bezighoudt met hoe transparant iets, tot 70%, in dit geval. 

Er zijn twee opties voor schrijven stylesheets. U kunt ze schrijven rechtstreeks in uw HTML door het plaatsen van de stylesheets in stijl tussen de labels. En die stijl labels naar binnen gaan van het hoofd tags van uw webpagina. Het misschien meer aangewezen manier om te doen het is om een ​​apart .css bestand te schrijven, en koppel het vervolgens in uw documenteren met behulp van koppeling-tags. Koppelingstags, opnieuw, zijn verschillend van hyperlinks, Als u zich herinneren van onze video een HTML. En koppeling tags zijn hoe we Trek in aparte bestanden. Het soort als het equivalent van de # include voor het web programmeren. 

Dus laten we een kijkje nemen op table.HTML. Misschien herinner je je van onze HTML video, toonde ik Een voorbeeld van een zeer eenvoudige vermenigvuldiging tafel die vrij uitzag lelijk, en misschien is er een manier om het beter te maken met CSS, zodat het er eigenlijk uit meer een vermenigvuldiging tafel, of iets dat is niet alleen aan elkaar plakken zonder daadwerkelijke splitsing tussen de rijen en kolommen. Dus laten we het hoofd naar CS50 IDE, en neem een ​​kijkje hoe CSS kan, soort van, tweak wat we begonnen met vroeger, en maken het iets een stuk beter. 

Dus we zijn in CS50 IDE Nu, en als onbekende, we omhoog te trekken in deze tabel die HTML-pagina. Table.HTML principe net definieert de inhoud van een multiple-- het werd verondersteld te zijn een vier bij vier tafel van vermenigvuldiging. Het is vrij eenvoudig. En we zouden denken dat het zou zien er goed georganiseerd. Maar in feite, als we een voorbeeld van deze pagina zien we dat het is een soort van lelijke, toch? Duidelijk hebben we rijen en kolommen hier. Er een soort van scheiding. Maar het is niet een zinvolle scheiding. We zijn eigenlijk niet krijgen te veel informatie hier. En er is geen scheiding tussen de rijen en kolommen in termen horizontale of verticale regels. We kunnen dit waarschijnlijk te maken kijk een beetje beter. Dus laten we proberen. Dus ik ga dit tabblad hier sluiten. En ik ga mijn table.HTML sluiten, en ik heb een andere versie hier genaamd table2.HTML. We zullen openen dat op. Het lichaam van de pagina vrijwel hetzelfde, maar ik heb veranderd beetje boven. En ik zal hier te scrollen. Merk op dat deze keer, ik ben met ingesloten stijl labels. Ik heb een stijl tag geopend, en ik ben nu definiëren van een CSS-stylesheet net binnen ervan. Ik heb een stylesheet die zegt, tafel. Dat is mijn tag selector. Ik ben niet met behulp van dot of hash, die ik zou als ik moeten doen was het gebruik van een ID of een klasse selector. Ik heb een tag selector hier-- tafel. Deze stijl gaat toepassing op elke tafel tag. Blijkbaar wil ik een one zetten pixel brede, stevige blauwe rand, in mijn tafel. Dat klinkt als het zou waarschijnlijk helpen de situatie, toch? We gaan te hebben dingen zien er een stuk beter. Dus dit is prima. Stilistisch, Ik heb net ingebed mijn stylesheet hier. Het is zeker een aanvaardbare manier om het te doen. Laten we eens kijken hoe dit eruit ziet. Dus zal ik hier terug naar beneden te gaan, en Ik zal een voorbeeld van mijn table2.HTML. Nou, dat is niet helemaal wat ik wilde, maar het is precies wat we vroegen. We hebben gezegd dat deze stijl is gaan toepassen op onze tafel. Onze tafel heeft nu een één pixel brede, stevige blauwe rand er omheen. We zijn eigenlijk niet krijgen aan tafel cellen. We zijn net aan de tafel. Dus CSS werkte. Het is toegepast een stylesheet naar onze tafel. Maar niet helemaal doen wat we wilden doen. Hoe krijgen we te doen wat we willen doen? 

Nou, laten we een kijkje nemen op een meer versie van deze in table3.HTML. Dus ik ga gewoon deze tabbladen te sluiten. Ik ga hier terug over te gaan naar mijn file boom, en open table3.HTML. Nogmaals, het gaat om mooi te kijken soortgelijke hier in het begin. Maar merk, ditmaal, in plaats van een stylesheet ingebed recht in daar, Ik ga om te linken in een stylesheet via de link tag. Dus ik ben blijkbaar koppelen in een stylesheet genoemd tables.CSS, en dit goed is gelijk aan stylesheet gewoon means-- goed, wat is dit bestand ten opzichte van wat Ik ben doing-- is een stylesheet dat ik met behulp van mijn pagina. Dus als ik echt wil zien wat Ik ben bezig met de CSS hier Ik moet openen die verder gaan table.CSS bestand ook. Dus we zullen teruggaan hier opnieuw om ons bestand boom. Er is table.CSS. We zullen het openspringen. Nu zien we een beetje van de CSS. Blijkbaar heb ik een paar dingen gebeurt hier. Ik wil blijkbaar een vijf te zetten pixel brede, stevige rode rand, rond mijn tafel. We weten al dat dat gaat om gewoon te gaan op de omtrek. We zagen dat in table2.HTML. Bij elke rij I blijkbaar wilt opgeven dat de rijhoogte is 50 pixels hoog. Dus voor elke rij, herinner dat is wat de tr tag doet, Ik ben het maken van deze 50 pixels hoog. 

Tot slot, ik heb dit commentaar. En dit is hoe we opmerkingen in CSS. Het is zeer vergelijkbaar met blok te grijpen commentaren syntax slash ster. Alle tekst die u wilt. Er is geen slash slash al in CSS. Voor korte inline opmerkingen, hebben we deze specifieke indeling hier te gebruiken. Het ziet eruit alsof ik een doe veel dingen in mijn td-tags. Vergeet niet td-tags, of tafel gegevens, die zijn echt net de kolommen binnenkant onze rijen, en blijkbaar voor elk stukje data in mijn tafel, ik wil om de achtergrondkleur ingesteld op zwart zijn, de kleur wit, kleur is de voorgrond kleur. Dus dit gaat worden de tekst van mijn pagina. Ik wil groot lettertype, 22 punt lettertype, en ik wil het te zijn van het lettertype familie, Georgië. Dus ik ben niet van plan om hebben de standaard lettertype. Ik ga naar Georgië, aangeven welke is een van die web safe fonts dat we eerder hebben gezien. Ik wil dat mijn tekst worden uitgelijnd centraal, in het midden van de doos, Ik wil het niet worden overgelaten uitgelijnd of rechts uitgelijnd. En ik wil mijn kolombreedte worden 50 pixels breed ook. Laten we eens een kijkje nemen op wat dit eruit ziet, en zien of dit is misschien wel een verbetering. Dus ik ga naar table3.HTML, die recall, omvat table.CSS als een link, en we zullen het bekijken. Dat is een stuk beter, toch? Dit is eigenlijk begint een kijken veel meer als een tafel van vermenigvuldiging. Ik heb dat de rode rand rond mijn tafel, maar nu Ik heb ook aangegeven dat elke rij is 50 pixels breed, of het is 50 pixels tall-- excuus mij-- elke kolom is 50 pixels breed. De gegevens in elke kolom, en slechts de data, een zwarte achtergrond. Dus dat is waarom die witte lijnen zijn er. Omdat de ruimte tussen al die cellen, het is niet een grens in en van zichzelf, het is gewoon Ik ben alleen het invullen van de cellen, die eigenlijk maakt de randen van de tafel, die blijkbaar bestaan ​​langs het was gewoon dunne witte lijnen. Nu zijn ze zichtbaar. Nu pop ze uit op het scherm. En dus dit is een zeer eenvoudig stylesheet die ik heb toegepast, en nu mijn tafel lijkt veel meer op een vier bij vier tafels van vermenigvuldiging, in plaats van een gewoon door elkaar gegooid puinhoop, waar de alles is duidelijk rijen en kolommen, maar niet super goed georganiseerd. We zijn eigenlijk alleen maar krassen op het oppervlak van wat je hier kunt doen met CSS. Gelukkig is de CSS documentatie is vrij eenvoudig. U vindt een aantal van haar gebruiken attributen, vrij vaak. Degenen die we gesproken over eerder in deze video. Er zijn een aantal die u Waarschijnlijk zullen niet alle te gebruiken. En dat is prima, ook. Maar weet, dat er een veel documentatie die er zijn. Dus zelfs als we niet alles, je bent zeker niet links op uw eigen. Maar CSS is echt leuk om te experimenteren met. En ik zou u ten zeerste om te spelen met uw webpagina's, en zie hoe je ze kunt maken look and feel van de gebruiker te verbeteren ervaring van het bezoeken van uw pagina. Ik ben Doug Lloyd. Dit is CS50.