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 son moderados serán revisados antes de publicarse.

Este no es un foro de adolescentes, no uses letras en vez de palabras completas como "q" en vez de "que", ni escribas tus mensajes en mayúsculas, se respetuoso con los demás, si no estás de acuerdo no comentes.

Una cosa es que no te guste una crítica, otra que uses un lenguaje inapropiado para demostrarlo. No me siento en la obligación de publicar ningún mensaje en específico o de leerlo entero si usas palabras altisonantes.

4 comentarios:

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

      Eliminar
    2. Se van a continuar pronto estos tutoriales.

      Eliminar
  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

    ResponderEliminar

Termina la serie Grimgar de Fantasía y Cenizas

Grimgar de Fantasía y Cenizas (2016)Llegó a su fin Grimgar de Fantasía y Cenizas luego de doce episodios.

[Leer artículo...]

One Punch Man OVA 4 (2016): Review y crítica

One Punch Man OVA 4 (2016): Review y críticaY llega una nueva adaptación de personajes del universo marvel, una divertida aventura espacial.

[Leer artículo...]

Gate: Segunda temporada (2016): Episodio 12 Final: Reseña y crítica

Gate: Segunda temporada (2016): Episodio 12 Final: Reseña y críticaLas aventuras de Itami y sus amigos llega a su fin con el rescate de Piña de las manos de Zorzal.

[Leer artículo...]

Desaparecida: Boku Dake ga Inai Machi (2016) Episodio 12 Final - Reseña y crítica del anime

Desaparecida: Boku Dake ga Inai Machi (2016)Satoru descubre al culpable de la trama, es el momento de enfrentarse y tendrá que dar todo de sí para cambiar su suerte.

[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.

Anexos

Bitacoras.com