En este tutorial no aprenderás todas y cada una de las propiedades CSS, sino a manejarlas de forma básica, de momento no veremos ni Sub-clases, ni seudo-elementos, porque puede ser confuso si no se experimenta primero con Selectores, Selectores de Clase y Selectores de ID.
Que es CSS o Hojas de estilos por cascada
Existen tres formas de implementar CSS en una página web:
1. En la misma página como el estilo general ya sea en <head> y </head> o en <body> y </body>:
<style><!-- estilo --></style>2. Directamente en una etiqueta HTML dentro de <body> y </body>.
<etiqueta style="-- estilo --"> -- Contenido -- </etiqueta>3. Como archivo independiente de extension .css únicamente en <head> y </head>
<link type='text/css' rel='stylesheet' href='http://tusitio.com/estilo.css' />Para ubicar la posición correcta dentro una web
La estructura de una página web funciona de la siguiente manera:
<html>
<head>
-- códigos javascript, estilos y elementos no visibles --</head>
<body>
-- Tablas, Div, object, imagenes, texto, algunos tipos de scripts, todo lo que será visible dentro de la página --</body>
</html>
Caso 1
Para el primer caso, usualmente iría en las etiquetas <head> y </head> Si va dentro de body en casos muy especiales como en un tutorial de CSS o HTML tendría que venir comentado todo el contenido para que no aparezca visible, esto es encerrándo el código dentro de <!-- y -->, debe además agregarse type='text/css' en la etiqueta <style>
Ejemplo:
<head>
<style type='text/css'></head>
<!--
.p {color:#c00;}
-->
</style>
o (no recomendable):
<body>
<div>
<style></div>
<!--
p {color:#c00;padding:6px 10px;}
-->
</style>
</body>
Caso 2
Dentro de una etiqueta html podemos asignar directamente CSS propiedades, pero se debe estar conscientes que por ejemplo; vínculos u otros elementos que requieran el uso de sub-clases y sub-elementos por ejemplo a:link, a:hover y a:visited, solamente se podrán crear dentro de un archivo CSS o declarados en <style> y </style>.
Ejemplo
<div style="width:500px;height:200px;background:#000;">Casi todas las etiquetas son susceptibles de CSS, salvo aquellas invisibles como <tbody>, <thead> y <tfoot> creadas por Microsoft para marcar las áreas relevantes dentro de una tabla, ni en <script> o cualquier etiqueta en el área <head> </head>, en <object> que es usado para embeber objetos está parcialmente soportado, no todas las propiedades son aceptadas, depende del navegador.
<p style="margin-top:0;margin-left:15px;">
Esto es un texto</p>
<img style="border:1px solid #f0c;" src="imagen.jpg" />
</div>
Caso 3
Podemos hacer un archivo CSS con un archivo de texto que le cambiamos la extensión a .css y escribimos las reglas dentro de este archivo y luego cargarlo mediante la etiqueta <link />, siempre dentro de <head> y </head>
Ejemplo (deben agregarse los atributos type='text/css' rel='stylesheet' dentro <link />):
<head>
<link type='text/css' rel='stylesheet' href='http://tusitio.com/estilo.css' /></head>
►Continua en: CSS para novatos parte 2: Creación de reglas: Estructura y tipos
Una película que ha roto a divido a los fans muchos culparán a sus director por querer reparar Los últimos Jedi, no es su culpa al final.
La historia de Manji, un guerrero samurái sin señor que ha sido condenado con la inmortalidad...
Del autor de Konosuba, Genzo Shibata es un luchador japonés que es transportado a un mundo de fantasía, quien está obsesionado con los seres peludos.
Película lanzada directo a video que nos cuenta una historia que parecería sacada de la Dimensión desconocida.
Comentarios y Consultas
Los mensajes serán revisados a veces. No te olvides que soy una persona, no se trata de faltar al respeto, todos tenemos opiniones, no hay que enojarse.
Puedes marcar Notificarme para recibir la notificación de la respuesta.