Hola que tal bienvenido y en esta ocasión vamos a ver las diferentes formas de colocar CSS a un documento HTML que para las mejores solo hay dos pero hay una tercera parte que la verdad no es nada valida ya que deja muy detrás el verdadero potencial de los otros dos
Tal vez lo
que acabo de escribir no te quedo muy claro así que mejor lo explico en lo que
sigue
Enlazar un
documento CSS en la cabecera del documento HTML
esta es la
mejor forma y es la que debemos utilizar aunque nuestro documento CSS sea muy
pequeño ya que tiene muchas ventajas como si tienes muchos documentos HTML así
solo lo enlazas en todos y si necesitas editarlo lo editas solo una vez y este
afecta a los demás
así que
veamos como enlazarlo
<!doctype html> <html> <head> <title></title> <link rel="stylesheet" href="estilo.css"> </head> <body> </body> </html>
De esta forma
se junta el CSS y el HTML separados y se edita más fácil y es más legible
También
puedes enlazar los documentos que te sean necesarios como este ejemplo
<!doctype html> <html> <head> <title></title> <link rel="stylesheet" href="estilo_1.css"> <link rel="stylesheet" href="estilo_2.css"> <link rel="stylesheet" href="estilo_3.css"> <link rel="stylesheet" href="estilo_4.css"> <link rel="stylesheet" href="estilo_5.css"> </head> <body> </body> </html>
Puedes ver
que es bastante sencillo
La otra forma
es la siguiente
Colocar el
CSS directamente en el HTML
Esta es una
forma y realmente es la que no te recomiendo ya que tiene muchos inconvenientes
como
Digamos que
tiene varios archivos HTML y que todos tiene un mismo color de fondo y
tipografía en todos los casos debe ser la misma y si empleamos esta forma de
colocar el CSS veras que es muy difícil ya que tienes que repetir muchas veces
el mismo código CSS para cada documento
Y eso no es
lo feo…lo feo es cuando digamos que quieres rediseñar el sitio pues tienes que
cambiar cada documento uno por uno
Esto es una
chorreada y lo evitamos con la primera forma que vimos arriba pero de todos
modos veamos cómo es esta forma
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css" media="screen">
body{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
</body>
</html>
Ves que son
muy distintos al primero porque no enlazamos ningún otro documento solo
colocamos directamente el CSS
Así que esta
formas son las más comunes…hay otra que es distinta y es la que se enlaza un
documento CSS dentro de otro documento CSS y la verdad eso tiene otras
desventajas porque
Se dice
aunque nunca lo he probado que satura más el documento CSS y hace lenta la página
(la carga)
También se me
hace muy menso eso ya que para que enlazo lo mismo con lo mismo si solo lo
enlazo en HTML
Pero bueno
espero que te guste este parte de los tutoriales que la verdad ha sido muy
corto pero no queda más que decir
Saludos y
buenos estudios
No hay comentarios:
Publicar un comentario