Las hojas de estilo CSS son un mecanismo simple que nos ayudan a describir cómo se va a mostrar un documento en la pantalla.
CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentación. CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo.
CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.
h1 {color: red;}
h1 es el selector
{color: red;} es la declaración
El selector funciona como enlace entre el documento y el estilo, especificando los elementos que se van a ver afectados por esa declaración. La declaración es la parte de la regla que establece cuál será el efecto. En el ejemplo anterior, el selector h1 indica que todos los elementos h1 se verán afectados por la declaración donde se establece que la propiedad color va a tener el valor red (rojo) para todos los elementos h1 del documento o documentos que estén vinculados a esa hoja de estilos.
La forma más conocida de dar estilo a un documento es utilizando una hoja de estilo externa vinculada a nuestra aplicación web. El archivo .css debe estar vinculado en el head de nuestra página. Veamos el ejemplo a continuación.
Referencia:
<html>
<head>
<title>Sitio Web de Ejemplo</title>
<link rel="stylesheet" media="screen" href="css/todolist.css" />
</head>
Contenido del archivo de hojas de estilo:
h1.simple {
font-size: 0.9em;
padding: 4px;
background: #333333;
color: #AAAAAA;
border-bottom: 2px solid #AAAAAA;
margin: 0 0 4px 0;
}
Lo que estamos haciendo en el ejemplo anterior es aplicando a la etiqueta H1 de nuestra página web los estilos mencionados en el archivo de hojas de estilo.
A continuación vamos a crear un sitio web en WebMatrix y aplicaremos estilos a la misma.
Creamos un nuevo sitio web de tipo CSHTML y lo nombramos estilos. Navegamos en el sitio y en el panel izquierdo hacemos clic en Archivos.
A continuación vamos a la vista superior que se nos despliega y en nuestro sitio web hacemos clic derecho y añadimos las siguientes carpetas:
-css
-img
-js
Esto es para poder colocar nuestro contenido en las diferentes carpetas y de esta manera tener un orden de las cosas. Hecho esto nuestro sitio web debería estar así:
En la carpeta css colocaremos todos nuestros archivos de hojas de estilo, en la carpeta img todas las imágenes de nuestro proyecto web y en js pues todos nuestros documentos javascript en el caso de utilizarlos.
Dentro de la carpeta css damos clic derecho y añadimos un nuevo archivo css, lo llamaremos estilos.css.
Complementamos el archivo de estilos y quedaría como la siguiente imagen:
El archivo cshtml sería el siguiente:
Corremos el programa y deberíamos tener algo como lo que muestra la siguiente imagen:
Ahora vamos a modificar el ejemplo anterior de Forms para que el contenido de cada etiqueta <p > sea cambiada por mayúsculas. Igualmente el titulo contenga el estilo <h1> creado anteriormente.
El archivo de estilos quedaría así:
La modificación del ejemplo forms quedaría de esta manera:
El resultado lo mostramos a continuación:
0 comentarios:
Publicar un comentario en la entrada