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.

Mi primera web

Aprender a hacer una sencilla web paso a paso partiendo de cero.


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: 42

Visitas el mes pasado: 24

logo

Donativos

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




4. Maquetación (II)

4.2 Posicionar los elementos

Paso 12

logo miweb

CSS: selectores de identidad y de clase

En la página anterior hemos dividido la página en secciones y subsecciones mediante la etiqueta div. Ahora utilizaremos el código CSS para aplicar un estilo diferente a cada una de esas secciones.

Recordemos que las etiquetas div llevaban siempre un atributo id o class. Estos atributos nos sirven para poder seleccionar las distintas secciones en CSS y aplicar estilos diferenciados. Por ejemplo en HTML tenemos la siguiente etiqueta:

<div id="cabecera"> ... </div>

Si queremos cambiar, por ejemplo el color de fondo de este elemento le aplicaremos la siguiente regla CSS:

#cabecera { background-color: yellow; }

Para seleccionar la sección anterior hemos puesto en el CSS un selector de identidad que consiste en el signo # (almohadilla), seguido del valor que le hemos dado al atributo id. De esta manera podemos cambiar el estilo de la sección. En este caso mediante la propiedad background-color: yellow cambiamos el color de fondo de la cabecera de la página.

De forma similar tenemos también el selector de clase. Este consiste en el nombre que le hemos dado a la clase precedido de un punto. Por ejemplo si en HTML hemos puesto la etiqueta:

<div class="logos"> ... </div>

Para seleccionar esta etiqueta en CSS utilizaremos el selector de clase:

.logos { margin: 10px; }

Con esta regla CSS a todos los elementos que lleven el atributo class="logos" se les aplica un margen de 10 píxeles.

Posicionamiento flotante

El posicionamiento flotante consiste en sacar a un elemento del flujo normal de la página para posicionarlo a la derecha o a la izquierda de la misma. Para ello utilizamos la propiedad float de CSS, la cual sólo puede tener dos valores: float: left; (posicionamiento a la izquierda) o float: right (posicionamiento a la derecha).

Al aplicar a un elemento el posicionamiento flotante, este se coloca a la izquierda o a la derecha. Los demás elementos no posicionados se adaptan al hueco que deja. Por ejemplo si posicionamos una imagen a la izquierda, el texto que le sigue se colocará a su derecha, y a la misma altura, siempre que tenga hueco.

Si posicionamos de forma flotante a varios elementos seguidos, éstos se colocarán uno a continuación del otro a la misma altura, siempre que haya hueco en la página, si el elemento no cabe en el hueco que le queda, este se posicionará debajo de los anteriores.

Anchura y altura de los elementos

Sin embargo tenemos el problema de que de no indicar nada, salvo las imágenes, la mayoría de los elementos vistos hasta ahora (títulos, párrafos, secciones div), tienden a ocupar siempre el máximo de ancho disponible, y su altura se adapta al contenido del mismo. Esto en maquetación no siempre queremos que sea así, por lo que en CSS tenemos las propiedades width y height que delimitan respectivamente la anchura y la altura de los elementos.

Con la propiedad width delimitamos la anchura del elemento, como valor podemos poner una medida, o un portentaje. La medida suele ser normalmente los píxeles:

width: 200px;

El porcentaje delimita el tanto por ciento del espacio disponible que ocupará el elemento:

width: 25%;

Para la altura pondremos normalmente una medida, aunque también podemos poner porcentajes si anteriormente hemos delimitado la altura del elemento contenedor.

Cambios en la página

Vamos ahora a hacer los cambios en el archivo CSS para que nuestra página quede tal como queremos. Abrimos por lo tanto el archivo inicio.css con el editor de texto (HTML-Kit) y debajo de lo que ya tenemos escrito escribiremos unas cuantas líneas.

En primer lugar cambiaremos la imagen de la cabecera, para ello añadimos al archivo CSS la siguiente línea.

#cabecera img { float: left; width: 100px; margin-left: 50px; }

Mediante el selector #cabecera img se seleccionan todas las imagenes que estén dentro de la etiqueta con id="cabecera".

Con la propiedad float: left; colocamos la imagen a la izquierda. Con width: 100px; reducimos el tamaño de la imagen para que se ajuste al tamaño de la cabecera. Con margin-left: 50px; ponemos un margen a la izquierda de la imagen para que no esté tan pegada al borde izquierdo de la pantalla.

Ahora cambiaremos los bloques de imagen y enlace que hemos marcado con los atributos class="mienlace". Para ello añadimos al archivo CSS la siguiente línea:

.mienlace { width: 30%; margin: 20px 1%; float: left; background-color: aqua }

Con el selector .mienlace seleccionamos todos los bloques en los que hemos puesto el atributo de clase class="mienlace". Para cambiar su aspecto hemos aplicado las siguientes propiedades:

Por último dentro de la clase "mienlace" tenemos unas etiquetas de párrafo a las que debemos cambiar el estilo para que no sigan el estilo general de los párrafos anteriores de la página, para ello escribimos en el archivo CSS la siguiente línea:

.mienlace p { margin: 10px 60px; }

Simplemente cambiamos los márgenes de los párrafos para que se adapten mejor al espacio que disponen.

Después de insertar estas tres líneas al final del archivo inicio.css, éste quedará de la siguiente manera:

/*archivo de estilo para página de inicio*/
h1 {text-align: center; color: blue; font-size: 40px; font-family: arial; }
h2 {text-align: center; color: maroon; font-size: 30px; font-family: tahoma, verdana, arial; }
h3 {text-align: left; color: olive; font-size: 25px; font-family: stencil, impact, "times new roman";
    margin: 20px 100px; }
p { text-align: justify; margin: 1em 10em; font-family: verdana, nimrod, tahoma; 
    font-size: 14px; color: navy; }
a { text-decoration: none; font-weight: bold; font-size: 18px; font-family: tahoma, arial; }
a img { height: 150px; }
a:link { color: navy; }
a:visited { color: blue; }
a:hover { color: green; font-style: italic; }
a:active {color: red; }
a img:hover { height: 155px; }
#cabecera img { float: left; width: 100px; margin-left: 50px; }
.mienlace { width: 30%; margin: 20px 1%; float: left; background-color: aqua }
.mienlace p { margin: 10px 60px; }

En color azul viene destacado las tres líneas que hemos añadido al archivo. El resto de líneas son las que ya teníamos antes.

Una vez escritas estas líneass cerramos y guardamos el archivo CSS. Comprobamos después los cambios en la página, para ello abrimos el archivo index.html con el navegador. Este debe quedar como el el siguiente enlace:

Espero que tu también tengas el mismo resultado, si no es así, repasa las líneas de código para que estén igual que las que hemos puesto aquí.




En el siguiente paso seguimos cambiando el estilo de la página.

Cambios en el estilo




Mi primera web

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