WillxD » CSS

Diferencias entre ID y Class

WillxD — Thu, 07 May 2009 20:13:28 +0000

Econtrar diferencias entre los identificadores “ID” y las clases “Class” es una de las primeras dudas que aparecen en el aprendizaje de CSS.
A simple vista no parece haber ninguna diferencia, pero sin embargo estamos muy equivocados, ya que sí existen grandes diferencias.

Lo que siempre se estila decir para explicar es
“ID solo se usa una vez y Class se utiliza varias veces”
¿Pero por qué? a mi parecer esa no es una explicación, sino una simple proposición. Sin embargo tienen razón, pero siempre es bueno saber el porqué (no siempre crean todo lo que le dicen por más ducho que sea, siempre pregunten el ¿Por Qué? xD )

Identificadores "ID"

Para comenzar el “ID” es un identificador de un objeto, y un objeto solo puede tener un solo identificador, así como en la vida cotidiana, nosotros tenemos un DNI (documento de identidad) que es el cual nos identifica, y nadie más puede tener el mismo DNI.

Veamos un ejemplo:

#contenido{
	background:#9CC;
	margin: auto;
	padding:20px;
}
 
#sidebar{
	width:300px;
	background:#99C;
	padding:10px;
}
 
#footer{
	background:#CCC;
	border:1px solid #093;
	margin:10px 12px 20px 15px;
}

<div id="contenido"></div>
<div id="sidebar"></div>
<div id"=footer"></div>

En este ejemplo tenemos 3 identificadores que no se repiten.

¿Qué pasa si repetimos un identificador?

Una de los primeros problemas es que no podremos validar el CSS. Ya que cuando en una web tenemos varios objetos con el mismo ID, hay errores en la interpretación de los navegadores.

El identificador no solo es importante en CSS sino también en el uso de JavaScript, Ajax con los que los identificadores toman un papel muy importante.

Otro de los usos de “id” es que podemos poner links en nuestros sitios que nos dirigirá a sitios específicos.

Usando el ejemplo anterior. Si tenemos un link así:

<a href="#footer">
Ir al footer
</a>

el navegador nos dirigirá al elemento que tenga como “id” a footer.

Clases (Class)

En cambio las clases “class” son propiedades que un objeto o varios objetos pueden tener.
Además a un objeto le podemos aplicar varias clases.

Veamos un ejemplo

.texto {
	font-size:12px;
	color:#069;
}
 
.negrita {
	font-weight:bold;
}

<div class="texto">
	En este texto heredamos las propiedades de la clase texto
</div>
 
<div class="texto">
	Volvemos a heredar las propiedades de la clase texto
</div>
 
<div class="texto negrita">
	Este texto hereda las propiedades de las clases texto y negrita.
</div>

Otros..

Otro de los puntos que debemos saber es que si a un elemento le aplicamos un “ID” y un “Class” el elemento herederá preferentemente las propiedades del “ID”
Por ejemplo:

.com{
	background:#939;
	font-size:18px;
}
 
#fil{
	background:#393;
	font-size:10px;
}

<div id="fil" class="com">
Este texto hereda las propiedades tanto del identificador como de la clase. 
Pero si se repiten, toma como preferencia el del identificador.
</div>

En ese ejemplo toma como preferencias las propiedades del “ID” que le asigné.
Espero que haya despejado algunas dudas y si por el contrario si te di más dudas xD no dudes en comentar para saber tu opinión o duda.

Salu2!

Sombra con CSS

WillxD — Sat, 07 Mar 2009 03:22:42 +0000

Para darle sombra a un contenedor div, usaremos "backround-color". En este caso a nuestro contenedor, le pondremos un nombre de clase "contenido-texto".
Ahora para agregar la sombre lo que haremos es agregar el contenedor "contenido-texto" dentro de dos contenedores más, cuyo color de fondo sean de tonalidad gris, para lograr el efecto de sombra.

Veamos el código:
en el CSS:

#penumbra{
	background-color: #ccc; /*color de sombra tonalidad gris*/
}
.sombra,
.contenido-texto{
	/* con bottom y right hacemos correr 2px hacia abajo y hacia la derecha. */
	position: relative;
	bottom: 2px;
	right: 2px;
}
 
.sombra{
	background-color: #666; /*color de sombra tonalidad gris más clara*/
}
 
.contenido-texto{
	background-color: #f1ffed; /*color de fondo del contenido*/
	color: #549790; /*color del texto*/
	padding: .5em 2ex;
	font-family:Arial, sans, sans-serif, nimbus sans L;
}

en el HTML:

<div id="penumbra">
	<div class="sombra">
		<div class="contenido-texto">
   		<p>Aplicando sombras a un contenedor con CSS. 
        Aqui ira el contenido de nuestra web, puede ser un texto, imágenes, videos , etc.</p>
  		</div>
	</div>
</div>

Reseteando estilo CSS

WillxD — Sat, 21 Feb 2009 19:56:40 +0000

Los elementos HTML se presentan de una forma determinada en cada navegador y no siempre de la misma forma, ya que cada navegador tiene su propio atributo CSS predeterminado.

Por ello nacieron los "reset" del CSS que definen los elementos iniciales para evitar algunos problemas como no ver igual en diferentes navegadores. Veamos el código:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
:focus {
	outline: 0;
}
 
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
 
blockquote:before, blockquote:after,q:before, q:after {
	content: "";
}
 
blockquote, q {
	quotes: "" "";
}

Hay 2 maneras de insertar el código:

Insertando directamente a la hoja de estilo
Guardar el código con el nombre "reset.css" e importarlo de la siguiente manera:

@import 'reset.css';

Centrar Pagina con CSS

WillxD — Tue, 10 Feb 2009 00:51:56 +0000

Veremos con centrar una página Web con CSS, es algo simple pero puede sacar de apuro a varios derrepente algunos alguna vez habran pensado centrar con "float" pero si se ponen a buscar solo hay "left","right","inherit" y "none".. Y se preguntaran donde esta el famoso "Center".

Bueno ahora le daremos una solución fácil y compatible con varios navegadores y a diferentes resoluciones (no traten de usar margen-left o margen-right no les funcionará en todas las resoluciones)

Veamos el CSS:

body{
	/* margin-left y margin-right: auto; hacen que quede centrado */
	margin-left: auto;
	margin-right: auto;
	width: 600px; /* Aca ponemos el ancho exacto de nuestra pagina */
	}
#contenedor{
	background-color:#3cc;
	width:600px;
	height:500px;
	text-align:center;
	font-family:Verdana, Geneva, sans-serif;
	color: #366;
	}

Ahora el HTML:

<div id="contenedor">
	 Aca ira el contenido de la web xD!
</div>

Dos columnas con CSS

WillxD — Tue, 03 Feb 2009 21:16:16 +0000

Trabajar con tablas de html ya es algo anticuado xD, asi es que debemos acostumbrarnos a trabajar con la etiqueta "div" + CSS

En el HTML tenemos :

<div id="contenedor">
 
	<div id="izquierda">
	<p>Aquí ira el contenido alineado a la izquierda, puedes modificar a tu gusto :D:D</p>
	</div>
 
	<div id="principal">
	<p>Aquí ira el contenido principal </p>
	</div>
 
</div>

En el CSS:

#contenedor{
color: #006; /*Color del texto*/
text-align: left; /*Alineacion del texto*/
font-family:Verdana, Arial, Helvetica, sans-serif; /*Tipo de letra ^^*/
width: 750px;/*El ancho de la página*/
height:440px;/*El alto de la página*/
margin: auto;
}
 
#izquierda{
width:185px; /*El ancho que tendra la columna izquierda*/
height: 440px;/*El alto que tendra la columna izquierda*/
background-color: #0CF; /*ELl color del fondo de la columna izquierda*/
float:left; /*Aca determinamos la posici{on de nuestra columna*/
border:#000 3px solid; /*Aca ponemos un borde :D*/
}
 
#principal{
height: 440px;/*El alto que tendra la columna principal*/
margin-left:200px; /*Este margen hace que no se junte al contenido de la columna izquierda, es importante poner más pixeles del ancho de la columna izquieda (200px > 185px)*/
background-color: #CFF;/*Color del fondo de esta columna*/
border:#000 3px solid; /*El borde :D (es opcional, cuestion de gustos =P)*/
}

Fondo transparente con CSS

WillxD — Sat, 31 Jan 2009 15:42:13 +0000

En un post anterior vimos como aplicar transparencia a imagenes, ahora aplicaremos la transfarencias a una imagen de fondo y sobre el poner un texto de tal manera que se note la transparencia.

En el CSS:

.bg {
	width: 350px;
	height: 325px;
	background: url(imgbg.jpg);
}
 
.trans {
	background-color: #FFFFFF;
	opacity: 0.6;
	filter:alpha(opacity=60);
	width: 170px;
	margin-left:140px;
	border: solid 2px #FFFFFF;
}
 
.trans p {
	margin: 5px;
	color: #000000;
	padding-left:30px;
}

En el HTML

<div class="bg">
<div class="trans">
Esta es una transparencia xD!
</div>
</div>

Motivacion para aprender CSS

WillxD — Fri, 30 Jan 2009 17:26:30 +0000

Que buena motivación para aprender CSS :P

Enlace: Sexy CSS

Via: NSFW

Marco decorativo para imagenes con CSS

Transparencia con CSS

WillxD — Fri, 30 Jan 2009 03:12:40 +0000

CSS nos brinda métodos para mejorar la visualización de nuestro contenido, entre ellas esta la aplicación de transparencias.

Veamos como aplicar transparencias:

.alpha {
	opacity: 0.5;
	filter:alpha(opacity=50);
}

Ahora lo aplicaremos para transparencias del 30 y 70 % a una imagen, para eso creamos 2 estilos en el CSS.

.alpha30 {
	opacity: 0.3;
	filter:alpha(opacity=30);
}
 
.alpha70 {
	opacity: 0.7;
	filter:alpha(opacity=70);
}

en el html :

<div><img src="icono.jpg" alt="" /></div>
<div class="alpha70"><img src="icono.jpg" alt="" /></div>
<div class="alpha30"><img src="icono.jpg" alt="" /></div>

El resultado seria este:

Fondo transparente con CSS

Marco decorativo para imagenes con CSS

WillxD — Thu, 29 Jan 2009 02:05:35 +0000

Una buena explicación de como decorar nuestras imagenes con CSS empleando algunas etiquetas para poner un borde, otra imagen al borde u otra cosa que se nos ocurra.

El código funciona en diferentes navegadores, y nos evitaría un laborioso trabajo editando cada imagen por separado.

Además nos servira de gran ayuda cuando querramos darle una función a cierta parte la imagen. Enjoy =P