ZoneArtCSS | Tu lugar: Del Arte CSS » codigo http://www.zoneartcss.com Tu Zona del Arte CSS, tips de programación con estilo Thu, 29 Jul 2010 05:00:55 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 Generador de clases CSS http://www.zoneartcss.com/webdesign/css/generador-de-hojas-de-estilo/ http://www.zoneartcss.com/webdesign/css/generador-de-hojas-de-estilo/#comments Wed, 09 Sep 2009 15:58:28 +0000 Liz Palacios http://www.zoneartcss.com/?p=724

Herramientas web

Generador de clases CSS

Hola, q onda!!

Navegando por ahi me encontre una pagina que pude ser util para aquellos que apenas tan aprendiendo a usar las hojas de estilo CSS.

En esta pagina tu escoges, tipo de letra, color de fondo, etc… Y te genera el codigo en CSS.

Espero que a alguien le sirva!!!

Chao!!

Les dejo el LINK

]]> http://www.zoneartcss.com/webdesign/css/generador-de-hojas-de-estilo/feed/ 1 Generar pasword Aleatorios con PHP. http://www.zoneartcss.com/webdevelopment/programacion-con-style/generar-pasword-aleatorios-con-php/ http://www.zoneartcss.com/webdevelopment/programacion-con-style/generar-pasword-aleatorios-con-php/#comments Wed, 02 Sep 2009 17:00:28 +0000 Liz Palacios http://www.zoneartcss.com/?p=609

Contraseñas Aleatorias con PHP

Generador de contraseñas aleatorias con PHP

Hola, q onda!!!

Bueno despues de tanta regañada hay les dejo un post!! jejeje

Es algo sencillo, pero util me sirvio para mis proyectos de escuela y uno q otro por ahi, espero que a ustedes les sirva.

Es una pequeña funcion para generar paswords aleatorios con PHP.

<?
 
function Pass_Aleatorio(){
	$password ="";
	$tamano = 6; //Longitud del password generado.
	$caracteres = "abchefghjkmnpqrstuvwxyz0123456789";  // Caracteres posibles para el password.
	srand((double)microtime()*1000000);
	$i = 0; 
	while ($i <= $tamano) { 
		$num = rand() % 33; 
		$temp = substr($caracteres, $num, 1); 
		$password = $password . $temp; 
		$i++; 
	}
	return $password;
}
 
?>

Y para obtener el resultado llamamos a la funcion de la siguiente manera

<?
echo Pass_Aleatorio();
?>

Eso es todo!!

Nos vemos pa la proxima!!

]]> http://www.zoneartcss.com/webdevelopment/programacion-con-style/generar-pasword-aleatorios-con-php/feed/ 0 Estilo CSS para tus tablas http://www.zoneartcss.com/webdesign/css/estilo-css-para-tus-tablas/ http://www.zoneartcss.com/webdesign/css/estilo-css-para-tus-tablas/#comments Sat, 22 Aug 2009 18:40:53 +0000 Liz Palacios http://www.zoneartcss.com/?p=578

Dar estilos a nuestra tabla

Dando estilos CSS a nuestras tablas

Hola!!!
Navegando por ahi me encontre una pagina muy chida, CSS Table Gallery ya que te genera estilos CSS para tus tablas. Hay varios que valen la pena.

Y es muy util ya que al momento de descargar te dan listo en codigo, tu solo lo aplicas en tu sitio!!!

Les paso la liga. CSS Table Gallery

]]> http://www.zoneartcss.com/webdesign/css/estilo-css-para-tus-tablas/feed/ 5 Guía práctica de HTML http://www.zoneartcss.com/general/guia-practica-de-html/ http://www.zoneartcss.com/general/guia-practica-de-html/#comments Fri, 21 Aug 2009 22:04:19 +0000 Liz Palacios http://www.zoneartcss.com/?p=547

Guia HTML Aprende ya

Conocimientos básicos de HTML

Hola!!

Les paso una guia Practica sobre HTLM, sobre etiquetas y sus atributos. Espero les sirva!!!

En la presente tabla se hace una comparación entre las etiquetas de formato de texto . Netscape no soporta : ni (tachado).

Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta
ADDRESS
 ADDRESS CITE CITE B: NEGRITA B: NEGRITA
BIG BIG CODE CODE DFN DFN
EM EM I: ITALICA I: ITALICA KBD KBD
SAMP SAMP SMALL SMALL STRONG STRONG
SUB5 SUB 5 SUP5 SUP 5 S Tachado S Tachado
TT TT U Subrayado U Subrayado VAR VAR

Etiquetas
Apertura Acción Atributos Cierre
< ! Comentario. Ninguno –>
<A> Hipervínculo. HREF, NAME, REL, REV, TITLE </A>
<ADDRESS> Formato para dirección del autor. Ninguno </ADDRESS>
<BASE> Url del autor; contexto del documento. HREF </BASE>
<BASEFONT SIZE> Tamaño de la fuente base. Ninguno NO
<BGSOUND> Sonido de fondo. SRC, LOOP. NO – Internet Explorer
<BIG> Aumenta el tamaño. Ninguno </BIG>
<BLINK> Hace parpadear el texto. Ninguno </BLINK> – Netscape
<BLOCKQUOTE> Da formato con sangría a un párrafo Ninguno </BLOCKQUOTE>
<BODY> Cuerpo del documento. BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK </BODY>
<BR> Retorno de línea. CLEAR: Se utiliza en combinación con ALIGN de IMAGE. NO
<CAPTION> Posición de la leyenda en una tabla. ALIGN: TOP/BOTTOM. Internet Explorer: LEFT, RIGHT, CENTER </CAPTION>
<CENTER> Centrar. Ninguno </CENTER>
<CITE> Formato para citas en itálicas. Ninguno </CITE>
<CODE> Formato en tipo código. Ninguno </CODE>
<DD> Definiciones marcadas, para Lista de Definiciones <DL>. Ninguno NO
<DFN< Formato en itálica. Internet Explorer </DFN<
<DIR> Lista de directorio, con elementos marcados con <LI>. Ninguno </DIR>
<DL> Lista de Definiciones, con términos marcados con <DT> y definiciones marcadas con <DD>. Ninguno </DL>
<DT> Términos marcados, para Lista de Definiciones <DL>. Ninguno NO
<EM> Formato enfatizado en itálica. Ninguno </EM>;
<EMBED> Sonido de Fondo. SRC, WIDTH, HEIGHT, AUTOSTART, LOOP. NO – Netscapee
<FONT> Definición de la fuente. SIZE, COLOR. Internet Explorer: FACE. </FONT>
<FORM> Para ingreso de datos del usuario en un formulario. ACTION, METHOD </FORM>
<H1 …H6> Tamaño de letras del 1 al 6. HTML 3.0: LEFT, CENTER, RIGHT </H1 …/H6>
<HEAD> Encabezamiento del documento. BASE, TITLE, ISINDEX, NEXTID, META </HEAD>
<HR> Línea horizontal. NOSHADE, SIZE, WIDTH, ALIGN. Internet Explorer: COLOR NO
<HTML> Al principio y al fin de todo documento. HEAD, BODY </HTML>
<I> Itálica (Cursiva). Ninguno </I>
<IMG> Cargar imágenes. ALIGN, SRC, ALT, ISMAP, WIDTH, HEIGHT, VSPACE, HSPACE NO
<INPUT> Define un objeto de ingreso en un formulario. TYPE, NAME, VALUE, SIZE, MAXLENGHT, ALIGN, SRC, CHECKED </INPUT>
<ISINDEX> Indica que existe un index en el server para el documento. Netscape: PROMPT NO
<ISMAP> Activa la selección de imágenes para el usuario. Ninguno NO
<KBD> Formato monoespaciado. Ninguno </KBD>
<LI> Ítem de lista. Netscape: VALUE, TYPE NO
<LISTING> Listados Ninguno. Obsoleto. </LISTING>
<LIT> Literal. Como PRE, pero usa letra proporcional. Ninguno </LIT>
<MARQUEE> Marquesina. ALIGN, BEHAVIOR, BGCOLOR, DIRECTION, HEIGHT, WIDTH, HSPACE, VSPACE, LOOP, SCROLLAMOUNT, SCROLLDELAY. </MARQUEE> – Internet Explorer
<MENU> Lista menú. Ninguno </MENU>
<META> Metainformación ubicada en HEAD. EQUIV, CONTENT, NAME NO
<NEXTID> Es un parámetro que identifica al documento. NO NO
<NOBR> Elimina los saltos de líneas. Ninguno NO
<OL> Lista ordenada, con elementos marcados con <LI>. TYPE, START, VALUE. </OL>
<OPTION> Opción de selección dentro de un formulario. VALUE, SELECTED VALUE NO
<P> Retorno de línea, con un espacio. Ninguno NO
<P ALIGN> Alineación de texto. LEFT, CENTER, RIGHT </P>
<PLAINTEXT> Pasaje de texto plano. Ninguno. Obsoleto. </PLAINTEXT>
<PRE> Visualiza el texto en su formato original. WIDTH </PRE>
<S> Texto tachado. Ninguno </S>
<SAMP> Formato tipo ejemplo. Ninguno </SAMP>
<SELECT> Para selección de opciones dentro de un formulario. NAME, SIZE, MULTIPLE </SELECT>
<SMALL> Disminuye el tamaño. Ninguno </SMALL>
<STRONG> Formato enfatizado más fuerte que <EM>. Ninguno </STRONG>
<SUB> Subíndice. Ninguno </SUB>
<SUP> Superíndice. Ninguno </SUP>
<TABLE> Tabla. BORDER, CELLPADDING, CELLSPACING, HEIGTH, WIDTH. Internet Explorer: COLOR </TABLE>
<TD> Celdas de una fila en una tabla, dentro de <TR>. ALIGN, VALIGN, NOWRAP, COLSPAN, ROWSPAN, HEIGTH, WIDTH </TD>
<TEXTAREA> Área para ingreso de texto dentro de un formulario. NAME, ROWS, COLS. </TEXTAREA>
<TH> Título de Tabla. ROWSPAN, COLSPAN, ALIGN, VALIGN, NOWRAP, HEIGHT, WIDTH </TH>
<TITLE> Título dentro de HEAD. Ninguno </TITLE>
<TR> Fila de una Tabla. ALIGN, VALIGN </TR>
<TT> Formato tipo máquina. Ninguno </TT>
<UL> Lista no ordenada, con elementos marcados con <LI> . COMPACT, TYPE </UL>
<VAR> Formato tipo variable. Ninguno </VAR>
<WBR> Se usa con NOBR para una sección que deba ser separada. Ninguno NO
<XMP> Similar a PRE. Ninguno </XMP>

Atributos
Nombre Etiqueta Acción Valor
HREF Dirección del URL local o remoto. href=”www.hp.com”
LOOP <BGSOUND> Número de veces que se reproduce el archivo de sonido. Para permanente se usa INFINITE o -1. loop=infinite
SRC Nombre del archivo de sonido (Internet Explorer) src=”sonido.wav”
LOOP <EMBED> Número de veces que se reproduce el archivo de sonido. Para permanente se usa INFINITE o -1. loop=-1
SRC Nombre del archivo de sonido (con Crescendo) src=”sonido.mid”
SRC <IMAGE> Nombre del gráfico src=”imagen.gif”
ALT Nombre que reemplaza a la imágen cuando ésta no puede ser cargada. alt=”Nombre de Imágen”
BGCOLOR <BODY> Color de fondo bgcolor=”#FFFFFF” (blanco)
BACKGROUND Imágen de fondo background=”foto.gif”
TEXT Color del texto text=”#000000″ (negro)
LINK Color de vínculo link=”#0000FF” (azul)
VLINK Color de vínculo visitado vlink=”#FF0000″ (rojo)
ALINK Color de vínculo presionado alink=”#00FF00″ (verde)
ALIGN <CAPTION> dentro de <TABLE> Colocar título arriba (TOP) o debajo (BOTTOM) de la tabla. align=top
ALIGN <H1..H6>, <P ALIGN>, <TD>, <TH>, <TR>, <DIV>, Alinear el texto: LEFT, RIGHT, CENTER align=center
ALIGN <HR> Alinear el texto: LEFT, RIGHT, CENTER align=center
SIZE Valor de la altura en pixels o porcentaje size=3
WIDTH Valor del ancho en pixels o porcentaje width=50%
SIZE <FONT> Tamaño de la letra de 1 a 7 size=6
COLOR Color de la letra color=”#000000″ (negro)
FACE Fuente del texto (Internet Explorer) face=”helv” (helvética)
HEIGHT <EMBED>, <IMAGE>, <MARQUEE>, <TD>, <TH> Valor de la altura en pixels o porcentaje heigth=80
WIDTH Valor del ancho en pixels o porcentaje width=50%
BORDER <TABLE> Borde y ancho del borde en la tabla border=5
CELLPADDING Espacio entre el borde y el texto cellpadding=10
CELLSPACING Espacio entre las líneas interna y externa del borde cellspacing=3
HEIGHT Valor de la altura en pixels o porcentaje heigth=80
WIDTH Valor del ancho en pixels o porcentaje width=50%
COLSPAN <TD> dentro de <TABLE> Expandir una celda varias columnas colspan=4
ROWSPAN Expandir una celda varias filas rowspan=4
]]> http://www.zoneartcss.com/general/guia-practica-de-html/feed/ 0 Efecto Page Peel Con jQuery & CSS http://www.zoneartcss.com/webdesign/css/efecto-page-peel-con-jquery-css/ http://www.zoneartcss.com/webdesign/css/efecto-page-peel-con-jquery-css/#comments Fri, 31 Jul 2009 02:28:03 +0000 Liz Palacios http://www.zoneartcss.com/?p=411

Dejate doblar con - Page Peel effect

Hola les mostrare como crear el efecto de paginacion en tu Web. La mayoria de las veces esto lo crean con flash, pero les voy a mostrar una manera mas rapida y sencilla de hacerlo.
Les muestro como:

1ro vamos a crear el contenedor de nuestra esquina paginada.

1
2
3
4
5
6

<div id="pageflip">
	<a href="#">
		<img src="page_flip.png" alt="" />
		<span class="msg_block">Subscribe via RSS</span>
	</a>
</div>

Ahora creamos nuestro style css, establecemos nuestra imagen de la esquina a un tamaño pequeño (50px por 50px) por defecto y establecemos el posicionamiento absoluto de nuestro span en la esquina superior derecha.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#pageflip {
	position: relative;
}
#pageflip img {
	width: 50px; height: 52px;
	z-index: 99;
	position: absolute;
	right: 0; top: 0;
	-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
	width: 50px; height: 50px;
	position: absolute;
	z-index: 50;
	right: 0; top: 0;
	background: url(subscribe.png) no-repeat right top; /* Imagen oculta a mostrar */
	text-indent: -9999px;
}

Y por ultimo nuestro codigo js, antes debemos llamar a nuestro archivo jQuery.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$("#pageflip").hover(function() { //On hover...
	$("#pageflip img , .msg_block").stop()
		.animate({ // Animacion de nuestro div (Width + height)
			width: '307px',
			height: '319px'
		}, 500);
	} , function() {
	$("#pageflip img").stop() //Al estar fuera volvemos a nuestro tamaño original 50x52
		.animate({
			width: '50px',
			height: '52px'
		}, 220);
	$(".msg_block").stop() //Al estar fuera volvemos a nuestro tamaño original 50x52
		.animate({
			width: '50px',
			height: '50px'
		}, 200);

Les dejo el link de la DEMO EL LINEA

]]> http://www.zoneartcss.com/webdesign/css/efecto-page-peel-con-jquery-css/feed/ 3 Cortar Imagenes desde tu Pagina http://www.zoneartcss.com/general/cortar-imagenes-desde-tu-pagina/ http://www.zoneartcss.com/general/cortar-imagenes-desde-tu-pagina/#comments Fri, 31 Jul 2009 01:32:08 +0000 Liz Palacios http://www.zoneartcss.com/?p=396

Cintilla HTML

Hola!! Esta vez les voy a mostrar como utilizar Jcrop es una libreria que junto a Jquery te permite cortar imagenes online (cortar imagenes tipo facebook :) ). La libreria es muy facil de usar!!
Les muestro como:


Paso 1: En nuestro archivo tenemos que colocar este codigo php para generar la imgen que vamos a recortar luego:

1
2
3
4
5
6
7
8
9
10
11
12
13

      if ($_SERVER['REQUEST_METHOD'] == 'POST')
      {
      $targ_w = $targ_h = 150; // Es el tamaño que tendra nustra imagen al momento de cortarla.
      $jpeg_quality = 90;// Es la calidad que tendra nuestra Imagen.
      $src = 'demo_files/raphaxx3.jpg'; //En este paso seleccionamos que imagen vamos a cargar para luego cortarla.
      $img_r = imagecreatefromjpeg($src);
      $dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
      imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
      $targ_w,$targ_h,$_POST['w'],$_POST['h']);
      header('Content-type: image/jpeg');
      imagejpeg($dst_r,null,$jpeg_quality);
      exit;
      }

Paso2 : Incluimos los archivos JavaScript y css de la libreria entre las etiquetas “head”. Sin esto obviamente no va a funcionar:

1

<script src="js/jquery.pack.js"></script> <!-- Incluimos la libreria de jQuery --> <script src="js/jquery.Jcrop.pack.js"></script> <!-- Incluimos la libreria de jQuery - Jcrop -->

Paso3: Tambien dentro de nuestro archivo en el
del archivo pegamos este codigo javascript para generar nuestro archivo para luego cortarlo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

      <script type="text/javascript">
                  jQuery(function(){       
                      jQuery('#cropbox').Jcrop({
                          aspectRatio: 1,
                          onSelect: updateCoords
                      });
 
                  });
 
                  function updateCoords(c)
                  {
                      jQuery('#x').val(c.x);
                      jQuery('#y').val(c.y);
                      jQuery('#w').val(c.w);
                      jQuery('#h').val(c.h);
 
                  };
 
 
                  function checkCoords()
 
                  {
 
                      if (parseInt(jQuery('#x').val())) return true;
 
                      alert('Porfavor seleccione un area de la imagen.'); <!  Configuramos msj de error si no seleccionamos que parte de la imagen vamos a cortar -->
 
                      return false;
 
                  };
</script>

Bueno eso fue todo!!!
Les paso el link del DEMO EN LINEA
Y el LINK de descarga de los Archivos.

]]> http://www.zoneartcss.com/general/cortar-imagenes-desde-tu-pagina/feed/ 0 Comentarios Condicionales para IE http://www.zoneartcss.com/webdesign/css/comentarios-condicionales-para-ie/ http://www.zoneartcss.com/webdesign/css/comentarios-condicionales-para-ie/#comments Thu, 16 Jul 2009 04:15:17 +0000 miguelortega http://www.zoneartcss.com/?p=257

Comentarios condicionales para internet explorer

Es muy util, tanto CSS, como JS (javascript), fijar condiciones detectando el navegador que estamos utilizando.
Esto solo aplica para los “internet explorer’s” ya que los comentarios condicionales fueron creados para microsoft.

Para que sirve?

Bueno su trabajo es ocultarse para que los navegadores desentes (todos menos ie) no lean dichas lineas comentadas…

Como lo aplico?

Primero deben estar colocados dentro de nuestro <head> y entonces…

Aplicando Condicion

1
2
3

<!--[if condicion ie]> 
Aqui el <strong>HTML</strong> que solo interpretara <strong>IE</strong> donde "condicion" debe variar segun la version... que elijamos
<![endif]–>

Escoger una version

Acontinuacion las variaciones de “condicion” que es donde escogemos la version o versiones que haremos para que lo interprete IE.
Y al igual que “X” es la version del IE, , 5.5, 6, 7, 8.

1
2
3
4
5
6
7
8
9
10
11
12

 IE  
     Cualquier versión de Internet Explorer  
 lt IE X  
    Versiones inferiores a X  
 lte IE X  
     Versiones inferiores o iguales a X  
 IE X  
     Solo para la version X  
 gte IE X  
     Versiones superiores o iguales a X  
 gt IE X  
     Versiones superiores a X

Comentario Condicional IE6 para hoja de estilos CSS

Acontinuacion un ejemplo para usar la condicion a “cualquier IE” y que los navegadores decentes no veran.

1
2
3
4
5
6

<head>  
<link href="firefox_y_otros.css" rel="stylesheet" type="text/css">  
<!--[if IE]>  
<link href="cualquier_IE.css" rel="stylesheet" type="text/css">  
<![endif]-->
</head>

Comentarios Condicionales para IE

Bueno aqui les dejo las variaciones que puedes hacer, y declarar las condiciones que necesites.

Para condicionar una version del IE en especifico

1
2
3
4

<!--[if IE 5.5]>Para internet explorer 5.5<![endif]-->  
<!--[if IE 6]>Para internet explorer 6<![endif]-->  
<!--[if IE 7]>Para internet explorer 7<![endif]-->  
<!--[if IE 8]>Para internet explorer 8<![endif]-->

Para condicionar una version del IE en especifico y sus superiores

1
2
3
4

<!--[if gte IE 5.5]>Para internet explorer 5.5 y superiores<![endif]-->
<!--[if gte IE 6]>Para internet explorer 6 y superiores<![endif]-->
<!--[if gte IE 7]>Para internet explorer 7 y superiores<![endif]-->
<!--[if gte IE 8]>Para internet explorer 8 y superiores<![endif]-->

Para condicionar sus versiones superiores a la elegida

1
2
3
4

<!--[if gt IE 5.5]>Para versiones superiores a internet explorer 5.5<![endif]-->
<!--[if gt IE 6]>Para versiones superiores a internet explorer 6<![endif]-->
<!--[if gt IE 7]>Para versiones superiores a internet explorer 7<![endif]-->
<!--[if gt IE 8]>Para versiones superiores a internet explorer 8<![endif]-->

Para condicionar sus versiones inferiores a la elegida

1
2
3
4

<!--[if gt IE 5.5]>Para internet explorer 5.5 e inferiores<![endif]-->
<!--[if lt IE 6]>Para internet explorer 6 e inferiores<![endif]-->
<!--[if lt IE 7]>Para internet explorer 7 e inferiores<![endif]-->
<!--[if lt IE 8]>Para internet explorer 8 e inferiores<![endif]-->

Conclusion de las condicionales y/o sus variaciones de estas.

1
2
3
4

gt: greater than (version mayor que).
gte: greater than equal (version igual o mayor que).
lt: lower than (version menor que).
lte: lower than equal (version igual o menor que).
]]> http://www.zoneartcss.com/webdesign/css/comentarios-condicionales-para-ie/feed/ 0 WTF is CSS? – manual basico CSS http://www.zoneartcss.com/webdesign/css/wtf-is-css-manual-basico-css/ http://www.zoneartcss.com/webdesign/css/wtf-is-css-manual-basico-css/#comments Mon, 06 Jul 2009 03:44:17 +0000 miguelortega http://www.zoneartcss.com/?p=165

Que cara?... que demo... what the...

Bueno no soy un programador, pero si tengo ciertas habilidades en el CSS, no me considero experto pero si con los conocimientos suficientes, y bueno este lenguaje que en mi opinión tonta y personal no considero muy de programación sino de estrategia y sobre todo paciencia.

Primero lo básico para dar estilos es importante saber a quien se lo estamos dando vale?… Es un poco tedio pero es fácil si tienes paciencia y un poco de razonamiento.
Cuando damos un estilo es necesario saber si es a una etiqueta HTML o una clase o bien a una ID. Y en castellano se traduce a:

Etiqueta HTML o bien


La siguiente propiedad CSS le dará el estilo a todas las etiquetas “div” de nuestro sitio,
(esta propiedad se le puede dar a otras etiquetas, table, span, h1, etc..)

1
2

/* Esto le dará un margen en la parte superior de 15px*/
div{ margin-top:15px; } /*el html es: <div></div>*/

Estilo a una clase “.miclase”
Esta propiedad CSS le dará el estilo a una o varias clases en nuestro sitio dependiendo a que elementos le hayamos asignado en nuestro código HTML.

(no importa si la etiqueta HTML es un “div”, “table”, “h1” o cualquier otro, ya que tendrá el estilo que le demos en el siguiente código, aquí lo importante es la clase y no su etiqueta.)

1
2
3
4
5
6
7
8
9
10

/* Esto le dará un margen en la parte superior de 15px a todos los elementos que contengan esta clase sin importar si es un “div”, o cualquier otra etiqueta HTML*/
.miclase{ margin-top:15px; }  /*el html es: <div class=”miclase”></div>*/
/*De igual manera podemos personalizarla a un nivel “semi-avanzado en CSS*/
div.miclase{ margin-top:15px; }  /*le dará el margen de 15px solo a los “div’s” que tengan esta clase ejemplo:<div class=”miclase”></div>*/
 
span.miclase{ margin-top:14px; } /* le dará el margen de 14px solo a los “span’s” que tengan esta clase ejemplo:<span class=”miclase”></span>*/
 
h3.miclase{ margin-top:13px; } /* le dará el margen de 13px solo a los “h3’s” que tengan esta clase ejemplo:<h3 class=”miclase”></h3>*/
 
/*todas las anteriores tuvieron asignada la misma clase, pero fue variando su margen dependiendo de su etiqueta HTML*/

Estilo a una ID #ESTILO
Esta propiedad CSS le dará el estilo a nuestra ID que por reglas HTML no se debe repetir en nuestro documento, es muy util para ahorrar codigo… cuando a nuestras ID’s les asignamos eventos en JS… y de paso le damos estilos… pero igual se pueden usar las 2.
(a veces sin querer se repite nuestra id, para estos casos se debe asignar una clase ya que un ID debe ser único. )

1
2
3
4
5

/* Esto le dará un margen en la parte superior de 15px*/
#ESTILO{ margin-top:15px; }
 
/*De igual manera se puede asignar el elemento HTML para tenerlo ordenado o bien para que no olvidemos que etiqueta era… enfin*/
div#ESTILO{ margin-top:15px; }

El punto es que cuando es una etiqueta HTML se escribe tal cual es, si es un “div” en el CSS es “div { }”, cuando es una clase lleva un punto antes
“.miclase { }” y cuando es una ID lleva un signo de gato antes “#ESTILO”.

Esto fue una extencion de un “manual” que tenia para hacer templates y mejor explicado chao!…

]]> http://www.zoneartcss.com/webdesign/css/wtf-is-css-manual-basico-css/feed/ 0