Maestro CSS, destripando estilos. Cap. 4 – Selectores y demás
Escrito por Arzet el 24 - 11 - 2008 • Diseño web , Tutoriales
En los anteriores capítulos planteamos un poco la puesta en escena del trabajo, los planteamientos previos antes de ponernos a estilizar nuestra web, Ahora ya vamos a entrar un poco en materia hablando propiamente de como crear nuestra idea en CSS. En esta ocasión hablaremos de los selectores y de las diferentes maneras de llamar a nuestra CSS desde la página.
Selectores
Los selectores CSS son el corazón de todo y definen cual será el elemento del HTML que nosotros manipularemos desde el código CSS. La forma típica de hacerlo es la siguiente:
- selector{ propiedad:valor;}
Principalmente pueden ser de dos tipos (como ya comentamos en el primer capítulo) cuando pretendemos estilizar los diferentes elementos de nuestra página, del tipo ID o del tipo CLASS. La diferencia de utilización entre uno y otro radica en que los ID son selectores únicos en una página y que no se repiten, mientras que los tipo CLASS pueden ser usados más de una vez en una misma página, aunque no pasará nada por usar un ID más de una vez.
Para identificarlos entre uno y otro desde el código CSS se utilizar los símbolos “#” o “.” quedando:
- #selector (para las capas ID)
- .selector (para las capas CLASS)
También podemos modificar selectores que no sean de ninguno de estos tipos, sino que afectan directamente a tags propios del HTML que queramos editar. En ese caso pondremos el tag sin ningún tipo de símbolo que lo preceda:
- p{propiedad:valor;}
- body{}
- a{}
- hr{}
- …
A la hora de montar la estructura de la CSS cada uno utiliza sus trucos o su forma de hacer, como puede ser separando entre diferentes archivos según la función de cada uno (uno para los estilos generales, otra para los referentes a secciones concretas de la web, …), otros usan un mismo archivo pero lo estructuran con comentarios y dobles separaciones.
Nota: Para añadir comentarios que nos ayuden a movernos mejor por nuestra CSS se utilizan los signos /* para iniciarlos y */ para cerrarlo, quedando: /* esto es un comentario */
A mi personalmente me gusta más utilizar los comentarios para no tener que ir abriendo diferentes CSS cada vez que quiera realizar una modificación (en casos especiales si que uso más de una: las especificaciones de un menú javascript concreto, para crear una css diferente para un menú de administración, para estilos concretos de un apartado puntual que se abre en ventana aparte, etc).
Además también me gusta presentar la información de los selectores en una misma línea para reducir espacio y aclararme mucho más a la hora de buscar algo.
#estilo1{
color:#ffffff;
font-size:12px;
margin:10px;
padding:5px;
font-weight:bold;
}
#estilo1{color:#ffffff; font-size:12px; margin:10px; padding:5px; font-weight:bold;}
Las dos formas son válidas pero la costumbre ha hecho que me guste y me sea más sencilla la segunda. El tiempo decidirá cual es la que mejor os va a cada uno.
CSS interna, externa y en línea
Hay tres maneras de llamar a nuestra CSS y ninguna es más correcta que otra pero si es cierto que hacerlo de forma externa nos ayudará mucho más a separar nuestra parte propia de programación de la del diseño.
Para hacerlo de forma interna pondremos nuestro código dentro del tag <style type=”text/css”
></style> y preferentemente dentro del HEAD de nuestra página.
…
<head>
<style type=”text/css”>
body{ background-color:#ccff00;}
</style>
</head>
<body>
…
Para hacerlo de forma externa lo que haremos de definir nuestros selectores en un archivo que guardaremos con extensión “archivo.css”. Y desde nuestra página web llamaremos a nuestro archivo de la siguiente manera.
<head>
<link rel=”stylesheet” type=”text/css” href=”archivo.css” />
</head>
Nota: Para este caso debemos tener clara una cosa y es la ruta hacia nuestro “archivo.css”. Personalmente suelo poner mis archivos CSS dentro de una carpeta llamada CSS para estructurar mejor y encontrar con mayor facilidad cada cosa en el servidor. Para este caso el HREF deberá reflejar esa ruta css/archivo.css. Además hay que tener claro que lo que hacemos es llamar a la CSS y NO IMPORTARLA, algo que debemos recordar sobretodo a la hora de usar las imágenes en nuestro archivo.css, puesto que la ruta de estas es siempre relativa al archivo.css que la contiene y no al archivo .htm, .php o lo que sea.
La forma de hacerlo en línea es incluir directamente cada estilo en el tag HTML de la siguiente manera:
…
<body>
<div style=”font-size:10px; color:#000000”>Esto es una estilo en línea</div>
…
Como ya he dicho anteriormente ninguna forma es más correcta que la otra y el resultado será el mismo a nivel visual, si bien es cierto que si queremos respetar el manual de buenas maneras lo correcto es separar el código base del diseño, pues a la hora de hacer cambios nos facilita muchísimo la faena y sólo cambiando una CSS por otra podremos editar por completo la apariencia de nuestra la web.
Loading ...
%7Cutmcsr%3D(direct)%7Cutmcmd%3D(none)%3B%2B__utmv%3D22195116.-%3B)
[...] Maestro CSS, destripando estilos. Cap. 4 – Selectores y demás (24/noviembre/2008 ). [...]
[...] 1 – Resetea tu CSS Cap. 2 – La estructura Cap. 3 – La estructura (y2) Cap. 4 – Selectores y demás Cap. 5 – Selectores y demás (y2) Cap. 6 – Propiedades (de la A a la Z) Cap. 7 – Propiedades de [...]