Resumen

ETIQUETAS SEMÁNTICAS

Semántica: Perteneciente o relativo a la significación de las palabras. Esa es la definición de la Real Academia de la Lengua Española y es así de sencillo es entender este tipo de etiquetas del lenguaje HTML: Aquellas que dan un significado a las partes del documento.

Por decirlo de otra forma, estamos ante etiquetas que indican qué es el contenido que contienen, en lugar de cómo se debe formatear al mostrar el documento HTML en un cliente web.

ETIQUETAS SEMÁNTICAS ESTRUCTURALES

Veremos con detalle a continuación las etiquetas semánticas que sirven para definir la estructura de un documento HTML y por qué debemos incorporarlas cuanto antes a nuestras técnicas de desarrollo de sitios web.

Las etiquetas semánticas estructurales nos sirven para que los motores de búsqueda, o cualquier otro mecanismo automático que lea un sitio web, sepa con exactitud qué partes de su contenido corresponden a cada una de las partes típicas de un sitio. Generalmente, en cualquier documento tenemos una cabecera, un cuerpo y un pie de página, elementos que definen la estructura representados por diversas etiquetas.

HOJA DE ESTILOS

ACCION ATRIBUTO VALOR
Aplicar espacio entre objeto y contenido padding 20px 10px 0 10px
Aplicar margen margin 20px auto 0 auto
Aplicar scroll overflow scroll
Aplicar negrita al texto font-weight bold
Texto en Mayúscula  text-transform  uppercase
Fondo degradado  background  linear-gradient(gray,white, gray)
Mostrar cursor del mouse para links  cursor  pointer
Bordes redondeados  border-radius  20px 0 20px 0

PSEUDOCLASES

Todos los selectores vistos hasta el momento se refieren a elementos que podemos encontrar dentro del código HTML. Las pseudo-clases (y los pseudo-elementos), por el contrario, no pueden deducirse simplemente observando la estructura del documento. Puede decirse que son abstracciones que permiten referirse a elementos que de otro modo resultarían inaccesibles.

Las pseudo-clases son:

  •  :first-child
  •  :link y :visited
  •  :hover, :active y :focus
  •  :lang

:first-child

La pseudo-clase :first-child selecciona un elemento que es el primer hijo de otro elemento. Por ejemplo, si queremos que un párrafo no tenga sangría cuando sea el primer hijo de un DIV:

DIV > P:first-child {text-indent: 0}

Noten que entre P y :first-child no debe haber espacio, pero entre DIV y > y P pueden o no quedar espacios intermedios.

Si queremos seleccionar un elemento cuando sea el primer hijo de cualquier elemento, podemos usar el selector universal:

* > H1:first-child {color: blue} /* usando el asterisco */
H1:first-child {color: blue} /* o bien podemos obviar el asterisco */

 

:link y :visited

Por medio de estas dos pseudo-clases, podemos definir el estilo para los links que aparecen en nuestras páginas y otro estilo para esos links cuando ya han sido visitados.

En HTML, dentro de la marca BODY también se puede especificar un color para los links y otro para los links visitados, pero con CSS se pueden cambiar muchos otros atributos.

Después de cierto tiempo (posiblemente cuando se borre el archivo del historial del sistema) el link visitado puede volver a su condición normal.

:hover, :active y :focus

Estas son pseudo-clases dinámicas, ya que cambian en respuesta a las acciones del usuario.

  • :hover se aplica cuando el cursor del mouse señala el elemento.
  • :active se aplica cuando el elemento es activado (por ejemplo, cuando el usuario presiona el botón del mouse).
  • :focus se aplica cuando el elemento recibe el foco.

Uno de los mayores desvelos de los diseñadores de páginas Web han sido siempre los links y la manera de hacer que estos cambien de aspecto al ser señalados por el mouse. Con frecuencia, la solución consistía en utilizar dos imágenes que se cambiaban mediante JavaScript u otro lenguaje. Afortunadamente, con CSS podemos simplificar todo el proceso y obtener efectos muy variados en nuestros enlaces.

Normalmente, se utilizan las cuatro pseudo-clases siguientes para controlar el comportamiento de los links.

A:link {color: red}
A:visited {color: gray}
A:hover {color: blue}
A:active {color: fuchsia}

Aquí especificamos un color rojo para los links, un color gris para los ya visitados, un color azul cuando es señalado y un fucsia cuando es activado. Se debe tener en cuenta que, por las reglas de cascada, el orden en que deben ser especificadas estas cuatro pseudo-clases para que funcionen correctamente es el que se ha usado en el ejemplo.

USO                                                                               ATRIBUTO                                          EJEMPLO

FONDO                                                                         background                                       background: blue;

Background: url(“imagen.jpg”);

ANCHO DEL OBJETO                                                width                                                   width: 500px;

Width:70%;

ALTO DEL OBJETO                                                     height                                                  height:100px;

Height:50%;

MARGEN                                                                     margin                                                 margin

BORDE REDONDEADO                                            border-radius                                   border-radius: 10px;

Border-radius:10px 0px;

Border-radius:15px 10px 5px 0px;

ESPACIADO                                                                 padding

TIPO DE FUENTE(LETRA)                                        font-family                                        Font-family: Comic Sans MS;

COLOR DE TEXTO                                                      color                                                     color:blue;

TAMAÑO DE LETRA                                                 font-size                                             Font-size:16px;

Font-size:48em;

ALINEACION DE TEXTO                                          text-align                                            text-align:center;

text-align:right;

SUBRAYADO                                                               text-decoration                               text-decoration: underline;

CURSIVA                                                                      Font-style                                          Font-style: oblique;

TIPO DE CURSOR                                                      cursor                                                  cursor:pointer;

 

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: