Publicación Web: El lenguaje CSS

Introducción a Hojas de Estilos CSS)
- Qué es CSS y para qué sirve
- Necesidad de separar Diseño y Contenido
- Archivos CSS:
  - Archivo de texto (Ver ejemplo)
  - Hoja de Estilo: varias reglas de estilo
- Sintaxis de las Reglas CSS. Por ejemplo: pre { background: #C0C0C0;}
  1. Selector (pre). Etiquetas HTML
  2. Declaración (background-color: #C0C0C0;)
    1. Propiedad (background-color)
    2. Valor (#C0C0C0)
- Sintaxis: Etiqueta { propiedad: valor [;...]} Ejemplo
```
		H1 {
		  background-color: blue;
		  font-weight: bold;
		  font-size: 12pt;
		  line-height: 14pt;
		  font-family: Helvetica;
		  font-variant: normal;
		  font-style: normal;
		}
	      
```
- Incluyendo la hoja de estilos en el documento HTML: elemento LINK, atributos rel (relative), href (URL), type (MIME type: text/css)
```
	      <link href="http://www.prueba.com/css/estilo_site.css" type="text/css" rel="stylesheet" >
	      
```
Mejorar el diseño de una página HTML usando CSS para mejorar el diseño
- Utilizar la estructura del documento
- Elementos HTML
  - Blocklevel (tienen salto de línea, formato párrafo). Por ejemplo: p, h1, h2, div
  - Inline (en la misma línea, formato caracter). Por ejemplo: a, strong, b
- Etiquetas HTML:
  - DIV. Contenedor de Estilo Bloque
  - SPAN. Contenedor de Estilo Línea
Entendiendo las especificaciones
- Especificaciones Oficiales: CSS (en inglés, v1.0, 2.1, 3.0) / CSS 2.1 en español
- Uso de Selectores
  - Selector de Tipo. Elemento o Etiqueta (por ejemplo h1)
  - Selectores de Descendientes. Por ejemplo p b (elemento b dentro de p)
  - Selectores de Clase (Atributo class de elemento HTML). Por ejemplo h1.ejemplo ó *.ejemplo ó .ejemplo
  - Selectores de ID (Atributo id de elemento HTML): Por ejemplo h1#ejemplo ó #ejemplo
- Varios estilos a la vez
  - Agrupar varios Selectores. Separados por comas
  - Agrupar varias Declaraciones. Separados por espacios y punto y coma
  - Por ejemplo (tres selectores y dos declaraciones):
```
#header h1 img {
font-weight: bold;
color: #7f7c45;
}
	   
```
- Valores (Tipos de Datos):
  - Numeros: enteros (integer), reales (number), porcentajes (número más %)
  - Medidas (lenght), Dimensiones horizontales y/o verticales: número mas identificador de unidad (absolutas o relativas). Usar em
  - URL: Por ejemplo li { list-style: url(http://www.example.com/redball.png);}
  - Color (color): Uso de nombres o Modelo RGB (6 dígitos hexadecimales). Por ejemplo h1 { color: #ff0000 }
  - Texto (content): cadena de caracteres
- Ejemplos de valores: Arial (content), 1 em (length), 1px (lenght), #656565 (color), 3.90 (number).

Conceptos Avanzados

Operadores en la sintaxis:
- La barra |: opción, uno sólo de los valores
- la doble barra ||: varios valores
- multiplicadores * + {n,m} ? : uno, varios, o un número concreto
Sintaxis de la Propiedad:
- 'nombre_de_la_propiedad': Nombre de la propidedad
- Valor: tipo de valor que puede tener
- Inicial: valor inicial que tiene si no se especifica
- Se aplica a: Elementos a los que se aplica
- Se hereda:
- Porcentajes: si acepta valores tipo porcentaje
- Medios: medio al que aplica
Modelo de caja (Box Model):
- Margin. Ejemplo: margin: 1.2em 1.2em 1.2em 1.2em;
- Border (varias propiedades). Ejemplo: border-style: solid dashed dotted dotted
- Padding. Ejemplo: padding: 12px 0px 12px 12px;
- Contenido. texto o imagen
- Posición. Top, Right, Bottom, Left (en este orden)

Ejemplos de Propiedades:

'background-color' Valor: <color> \| transparent \| inherit Inicial: transparent Se aplica a: todos los elementos Se hereda: no Porcentajes: N/A Medios: visuales	p { background-color: #00CC00; }
'border' Value: [ <border-width> \|\| <border-style> \|\| <'border-top-color'> ] \| inherit Initial: see individual properties Applies to: all elements Inherited: no Percentages: N/A Media: visual Computed value: see individual properties	p { border: 2em solid red; }
'font-style' Value: normal \| italic \| oblique \| inherit Initial: normal Applies to: all elements Inherited: yes Percentages: N/A Media: visual Computed value: as specified	p { font-style: italic; }

Propiedades CSS según grandes tipos: fuentes (font), bordes (border), colores y fondos (background), listas (list), etc

Ejemplo Básico de una hoja de estilos (default.css)
1. Conceptos a tener en cuenta: herencia, clases, identificadores, seudoclases, seudoelementos
2. Diseño: estructurar el documento y asignar estilos
3. Formatos a tener en cuenta:
  - Formato de caracteres y párrafos
  - Formato de Cajas: bordes, margenes, colores
  - Formatos de Tablas: encabezados (th), contenidos (td), etc
4. ¿Puedo diseñar de cualquier manera? No, hay recomendaciones (usabilidad)
5. Más selectores
  - pseudo-clases y seudo-elementos: Propiedades especiales dentro de la estructura del documento.
  - Pseudo-Clases.
    - Para Enlaces: :link (enlace), :visited (enlace visitado), :hover(cuando pasa el ratón por encima ), :active (al activar un objeto), :focus (cuando el objeto tiene el foco)
    - Por herencia/jerarquía :first-child (primer hijo de ese elemento)
  - Pseudo-Elementos:
    - En párrafos :first-line , :first-letter
    - Listas y Párrafos :before (contenido antes del elemento), :after
  - Un ejemplo de aplicación de seudo elementos y seudo clases:
  Fijate que sólo la primera línea de este párrafo tiene un comportamiento especial (first-line), puedes probar a redimensionar la página. Además la primera letra (first-letter) de los párrafos es diferente.
  
  En la siguiente lista puedes ver el comportamiento sobre el enlace según haya sido visitado (visited), o pases por encima (hover) o simplemente lo actives (focus). Ademas antes (before) y después (after) de cada elemento aparece un texto (Inicio: ó :Fin)
  - Primer Elemento
  - Propiedades de un enlace (Enlace)

Publicación Web: El lenguaje CSS

Objetivos

Indice de Contenidos

Actividades

Dedicación al Curso

Recursos a Utilizar