[Powered by Google Translate] [CSS] [Joseph Ong - Harvard University] [Aquesta és CS50. - CS50.TV] 

Avui estarem parlant de CSS o Cascading Style Sheets. 

Llavors, què és CSS? Bé, anem a trencar el termini CSS baix en 2 parts: Cascading Style Sheets i. Cascada és una mica més complex, i és una cosa que anem a cobrir en un altre vídeo. Però, per començar, els fulls d'estil consells molt en el que CSS fa. Afegeix estils per el codi HTML d'una pàgina web, canviar la forma en la pàgina web estèticament es veu. Això significa que tot, des del tipus de lletra del text per al posicionament dels continguts de la pàgina a altres coses interessants com la fabricació de les cantonades d'una caixa arrodonida o afegir ombres al text. Vostè pot fins i tot fer coses boges com fer les coses animades a la pantalla. 

Llavors, com utilitzar CSS amb HTML? Prengui aquest lloc d'aparença pobra que acabo d'escriure. Si Rob fora a mirar a aquest lloc ara mateix, probablement diria una cosa així com: "Guau! Meva introducció es veu terrible. Josep, ets un dissenyador horrible." "Ús de la font per defecte Times? Helvetica és molt millor." 

Llavors, ¿quina podria ser la forma més senzilla d'aplicar l'estil de Rob vol? Els lots de forma més òbvia de les persones inicialment va escriure CSS era posar el que anomenem declaracions d'estil just en el propi element utilitzant l'atribut d'estil HTML. Una declaració d'estil consisteix simplement en la propietat de l'element HTML CSS volem canviar seguit de dos punts seguit pel nou valor de la propietat i un punt i coma al final. Per exemple, diguem que Rob vol una vora negra al voltant de la seva introducció. En primer lloc, posar l'atribut d'estil en div Rob aquí llavors dins de cometes dobles va posar una declaració CSS: "Border: 1px sòlid negre"; El píxel 1 es refereix a l'amplada de la frontera, el sòlid es refereix a l'estil de la frontera, i el color al final determina quin color és la frontera. 

Si volem múltiples estils d'un element, escric aquestes declaracions en seqüència. Per exemple, si Rob vol que el seu text de capçalera en Helvetica amb un fons blau i més espai al voltant del text, podem fer això: style = "font-family: Helvetica, background-color: blue; padding: 5px;" El punt i coma últim és en realitat opcional, però la gent sol tenir en nom de la coherència. 

Deixarem que explica alguns dels més frescos i més complexes propietats CSS per un altre vídeo. Si vostè té alguna cosa en ment, només buscar a Google l'efecte desitjat seguit de CSS probablement li donarà molt bons resultats. L'interessant és que el CSS és bastant ampli, el més probable és si hi ha alguna cosa que vols fer - dins del que és raonable - CSS probable que pugui fer-ho. Anomenem a aquest tipus de pentinat estil en línia. L'estil d'element és, bé, d'acord amb l'etiqueta d'inici. 

Per a la gent que realment m'agrada ser organitzat, vostè pot començar a aconseguir una mica molest en com tot això es veu desordenat. Imagineu si vostè havia de fer això per a cada element de la pàgina, A més, ara el codi HTML i CSS estan tots barrejats i desordenada. Gross, no? Per solucionar aquest problema, la gent finalment va començar guanyant terreny a separar seu format HTML del seu estil CSS mitjançant els anomenats selectors CSS. Selectors CSS s'utilitza per seleccionar elements als quals s'apliquen les declaracions. Un selector combinat amb una llista de declaracions de CSS es refereix sovint com una regla CSS. Aquestes normes es col · loca entre les etiquetes d'estil HTML d'obertura i tancament, sovint al cap del document. 

És molt més fàcil de veure amb un exemple, així que començarem per crear una senzilla regla de CSS. En primer lloc, posarem etiquetes d'estil en la secció head del nostre HTML. A continuació, el selector. Anem a començar amb un dels més simples selectors, el símbol de hash, que selecciona un element HTML per la seva atribut ID. En aquest cas anem a seleccionar el div que representa la introducció de Rob escrivint el símbol de hash seguida de la identificació del div, Rob. Ara les declaracions. Afegim claus d'obertura i tancament i canviar les nostres declaracions anteriors sobre la línia div Rob dins d'aquestes claus, actualitzar, i, fresc, introducció de Rob encara té una vora negra al voltant d'ell menys la lletjor en línia desordenat. 

Ara, què passa si volem seleccionar l'interior h1 d'introducció de Rob? Es podria pensar: "Anem a posar un ID en ell i després moure els estils anteriors." Això funciona, però CSS té altres formes del que li permet seleccionar elements mitjançant l'ús del que anomenem combinadors per barrejar selectors simples. Per exemple, un caràcter d'espai en blanc es pot utilitzar com un combinador per especificar totes les instàncies d'un selector que viuen a l'interior d'un altre selector. Això sona molt més complicat del que realment és. Aquest és un exemple. Escriurem # robar, afegir un espai, i seguir amb un h1, altre selector simple anomenat un selector d'etiquetes que seleccioneu els tipus d'elements com divs o paràgrafs. L'espai combina els dos selectors simples, l'aplicació de totes les declaracions de CSS i les claus a les etiquetes h1 que viuen a l'interior de l'element amb id = "rob". Només per convèncer-te que funciona, vaig a canviar el color de font a blanc, refrescar, i, mira, capçalera de Rob és ara blanc. 

Tot aquest treball es demostra que mitjançant l'ús de regles en lloc d'estils en línia podem obtenir el codi molt més net. De fet, si aquest bloc d'estil comença a ser una mica més gran, Fins i tot puc tirar aquests estils a terme en un arxiu diferent. 

Per incloure aquest nou arxiu CSS com en aquest document només vaig a utilitzar l'etiqueta HTML d'enllaç. Aquí estic dient que estic vinculant en un full d'estils extern, l'atribut rel, i especificar la ruta d'accés a l'arxiu amb el meu atribut href. Ara el meu codi HTML i CSS s'organitzen molt bé en arxius totalment diferents, que és gairebé sempre el camí dissenyadors prefereixen treballar amb HTML i CSS. 

En cas que vostè s'estigui preguntant, els selectors simples inclouen selectors d'ID i els selectors d'etiquetes com les que acabem de veure així com els selectors de classe per a la selecció d'elements amb una determinada classe, selectors d'atributs per a la selecció d'elements per altres atributs com type = "ràdio" per les entrades de botó de ràdio, i pseudoselectors com flotar i se centren per especificar l'estil en què les interaccions agrada passar el ratolí sobre un element ocórrer. 

Els combinadors comuns inclouen espais en blanc per a tots els nens i comes per distingir selectors. Altres que poden sorgir inclouen a la fletxa per a nens directes només, la titlla a tots els germans que es produeixen després que l'element, i el signe més per al germà 1 que ve immediatament després de l'element. 

Mitjançant la combinació d'aquests selectors i combinadors, pot ampliar la gamma de disseny es pot aconseguir en una pàgina web determinada i escriure CSS de manera més eficient. Amb només un parell de línies de codi CSS que em veuen escriure aquí, Ràpidament em pot fer alguna cosa com això sembli alguna cosa com això. 

Sóc Josep, i això és CS50. 

[CS50.TV] 

Uh, per on començo? Deixa fer això sense - [Rialles] Bé. Afegir a - Deixa canviar aquesta redacció. Ooh. Em sap greu.