SEGUNDO BIMESTRE
CRONOGRAMA
Definición de CSS
CSS son las siglas de Cascading Style Sheets - Hojas de Estilo en Cascada - que es un lenguaje que describe la presentación de los documentos estructurados en hojas de estilo para diferentes métodos de interpretación, es decir, describe como se va a mostrar un documento en pantalla, por impresora, por voz (cuando la información es pronunciada a través de un dispositivo de lectura) o en dispositivos táctiles basados en Braille.
¿Para que sirve?
CSS es una especificación desarrollada por el W3C (World Wide Web Consortium) para permitir la separación de los contenidos de los documentos escritos en HTML, XML, XHTML, SVG, o XUL de la presentacin del documento con las hojas de estilo, incluyendo elementos tales como los colores, fondos, márgenes, bordes, tipos de letra..., modificando as la apariencia de una página web de una forma más sencilla, permitiendo a los desarrolladores controlar el estilo y formato de sus documentos.
¿Cómo funciona?
El lenguaje CSS se basa en una serie de reglas que rigen el estilo de los elementos en los documentos estructurados, y que forman la sintaxis de las hojas de estilo. Cada regla consiste en un selector y una declaración, esta última va entre corchetes y consiste en una propiedad o atributo, y un valor separados por dos puntos.
Ejemplo:
h2 {color: green;}
- h2 ---> es el selector
- {color: green;} ---> es la declaración
- color ---> es la propiedad o atributo
- green ---> es el valor
Selector
El Selector especifica que elementos HTML van a estar afectados por esa declaración, de manera que hace de enlace entre la estructura del documento y la regla estilística en la hoja de estilo.
Declaración
La Declaración que va entre corchetes es la información de estilo que indica cómo se va a ver el selector. En caso de que haya más de una declaración se usa punto y coma para separarlas.
Propiedad o Atributo y Valor
Dentro de la declaración, la Propiedad o Atributo define la interpretación del elemento asignándosele un cierto Valor, que puede ser color, alineación, tipo de fuente, tamaño..., es decir, especifican qué aspecto del selector se va a cambiar.
tomado de:http://www.masadelante.com/faqs/css
Soporte de CSS en los navegadores
El trabajo del diseñador web siempre está limitado por las posibilidades de los navegadores que utilizan los usuarios para acceder a sus páginas. Por este motivo es imprescindible conocer el soporte de CSS en cada uno de los navegadores más utilizados del mercado.
Internamente los navegadores están divididos en varios componentes. La parte del navegador que se encarga de interpretar el código HTML y CSS para mostrar las páginas se denomina motor. Desde el punto de vista del diseñador CSS, la versión de un motor es mucho más importante que la versión del propio navegador.
La siguiente tabla muestra el soporte de CSS 1, CSS 2.1 y CSS 3 de los cinco navegadores más utilizados por los usuarios:
| Navegador | Motor | CSS 1 | CSS 2.1 | CSS 3 |
|---|---|---|---|---|
| Google Chrome | WebKit | Completo desde la versión 85 del motor | Completo | Todos los selectores, pseudo-clases y muchas propiedades |
| Internet Explorer | Trident | Completo desde la versión 7.0 del navegador | Completo | Todos los selectores, pseudo-clases y muchas propiedades a partir de la versión 10.0 del navegador |
| Firefox | Gecko | Completo desde la versión 1.0 del navegador | Completo | Todos los selectores, pseudo-clases y muchas propiedades |
| Safari | WebKit | Completo desde la versión 85 del motor | Completo | Todos los selectores, pseudo-clases y muchas propiedades |
| Opera | Presto | Completo desde la versión 1.0 del navegador | Completo | Todos los selectores, pseudo-clases y muchas propiedades |
Los navegadores Firefox, Chrome, Safari y Opera son los más avanzados en el soporte de CSS, ya que incluyen muchos elementos de la futura versión CSS 3 y un soporte casi perfecto de la actual version 2.1.
Por su parte, el navegador Internet Explorer sólo puede considerarse adecuado desde el punto de vista de CSS a partir de su versión 7. Internet Explorer 6, utilizado todavía por un número no despreciable de usuarios, sufre carencias muy importantes y contiene decenas de errores en su soporte de CSS. Internet Explorer 8 soporta casi todas las propiedades y características de CSS 2.1.
Ejercicio clase
(código html)
<html>
<head>
<title>Intento para hacer un css</title>
<LINK href="especial.css" rel="stylesheet" type="text/css">
</head>
<body>
<P class="especial"> Este parrafo tiene que tener la letra verde </P>
</body>
</html>
(código css)
h1.p{
color: #4598aa;
font-size: 30px;
text-transform: lowercase;
}
h1.b{
color: #FF657F;
font-size: 30px;
text-transform: lowercase;
}
h1.c{
color: #0E12FE;
font-size: 30px;
text-shadow: 1px 3px 5px
text-transform: lowercase;
}
No hay comentarios.:
Publicar un comentario