martes, 21 de junio de 2011

CSS para novatos parte 2: Creación de reglas: Estructura y tipos

◄ Viene de CSS para novatos parte 1: Tipos de implementaciones CSS

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;}
Selector2 {propiedad: valor;}
Selector3 {propiedad: valor;}
Una regla puede tener múltiples propiedades:
Selector1
{
propiedad1 : valor ;
propiedad2 : valor ;
propiedad3 : valor ;
propiedad4 : valor ;
}
Si 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:
<div style="propiedad : valor ;"></div>
o
<div style="propiedad1 : valor ; propiedad2 : valor ;">
Destripando la sintaxis.
Selector: Es cualquier etiqueta html (salvo aquellas contenidos entre <head> y </head>), por ejemplo:
body {propiedad:valor;}
div {propiedad:valor;}
a {propiedad:valor;}
p {propiedad:valor;}
...etcétera
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 }
div { propiedad1 : valor ; propiedad2 : 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:

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>
<div>
<p class="estilo1"></p>
</div>
<span class="estilo1"></span>
Las clases pueden mezclarse en el atributo class dejando un espacio entre cada una:

CSS:
.estilo1 {propiedad : valor;}
.estilo2 {propiedad : valor;}
.estilo3 {propiedad : valor;}
HTML:
<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>
<div>
<p>
<span> a este elemento se le aplica el estilo </span>
</p>
</div>
</div>
Esto también se puede hacer con clases o ID, por ejemplo

CSS (no ha diferencia si usa clases o ID, para este caso usamo ID)
#estilo1 p span {propiedad : valor;}
HTML
<div id="estilo1">
<div>
<span>
<p>
<span> a este elemento se le aplica el estilo </span>
</p>
</span>
</div><span> no hereda el estilo </span>
</div>
Pese a que haya otros elementos SPAN, solo aquel dentro de la etiqueta P será el que reciba el estilo

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;}
#estilo1 {background:#000;}
.estilo2 {background:#c00;}
h3 {background:#fff;}
HTML (h3 es un selector simple no lleva ni class, ni id)
<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 */
#estilo1
{
propiedad : valor; /* este valor controla el espaciado */
}
También se puede usar para desactivar propiedades CSS sin necesidad de borrar nada encerrando la propiedad:valor; entre /* y */ por ejemplo:
#estilo1
{
propiedad1 : valor;
/* propiedad2 : valor; */
}
No 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.

► Sigue en CSS para novatos Parte 3: Clases e IDs.

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:

  1. Respuestas
    1. Por desgracia muchos artículos depende de como van las visitas, los que no tienen las suficientes se descontinúan.

      Borrar
    2. Se van a continuar pronto estos tutoriales.

      Borrar
  2. Es 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
    PD. 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

    ResponderBorrar
  3. Muy buenas explicaciones. Gracias por el esfuerzo. Salud!!!

    ResponderBorrar

El ascenso de Skywalker(2019)

Joker 2019Una 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.

[Leer artículo...]

La Espada del Inmortal (2019

Blade of The Immortal (2019)La historia de Manji, un guerrero samurái sin señor que ha sido condenado con la inmortalidad...

[Leer artículo...]

Kemono Michi: Rise Up (2019)

Kemono Michi: Rise Up (2019)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.

[Leer artículo...]

ELI (2019)de Netflix

ELI (2019)de Netflix Reseña y criticaPelícula lanzada directo a video que nos cuenta una historia que parecería sacada de la Dimensión desconocida.

[Leer artículo...]

  © Cgnauta | CGsign blog | [Ver Licencia de uso] | Matius Lenin, Creative Commons, algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.