Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de CSS

CSS: lenguaje de estilo para las páginas web.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 339

Visitas el mes pasado: 116

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de CSS
Desarrollo Web, por Miguel Angel Álvarez
Cómo crear tu Web: curso de estilos CSS
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a CSS
Libros web, por Javier Eguíluz Pérez
Curso de css: Programación Web
www.programacionweb.net
WebEstilo: manual de css
www.webestilo.com
W3 schools; CSS Tutorial
www.w3schools.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




3 Selectores (I)

3.1 Selectores básicos

html

Los selectores son la parte de la regla o instrucción CSS que indica a qué elemento o elementos de la página se deben aplicar los cambios de estilo. Como ves, se llama "selector" porque "selecciona" una parte del código HTML.

En la página 1.1. ya se explicó qué parte de la instrucción CSS corresponde al selector y qué parte corresponde al resto (declaración), por lo que no volveremos a insistir en ello, si tienes alguna duda, repasa el tema 1.1.Sintaxis CSS donde se explica esto.

Aquí nos ocuparemos de los tipos de selectores, y de cómo pueden combinarse entre ellos.


Selector universal

Se utiliza para seleccionar todos los elementos de la página. y se indica mediante un asterisco(*). Ejemplo:

* { margin: 0; padding: 0; }

Suele utilizarse para dar un estilo inicial a la página, o estilo "reset" que luego puede ser cambiado en otras etiquetas por la utilización de otros selectores. Dar un estilo inicial a la página suele hacerse para uniformar el estilo en todos los navegadores, ya que no todos los navegadores aplican los mismos estilos por defecto; es lo que se llama "resetear" la página.


Selector de etiqueta

Son los que hemos visto en las lecciones anteriores, y su valor es el mismo que el de la etiqueta que selecciona. Selecciona el código que corresponde a la etiqueta indicada. Veamos unos ejemplos:

h1 { font-size: 2em; color: blue; }

h2 { font-size: 1.5em; color: olive; }

p { font-size: 1.1em; color: navy; }

En estos ejemplos se aplica diferente estilo al texto dependiendo de si éste es un título principal, titulo secundario, o párrafo. Sin embargo de no indicarse otra cosa todos los títulos principales tendrán el mismo estilo, todos los titulos secundarios tendrán el mismo estilo; y todos los párrafos tendrán el mismo estilo.


Selector de clase

Si queremos aplicar distintos estilos a cada uno de los párrafos, debemos usar otro método que no sea el selector de etiqueta, ya que éste daría el mismo estilo para todos.

La solución está en añadir un atributo de clase; class="nombre_de_clase" a la etiqueta HTML, y luego, hacer referencia a esa clase mediante un selector de clase. Veamos un ejemplo:

Código html:

<p class="textoazul">este texto está en azul</p>

Codigo css:

.textoazul { color: blue }

Podemos dar a la clase el nombre que queramos, siempre que sigamos unas normas mínimas, como no poner espacios en blanco, no empezar por un número, ni escribir caracteres raros.

El selector CSS de clase es siempre el nombre que le hemos dado a la clase (valor de la etiqueta class) precedido de un punto ( . ); el punto indica que éste es un selector de clase.

En el ejemplo anterior el texto lo veremos así:

este texto está en azul


Etiquetas div y span

Cuando queremos aplicar un estilo a una parte del texto que no coincide exactamente con una etiqueta, bien por ser demasiado pequeño, o demasiado grande, podemos utilizar las etiquetas <span>...</span> y <div> ... </div>. Estas son etiquetas que se incluyen en el código html; pero que las estudiamos aquí porque están directamente vinculadas con el lenguaje CSS.

Estas etiquetas; por sí mismas, no tienen ningún efecto sobre el texto o elemento que encierran, salvo que la etiqueta <span> es una etiqueta en línea, y la etiqueta <div> es un elemento de bloque. Sin embargo sirven para que mediante el atributo class o el atributo id (que veremos a continuación), se puedan seleccionar partes del texto que no coinciden con una etiqueta convencional.

La etiqueta <span>, al ser una etiqueta en linea, se emplea normalmente para seleccionar trozos de texto pequeños, normalmente inferiores a un párrafo, pero a los que se les quiere dar otro estilo. Ejemplo:

Código html:

<p>El <span class="verde"> verde </span> y el <span class="azul"> azul </span> son colores destacados.</p>

Código css:

.verde { color: green; } .azul { color: blue; }

En el navegador veremos:

el verde y el azul son colores destacados.

La etiqueta <div>, al ser un elemento de bloque se utiliza para seleccionar bloques de texto que contienen varias etiquetas. Veamos un ejemplo en la siguiente página html :

<html>
<head>
   <title>Ejemplo etiqueta div</title>
   <style type="text/css">
      .seccion1  { color: navy; font-family: arial;margin: 5%;  }
      .seccion2  { color: purple; font-family: cursive; margin: 10% 30%;  }
   </style>
</head>
<body>
   <div class="seccion1">
      <h1>Titulo sección 1</h1>
      <h2>subtítulo sección 1</h2>
      <p>primer párrafo de la sección 1</p>
      <p>segundo párrafo de la sección 1</p>
   </div>
   <div class="seccion2">
      <h1>Titulo sección 2</h1>
      <h2>subtítulo sección 2</h2>
      <p>primer párrafo de la sección 2</p>
      <p>segundo párrafo de la sección 2</p>
   </div>
</body>
</html>

En este ejemplo hemos resaltado el código CSS en verde, y las etiquetas div del código HTML en azul. Como se puede ver, se aplican diferentes estilos para las diferentes secciones de la página, utilizando las etiquetas div y los selectores de clase. En el navegador lo veremos así:

Ver página de ejemplo


La etiqueta div al ser una etiqueta de bloque también se emplea para formar las distintas cajas que conforman la estructura de la página Web, pero esto se verá en temas posteriores.


Selector de ID

El selector de id funciona de manera parecida al selector de clase, su forma es la siguiente:

En la etiqueta HTML que debe ser afectada incluiremos el atributo id="nombre_de_id" y en el código CSS haremos referencia a esta etiqueta mediante el simbolo # (almoadilla) seguido del "nombre_de_id". Ejemplo:

código html:

<p id="etiquetaid">Párrafo de etiqueta id</p>

código css:

#etiquetaid { text-align: center }

La etiqueta id es muy parecida a la etiqueta class, al igual que en ella podemos poner cualquier nombre para su valor, siempre que luego usemos el mismo como selector, precedido del símbolo #. El símbolo # (almohadilla) por el que empiezan los selectores de id, se escribe pulsando las teclas "Alt Gr" y "3" a la vez.

La diferencia con el selector class es que el selector id es único, es decir, no puede haber dos etiquetas con el atributo id en la misma página con idéntico valor, en tal caso el estilo sólo se aplicaría a la primera, ignorando las demás.

Por esto el atributo id es único, y su función más habitual es emplearlo con la etiqueta <div> para delimitar los espacios de la página, tales como la cabecera, el cuerpo, los menús de enlaces, los pies de página y otras secciones, las cuales sólo aparecen una vez en cada página.




En la siguiente página veremos cómo los selectores se pueden agrupar para indicar diferentes partes de la página.

Agrupación de selectores.



manual de CSS

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com