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.
Para trabajar con CSS necesitas conocer los tres
principales elementos:
- 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 identificador, son aquellos que hemos creado y se aplican
solo a las etiquetas que así lo identifiquemos.
El tercer selector es el de clase, se aplica para asignar estilos a más de
una etiqueta, identificador o elemento de la pagina.
- 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.
- 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 lo 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, un ejemplo seria asi:
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.
Buena profe
ResponderEliminar