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: 22-08-2017.

Visitas este mes: 52

Visitas el mes pasado: 159

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 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 de la página.

En la página 1.1. ya se explicó cómo escribir las insrucciones o reglas CSS y qué parte de la misma es el selector, por lo que la regla CSS se divide en selector y declaración. 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, cual es la parte o partes de la página que seleccionan, y las combinaciones que pueden tener 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; }

El selector universal selecciona toda la página entera, por lo que las propiedades que lleva asociadas en la declaración se aplican a toda la página. En el ejemplo ponemos a cero todos los márgenes (tanto interiores como exteriores) de todos los elementos d la página.

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 estado viendo en las páginas anteriores de este manual. Selecciona todas las etiquetas que tengan el mismo nombre (por ejemplo todas las etiquetas <p> o todas las etiquetas <h1>.)

Se indica escribiendo el mismo nombre de la etiqueta (o etiquetas) a las que selecciona. 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 los diferentes trozos de texto dependiendo de si estos son un título principal (con etiqueta <h1>), un titulo secundario (con etiqueta <h2>), o un párrafo (con etiqueta <p>). Por lo tanto, de no indicar después otra cosa, aplicaremos un mismo estilo para todos los títulos principales, otro estilo para los titulos secundarios; y otro distinto para los párrafos.


Selector de clase

Si tenemos, por ejemplo, varios párrfos, yqueremos aplicar distintos estilos a cada uno de ellos, 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;}

En este ejemplo, en la etiqueta del código HTML, hemos añadido un nuevo atributo (class="textoazul"), creando una nueva clase. Después en el código CSS ponemos una regla cuyo selector haga referencia a esta clase (.textoazul { color: blue;}). De esta manera a todas las etiquetas que lleven este atributo, se les aplicará su correspondiente estilo.

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 un elemento 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 un elemento 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 un estilo diferente. 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, mediante las etiquetas div hemos dividido el texto de la página en secciones. Mediante los atributos de clase hemos podido aplicar un estilo diferente a cada una de esas secciones. 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 a la que queremos que afecte, incluiremos el atributo id="nombre_de_id". Después en el código CSS haremos referencia a esta etiqueta mediante el simbolo # (almohadilla) seguido del valor que le hemos dado al atributo ("nombre_de_id"). Ejemplo:

código html:

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

código css:

#etiquetaid { text-align: center }

El atributo id es muy parecido al atributo class, en los dos podemos poner cualquier nombre como valor, siempre que luego usemos este mismo nombre como selector en el código CSS; sin embargo aquí, (para seleccionar etiquetas con el atributo id) el valor irá 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 más de una etiqueta con el atributo id en la misma página con el mismo valor, en tal caso el estilo sólo se aplicaría a la primera, ignorando las demás.

Por esto, 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