Informática General 2018 Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales
CSS - Hojas de Estilo Las hojas de estilo en cascada son un lenguaje formal usado para definir la presentación de un documento estructurado escrito en HTML, XML o XHTML. El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirá de estándar para los agentes de usuario o navegadores.
Las ventajas de utilizar CSS Control centralizado de la presentación de un sitio web completo, con lo que se agiliza considerablemente la actualización del mismo. Posibilidad de los usuarios de especificar una hoja de estilos local que será aplicada a un sitio web, con lo que aumenta la accesibilidad (ej: problemas de visión).
Las ventajas de utilizar CSS Una página puede disponer de diferentes hojas de estilo según el dispositivo que la muestre, o incluso a elección del usuario. El documento HTML en sí mismo es más claro de entender y se consigue reducir considerablemente su tamaño.
HTML5 y CSS3 HTML5 fue desarrollado considerando CSS a cargo del diseño. La integración entre HTML y CSS es vital para el desarrollo web. Entonces cuando hablamos de HTML 5 también estamos haciendo referencia a CSS3, aunque se trate de dos tecnologías separadas.
CSS En resumen, CSS es un lenguaje que trabaja junto con HTML para proveer estilos visuales a los elementos del documento.
Por qué en cascada? La información de estilos puede ser incluida de varias formas: Pueden especificarse para cada elemento HTML mediante el atributo "style" Pueden declararse en el <head> de un documento HTML En un documento externo archivo.css O incluso en varios documentos externos.
Orden de cascada Hoja de estilos del navegador (default) Hoja de estilos externa (declarada antes del tag <style>) Estilos definidos en el <head> del documento HTML Estilos definidos en un tag HTML
Sintaxis La sintaxis CSS tiene 3 partes: selector {propiedad: valor} El selector es normalmente el elemento HTML a definir, la propiedad es el atributo de ese elemento que queremos cambiar y cada propiedad va a tener un valor. La propiedades y valores se escriben separados por ":" y rodeados por llaves body {color: black} p {font-family: "sans serif"}
Sintaxis Si queremos definir más de una propiedad, cada una debe finalizar con ";" p { text-align: center; color: red; } Para que se lean mejor y más claro lo hacemos de la siguiente forma: p { text-align: center; color: black; font-family: arial; }
Agrupamientos Se pueden agrupar selectores separándolos mediante "," h1,h2,h3,h4,h5,h6 { color: green; }
Comentarios Con el fin de ordenar el código o simplemente porque más de una persona lo utilizará, se hace necesario el uso de los comentarios /* Esto es un comentario */ p { text-align: center; /* esto es otro comentario que ocupa más de un renglón */ color: black; }
Tipos de selectores Los selectores de etiquetas HTML se utilizan escribiendo el nombre de la etiqueta a la que le aplicaremos el estilo. Los selectores de identificador se usan para aplicar estilos solo a las etiquetas identificadas con un nombre definido. Los selectores de clase se utilizan para aplicar estilos en forma repetitiva, aplicándolos en todas las etiquetas que los llamen por un nombre previamente definido. Por ej.:.mi_clase
Selectores de etiquetas Para definirlos utilizamos el nombre de la etiqueta que queremos afectar: body { font-family: arial; font-size: 12px; color: black; background-color: #cccccc; } Este tipo de selector no requiere aplicación, las etiquetas heredan automáticamente las propiedades que definimos.
Selector de identificación Para definirlos utilizamos el # antes del nombre de identificación: #recuadro { background-color: #ff0000; color: #ffffff; font-size: 26px; } En este caso, se lo aplicamos a la etiqueta con solo colocarle el identificador "id": <div id="recuadro">aquí el contenido</div>
Selector de clase Para definirlos utilizamos un "." antes del nombre que le asignamos:.mi_clase { margin: 5px; height: 100px; width: 200px; } Utilizamos el atributo "class" en las etiquetas HTML para aplicar el estilo: <div class="mi_clase">contenido</div>
Aplicación de estilos Existen 3 formas de aplicación: Hoja de estilos externa Estilos definidos en el <head> del documento HTML Estilos definidos en un tag HTML
Hoja de estilos externa Se trata de un archivo de texto plano, vinculado al documento HTML desde la sección head de la página: <link href="archivo.css" rel="stylesheet"> Esta es la forma más recomendable para la definición de estilos.
Definidos en el <head> Dentro del <head> del documento HTML se declaran los estilos de la siguiente forma: <head> <title>página X</title> <style> body { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px; color: #333333; } </style> </head> Esta opción es recomendable si se necesitan estilos específicos para una página en particular.
Definidos en un tag HTML Este método es el menos recomendable, y solo se utilizará en casos puntuales que así lo requieran: <div style="background-color: #333333;" ></div>
Propiedades CSS Hay propiedades para definir: Los fondos; Los bordes; Los bloques; El texto y la tipografía; Las listas; El posicionamiento; Y más!
background background-color background-image background-repeat Fondos (algunas propiedades)
font font-family font-size font-style font-weight Tipografías (algunas propiedades)
text-align text-decoration text-transform Texto (algunas propiedades)
height width margin margin-top margin-right margin-bottom margin-left padding Bloques (algunas propiedades)
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; }
Selector descendente 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; }
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; }
Selector de clase 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.
Selector de ID 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; }
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 el 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 ex px relativa respecto del tamaño de letra empleado (ancho de la M) del elemento padre relativa respecto de la altura x del tipo de letra que se esté utilizando 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 (color name), colores del sistema, RGB hexadecimal, RGB numérico y RGB porcentual. El método más habitual es el del RGB hexadecimal.
Colores Color names aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow, etc. Son 140 en total http://www.w3schools.com/c olors/colors_names.asp
Colores 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
Colores 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 = #336699
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. 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.
Pseudo-clases :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
Pseudo-clases CSS3 :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-elementos 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 Nota: en CSS2 se escribía con : y en CSS3 se escribe :: (no todos los pseudo-elementos funcionan con : pero sí todos con ::)
Informática General 2018 Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales