Utiliza su propio lenguaje de programación, independiente de HTML.
Se puede agregar a un sitio web de tres formas diferentes:
-Directamente aplicando estilo a un elemento HTML (manera mas rápida y sencilla)
-Con una hoja de estilo interna
-O con una hoja de estilo externa (manera mas recomendada)
1. Añadir estilo a un elemento HTML
Para añadir estilo a casi cualquier elemento HTML se usa el atributo "style". De esta manera se crea un estilo en linea. El siguiente ejemplo muestra como poner dos párrafos en negrita y una palabra en cursiva:
<!doctype html> <html> <head> <title>Estilo con CSS</title> </head> <body> <div style="font-weight: bold;">Ejemplo de texto en negrita</div> <div> Ejemplo de una palabra <span style="font-style: italic;">cursiva</span> </div> <div style="font-weight: bold;">Otro ejemplo en negrita</div> </body> </html>El resultado es el siguiente:
2. Añadir estilo con hoja interna
Aplicar estilo a los elementos como hemos visto en el ejemplo anterior puede acabar siendo muy engorroso si la pagina web es muy grande. Afortunadamente existe una mejor manera de hacerlo y para ello solamente tendríamos que crear un área especial para almacenar la información de estilo de nuestra pagina web.
El siguiente ejemplo muestra como crear el área especial situada en la cabeza <head> de nuestro documento HTML, haciendo uso del elemento <style>
<!doctype html> <html> <head> <title>Estilo con CSS</title> <style type="text/css"> div { font-weight: bold; } span { font-style: italic; } </style> </head> <body> <div>Ejemplo de texto en negrita</div> <div>Ejemplo de una palabra <span>cursiva</span></div> <div>Otro ejemplo en negrita</div> </body> </html>Observamos que dentro del elemento <style> se hace uso del atributo "type". De esta manera indicamos al navegador que tipo de información de estilo se esta utilizando. También podemos ver que este elemento hace uso de la etiqueta de cierre </style>.
En el ejemplo estamos aplicando estilo para todos los elementos <div> y <span> que existan en el documento HTML. En el caso del elemento <div> estamos usando la propiedad CSS llamada "font-weight" que entre otras cosas pone un texto en negrita. Y para el elemento <span> se usa la propiedad "font-style" que entre otras cosas pone el texto en cursiva.
El ejemplo se vera de la siguiente manera:
3. Añadir estilo con hoja externa
Cuando nos planteamos hacer un proyecto con un buen montón de paginas web HTML es buena idea hacer uso de hojas de estilo externas para compartir estilos entre varias paginas.
Los archivos CSS o hojas de estilo externas hacen que el mantenimiento de una web sea mas cómodo, simplemente cambiando algún valor de nuestro archivo CSS podemos darle un nuevo look a nuestra web.
Una hoja de estilo externa simplemente es un documento de texto y para incluirlo en nuestra pagina web, deberemos utilizar el elemento <link> para hacer referencia a ese documento de texto. Esto se debe colocar siempre en la cabeza <head> de nuestro documento HTML.
Primero crearemos nuestra hoja de estilo externa: (guardar archivo como "estilo.css")
div {
font-weight: bold;
}
span {
font-style: italic;
}
Observando el ejemplo de hoja interna, en este caso la hoja externa no hace uso de la etiqueta <style>El siguiente ejemplo muestra como hacer referencia a nuestro archivo "estilo.css". Mas abajo podemos observar el resultado.
<!doctype html> <html> <head> <title>Estilo con CSS</title> <link rel="stylesheet" type="text/css" href="estilo.css"> </head> <body> <div>Ejemplo de texto en negrita</div> <div>Ejemplo de una palabra <span>cursiva</span></div> <div>Otro ejemplo en negrita</div> </body> </html>
4. Orientar estilos
En los ejemplos de hojas de estilo anteriores hemos visto como todos los elementos <div> se ponen en negrita, en este caso vamos a usar una selección mas especifica para cada elemento <div> y conseguir el efecto del primer ejemplo del articulo (Añadir estilo a un elemento).
4.1 Selección de elementos HTML
Cualquier elemento HTML puede contener un selector de es estilo, incluido el cuerpo <body> de nuestro documento (ejemplo en sección "cambiar tipo de fuente").
En el ejemplo anterior hemos usado un selector de estilo con una única propiedad. Podríamos incluir varias propiedades en el mismo selector:
div {
font-weight: bold;
font-style: italic;
}
4.2 Selección de un elemento HTML
Para seleccionar un único elemento HTML debemos hacer uso del atributo identificador "id" indicando un nombre identificativo para ese elemento:
<div id="titulo">El Baul de Android</div>A la hora de crear nuestro selector de estilo en nuestra hoja de estilo externa, tendremos que hacer referencia a ese "id" indicando el mismo nombre pero con una almohadilla "#" delante:
#titulo {
font-weight: bold;
}
4.3 Selección de un grupo de elementos HTML
Este caso es muy útil cuando queremos aplicar el mismo estilo a diferentes elementos HTML. En este caso deberemos crear primero una clase CSS y a la hora de establecer un selector de estilo, indicaremos el nombre del selector con un punto delante:
.textoNegrita {
font-weight: bold;
}
En el codigo HTML haremos referencia a esa clase mediante el atributo "class":
<div class="textoNegrita">El Baul de Android</div>Con todo lo aprendido en este punto 4, ya podemos crear el efecto del primer ejemplo del articulo (Añadir estilo a un elemento), primero crearemos la hoja de estilo externa:
.textoNegrita {
font-weight: bold;
}
span {
font-style: italic;
}
El código HTML tendrá lo siguiente:<!doctype html><!doctype html> <html> <head> <title>Orientar estilos</title> <link rel="stylesheet" type="text/css" href="estilo.css"> </head> <body> <div class="textoNegrita">Ejemplo de texto en negrita</div> <div>Ejemplo de una palabra <span>cursiva</span></div> <div class="textoNegrita">Otro ejemplo en negrita</div> </body> </html>Su resultado final:
5. Configurar la fuente
Existe un pequeño inconveniente y es que al cambiar el tipo de fuente a nuestra pagina web, el usuario que visite nuestra web debería de disponer de la misma fuente. Si se diera el caso que el usuario no dispone de dicha fuente, el navegador web le asigna una por defecto.
La propiedad CSS para cambiar el tipo de letra es "font-family". Es buena practica configurar una lista de fuentes. Podríamos configurar una lista de fuentes para toda la pagina web utilizando un selector de estilo que haga referencia a nuestro cuerpo <body> del documento HTML:
body {
font-family: arial, helvetica, sans-serif;
}
Cualquier pagina que vaya a usar el anterior selector, primero buscara la fuente "arial", si no estuviera disponible en el ordenador del usuario, buscara la fuente "helvetica", si tampoco estuviera disponible buscara la "sans-serif" y si no llegara a estar disponible ninguna el navegador web le asignaría una por defecto
Un concepto llamado "WebFonts" permite el uso de fuentes adicionales ya que se le permite al navegador su descarga.
Para ajustar el tamaño de la fuente se usa la propiedad "font-size" y su valor es el tamaño de la fuente del documento que se puede medir en: porcentaje (%), pixeles (px), puntos (pt) o em (em).
Puntos y pixeles es un tamaño fijo, en cambio porcentaje y em es variable y permite al navegador cambiar su tamaño aplicando zoom a la pagina web por ejemplo.
Un valor de "1.0em" equivale al 100% de su tamaño real, por lo tanto un valor de "1.7em" seria un 170%.
A continuación se muestra un ejemplo de archivo CSS que aplicaría un tamaño de letra para todos los elementos <span>
span {
font-size: 1.7em;
}
5.2 Ajustar color del texto
Para establecer el color a un texto se utiliza la propiedad "color". En ella indicaremos un valor hexadecimal con tres códigos de color que corresponden a RGB (Red, Green, Blue) formado por seis caracteres. A continuación se muestra una tabla con diferentes colores:
| Código Hexadecimal | Color |
|---|---|
| #000000 | Negro |
| #666666 | Gris |
| #FFFFFF | Blanco |
| #FF0000 | Rojo |
| #00FF00 | Verde |
| #0000FF | Azul |
Vamos a ver todo esto en un ejemplo, partiendo del ejemplo anterior. Primero añadiremos a nuestra hoja de estilo lo siguiente:
.textoNegrita {
font-weight: bold;
}
span {
font-style: italic;
}
body {
font-family: arial, helvetica, sans-serif;
font-size: 90%;
}
span {
font-size: 1.7em;
color: #0000FF;
}
El código HTML es el mismo que el ejemplo anterior. El resultado seria el siguiente:
6. Añadir Bordes
Se puede añadir un borde a casi cualquier elemento HTML, simplemente se utiliza la propiedad CSS " border" y como valor podremos configurar:
Grosor del borde
Estilo del borde
Color del bordeLos tres valores se especifican en una lista:
.borde {
border: 5px dashed blue;
}
Algunos estilos de borde pueden ser:solid (Una linea solida)
dotted (Una linea de puntos)
dashed (Una linea con efecto de tablero)
double (Dos lineas solidas)Existe otra propiedad que nos permite separar el contenido de un elemento, de su limite. Es la propiedad "padding". Su valor se expresa en pixeles y al usarla aplica un margen superior, izquierdo, inferior y derecho.
Por otro lado podremos aplicar un margen a cada lado con las siguientes propiedades:
padding-top (Margen superior)
padding-left (Margen izquierdo)
padding-bottom (Margen inferior)
padding-right (Margen derecho)Podemos crear un ejemplo con lo visto anteriormente, primero creamos el archivo CSS:
.textoNegrita {
font-weight: bold;
}
span {
font-style: italic;
}
.borde {
border: 5px dashed blue;
padding: 5px;
}
Y el código HTML seria el siguiente:<!doctype html> <html> <head> <title>Bordes</title> <link rel="stylesheet" type="text/css" href="estilo.css"> </head> <body> <div class="textoNegrita borde">Ejemplo de texto en negrita</div> <div>Ejemplo de una palabra <span>cursiva</span></div> <div class="textoNegrita">Otro ejemplo en negrita</div> </body> </html>En el ejemplo podemos observar que hemos creado dos clases en nuestro archivo CSS y las hemos aplicado a un elemento HTML. Destacar esta característica ya que es importante y nos permite combinar mas de un estilo por elemento. El ejemplo se vera de la siguiente manera:
7. Cambiar estilo a una lista
Para ello usaremos la propiedad "list-style-type". A continuación se muestran algunos de los valores para esta propiedad:
circle (Proporciona un simple circulo)
decimal (Estilo por defecto para una lista ordenada <ol>, muestra un numero)
disc (Estilo por defecto para una lista sin orden <ul>, un circulo relleno)
none (Remueve el estilo y no se visualiza nada)
square (Proporciona un simple cuadrado)
upper-roman (Muestra un numero romano en mayusculas)Podemos crear un ejemplo empezando por el archivo de estilo CSS:
ul {
list-style-type: upper-roman;
}
Y nuestro documento HTML:<!doctype html> <html> <head> <title>Listas</title> <link rel="stylesheet" type="text/css" href="estilo.css"> </head> <body> <ul> <li>Tomates</li> <li>Lechuga</li> <li>Manzanas</li> <li>Limones</li> </ul> </body> </html>El resultado seria el siguiente:
8. Añadir un fondo
Podemos aplicar un color de fondo a la totalidad de nuestra web o simplemente a un elemento HTML, Para ello se usa la propiedad CSS "background-color" que comparte el mismo valor que la propiedad "color".
Veamoslo en un ejemplo creando primero la hoja CSS:
body {
background-color: #FFFF00;
}
.textoNegrita {
font-weight: bold;
}
div span {
font-style: italic;
background-color: #FF0000;
}
Destacar en el ejemplo que estamos usando un selector "div span". De este modo podemos cambiar el color de fondo a todos los elementos <span> que estén dentro de un elemento <div>El código HTML
<!doctype html> <html> <head> <title>Fondos</title> <link rel="stylesheet" type="text/css" href="estilo.css"> </head> <body> <div class="textoNegrita">Ejemplo de texto en negrita</div> <div>Ejemplo de una palabra <span>cursiva</span></div> <div class="textoNegrita">Otro ejemplo en negrita</div> </body> </html>El resultado seria el siguiente:
8.1 Añadir una imagen de fondo
En este caso se utiliza la propiedad "background-image:url("...")" indicando entre los paréntesis el archivo de imagen.
Existe otra propiedad que nos permite rellenar el fondo de nuestra pagina web repitiendo la imagen hasta completarlo (en el siguiente punto se muestra un ejemplo).
En el caso de que nuestra imagen no cubra todo el fondo de nuestra pagina web, podemos añadirle bordes y así completar todo el fondo de pantalla. Para ello se utiliza la propiedad "background-color". Al hacer uso de esta propiedad la imagen tendrá preferencia respecto al color del fondo, mostrando así primero la imagen y debajo el color del fondo.
Otra propiedad interesante es "background-position" que nos permite colocar la imagen centrada, arriba, izquierda, abajo o derecha.
Vamos a ver un ejemplo creando primero nuestro archivo CSS:
body {
background-image:url("android.jpg");
background-repeat: no-repeat;
background-color: #1B679B;
background-position: center top;
}
Y continuamos creando el archivo HTML:
<!doctype html> <html> <head> <title>Imagenes</title> <link rel="stylesheet" type="text/css" href="estilo.css"> </head> <body> </body> </html>El resultado sera el siguiente:
8.2 Repetir una imagen
Su uso es muy común ya que permite llenar todo el fondo de nuestra pagina web con una pequeña imagen. En el ejemplo que se muestra a continuación hemos utilizado una imagen de 20x20.
El código HTML es el mismo que el ejemplo anterior y el archivo CSS sera el siguiente:
body {
background-image:url("fondo.jpg");
}
El resultado es el siguiente:
9. Diseños de pagina
Anteriormente hemos visto una gran cantidad de propiedades CSS para cambiar el comportamiento y apariencia de distintos elementos HTML. Pero CSS permite crear aspectos mucho mas complejos como pueden ser columnas laterales, efectos para esas columnas y mucho mas.
9.1 Diseño de una sola columna
Necesitaremos aprender 3 nuevas propiedades:
width (ajusta el ancho horizontal de un elemento, se mide en pixeles)
margin (su uso es similar a la propiedad "padding")
clear (principalmente se usa para que ningún elemento aparezca al lado de quien este usando esta propiedad. Sus valores son: left, right, both, none, inherit)A la hora de crear una columna tenemos dos posibilidades para hacerlo: con un ancho fijo o con un ancho ajustable. Un ancho fijo puede resultar útil a la hora de crear paginas web y un ancho ajustable permite trabajar mejor en dispositivos móviles.
La propiedad "margin" trabaja de forma similar a "padding". Podríamos usarla en una sola linea siguiendo el orden:
margin: top right bottom left;
margin: 10px 50px 200px 100px;O bien especificar el margen de cada lado:
margin-top: 10px;
margin-right: 50px;
margin-bottom: 200px;
margin-left: 100px;En el caso de usar una sola linea tenemos varias opciones:
Usar un solo valor (se aplicara el margen a los cuatro lados)
margin: 10px auto;
Usar dos valores (el primer valor se aplicara al lado superior e inferior y el segundo valor, al lado izquierdo y derecho)
margin: 10px 50px;
O bien usar tres valores (el primero se aplicara al margen superior, el segundo al margen izquierdo y derecho, y el tercer valor al margen inferior)
A continuación vamos a crear un ejemplo con un ancho fijo:margin: 10px 50px 30px;
body {
font-family: arial, helvetica, sans-serif;
}
#contenedor {
margin: 0 auto;
width: 600px;
background: #FFFFFF;
}
#contenido {
clear: left;
padding: 20px;
}
Y el código HTML que vamos a utilizar es el siguiente:
<!doctype html> <html> <head> <title>Columnas</title> <link rel="stylesheet" type="text/css" href="estilo.css"> </head> <body> <div id="contenedor"> <div id="contenido"> <h2>Titulo del mensaje</h2> <p>Este es el mensaje del articulo</p> <h2>Titulo del segundo mensaje</h2> <p>Contenido del segundo articulo</p> </div> </div> </body> </html>El resultado sera el siguiente:
9.1 Diseño de dos columnas
En este caso vamos a aprender dos nuevas propiedades:
float (define si un elemento se moverá o flotara dentro de un diseño. Sus valores pueden ser: left, right, none. El siguiente ejemplo usaremos esta propiedad para colocar una columna a la izquierda y la otra a la derecha)
display (establece como debe mostrarse un elemento. Por ejemplo el elemento <div>, por defecto ocupa todo el ancho de la pagina, aplicándole esta propiedad ocupara solo el ancho de la columna que vamos a crear. Sus valores son: block (amplia la anchura del elemento), inline (el elemento hará uso de su propio ancho de pantalla), none (oculta el elemento de la pantalla))Al poner la propiedad "display" a "none" hace que el elemento que use dicha propiedad se oculte y no sea visible en la pagina. Otra manera de hacerlo seria usando la propiedad "visibility" que tiene dos valores: hidden y visible. De esta manera el elemento puede estar oculto pero se mantiene su espacio en la pagina web.
En el siguiente ejemplo vamos a crear un diseño ajustable y para ello si observamos el ejemplo anterior, la propiedad "width" se media en pixeles (px), en este caso para realizar un diseño ajustable deberemos utilizar la medida porcentaje (%).
Primero creamos la hoja de estilo externa CSS:
#contenedor {
margin: 0px auto;
width: 100%;
}
#contenedorBASE {
float: left;
width: 100%;
}
#contenido {
clear: left;
float: left;
width: 65%;
padding: 20px 0;
margin: 0 0 0 5%;
display: inline;
}
#barraLateral {
float: right;
width: 20%;
padding: 20px 0;
margin: 0 2% 0 0;
display: inline;
background-color: #CCCCCC;
}
Y el código HTML:
<!doctype html> <html> <head> <title>Columnas</title> <link rel="stylesheet" type="text/css" href="estilo.css"> </head> <body> <div id="contenedor"> <div id="contenedorBASE"> <div id="contenido"> <h2>Titulo del mensaje</h2> <p>Este es el mensaje del articulo</p> <h2>Titulo del segundo mensaje</h2> <p>Contenido del segundo articulo</p> </div> <div id="barraLateral"> <h3>TOP USUARIOS</h3> <ul> <li>Maribel</li> <li>Lucas</li> <li>Fernando</li> </ul> </div> </div> </div> </body> </html>El resultado seria el siguiente:
10. Encabezados y pie de pagina
Este ultimo punto vamos a culminar todo el articulo y crearemos un ejemplo con todo lo aprendido.
Los encabezados suelen usarse para exponer el titulo de nuestra pagina web o incluso un menú con secciones. En cambio el pie de pagina suele utilizarse para informar de los derechos de autor del sitio web o también para crear un sitio de enlaces para navegar por la propia web (esta característica se le llama "mapa del sitio web").
Vamos a aprender una ultima propiedad CSS llamada "text-decoration"que nos permite cambiar el comportamiento predeterminado de un texto. En este caso lo usaremos para crear un menú debajo del titulo de la web y al ser un menú con enlaces conseguiremos que el texto se muestre sin subrayas y quede mas limpio.
También veremos el siguiente selector de estilo:
#menu li a:hover { ... }Las propiedades que incluyan dicho selector, afectaran a los elementos <a> que estén dentro de un elemento <li> y a su vez que estén dentro del selector "#menu". El efecto que produce es que cuando el visitante pasa el ratón por encima de esos enlaces, estos cambian de color.
Veamos pues el ejemplo final de archivo CSS:
body {
font-family: arial, helvetica, sans-serif;
}
#contenedor {
margin: 0 auto;
width: 100%;
}
#titulo {
background-color: #abacab;
padding: 10px;
}
#menu {
float: left;
width: 100%;
background-color: #0c0c0c;
}
#menu ul li {
list-style-type: none;
display: inline;
}
#menu li a {
display: block;
text-decoration: none;
border-right: 2px solid #FFFFFF;
padding: 3px 10px;
float: left;
color: #FFFFFF;
}
#menu li a:hover {
background-color: #CCCCCC;
}
#contenedorBASE {
width: 100%;
float: left;
}
#contenido {
clear: left;
float: left;
width: 65%;
padding: 20px 0;
margin: 0 0 0 5%;
display: inline;
}
#barraLateral {
float: left;
width: 30%;
padding: 20px 0;
margin: 0;
display: inline;
background-color: #CCCCCC;
}
#piePagina {
clear: left;
background-color: #CCCCCC;
text-align: center;
padding: 20px;
height: 1%;
}
Y el código HTML sera el siguiente:
<!doctype html> <html> <head> <title>Columnas</title> <link rel="stylesheet" type="text/css" href="estilo.css"> </head> <body> <div id="contenedor"> <div id="titulo"> <h1>El Baul de Android</h1> </div> <div id="menu"> <ul> <li><a href=”#”>INICIO</a></li> <li><a href=”#”>FORO</a></li> <li><a href=”#”>DESCARGAS</a></li> <li><a href=”#”>CONTACTO</a></li> </ul> </div> <div id="contenedorBASE"> <div id="contenido"> <h2>Titulo del mensaje</h2> <p>Este es el mensaje del articulo</p> <h2>Titulo del segundo mensaje</h2> <p>Contenido del segundo articulo</p> </div> <div id="barraLateral"> <h3>TOP USUARIOS</h3> <ul> <li>Maribel</li> <li>Lucas</li> <li>Fernando</li> </ul> </div> <div id="piePagina"> <p>Copyright (c) 2013 El Baul de Android</p> </div> </div> </div> </body> </html>Y el resultado final:
No hay comentarios:
Publicar un comentario