Comienza Contenido

Publicación Web: El lenguaje CSS

Este curso enseña los conceptos básicos de CSS (Cascading Style Sheet) como lenguaje de presentación (Diseño) de páginas Web. El lenguaje sólo se aprende haciendo y prácticando

Objetivos

  • Crear y mantener una Hoja de Estilos
  • Entender las especificaciones del lenguaje CSS

Clases

  1. Introducción a Hojas de Estilos CSS)
    • Qué es CSS y para qué sirve
    • Necesidad de separar Diseño y Contenido
    • 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;
		  }
    • Aplicar Estilos al HTML:
      1. Directamente en la etiqueta HTML (un estilo por etiqueta)
      2. En la etiqueta STYLE del documento (todos los estilos juntos)
      3. En una hoja de Estilos (en un archivo aparte):
        • Archivo de texto (Ver ejemplo)
        • 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" >
  2. Lo básico: Empezando con CSS
    • Mejorar el diseño de una página HTML usando CSS
      • Utilizar la estructura básica del documento
      • Usar 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 más utilizadas (HTML):
      • DIV. Contenedor de Estilo Bloque
      • SPAN. Contenedor de Estilo Línea
  3. Entendiendo las especificaciones
    • Especificaciones Oficiales CSS: Inglés (v1.0, 2.1, 3.0) / Español (v2.1)
    • 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).
  4. Conceptos Avanzados
    1. 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
    2. 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
    3. 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)
    4. 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;
			  }
    5. Propiedades CSS según grandes tipos: fuentes (font), bordes (border), colores y fondos (background), listas (list), etc
  5. Ejemplo Básico de una hoja de estilos:
    1. Conceptos a tener en cuenta: herencia, clases, identificadores, seudoclases, seudoelementos
    2. Diseño: primero en papel (Paper Prototyping) y luego programar
    3. Formatos a tener en cuenta:
      • Caracteres y párrafos
      • Cajas: bordes, margenes, colores
      • Tablas/Divs: encabezados, contenidos (td)
    4. ¿Puedo diseñar de cualquier manera? No, hay recomendaciones (Usability 101)
    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)

Actividades

  1. Ver un ejemplo sencillo de CSS (en papel)
  2. Crear una hoja de estilos básica y aplicarla a un documento HTML
  3. Completar la hoja de estilos con diferentes elementos
  4. Entender y practicar con una hoja de estilos ya hecha (por ejemplo esta)

Ejercicio Final:

  • Crear una hoja de estilos para una comunicación (carta) de convocatoria a una reunión (avanzado: diferentes para pantalla y para impresión)
  • Crear una página HTML maquetada con cinco partes (arriba, derecha, abajo, izquierda y centro) (avanzado: diseño elástico y adaptable)

La hoja de estilos ha de estar documentada, y se hará una página HTML para que muestre el diseño y hacer las pruebas.

Duración del Curso

El esfuerzo estimado del curso es de 1 crédito ECTS. Unas 30 horas de dedicación.

Recursos a Utilizar