[REPRODUCCIÓ DE MÚSICA] 

DOUG LLOYD: Així que anem a fer una més vídeo a parlar un idioma més. En aquesta ocasió parlarem de CSS. Així CSS, que és l'abreviatura de Cascading Style Sheets, és un altre llenguatge que fem servir en la construcció de llocs web. Penseu en això com això. Si HTML és el que fem servir per organitzar la el contingut que volem posar a la nostra pàgina, CSS és l'eina que utilitzem generalment per personalitzar l'aspecte dels nostres llocs web, i com l'experiència de l'usuari realment és a dir, la interacció amb el nostre lloc web. 

Igual que en HTML, CSS és no és un llenguatge de programació. No té lògica. No té variables. No té cap tipus de què fluir les coses relacionades que C fa. És un llenguatge d'estil. I la seva sintaxi és bastant simple, i només descriu com els elements de la nostra pàgina té certa HTML elements han de ser modificats. Amb aquesta fi, si no ho ha però, vist el nostre vídeo en HTML, o no estan familiaritzats amb HTML generalment, es molts de vosaltres voleu fer una ullada a aquest primer, perquè aquesta discussió de CSS dependrà alguns coneixements d'HTML. 

Així que aquí està un molt senzilla full d'estil CSS. Fins i tot si vostè mai ha programat amb CSS abans, Estic bastant segur que pots imaginar exactament el que fa aquest full d'estils. Què fa això? Bé, aplicada al cos de la nostra web pàgina, tot el que entre les etiquetes del cos en el nostre HTML, i s'estableix el color de fons de la pàgina a blau. Bé, és una manera molt senzilla full d'estil. En realitat és molt humà llenguatge amigable, CSS. Així que fins i tot si vostè mai ha fet servir abans, que probablement podria endevinar el que van fer. De fet, si ens carreguem una pàgina, on aquest full d'estil s'ha incrustat d'alguna manera, el color de fons de la nostra pàgina faria ser de color blau, i no el blanc estàndard. 

Llavors, com construïm fulls d'estil? Bé en primer lloc, hem de identificar un selector. En l'últim exemple, que el selector havia el cos. Llavors tenim un obert claudàtor, i estem va començar a definir la full d'estil per a aquest selecció. Enmig de les claus, ens només hi ha una llista de parells de valors clau. El parell de valors anterior va ser color de fons blau i coma, però podríem fer més i més d'aquests. Vostè podria tenir diverses coses aplicant a aquesta etiqueta, aquest cos de selecció. Cada un d'ells està separat per una punt i coma, i ens crida a cadascun d'ells una declaració, una declaració CSS. Quan haguem acabat amb tot l'estil que que vulgueu aplicar a aquesta etiqueta en particular, només tenim un arrissat tancar preparar-se per posar fi al full d'estils, i hem acabat de definir el full d'estils per a aquest selector particular. 

Quines són algunes propietats CSS comuns? Bé, potser vostè vol posar una vora al voltant d'alguna cosa. Així que es pot dir, frontera, que seria el seu clau, i després els seus valors serien, el que l'estil, el color i l'ample vostè vol que sigui. Així l'estil podria ser un sòlid línia, una línia de punts, una línia discontínua, una línia de carena, el que seria la línia ondulada. Potser vostè vol haver de ser de color blau o negre o verd. Potser vostè vol que sigui 1 o 2 o 10 píxels d'amplada. Podeu especificar totes aquestes coses. Potser vostè vol configurar el fons color de la seva pàgina d'una manera particular. Ja vam veure que, establint el fons del cos a ser blau. 

A continuació, pot utilitzar una paraula clau, per la qual CSS té certs colors que es construeixen en ell, blau, verd, negre, uns colors molt simples que coneixem. Però també es pot especificar qualsevol color hexadecimal que desitja. Recordem que els colors es poden identificar per un conjunt de tres nombres hexadecimals de 0 a 255, RG i b, la component vermell, verd, i blau. I així podem especificar qualsevol color que volem per, en lloc d'utilitzar blau o verd o negre, usant lliures i després sis dígits de l'hexagonal, i que ens donaria el color de sis dígits. Així que aquest és el color de fons. 

També tenim el primer pla color, que és en general serà el text de la seva pàgina. I vostè podria fer igualment que amb la paraula clau i el o sis dígits hexadecimal. Així que vostè pot especificar qualsevol color que vostè desitjar per al text de la seva pàgina contra un particular, color de fons, a dalt. També pot canviar i fer front amb la font, i el text forma es va rendir a la pàgina. 

Així que vostè pot canviar la mida de font. Podeu utilitzar paraules clau, com addicional, Diminuta, i xx petit o mitjà, gran, i així successivament. Podeu utilitzar punts fixos, 10 punts, 12 punts, i així successivament. Feu servir percentatges, 80%, 20%, on 100% és el tipus de lletra per omissió grandària, que és en general va a alguna cosa així com 11 o 12 punts. O fins i tot es pot basar fora la mida de la font més recent. Si vostè acaba d'escriure alguna cosa i saps el que volem és que sigui més petita, però no saps què és exactament la grandària que Vull que sigui, bé, vostè pot simplement dir, mida de lletra més petit. I va basar fora de la, just per sobre, és la mida de font. I vostè pot aconseguir més petit o més gran. Així que hi ha un munt de diferents maneres d'especificar la mida de font. 

També pot especificar quins família de la font que desitja. Si vostè té un particular, nom, hi ha una forma en CSS-- no anem a parlar-ne aquí-- per definir un tipus de lletra molt específic i incrustar a la teva pàgina. També pot utilitzar noms genèrics. Hi ha una gran quantitat de fonts segures web que estan predefinits en el CSS. I si vostè és un usuari de Microsoft Oficina en els últims 20 anys, probablement estàs familiaritzat amb moltes d'aquestes fonts segures web Ja, Times New Roman, Arial, Courier New, Geòrgia, Tahoma, Verdana, etcètera. Aquests són tots considerats web fonts segures. I, de fet, part de la raó per la qual va arribar a ser anava a ser utilitzat per fer web-- cada pàgina hi havia accés a aquest conjunt predeterminat de fonts amb diverses rematades, i tot això material de font no entrarem, però aquests són generalment accessible a la CSS, fins i tot si no ho fa en cas contrari definir les fonts. Finalment, pot alinear el text, en lloc de ser, per defecte, alineat a l'esquerra, podria alinear-lo a la dreta, o pot alinear centrada, o justificat perquè va colpejar ambdues marges. Així que aquestes són totes les opcions que pot utilitzar per canviar el que el seu text s'assembla, i com es mostra en la seva pàgina. 

Els seus selectors no ho fan ha de ser només les etiquetes. Anteriorment vam veure una etiqueta del cos selector, i selector d'etiquetes té un aspecte com si res. Vostè nomena una etiqueta, i després definir un full d'estil per a aquesta etiqueta. Però també es pot fer alguna cosa anomenat un selector de ID. Un selector ID veu bastant similar. Però noto que ara no estic fent servir una etiqueta HTML, estic fent servir, en aquest cas, #unique o hash únic. Si vostè recorda de la nostra vídeo en HTML, parlem sobre com les etiquetes poden tenir atributs. 

I un atribut que s'aplica a gairebé totes les etiquetes HTML, però no parlem d'això, és una cosa que es diu una etiqueta d'identificació. Així que això CSS particular, faria s'aplicarà únicament a l'etiqueta HTML que té un document d'identitat molt específica, que ha nomenat. Així que si vostè té alguna part en el codi, en algun lloc en el seu arxiu HTML, una etiqueta i vostè especificar com un atribut a l'etiqueta, ID és igual únic, aquest en particular d'estils aquí només s'aplicaran en el medi aquesta etiqueta amb l'identificador d'únic. 

També pot fer alguna cosa anomenat un selector de classe. Així que a més de tenir Atributs ID, també pot afegir un atribut de la classe d'etiquetes HTML. I quan s'utilitza un atribut de classe, es pot aplicar a múltiples etiquetes. Així que si vostè té diverses coses que són similars, potser vostè vulgui dir, etiqueta oberta, bla, bla, bla, bla, classe és igual als estudiants. I llavors aquest particular, s'aplicaria full d'estil a cada etiqueta la classe és alumnes. En aquest cas, ens fixem el color de fons a groc, i ens agradaria ajustar l'opacitat, que és una etiqueta que no parlem, però només s'ocupa de la forma transparent alguna cosa és, a 70%, en aquest cas. 

Hi ha dues opcions per fulles d'estil d'escriptura. Pots escriure- directament en el codi HTML mitjançant la col·locació de les fulles d'estil entre etiquetes d'estil. I aquestes etiquetes d'estil van dins de les etiquetes del cap de la seva pàgina web. La forma potser més preferit fer que és escriure un arxiu .css a part, i després vincular-lo a la seva documentar l'ús d'etiquetes d'enllaç. Etiquetes d'Enllaç, de nou, són diferent d'hipervincles, si vostè recorda del nostre vídeo d'un HTML. I les etiquetes d'enllaç són la forma en què tiri en arxius separats. És una cosa així com l'equivalent de el #include per a la programació web. 

Així que donem una ullada a table.HTML. Si vostè recorda de la nostra Vídeo HTML, vaig mostrar un exemple d'un molt simple multiplicació taula que es veu bastant lleig, i potser hagi una manera de fer-ho millor amb CSS, perquè sigui realment es veuen més com una multiplicació taula, o alguna cosa que no és simplement enganxades sense divisió real entre les files i les columnes. Així que anem a CS50 IDE, i fer una ullada com CSS pot, més o menys, ajustar el que vam començar amb l'abans, i fer alguna cosa molt millor. 

Així que estem en CS50 IDE ara, i si no familiar, anem a aturem en aquest taula de la pàgina HTML. Table.HTML bàsicament simplement defineix el contingut d'un multiple-- que se suposava que era una taula de quatre per quatre multiplicació. És bastant senzill. I ens agradaria pensar que ho faria mirar bastant ben organitzat. Però, de fet, quan ens previsualització Aquesta pàgina, veiem que és una cosa lleig, no? Clarament tenim files i columnes aquí. Hi ha algun tipus de separació. Però no és una separació significativa. No estem aconseguint realment massa informació aquí. I no hi ha separació entre les files i columnes en termes de les normes horitzontals o verticals. Probablement podríem fer aquest mirar una mica millor. Així que anem a tractar. Així que vaig a tancar aquesta pestanya aquí. I jo vaig a tancar el meu table.HTML, i tinc una altra versió aquí anomenada table2.HTML. Obrirem això. El cos de la pàgina és més o menys la mateixa, però he canviat poc a la part superior. I vaig a desplaçar-me fins aquí. Cal notar que aquesta vegada, estic usant etiquetes d'estil incrustades. He obert una etiqueta d'estil, i estic ara la definició d'un full d'estil CSS just dins de la mateixa. Tinc un full d'estil que diu: taula. Aquesta és la meva selector d'etiquetes. No estic fent servir punts o haixix, que estaria fent si jo estava utilitzant un identificador o un selector de classe. Tinc una taula aquí-- selector d'etiquetes. Aquest estil va s'aplicarà a cada etiqueta de taula. Aparentment vull posar-ne un píxel d'ample, vora blava sòlid, dins de la meva taula. Això sona com ho faria probablement ajudar a la situació, no? Tindrem les coses es veuen molt millor. Així que això està molt bé. Estilísticament, acabo incrustat meu full d'estil aquí. És sens dubte una manera acceptable de fer-ho. Anem a veure el que això s'assembla. Així que em vaig a tornar aquí, i Vaig a una vista prèvia de la meva table2.HTML. Bé, això no és exactament el que jo volia, però és exactament el que havíem demanat. Vam dir que aquest estil és va aplicar a la nostra taula. La nostra taula ara té un píxel d'un àmplia frontera, sòlid blau voltant. No estem aconseguint realment en les cel·les de la taula. Som a la taula. Així CSS funcionar. S'ha aplicat una full d'estil a la nostra taula. Però no acabava de fer el que volíem fer. Com aconseguim fer el que volem que faci? 

Bé, anem a fer una ullada a un més versió d'això en table3.HTML. Així que només vaig a tancar aquestes fitxes. Vaig a tornar per aquí al meu presentar arbre, i obrir table3.HTML. Un cop més, va semblar bastant similar aquí al començament. Però avís, aquesta vegada, en lloc d'utilitzar un full d'estil incrustada just allà, Vaig a enllaçar en un full d'estil usant l'etiqueta d'enllaç. Així que estic aparentment vincular en un full d'estil anomenat tables.CSS, i això bé és igual full d'estil simplement designa totes bé, el que és aquest arxiu en relació amb el Estic doing-- és un full d'estil que estic utilitzant per a la meva pàgina. Així que si realment vull veure el que Que estic fent amb la CSS aquí, He d'anar a veus que table.CSS arxiu també. Així que anem a tornar per aquí de nou al nostre arbre de fitxers. Hi ha table.CSS. Anem a esclatar obert. Ara estem veient una mica de la CSS. Pel que sembla, tinc un parell de coses a fer aquí. Aparentment Vull posar 5 píxel d'ample, vora vermella sòlid, voltant de la meva taula. Ja sabem que això va anar només en el perímetre. Vam veure que en table2.HTML. Amb cada fila, em aparentment vulgueu especificar que l'altura de la fila és de 50 píxels d'alt. Així, per cada fila, recorda això és el que fa l'etiqueta tr, Estic fent 50 píxels d'alt. 

Finalment, tinc aquest comentari. I així és com fem comentaris en CSS. És molt similar a prendre el bloc comentaris sintaxi estrella Slash. Tot el text que vulgueu. No hi ha slash slash encara que en CSS. Per comentaris en línia curts, tenim per utilitzar aquest format en particular aquí. Sembla que estic fent un moltes coses en els meus etiquetes td. Recordeu etiquetes td, o taula dades, que en realitat són només les columnes dins de les nostres files, i pel que sembla, per a cada peça de dades a la meva taula, em vull per establir el color de fons a ser de color negre, el color sigui blanc, color és color de primer pla. Així que això serà el text de la meva pàgina. Vull font gran, 22 assenyalar la font, i vull que és de la família de fonts, Geòrgia. Així que no vaig a tenir la predeterminada. Vaig a especificar Geòrgia, que és una d'aquestes fonts segures web que hem vist abans. Vull que el meu text s'alineï al centre, al centre de la caixa, Jo no vull que es va deixar alineat o alineat a la dreta. I jo vull que el meu ample de columna a ser de 50 píxels d'amplada també. Fem una ullada a l'aspecte que té, i veure si això és potser una millora. Així que em vaig a anar a table3.HTML, que record, inclou table.CSS com un enllaç, i anem a obtenir una vista prèvia. Això és molt millor, no? Això és en realitat començant a veure un molt més com una taula de multiplicar. He de vora vermella voltant de la meva taula, però ara També he especificat que cada fila és de 50 píxels d'ample, o que és 50 píxels tall-- excusa mi-- cada columna és de 50 píxels d'amplada. Les dades de cada columna, i només les dades, té un fons negre. Així que per això els línies blanques hi són. A causa de que l'espai en el entre totes aquestes cèl·lules, no és una frontera en de per si, és només Només estic omplint el cèl·lules, que en realitat fa que les fronteres de la taula, que pel que sembla, existia des del principi, que era línies blanques a penes fines. Ara estan visibles. Ara fan esclatar fora de la pantalla. I pel que aquest és un molt simple full d'estil que jo he aplicat, i ara la meva taula s'assembla molt més a una taula de quatre per quatre multiplicació, en lloc d'un desastre simplement confusa, on tot el que és clarament files i columnes, però no super ben organitzat. Estem realment només esgarrapant la superfície del que pot fer amb CSS aquí. Afortunadament la documentació CSS és bastant senzill. Anem a fer servir diversos dels seus atributs, amb bastant freqüència. Els que parlem anteriorment en aquest vídeo. Hi ha diversos que vostè probablement no va a utilitzar tot. I això està bé, també. Però només sé, que hi ha una gran quantitat de documentació que hi ha. Així que encara que no cobrim tot, que sens dubte no es queda pel seu compte. Però CSS és molt divertit per experimentar. I m'animo encaridament jugar amb les seves pàgines web, i veure com es pot fer que veure i sentir per millorar l'usuari experiència de visitar la seva pàgina. Sóc Doug Lloyd. Això és CS50.