ESTILOS Y DISEÑO DE
PAGINAS WEB CON CSS3
CSS son las siglas del inglés “Cascading Style
Sheets” (Hojas de Estilo en Cascada) y básicamente consiste en la información
que define como va a ser la presentación de una web, por ejemplo, textos en
negrilla, colores, efectos, tipos de letra que escogemos, fondos, efectos,
tamaños, etc. … de tal manera que se independiza del HTML que es el lenguaje
donde se estructura toda la información que se manda a nuestro computador para
que el navegador nos presente una página web bien diseñada.
CSS3 es la versión 3, donde se definen las
características de este lenguaje, digamos que en esta versión le han añadido
muchas cosas y mejorado otras.
Siendo un poco más técnicos, CSS3 se refiere a la
tecnología desarrollada para separar la presentación de la estructura HTML.
Esta tecnología aplica reglas de estilo a los elementos HTML, quedando de esta
manera separada de la estructura HTML. Poco a poco este lenguaje se ha ido
haciendo más importante entre los diseñadores gracias a toda la facilidad de
uso, y los resultados que son muy flexibles.
Para trabajar con CSS necesitas conocer los tres
principales elementos:
1. Selectores. Estos se usan para definir sobre que etiqueta
HTML vamos a aplicar Atributos y Valores. Existen tres tipos de selectores:
Los selectores de etiquetas HTML, los cuales se utilizan escribiendo el nombre de la etiqueta a la que le aplicaremos el estilo.
Los selectores de etiquetas HTML, los cuales se utilizan escribiendo el nombre de la etiqueta a la que le aplicaremos el estilo.
Los selectores de identificador, son aquellos que hemos creado y se aplican
solo a las etiquetas que así lo identifiquemos.
Los selectores de clase, se aplica para asignar estilos a más de
una etiqueta, identificador o elemento de la pagina.
2. Propiedades o Atributos.
Son aquellos atributos que aplicaremos a las etiquetas HTML, por ejemplo si
queremos cambiar el fondo utilizamos el atributo “background”, si queremos
cambiar el tipo de letra usamos el atributo “font” y así con otros que
veremos posteriormente.
3. Valores. Una vez definidos los
selectores y los atributos, tenemos que darles un valor, como puede ser un
color, tamaño, o lo que sea.
ESTRUCTURA DE UN SITIO WEB CON HTML 5
Al diseñar un sitio Web con HTML 5, las diferentes partes de la pagina se
estructuran en los que se llama “Estructura en Bloque”, es decir, que en la
página web cada etiqueta utilizada (header, nav, section, etc.. ) se posiciona
o se ubica en bloques, uno debajo del otro, o uno al lado del otro.
Existen dos tipos de estructuras:
Elementos Block. El contenido de
cada etiqueta se posiciona en la pagina uno sobre otro hacia abajo, así:
Elementos Inline-Block. El contenido
de cada etiqueta es posicionado en la página uno al lado del otro en la misma línea,
dependiendo del ancho disponible (width) de la pantalla.
ALGUNAS PROPIEDADES O ATRIBUTOS PRINCIPALES
Estos son algunas propiedades o atributos más comunes
o utilizados al aplicar estilos y diseño a una estructura HTML5 utilizando la tecnología
CSS3:
margin. Indica
la distancia del bloque hacia los márgenes externos. El orden de aplicar los márgenes es: arriba,
derecha, abajo, izquierdo.
padding: Indica la distancia del bloque hacia los márgenes
internos dentro del bloque.
font: Especifica el estilo, tamaño y tipo de fuente.
width: Ancho del bloque. Ej. width: 90%;
height: Alto del bloque.
border: Establece un borde al bloque. Ej. border: 5px solid #F60;
background: Color de Fondo del bloque. Ej. background: #0AFAD6;
color: Color del texto en el bloque. Ej. color:
#192A62;
text-align: Alineación del texto en el bloque. Ej. text-align: center;
display: inline-block:
Indica que los bloques se ubiquen en estructura InLine, es decir uno al
lado del otro, en la misma línea.
No hay comentarios:
Publicar un comentario