Alguna vez me hice líos con este tema sencillo de los divs de las CSS.
Voy a intentar explicártelo como hubiera querido que alguien me lo explicara por primera vez.
En este punto supongo que ya sabes algo de html y si no, puedes darle un vistazo a esto:
Guarda el siguiente codigo en un block de notas como tipo de archivo .html
div.html
<html
<head
<title>Mi Primera Web Con DIVs</title>
<link media=all href="estilo-a001.css" type=text/css rel=stylesheet>
</head>
<body>
<div id=global>
<div id=bartolo>
<p>Este es mi primer DIV llamado bartolo</p>
</div>
<div id=catalina>
<p>Este es mi segundo DIV llamado catalina</p>
</div>
<div id=perico>
<p>Este es mi tercer DIV llamado perico></p>
</div>
</div>
</body>
</html>
Luego guarde el siguiente codigo con el nombre estilo-a001.css
body{background-color:yellow; text-align:center}
#global {background-color:#FF9900; margin:0px auto 0px auto; padding:2px 2px 2px 2px; width:800px; border:#000 1px solid}
#bartolo {background-color:#00CC00; margin:0px 2px 0px 0px; width:80px; float:left; border:#000 1px solid; text-align:left}
#catalina {background-color:#00CCFF; margin:0px 0px 0px 0px; width:712px; float:left; border:#000 1px solid; text-align:center}
#perico {background-color:#00CCFF ; margin:2px 0px 0px 0px; width:712px; float:left; border:#000 1px solid; text-align:justify}
p {padding:10px 10px 10px 10px}
La extension .css es obligatoria a menos que use un editor como notepad++ y elija el tipo de archivo al guardar.
Explicación: el código html solo sirve para maquetar o esquematizar el contenido de una página web, mientras que el código css se encarga de dar formato o estilo al contenido.
Dentro del código css verá algo como lo siguiente:
id="bla" -> #bla
class="bla" -> .bla
id es para elementos únicos y class para grupos de elementos.
Veo que cuando se declara en la clase css algo como #mielementounico se manda a llamar desde el html con los parametros id="mielementounico".
Y cuando se declara en la clase css algo que lleve un puntito .miestiloparagrupos se manda a llamar desde el html con los parametros class="miestiloparagrupos"
Si me hubiera tocado explicarlo lo hubiera puesto al revés:
Código en el CSS ---> Código en el HTML
#bla ---> id="bla"
.bla ---> class="bla"
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p>
</body>
</html>
Mas información (Inglés):
3 Formas de insertar las CSS
Hasta la próxima !
No hay comentarios.:
Publicar un comentario