Informática General 2017 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales

Transcripción

1 UNA / AREA TRANSDEPARTAMENTAL DE ARTES MULTIMEDIALES Licenciatura en Artes Multimediales Informática General 2017 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales CSS - parte 2 Selector universal Se utiliza para seleccionar todos los elementos de la página. * { margin: 0; padding: 0; Selector de etiqueta Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. h1 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; Selectores de etiqueta combinados h1, h2, h3 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; Selector descendente Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento. p span { color: red; h1 span { color: blue; No debe confundirse el selector descendente con la combinación de selectores. /* El estilo se aplica a todos los elementos "p", "a", "span" y "em" */ p, a, span, em { text-decoration: underline; /* El estilo se aplica solo a los elementos "em" que se encuentran dentro de "p a span" */ p a span em { text-decoration: underline;

2 Selector de clase Para aplicar estilos a un solo elemento de la página se utiliza el atributo class de HTML sobre ese elemento para indicar directamente la regla CSS que se le debe aplicar. HTML <p class="destacado">texto texto...</p> CSS.destacado { color: red; En una misma página HTML varios elementos diferentes pueden utilizar el mismo valor en el atributo class. <p class="destacado">texto texto...</p> <p>texto <a href="#" class="destacado">link</a> texto...</p> <p>texto <em class="destacado">texto</em> texto...</p> Combinar selectores de etiqueta y clase Combinando el selector de etiqueta y el selector de clase, se obtiene un selector mucho más específico. p.destacado { color: red; Este ejemplo se aplica sólo a aquellos elementos <p> que dispongan de un atributo class con valor destacado. Selectores combinados /* Todos los elementos de tipo "p" con atributo class="aviso" */ p.aviso {... /* Todos los elementos con atributo class="aviso" que estén dentro de cualquier elemento de tipo "p" */ p.aviso {... /* Todos los elementos "p" de la página y todos los elementos con atributo class="aviso" de la página */ p,.aviso {... Selector de ID El selector de ID permite seleccionar un elemento de la página a través del valor de su atributo id. Este tipo de selectores sólo seleccionan un elemento de la página porque el valor del atributo id no se puede repetir en dos elementos diferentes de una misma página. CSS #destacado { color: red; HTML <p>primer parrafo</p> <p id="destacado">segundo parrafo</p> <p>tercer parrafo</p> Combinar selectores de etiqueta y de ID Este ejemplo se aplica al elemento de tipo <p> que tenga un atributo id igual a aviso. p#aviso { color: blue;

3 Selectores combinados /* Todos los elementos de tipo "p" con atributo id="aviso" */ p#aviso {... /* Todos los elementos con atributo id="aviso" que estén dentro de cualquier elemento de tipo "p" */ p #aviso {... /* Todos los elementos "p" de la página y todos los elementos con atributo id="aviso" de la página */ p, #aviso {... Herencia Cuando se establece el valor de alguna propiedad en un elemento, todos sus descendientes heredan inicialmente ese mismo valor. La herencia de estilos no funciona en todas las propiedades CSS, por lo que se debe estudiar cada propiedad de forma individual. Unidades de medida Las medidas en CSS se usan, entre otras, para definir altura, ancho y márgenes de los elementos y para establecer el tamaño de letra del texto. CSS divide todas las unidades de medida en absolutas y relativas. Si el valor es distinto a 0 y no se indica ninguna unidad, la medida se ignora completamente. Unidades relativas em : relativa respecto del tamaño de letra empleado (ancho de la M) ex : relativa respecto de la altura x del tipo de letra que se esté utilizando px : relativa respecto de la pantalla del usuario Unidades absolutas in, pulgadas (1 pulgada son 2.54 centímetros) cm, centímetros mm, milímetros pt, puntos (1 punto es 1/72 pulgada) pc, picas (1 pica equivale a 12 puntos) Porcentajes CSS define otra unidad de medida relativa basada en los porcentajes. Un porcentaje siempre está referenciado a otra medida, normalmente el elemento contenedor. Los elementos de bloque de manera predeterminada tienen un ancho de 100%. Recomendaciones Usar em como unidad de medida para los tamaños del texto y los tamaños de los elementos relacionados con el texto (interlineado, márgenes entre párrafos, etc.). Usar porcentajes para los demás elementos, definiendo un contenedor. Pero siempre, siempre evaluar lo que mejor sirve según cada caso. Colores Los colores en CSS se pueden indicar de cinco formas diferentes: palabras clave, colores del sistema, RGB hexadecimal, RGB numérico y RGB porcentual. El método más habitual es el del RGB hexadecimal.

4 Palabras clave: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow Son 140 en total ( ) RGB hexadecimal Para obtener el color completo en formato RGB hexadecimal, se concatenan los valores de las componentes RGB en ese orden y se les añade el prefijo #. Por ejemplo: #4762B0 Una de las ventajas del formato RGB hexadecimal es que se pueden comprimir sus valores cuando todas sus componentes son iguales dos a dos: #AAA = #AAAAAA #FFF = #FFFFFF #A0F = #AA00FF #369 = # Tipografía CSS define numerosas propiedades para modificar la apariencia del texto. color font-family font-size font-weight font-style font-variant Tipografías en la web Se deben utilizar tipografías que estén disponibles en los distintos sistemas operativos y que sean de buena legibilidad en pantalla Se definen por grupos: Arial, Helvetica, sans-serif Verdana, Arial, Helvetica, sans-serif Times New Roman, Times, serif Georgia, Times New Roman, Times, serif Courier New, Courier, monospace Texto Además de las propiedades relativas a la tipografía del texto, CSS define numerosas propiedades que determinan la apariencia del texto en su conjunto. text-align line-height text-decoration text-transform Links Los estilos más sencillos que se pueden aplicar a los links son los que modifican su tamaño de letra, su color y la decoración del texto del link. CSS también permite aplicar diferentes estilos a un mismo enlace en función de su estado utilizando pseudo-clases. Pseudo-clases Una pseudo-clase es una palabra clave que se agrega a los selectores para especificar un estado especial del elemento.

5 Las pseudo-clases permiten aplicar estilos a un elemento no sólo en relación a la estructura del documento, sino también en relación a factores externos como el history del navegador o la posición del mouse. :link, aplica estilos a links que aún no han sido visitados :visited, aplica estilos a links que han sido visitados anteriormente :hover, aplica estilos al link sobre el que el usuario ha posicionado el mouse :active, aplica estilos al link que el usuario está presionando Pseudo-clases para links /* link no visitado */ a:link { color: #FF0000; /* link visitado*/ a:visited { color: #00FF00; /* mouse over */ a:hover { color: #FF00FF; /* seleccionado */ a:active { color: #0000FF; Combinando clases y pseudo-clases a.uno:hover { color: #ff0000; Sólo aplica el estilo al link que tiene el atributo class="uno" cuando el usuario pasa el mouse por encima Pseudo-clases CSS3 :first-of-type, aplica estilos al primer elemento de su tipo :last-of-type, aplica estilos al último elemento de su tipo :only-of-type, aplica estilo al elemento único en su tipo :first-child, aplica estilos al primer elemento hijo del elemento padre :last-child, aplica estilos al último elemento hijo del elemento padre :only-child, aplica estilos al elemento hijo único del elemento padre Pseudo-elemento Un pseudo-elemento es una palabra clave que se agrega a los selectores para aplicar estilos a una parte específica del documento. Pseudo-elementos CSS3 ::first-line, aplica estilos a la primera línea de texto del elemento ::first-letter, aplica estilos a la primera letra de la primera línea ::selection, aplica estilos al elemento seleccionado en el momento

6 Nota: en CSS2 se escribía con : y en CSS3 se escribe :: (no todos los pseudoelementos funcionan con : pero sí todos con ::)