[Powered by Google Translate] [CSS] [Joseph Ong - Universitat de Harvard] [Aquest és CS50. - CS50.TV] 

Avui parlarem sobre CSS o Cascading Style Sheets. 

Llavors, què és CSS? Bé, anem a trencar el terme CSS baix en 2 parts: Cascada i fulls d'estil. En 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 moltíssim insinua CSS ho fa. Afegeix estils per el codi HTML d'una pàgina web, canviar la forma en la pàgina web es veu estèticament. 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 l'addició d'ombres al text. Vostè pot fins i tot fer coses boges com fer les coses animades a la pantalla. 

Llavors, com fem servir CSS amb HTML? Prendre aquest lloc pobre aspecte que acabo d'escriure. Si Rob van anar a buscar en aquest lloc en aquest moment, probablement diria una cosa així com: "Guau! La meva introducció es veu terrible. Joseph, ets un dissenyador horrible." "Ús de la font Times defecte? Helvetica és molt millor." 

Llavors, quina podria ser la forma més senzilla d'aplicar l'estil de Rob vol? Els lots de manera més òbvia de les persones inicialment 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 CSS de l'element HTML que voleu canviar seguit de dos punts seguit del 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, posem l'atribut d'estil a div de Rob aquí a continuació, entre cometes dobles posar una declaració CSS: "Border: 1px solid negre"; L'1 píxel 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 el color de la frontera és. 

Si volem múltiples estils en un element, escriure aquestes declaracions en seqüència. Per exemple, si Rob vol 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;" L'últim punt i coma és en realitat opcional, però la gent sol mantenir en nom de la coherència. 

Anem a salvar explicar algunes de les propietats de CSS més fredes i més complexos per a 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. El millor és que CSS és bastant ampli, el més probable és si hi ha alguna cosa que vols fer - dins del que és raonable - CSS probablement pugui fer-ho. Anomenem a aquest tipus de pentinat estil inline. L'estil d'element és, així, d'acord amb l'etiqueta d'inici. 

Per a la gent que realment els agrada ser organitzat, vostè pot començar a rebre una mica peeved del brut que tot això es veu. Imagineu si vostè hagués de fer això per a cada element de la pàgina, a més de que ara el codi HTML i CSS estan barrejats i desordenats. Gross, oi? Per solucionar aquest problema, la gent finalment va començar guanyant terreny a separar el seu format HTML del seu estil CSS mitjançant els anomenats selectors CSS. Selectors CSS s'utilitzen per seleccionar elements a què s'apliquen les declaracions. Un selector combinat amb una llista de declaracions de CSS es coneix com una regla CSS sovint. Aquestes normes es posen entre etiquetes d'estil HTML d'obertura i tancament, sovint a la capçalera del document. 

És molt més fàcil de veure amb un exemple, així que anem a començar per la creació d'una regla CSS simple. En primer lloc, anem a posar etiquetes d'estil en la secció principal del nostre HTML. A continuació, el selector. Anem a començar amb un dels selectors més simples, 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 coixinet seguida D de la div, rob. Ara les declaracions. Afegim claus d'obertura i tancament i canviem les nostres declaracions anteriors sobre la línia div de Rob dins d'aquests suports, 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 el h1 interior d'introducció de Rob? Es podria pensar, "Anem a posar un ID a ell i després passar els nostres estils anteriors." Això funciona, però CSS té altres maneres que li permet seleccionar els 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 tots els casos d'1 selector que viuen a l'interior d'un altre selector. Això sona molt més complicat del que realment és. Heus aquí un exemple. Escriurem # robar, afegir un espai, i seguir amb un h1, un altre selector simple anomenat selector d'etiquetes que seleccioneu els tipus d'elements com divs o paràgrafs. L'espai combina els 2 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 que funciona, vaig a canviar el color de font a blanc, refresc, i, mira, rematada de cap de Rob és ara blanc. 

Tot aquest treball ve a demostrar 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 s'inicia aquest estil de bloc d'aconseguir una mica més gran, Fins i tot puc llençar aquests estils a terme en un arxiu diferent. 

Per incloure aquest nou arxiu com CSS en aquest document que vaig a utilitzar l'etiqueta de vincle HTML. Aquí estic dient-li que m'uneix 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 independents, que és gairebé sempre la manera 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 selectors de classe per a la selecció dels elements amb una certa classe, selectors d'atributs per a la selecció d'elements per altres atributs com type = "radio" per a les entrades de botó de ràdio, i pseudoselectors com flotar i se centren per especificar l'estil, quan 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. Uns altres que poden sorgir inclouen la fletxa només per als fills directes, l'accent a tots els germans que es produeixen després que l'element, i el signe més per a l'1 de germans que ve immediatament després de l'element. 

Mitjançant la combinació d'aquests selectors i combinadors, pot ampliar la gamma d'estil 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 CSS que veus em escriure aquí, Puc fer ràpidament alguna cosa com això s'assembla a alguna cosa com això. 

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

[CS50.TV] 

Uh, per on començo? Déjame fer això sense - [Rialles] Bé. Afegir a - Déjame canviar aquesta redacció. Ooh. Ho sento.