crossmedia 03: css

Diplomado Crossmedia | Instituto Arcos | Jorge Cantú

Estilos CSS[diseño de documentos web]


CSS

• CSS es un lenguaje usado para definir la presentación de un documento escrito en HTML o XML.

• El nombre viene del inglés Cascading Style Sheets, que significa hojas de estilo en cascada .

• Las hojas de estilo servirán de estándar para los que los navegadores interpreten las páginas.


3 formas de CSS en una página Web• Un estilo en línea (inline) es un método para insertar

el lenguaje de estilo de página directamente dentro de una etiqueta HTML. El incrustar la descripción del formateo dentro del código de la página Web, se convierte en una manera larga, tediosa y poco elegante de resolver el problema de la programación de la página. Es el método recomendado para maquetar correos electrónicos en HTML.


3 formas de CSS en una página Web• Una hoja de estilo interna,

incrustada dentro de un documento HTML. Tiene la desventaja que las indicaciones de estilo solo son válidas para ese documento HTML.


3 formas de CSS en una página Web• Una hoja de estilo externa,

almacenada en un archivo diferente al archivo del HTML de la página Web. Separa completamente las reglas de formateo para la página HTML de la estructura básica de la página.


Ventajas del CSS

• Control centralizado de la presentación de un sitio web completo con lo que se agiliza la actualización del mismo.

• Los navegadores permiten a los usuarios especificar su propia hoja de estilo local, que será aplicada a un sitio web, con lo que aumenta considerablemente la accesibilidad. Por ejemplo, personas con deficiencias visuales pueden configurar su propia hoja de estilo para aumentar el tamaño del texto o remarcar más los enlaces.

• Una página puede disponer de diferentes hojas de estilo según el dispositivo que la muestre o, incluso, a elección del usuario. Por ejemplo, para ser impresa, mostrada en un dispositivo móvil o ser "leída" por un sintetizador de voz.

• El documento HTML en sí mismo es más claro de entender y se consigue reducir considerablemente su tamaño y tiempo de descarga (siempre y cuando no se utilice estilo en línea).


Selectores CSS• universal: afecta a todos y cada uno de los elementos (etiquetas y

divs) presentes en el codigo del html. Se indica mediante un asterisco (*).

ejemplo: * {... }

• de etiqueta: afecta a todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector.

ejemplo: p {... }

• de ID: afecta a un elemento de la página a través del valor de su atributo id. Se utiliza para seleccionar solo un elemento de la página, ya que el atributo id no se puede repetir en dos elementos diferentes de una misma página.

ejemplo: #nombredediv {... }

• de clase: afecta a los elementos que utilizan el atributo class de HTML para indicar la regla CSS que se le debe aplicar. Este selector permiten reutilizar los mismos estilos para varios elementos diferentes.

ejemplo: .nombredeclase {... }


Selectores CSS

• Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla está compuesta de una parte de “selectores”, un símbolo de “llave de apertura” ({), otra parte denominada “declaración” y por último, un símbolo de “llave de cierre” (}).

• Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS.

• Declaración: especifica los estilos que se aplican a los elementos. Está compuesta por una o más propiedades CSS.

• Propiedad: permite modificar el aspecto de una característica del elemento.

• Valor: indica el nuevo valor de la característica modificada en el elemento.


Tipos de medios en CSS

Un contenido web puede ser visualizado en diferentes dispositivos. Es posible definir distintos estilos para cada medio con la regla

@media.

• All: Cualquier tipo de medio.• Braille: dispositivos táctiles braile.• Embossed: Para impresoras braile.• Handheld: para dispositivos de bolsillo o de mano que normalmente tienen

una pantalla pequeña.• Print: para cuando se imprimen documentos en la impresora. • Projection: para las presentaciones que se muestran con proyector.• Screen: para las pantallas de computadores personales.• Speech: medio para sintetizadores de voz.• Tty: tipo de medio que se utiliza en dispositivos que tienen un tamaño fijo

de carácter, como un teletipo, terminal, consola de comandos etc. • Tv: para cuando se accede a una web desde un dispositivo de televisión.


Hacks en CSS

• Normalmente cuando nombramos una propiedad de un estilo, este es interpretado por todos los navegadores, pero si anteponemos # se aplica a todos las versiones de Internet Explorer, además si utilizamos _ el estilo se aplicará a Internet Explorer 6, luego tendríamos:

.mydiv { height: 15px; /* Para todos los Browsers */ #height: 20px; /*Para Internet Explorer */ _height: 25px; /* Para Internet Explorer 6 */}

• Con lo cual obtenemos un mismo estilo interpretado de forma distinta de acuerdo al browser que tengamos.


Comentarios Condicionales para IE• La estructura básica es un comentario con una instrucción

especial, que hace que IE interprete lo que hay adentro como código (html, css o javascript) y no un comentario:



• Si queremos que una hoja de estilo únicamente se muestre en IE 6, nuestra sintáxis sería así:



• También podemos especificar navegadores mayores o menores que cierta versión. Por ejemplo:

<!--[if gt IE 6]> "gt" = mayor que (versiones posteriores) <!--[if gte IE 6]> "gte" = mayor que o igual<!--[if lt IE 6]> "lt" = menor que (versiones anteriores) <!--[if lte IE 6]> "lte" = menor que o igual

Documents

crossmedia 03: css