crossmedia 03: css

Estilos CSS
[diseño de documentos web]

Diplomado Crossmedia | Instituto Arcos | Jorge Cantú

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.


• 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.


• 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

crossmedia 03: css

Más contenido relacionado

La actualidad más candente

Destacado

Similar a crossmedia 03: css

Más de Jorge Cantú López

crossmedia 03: css