Cuando escribimos una pagina o un documento, tenemos que darle algunos estilos, para que el documento tenga una aparencia mas atrativa
lo podemos hacer de tres formas:
- en linea
- externamente
- interno
En Linea
Colocamos los estilos en cada elemento que queramos
ejemplo
Nel seguinte ejemplo pondre un parrafo y una cabecera con unos estilos en linea
<h1 style="color:blue;text-align:center;">Una cabecera con estilos</h1> <p style="color:red;">Un parrafo con estilos en linea.</p>
Su salida seria de la seguiente forma:
Una cabecera con estilos
Un parrafo con estilos en linea.
...
CSS externo
Los estilos los podemos poner externamente y funciona exactamente igual, como lo hacemos?
primero estribimos nuestros estilos, como nos guste mas.
los guardamos en una hoja de estilos con la extension CSS
Por ultimo llamamos esa hoja desde nuestro documento.
Ejemplo de como poner la hoja de estilos
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mis_estilos.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS de forma interna
Para poner los estilos de forma interna en nuestro documento, haremos el seguiente:
entre las etiquetas <head> Aqui ponemos nuestros estilos </head>
Nota para iniciar a escribir nuestros estilos en la cabecera de nuestro documento no olvidarse de poner las etiquetas de <style> Aqui a dentro escribimos nuestro codigo css </style>
Ejemplo
demostrare como poner el codigo css en nuestro documento
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Múltiples hojas de estilo
Cuando tenemos mas de una hoja de estilos, como por ejemplo los estilos de bootstrap y nuestros estilos
los pondremos en la cabecera
un documento puede llamar a diversas hojas de estilo exteriormente, ahora hay que tener atencion en como se colocan
Orden de colocacion de hojas de estilo
Como bien sabemos el codigo se le desde arriba hasta abajo y da esquierda hasta la derecha
Entonces cuando el codigo llega a una linea que estamos llamando una hoja de estilos, este se desloca a esa hoja, lendo todos los estilos necessarios al documento y se los aplica
Pero que pasa se tenemos dos o mas hojas de estilos?
Los estilos del documento se van cambiando y queda solamente los estilos de la ultima hoja, asi que hay que tener cuidado cando aplicamos estilos a nuestros documentos
Nuestros estilos van siempre al final, y nuestros estilos tienen que ser estilos que no heya en otras hojas para no tenermos conflitos de estilos
Ejemplo de como colocar varias hojas de estilos
<head>
<link rel="stylesheet" type="text/css" href="estilos_1.css">
<link rel="stylesheet" type="text/css" href="estilos_2.css">
<link rel="stylesheet" type="text/css" href="estilos_3.css">
<style>
h1 {
color: orange;
}
</style>
</head>
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias