HOJAS DE ESTILOS EN CASCADA CSS (Cascading Style Sheet)

Transcripción

1 HOJAS DE ESTILOS EN CASCADA CSS (Cascading Style Sheet) 1. QUÉ ES UNA HOJA DE ESTILOS? Las hojas de estilos son un conjunto de instrucciones, el cual permiten manejar el formato y presentación de contenido de la página WEB como: Tipo de fuente Tamaño de fuente Alineación Posicionamiento de texto Fondos Etc. Las hojas de estilos son estructuras basadas en códigos que permiten un tratamiento más eficaz de los contenidos. Ejemplo 01 A continuación mostramos una página con etiquetas HTML. Si aplicamos CSS tenemos la siguiente interfaz Mg. Abril Saire Peralta

2 Ejemplo VENTAJAS Las hojas de estilos permite ahorrar tiempo al modificar el formato de una página. Las hojas de estilos te empujan a trabajar con un formato uniforme para cada objeto de la página, ya que las páginas se liberan del tedioso formato y nos concentramos en el contenido. Los estilos se pueden guardar completamente por separado del contenido de la página siendo posible, por ejemplo, almacenar todos los estilos de presentación para una web de páginas en un sólo archivo de estilos. Las hojas de estilos permiten un mejor control en la presentación de un sitio web que los elementos de HTML, agilizando su actualización. Aumento de la accesibilidad de los usuarios gracias a que pueden especificar su propia hoja de estilo, permitiéndoles modificar el formato de un sitio web según sus necesidades, de manera que por ejemplo, personas con deficiencias visuales puedan configurar su propia hoja de estilo para aumentar el tamaño del texto El ahorro global en el ancho de banda es notable, ya que la hoja de estilo se almacena en la cache después de la primera solicitud y se puede volver a usar para cada página del sitio, no se tiene que descargar con cada página web. 3. EXTENSIÓN DE LAS HOJAS DE ESTILO Un archivo basado en estilos tiene la siguiente extensión. Las hojas de estilo se deben guardar con la extensión.ccs 4. FUNCIONAMIENTO Las hojas de estilos definen un mismo aspecto para todas las páginas de un sitio web. Se crea una hoja de estilo y se vinculan todas las páginas del sitio web a este archivo. Cualquier cambio efectuado en la hoja de estilo afecta de forma inmediata al formato de todas las páginas vinculadas a la misma. 5. SINTÁXIS Etiqueta o Selector, es la etiqueta HTML o selector al que le vamos a aplicar el estilo. Declaración, es el estilo completo que se le va a aplicar la regla y viene delimitado por los símbolos llave de apertura ( } ) y llave de cierre ( } ). Propiedad, es el atributo. Valor, es el valor que se le asignara a la propiedad o atributo Mg. Abril Saire Peralta

3 6. HOJA DE ESTILOS EN CASCADA INTERNA Las hojas de estilo interna, son las instrucciones que se colocan dentro de head de la página WEB. Para inserta hojas de estilos en una página WEB se debe insertar la etiqueta <style> Mg. Abril Saire Peralta

4 7. HOJA DE ESTILOS EN CASCADA EXTERNA Normalmente las hojas de estilo no se insertan en la misma página. Las instrucciones de las hojas de estilos deben estar en un archivo, para luego llamar a dicho archivo desde la página. Paso 01: Creamos un archivo llamado estilos.css, con los estilos creados del ejemplo anterior. Paso 02: Insertar el archivo de estilos en la cabecera del formulario. 8. PROPIEDADES GENERALES PARA LOS SELECTORES Los selectores comunes son table, tr, td, th, body, h1, p, div, etc. PROPIEDADES PARA CREAR ESTILOS PROPIEDAD PERMITE VALORES text-align Permite alinear el texto Left, center, rigth, justify color Color de fuente Red, Green, blue, etc. font-family Tipo de fuente Arial, verdana, helvética, fantasy, etc Mg. Abril Saire Peralta

5 background-color Color de fondo Red, Green, blue, etc. margin Alinear la tabla Auto (centrar la tabla) width Ancho de la tabla 10%, 20%, 30%, etc. font-size Tamaño a la fuente 10,12,14, etc. Text-decoration subrayado Underline font-weight Aplica negrita Bold, normal font-style Aplica cursiva italic Border-color Aplicar color al borde a la tabla Red, Green, blue, etc. 9. SELECTOR DE TIPO O ETIQUETA Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. El siguiente ejemplo selecciona todos los párrafos de la página: Si más de un selector tiene las mismas propiedades y valores En este caso, CSS permite agrupar todas las reglas individuales en una sola regla con un selector múltiple. Además agregar valores diferentes a las propiedades o atributos Mg. Abril Saire Peralta

6 A continuación podemos ver el selector de div, el cual es una etiqueta que permite dividir una página, y de esta manera se hace más fácil la aplicación de las CSS a cada parte de la página. La propiedad padding define los márgenes de todo lo que se encuentra dentro del div. Márgenes superior, inferior, izquierda y derecho. Si queremos que un div, tenga las mismas medidas en márgenes de relleno, utilizaremos como sigue: 10. SELECTOR DESCENDENTE Los selectores descendentes permiten aumentar la precisión del selector de tipo o etiqueta. Así, utilizando el selector descendente es posible aplicar diferentes estilos a los elementos del mismo tipo. En el ejemplo indica que se aplicara color rojo al texto de todos los párrafos que utilicen las etiqueta span. De la misma forma sucede con el selector H1. Y todos los demás elementos de la página que utilizan SPAN, que estén fuera de los párrafos y de la cabecera H1, se mostrara con el color por defecto de la página. El siguiente ejemplo, el selector descendente se compone de cuatro selectores: Mg. Abril Saire Peralta

7 Los estilos de la regla anterior se aplican a los elementos de tipo <em> que se encuentren dentro de elementos de tipo <span>, que a su vez se encuentren dentro de elementos de tipo <a>, y su vez que se encuentren dentro de elementos de tipo <p>. La etiqueta <em> se usa para indicar énfasis, los navegadores presentan el texto enfatizado generalmente en itálica (cursiva). Otros ejemplos p span { color: red; } h1 span { color: blue; } Con las reglas CSS anteriores: Los elementos <span> que se encuentran dentro de un elemento <p> se muestran de color rojo. Los elementos <span> que se encuentran dentro de un elemento <h1> se muestran de color azul. El resto de elementos <span> de la página, se muestran con el color por defecto aplicado por el navegador. No Confundir No debe confundirse el selector descendente con una combinación de selectores Caso 01: El estilo solo se aplica a los elementos que contienen la etiqueta <em> Caso 02: El estilo solo se aplica a todos los elementos p, a, span y em. 11. SELECTOR DE CLASE El selector de clase permite crear selectores nuevos, diferentes a los nombres de selectores que tiene el HTML. Todo selector de clase empieza con el punto y se aplica dentro de los selectores existentes del HTML. Ejemplo 01 Tenemos los siguientes párrafos y queremos aplicar un estilo únicamente al primer párrafo Mg. Abril Saire Peralta

8 También queremos aplicar el mismo estilo al texto del enlace y al texto resaltado. Para solucionar el problema crearemos un selector de clase llamado destacado, el cual permitirá poner color rojo al texto. Nuestro documento HTML quedaría como sigue: Donde el resultado es: Un selector de clase se puede aplicar a cualquier etiqueta de HTML, siempre y cuando el selector creado empiece con punto. 12. COMBINACIÓN DE SELECTOR DE TIPO Y DESCENDENTE Permite aplicar estilos a las etiquetas de tipo que contengan una clase. Ejemplo: Aplicar a todos los párrafos el color amarillo que usen la etiqueta destacado. El selector p.destacado se interpreta como "aquellos elementos de tipo <p> que dispongan de un atributo class con valor destacado" Mg. Abril Saire Peralta

9 Estilo p.nuevo { color:orange } Resultado Mg. Abril Saire Peralta