Ya vimos como se agrega el CSS a una página web [Ver: Tipos de implementaciones CSS], ahora veremos la creación de reglas, de momento sin tomar en cuenta pseudo classes y pseudo elementos para no volver esto demasiado confuso.
Se requiere nociones básicas de HTML y haber leído el anterior tutorial de implementación de CSS del vínculo de arriba.
Los ID y clases aquí se explicarán solamente de forma rápida.
Una regla CSS tiene la estructura siguiente:
Selector {propiedad-css: valor;}Por tanto varias reglas:
Selector1 {propiedad: valor;}Una regla puede tener múltiples propiedades:
Selector2 {propiedad: valor;}
Selector3 {propiedad: valor;}
Selector1Si aplicamos directamente sobre una etiqueta html dentro de <body></body> mediante el atributo style no se agrega el selector, ni los corchetes, pues ya estamos dentro de una etiqueta HTML, ejemplo:
{
propiedad1 : valor ;
propiedad2 : valor ;
propiedad3 : valor ;
propiedad4 : valor ;
}
<div style="propiedad : valor ;"></div>Destripando la sintaxis.
o
<div style="propiedad1 : valor ; propiedad2 : valor ;">
Selector: Es cualquier etiqueta html (salvo aquellas contenidos entre <head> y </head>), por ejemplo:
body {propiedad:valor;}Los corchetes, dos puntos, punto y coma: Las propiedades y valores deben ir entre corchetes "{}", la propiedad se separa del valor con dos puntos ":" y al final del valor se pone punto y coma ";", sin embargo si solamente hay una propiedad o en el último valor, no es necesario poner punto y coma al final del valor, por ejemplo:
div {propiedad:valor;}
a {propiedad:valor;}
p {propiedad:valor;}
...etcétera
div { propiedad : valor }Selector de Clase, si en vez de una etiqueta HTML, usamos clases, esto es: asignar a una o más etiquetas un atributo class="nombre", podemos aplicar a esos elementos diversas propiedades CSS, pues los selectores usados como tales no discriminan entre una etiqueta y otra los aplican de a todas, con clases podemos aplicar los estilos a todas etiquetas que deseemos, ejemplo:
div { propiedad1 : valor ; propiedad2 : valor }
CSS (en el CSS las clases van precedidas por un punto):
.estilo1 {propiedad : valor;}HTML (En html dentro del atributo class solamente se pone el nombre de la clase, no el punto)
<div class="estilo1"></div>Las clases pueden mezclarse en el atributo class dejando un espacio entre cada una:
<div>
<p class="estilo1"></p>
</div>
<span class="estilo1"></span>
CSS:
.estilo1 {propiedad : valor;}HTML:
.estilo2 {propiedad : valor;}
.estilo3 {propiedad : valor;}
<div class="estilo1 estilo2"></div>
<div class="estilo1 estilo2 estilo3"></div>
<div class="estilo1 estilo3"></div>
Selector de ID: A diferencia de las clases, los ID se hicieron exclusivamente para un único elemento mediante el atributo id="nombre", en CSS los ID son asignados a un solo elemento por una cuestión estructural, pero no es necesario usar ID en CSS, aunque siempre habrá elementos que por una razón u otra requieran de un ID exclusivo, por ejemplo el contenedor principal de una página o las sub-secciones.
CSS (en el CSS las clases van precedidas por un #):
#estilo1 {propiedad : valor;}
#estilo2 {propiedad : valor;}
#estilo3 {propiedad : valor;}
HTML (En html dentro del atributo ID solamente se pone el nombre del ID, no el #)
<div id="estilo1"></div>
<div>
<p id="estilo2"></p>
</div>
<span id="estilo3"></span>
Selectores descendientes: Estos permiten elegir un orden descendente para que en la última etiqueta HTML se aplique un estilo, por ejemplo:
CSS
div div p span{propiedad : valor;}HTML (El estilo se aplicará al último elemento, esto es, span que cumpla el orden), para este caso:
<div>Esto también se puede hacer con clases o ID, por ejemplo
<div>
<p>
<span> a este elemento se le aplica el estilo </span>
</p>
</div>
</div>
CSS (no ha diferencia si usa clases o ID, para este caso usamo ID)
#estilo1 p span {propiedad : valor;}HTML
<div id="estilo1">Pese a que haya otros elementos SPAN, solo aquel dentro de la etiqueta P será el que reciba el estilo
<div>
<span>
<p>
<span> a este elemento se le aplica el estilo </span>
</p>
</span>
</div><span> no hereda el estilo </span>
</div>
Agrupaciones
Podemos agrupar también selectores CSS, una forma práctica y ahorrarnos trabajo, para este caso, usamos la propiedad font-family para establecer la famila de texto en tres cajas distintas.
A la vez, usaremos la propiedad background para establecer un color diferente en cada caja y demostrar que podemos ademas de compartir propiedades CSS, mantener estilos independientes usando la misma ID, Clase o Selector, lo colores que usaremos son: negro (#000), rojizo (#c00) y blanco (#fff).
CSS (Los selectores deben separarse por una coma de otra forma actuarían como selectores descendientes):
#estilo1, .estilo2, h3 {font-family:arial, sans-serif;}HTML (h3 es un selector simple no lleva ni class, ni id)
#estilo1 {background:#000;}
.estilo2 {background:#c00;}
h3 {background:#fff;}
<div id="estilo1"></div>
<div>
<h3> Texto </h3>
</div>
<span class="estilo2"></span>
Comentarios dentro del CSS
Por último veremos los comentarios, estos solamente deben hacerlos en el área asignada a la hoja de estilos.
Un comentario es un elemento para explicar o poner notas para que nosotros y otros diseñadores las identifiquen ayudando al entendimiento de una instrucción, mismas que van dentro del código CSS. Un comentario se abre con /* y se cierra con */, el lugar recomendable para ponerlo es antes de un Selector o después del punto y coma ";", por ejemplo:
/* Sección derecha */
#estilo1También se puede usar para desactivar propiedades CSS sin necesidad de borrar nada encerrando la propiedad:valor; entre /* y */ por ejemplo:
{
propiedad : valor; /* este valor controla el espaciado */
}
#estilo1No es necesario que expliquen cada regla o pueden si quieren no poner ninguna, pero ayuda bastante en el momento de manejar el código, debo aclarar que si pone comentarios no se olvide de revisar y volver a revisar que /* los ha cerrado correctamente */ o puede hacer que el código que preceda el comentario de apertura quede desactivado.
{
propiedad1 : valor;
/* propiedad2 : valor; */
}
► Sigue en CSS para novatos Parte 3: Clases e IDs.
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.
5 comentarios:
Aquí se acaba la parte para novatos?
ResponderBorrarPor desgracia muchos artículos depende de como van las visitas, los que no tienen las suficientes se descontinúan.
BorrarSe van a continuar pronto estos tutoriales.
BorrarEs una verdadera lástima que no continuen con esto. Es el único tutorial que he encontrado que explica de manera ¡¡clarisima!!, esto de la maquetación. He aprendido mucho de CSS, soy autodidacta y hago mis páginillas, pero en verdad no había comprendido el fondo de este lenguaje, con las dos, desafortunadamente inacabadas explicaciones que aquí encontré, he comprendido más de lo que se imaginan. Lástima, otra vez, pero de cualquier manera muchas gracias. Salvador
ResponderBorrarPD. En mi concepto, y es solo a manera de colaboración, con una sola persona que aprenda algo, bien aprendido, se justifica cualquier esfuerzo de su parte y, obviamente, se agradece. De modo que, según yo, sería bueno que no condicionaran a las visitas la publicación de sus tutoriales. Gracias de nueva cuenta. dycor_net-arroba-yahoo-com-mx
Muy buenas explicaciones. Gracias por el esfuerzo. Salud!!!
ResponderBorrar