¿Qué es CSS? Tecnología que nos permite controlar la apariencia de una página web.
CSS (Cascade Style Sheet) describe como los elementos dispuestos en la página son presentados al usuario.
El lenguaje de las Hojas de Estilo está definido en la Especificaciones CSS1 y CSS2 del W3C.
Veremos que podemos asociar las reglas de estilo a las marcas HTML de tres maneras: directamente a la marca, en el head de la página o agrupar las reglas de estilo en un archivo independiente con extensión *.css
Definición de estilos a nivel de marca HTML. La sintaxis para definir un estilo a una marca HTML es:
< h1 style="color:#ff0000;background-color:#ffff00"> Este mensaje es de color rojo sobre fondo amarillo. < /h1>
Cada vez que inicializamos una propiedad debemos separarla de la siguiente por punto y coma.
El estilo se aplica únicamente a la marca donde inicializamos la propiedad style
Definición de estilos a nivel de página. Podemos definir estilos que se aplican a las distintas marcas HTML de la página.
< head> < title>Problema< /title> < style type="text/css"> h1 {color:#ff0000;background-color:#ffff00} h2 {color:#00ff00} h3 {color:#0000ff} < /style>
En todos los lugares de esta página donde se utilice la marca h1 debe aplicar como estilo de color de texto el rojo y fondo el amarillo.
Podemos definir estilos para muchas marcas en una única sección style.
Propiedades relacionadas a fuentes.
Unidades de medida (px, cm, mm, em etc.) px (pixeles) em (altura de la fuente por defecto) ex (altura de la letra x) in (pulgadas) cm (centímetros) mm (milímetros) pt (puntos, 1 punto es lo mismo que 1/72 pulgadas) pc (picas, 1 pc es lo mismo que 12 puntos) % (porcentaje)
La recomendación es utilizar em como medida cuando la salida es el monitor. Si utilizamos pixeles hay navegadores que no permiten cambiar el tamaño de texto.
Propiedades relacionadas a fuentes. < head> < title>Problema< /title> < style type="text/css"> h1 { font-family:times new roman; font-size:30px; font-style:italic; font-weight:bold; } h2 { font-family:verdana; font-size:20px; } < /style> < /head>
Agrupación de varias marcas HTML con una misma regla de estilo. Esta característica nos permite ahorrar la escritura de reglas duplicadas para diferentes marcas HTML.
Separamos por coma todas las marcas a las que se aplicará la misma regla de estilo
Supongamos que queremos la misma fuente y color para las marcas h1,h2 y h3:
< style type="text/css"> h1,h2,h3 { font-family:verdana; color:#0000ff; } < /style>
Definición de varias reglas para una misma marca HTML. En algunas circunstancias, es necesario desglosar la inicialización de propiedades en distintas reglas.? Supongamos que queremos todas las cabeceras con la misma fuente pero tamaños de fuente distinta:
Tarea 1 Problema 1: Definir la misma fuente, color y tamaño de fuente para las marcas p y h6
Tener en cuenta que cuando vea la página el texto que se encuentra en la marca h6 difiere del texto que se encuentra dentro del párrafo por la propiedad font-weight.
Ya que la marca h6 es de tipo bold y la marca p tiene por defecto normal.
Tarea 1 (2) Problema 2: Confeccione una página que define una regla para la marca body e inicialice las propiedades color, font-family.
Luego defina reglas de estilo para las marcas h1,h2 y h3 que redefinan la fuente con los valores: Times New Roman, Courier y Arial.
Imprima tres títulos, cada uno con las marcas h1,h2 y h3. Por último imprima un párrafo.
Propiedades relacionadas al texto. Color color:#0000ff //hexadecimales color:rgb(255,0,0); //rojo,verde y azul
Alineación text-align Valores: left , right , center, justify
Decorado text-decoration Valores: none , underline , overline , line-through
Continúa ejemplo ->
Propiedades relacionadas al texto. < style type="text/css"> h1 { color:#ff0000; text-align:left; text-decoration:underline; } h2 { color:#dd0000; text-align:center; text-decoration:underline; } h3 { color:#aa0000; text-align:right; text-decoration:underline; } < /style>
| Página siguiente |