Css

Instituto Arcos | Jorge Cantú

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

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

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


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 su tamaño.


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.


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

Css

Documents

Transcript of Css