1
GUÍA N.°6
Curso
Diseño Web (Corporativa y Publicitaria)
Tema
Estilos CSS
La presente guía tiene por objetivo hacer del css una herramienta
de cambio para mejorar la usabilidad y funcionalidad de los sitios
Sumilla
web. Diseñar sitios funcionales y de calidad para el angagement de
los clientes del cliente.
ii
Tabla de Contenidos
1. Estilos CSS ........................................................................................................................... 3
1.1. Bloques span y div……………………………………………………………………….7
1.2. Página responsive…………………………………………………………………...........8
1.3. Por qué usar diseño web responsive …………………………………..…………………9
1.4. Diseño responsive y adaptativo .......................................................................................... 9
1.5. Práctica ………………… ................................................................................................. 10
Referencias.............................................................................................................................. 12
3
Estilos de una CSS con DIV
La etiqueta div permite asignar un estilo a una sección, es decir un conjunto
grande de bloques, dentro del documento HTML. Por ejemplo, asigna un color
diferente a todo el texto que esté en la cabecera de una página web.
Los elementos div o elementos flotantes nos permiten estructurar una página
web y dar estilo a más de un elemento de forma muy cómoda y efectiva.
Estos elementos de bloque, no tienen valor funcional por sí solos, es decir
necesitan tener dentro de ellos algún elemento, ya sea un párrafo, una lista, una tabla,
etc, para comprobar su potencial de acción.
Ahora vamos a crear tres bloques div, cada uno de ellos envolverá un elemento
de párrafo p, para comprobar cómo podemos desplazar dichos bloques div, en
distintas posiciones por un documento. Vamos a imaginar que tenemos una página
web ya creada y está en blanco, no hay ningún elemento en el cuerpo o body.
<body>
<div id="divcontenedor">
<div class="divA">
<p>1</p>
</div>
<div class="divA">
<p>2</p>
</div>
<div class="divA">
<p>3</p>
</div>
</div>
</body>
CSS
.divcontenedor
4
{
border:1px solid black;
width:90%;
height:auto;
padding:5px;
background:#B4BDD1;
}
.divA
{
border:1px solid black;
width:120px;
height:120px;
margin:5px;
padding:5px;
background:silver;
}
Resultado
El elemento div es un elemento block-level, por tanto, genera por defecto un
salto de linea. Este salto provoca que los tres div o bloques del ejemplo se presenten
uno debajo del otro.
5
Podemos cambiar la situación u orientación de dichos bloques si los sacamos
del curso natural que tienen los elementos al colocarse en una página web y en la
mayoría de los documentos de texto, que es de arriba a abajo y de izquierda a derecha.
Si nosotros aplicamos un float a la clase divA, escribiéndolo en la hoja de
estilo de esta manera:
Lo que ha sucedido es que al aplicar la propiedad float: left; hemos sacado a
los divs del curso natural del documento, es decir los hemos dejado flotando sobre el
documento, eliminando el salto de linea de cada uno, y se sitúan lo más a la izquierda
que el documento, otro elemento o div que les anteceda, les permita.
A continuación, vamos a intentar colocar el segundo bloque div, el «B-2.» a la
derecha, para ver cómo se comportan los demás bloques. Para ello, modificaremos el
nombre de clase del Bloque 2 en el código fuente, de esta manera:
<body>
<div id="divcontenedor">
<div class="divA">
<p>1</p>
</div>
<div class="divB">
<p>2</p>
6
</div>
<div class="divA">
<p>3</p>
</div>
</div>
</body>
En la hoja de estilo escribiremos la nueva clase, con estas propiedades:
.divcontenedor
{
border:1px solid black;
width:90%;
height:auto;
padding:5px;
background:#B4BDD1;
}
.divA
{
float:left;
border:1px solid black;
width:120px;
height:120px;
margin:5px;
padding:5px;
background:silver;
}
.divB
{
float:right;
border:1px solid black;
width:120px;
height:120px;
margin:5px;
padding:5px;
background:silver;
}
7
Como podemos comprobar al dirigir el Bloque 2 hacia el lado derecho, el
Bloque 3, se ha colocado por sí solo en el lado izquierdo seguido al bloque 1.
1.1 Bloques span y div
Puede que, a veces, no queramos modificar el comportamiento de una etiqueta
de HTML (todos los párrafos, o todas las imágenes, o todas las celdas de tabla) sino
que queremos un estilo que actúe sólo sobre un cierto una parte del texto. Casi como
una etiqueta nueva y propia. Entonces, ¿qué hacemos? Utilizar las etiquetas <span> y
<div>.
El método es simple. Definimos una clase rojo que simplemente modifique el
color del texto (que será rojo). Ahora, si queremos que un texto esté en rojo lo
encerraremos entre las etiquetas <span class="rojo"> y </span> o entre <div
class="rojo"> y </div>.
La diferencia entre ambas es que, mientras span realmente no hace nada por sí
misma, div convierte a todo lo que encierra en un bloque aparte (poniendo un salto de
línea tanto al comienzo como al final).
Veremos en el siguiente capítulo que a las etiquetas que se comportan como
bloques se les pueden definir atributos propios desde las hojas de estilo. Por ejemplo,
si definimos las siguientes reglas:
8
[Link] { margin-top: -24px; color: blue; font-size: 20px;
} [Link] { margin-top: 2px; margin-left: 2px; color:
black; font-size: 20px; }
El prefijo all se refiere a todo el documento y realmente no se usa, pero sirve
para explicar eso del punto: [Link] significa los elementos de la página (all) que
tienen una clase llamada título. Los atributos los explicaré en la referencia de las hojas
de estilo. El uso de las clases (reglas de estilo) es sencillo:
<div align="center" class="sombra"> El maravilloso curso de
html </div> <div align="center" class="titulo"> El maravilloso
curso de html </div>
Observa que sucede.
1.2 Página Responsive con CSS
El diseño Web responsive es una práctica en diseño y desarrollo web que da
prioridad a una interfaz amigable para el usuario, sin importar el dispositivo que
utilice o el tamaño y orientación de su pantalla. El diseño del sitio debe ser capaz de
adaptarse a cualquier resolución con la que se acceda al sitio para consumir su
contenido.
Este método consiste en una mezcla de rejillas (o grids) y diseños flexibles,
imágenes pensadas en diferentes dispositivos y un uso inteligente de CSS para lograr
una interfaz consistente entre varias pantallas.
A medida que el usuario pasa de su portátil a una tablet, el sitio web debería
cambiar automáticamente para adaptarse a la nueva resolución, el tamaño de la
imagen y las capacidades de escritura del dispositivo.
Todo el mundo está conectado a internet hoy en día. Si no tienes un teléfono
inteligente en tu bolsillo en este momento, eres probablemente un caso poco común
(¿qué tiene de malo mi Nokia con lucecitas de colores?). Esta tendencia se conoce
como mobile first.
9
Así como hay más usuarios conectados, también hay más formas de conectarse
a internet. Desde computadoras de escritorio, laptops, iPhones, tablets y hasta
refrigeradoras, todos estos dispositivos con diferentes tamaños de pantalla necesitan
conectarse a tu sitio web. Aquí entra en acción el diseño web responsive.
Si no logras presentar tu información de una forma agradable al usuario en su
dispositivo, simplemente se irá para no volver. Esto se conoce como tasa de rebote o
bounce rate (cuántas personas rebotan y se van apenas llegan a tu contenido).
Por qué usar diseño web responsive
Elementos a tomar en cuenta para una web responsive
• Contenedores. Deben poder adaptarse a las diferentes pantallas de manera fluida.
• Tipografías. Es una buena práctica usar textos relativos y no solamente fijos, que no
se verán bien en pantallas más grandes o más pequeñas.
• Imágenes y multimedia. Contenido optimizado en relación a su peso para velocidad
de carga y adaptabilidad tanto a orientación vertical como horizontal. Si el contenido a
mostrarse es importante, debe tener la opción para verlo en pantalla completa o
una lightbox.
• Menús. Fáciles de desplegar y encontrar en distintos dispositivos, con información
útil priorizada para el usuario.
Diseño Responsive y Adaptativo
El diseño web responsive y adaptativo no son lo mismo. A pesar de estar pensados
hacia un futuro similar, en el que el sitio web debe ser capaz de servir contenido a
distintos tipos de pantallas, hay una diferencia clave entre ambos. El diseño responsive es
“fluido”, esto quiere decir que no está enfocado a una pantalla en específico, sino que va
mostrando su contenido de forma que ocupa el tamaño completo de la pantalla,
independiente del tamaño de la misma.
10
En el diseño adaptativo, por el contrario, se usan media queries para conocer
la resolución de la pantalla y con base en esa información, mostrar una versión
diferente del sitio web hecha para esa pantalla o la que más se le aproxime.
Práctica
Complete el menú css con código html
.menu ul {
display: flex;
padding: 0;
margin: 0;
list-style: none;
.menu a {
display: block;
padding: 0.5em;
background-color: #6E6E6E;
text-decoration: none;
color: #ffff;
.menu a:hover {
11
background-color: #6D066B;
.menu ul li ul {
display: none;
.menu ul li a:hover + ul, .menu ul li ul:hover {
display: block;
.contenedor {
background-color: #138273;
.hh {
background-color:
#15C2AA;
}
12
Referencias
Clemente, P. (2014). Diseño Web Adaptativo, responsive web design. Madrid: Ediciones
Anaya Multimedia.
Firdaus, Thoriq. (2013) Responsive Web Design by Example. Birmingham, UK: Packt
Publishing.
Garrette, J. J. (2011). The Elements of User Experience, second edition. United States of
America: New Riders (Pearson Education).
Gustafson, A. (2011). Adaptive Web Design, crafting rich experiences with progressive
enhacement. United States of America: Easy Readers.
Marcotte, E. (2011) Responsive Web Design. New York: A Book Apart.
Munari, B. (1980). Diseño y comunicación visual. Barcelona: Gustavo Gili.
Nielsen, J. & Budiu, R. (2013). Usabilidad en dispositivos móviles. Madrid: Ediciones Anaya
Multimedia.
Parker, T.; Toland P. & Jehl, S. (2010). Designing with progressive engacement, building the
web that works for everyone. United States of America: New Riders (Pearson
Education).
Shneiderman, B.; Plaisant, C.; Cohen, M. & Jacobs, S. (2014). Designing the User Interface:
Strategies for Effective HumanComputer Interaction. Edinburgh: Pearson Education Limited.
Tidwell, J. (2011). Designing Interfaces, Patterns for Effective Interaction Design. Canada:
O’Reilly Media.
Veen, J. (2001). Arte y Ciencia del Diseño Web. Madrid: Pearson Educación.
Wroblewski, L. (2011). Mobile First. New York: A Book Apart.
