css, Diseño web
Tutoriales de CSS
0 votos
Tutoriales de CSS
Escrito por
admin
(síguele en Google+
Pero para quienes comienzan a interiorizarse con este tipo de estructuras y carecen de conocimientos prácticos, los tutoriales de CSS son una gran ayuda, los mismos se pueden encontrar en gran numero en la red, basados en ejemplos que para su aplicación no requieren más que un formateador de texto cómo el que podremos encontrar en Windows bajo “notepad”, o en Linux cómo “vi”.
Una de las características más trascedentes del lenguaje de hiper texto o también conocido como HTML, es la división de su estructura lógica, generando por separado, la estructura funcional de la decorativa o también denominado estilo. CSS, es el la plantilla creada a partir de código HTML para crear el estilo de nuestro sitio, sus etiquetas y características son similares pero destinadas únicamente a la manipulación del estilo.
La plantilla CSS , responde al tipo de fuente, fondo de nuestra pagina, manipulación de colores, etc, la misma se encuentra vinculada en el index html, donde especifica mediante una cadena de código cual es el archivo css del cual se extrae el estilo.
[sourcecode language="css"]
Mi primera página con estilo</ title></p>
<link rel="stylesheet" href="miestilo.css">
[/sourcecode]</p>
<div style="text-align:center;margin:10px 0px;"><!-- Banner bfd_banner_336_280_abajo para blogsfarm en rojo -->
<script type='text/javascript'><!--//<![CDATA[
var m3_u = (location.protocol=='https:'?'https://anuncios.blogsfarm.com/servidor/www/delivery/ajs.php':'http://anuncios.blogsfarm.com/servidor/www/delivery/ajs.php');
var m3_r = Math.floor(Math.random()*99999999999);
if (!document.MAX_used) document.MAX_used = ',';
document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
document.write ("?zoneid=780");
document.write ('&cb=' + m3_r);
if (document.MAX_used != ',') document.write ("&exclude=" + document.MAX_used);
document.write (document.charset ? '&charset='+document.charset : (document.characterSet ? '&charset='+document.characterSet : ''));
document.write ("&loc=" + escape(window.location));
if (document.referrer) document.write ("&referer=" + escape(document.referrer));
if (document.context) document.write ("&context=" + escape(document.context));
if (document.mmm_fo) document.write ("&mmm_fo=1");
document.write ("'></scr"+"ipt>");
//]]>--></script><noscript><a href='http://anuncios.blogsfarm.com/servidor/www/delivery/ck.php?n=ab7f458a&cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'><img src='http://anuncios.blogsfarm.com/servidor/www/delivery/avw.php?zoneid=780&cb=INSERT_RANDOM_NUMBER_HERE&n=ab7f458a' border='0' alt='' /></a></noscript>
</div><p>Se trata de comenzar a idealizar los resultados bajo el lenguaje, para ello debemos tener pleno conocimiento de características bien marcadas cómo la gama de colores hexadecimal o los cambios que la sintaxis en las líneas de código generan.</p>
<p>Es así que si está buscando<strong> tutoriales de CSS</strong>, le recomendamos que comience tomando ejemplos sencillos, aplicando cambios y visualizando cuales son los resultados obtenidos en base a los mismo.</p>
<p>También encontraremos tutoriales de CSS de carácter multimedia o interactivo, estos son muy comunes bajo el formato de presentación flash o videos que encontraremos en sitios cómo el popular Youtube.</p>
<p>Allí los usuarios más experimentados crean tutoriales de CSS que demuestran cómo afectan los cambios en el hiper texto los resultados estéticos en la búsqueda del estilo que más se adecue a nuestras necesidades.</p>
<p>También encontremos muchos tutoriales de CSS que se destinan a una herramienta en particular, ya que existen varios editores de estilo únicamente, que permiten de forma grafica y evitando el manejo hexadecimal conformar la plantilla deseada, facilitando la tarea y modificando en background el código que se presenta detrás del estilo.</p>
<!-- see gallery_shortcode() in wp-includes/media.php -->
<div id='gallery-1' class='gallery galleryid-22 gallery-columns-3 gallery-size-thumbnail'><dl class='gallery-item'>
<dt class='gallery-icon'>
<a href='http://programaciondesarrollo.es/tutoriales-de-css/5-12/' title='5'><img width="150" height="148" src="http://programaciondesarrollo.es/wp-content/uploads/511-150x148.jpg" class="attachment-thumbnail" alt="5" /></a>
</dt></dl><dl class='gallery-item'>
<dt class='gallery-icon'>
<a href='http://programaciondesarrollo.es/tutoriales-de-css/1-12/' title='1'><img width="150" height="150" src="http://programaciondesarrollo.es/wp-content/uploads/111-150x150.jpg" class="attachment-thumbnail" alt="1" /></a>
</dt></dl><dl class='gallery-item'>
<dt class='gallery-icon'>
<a href='http://programaciondesarrollo.es/tutoriales-de-css/2-12/' title='2'><img width="150" height="150" src="http://programaciondesarrollo.es/wp-content/uploads/211-150x150.jpg" class="attachment-thumbnail" alt="2" /></a>
</dt></dl><br style="clear: both" /><dl class='gallery-item'>
<dt class='gallery-icon'>
<a href='http://programaciondesarrollo.es/tutoriales-de-css/3-12/' title='3'><img width="150" height="116" src="http://programaciondesarrollo.es/wp-content/uploads/311-150x116.jpg" class="attachment-thumbnail" alt="3" /></a>
</dt></dl><dl class='gallery-item'>
<dt class='gallery-icon'>
<a href='http://programaciondesarrollo.es/tutoriales-de-css/4-12/' title='4'><img width="145" height="150" src="http://programaciondesarrollo.es/wp-content/uploads/411-145x150.jpg" class="attachment-thumbnail" alt="4" /></a>
</dt></dl><dl class='gallery-item'>
<dt class='gallery-icon'>
<a href='http://programaciondesarrollo.es/tutoriales-de-css/6-12/' title='6'><img width="150" height="150" src="http://programaciondesarrollo.es/wp-content/uploads/611-150x150.jpg" class="attachment-thumbnail" alt="6" /></a>
</dt></dl><br style="clear: both" /><dl class='gallery-item'>
<dt class='gallery-icon'>
<a href='http://programaciondesarrollo.es/tutoriales-de-css/7-12/' title='7'><img width="150" height="150" src="http://programaciondesarrollo.es/wp-content/uploads/711-150x150.jpg" class="attachment-thumbnail" alt="7" /></a>
</dt></dl><dl class='gallery-item'>
<dt class='gallery-icon'>
<a href='http://programaciondesarrollo.es/tutoriales-de-css/8-12/' title='8'><img width="150" height="150" src="http://programaciondesarrollo.es/wp-content/uploads/81-150x150.jpg" class="attachment-thumbnail" alt="8" /></a>
</dt></dl><dl class='gallery-item'>
<dt class='gallery-icon'>
<a href='http://programaciondesarrollo.es/tutoriales-de-css/9-12/' title='9'><img width="150" height="150" src="http://programaciondesarrollo.es/wp-content/uploads/911-150x150.jpg" class="attachment-thumbnail" alt="9" /></a>
</dt></dl><br style="clear: both" /><dl class='gallery-item'>
<dt class='gallery-icon'>
<a href='http://programaciondesarrollo.es/tutoriales-de-css/10-12/' title='10'><img width="150" height="150" src="http://programaciondesarrollo.es/wp-content/uploads/1011-150x150.jpg" class="attachment-thumbnail" alt="10" /></a>
</dt></dl>
<br style='clear: both;' />
</div>
<p><span style="color: #000000;"><span><span style="font-size: x-small;"><span style="font-size: small;"><strong>ima: <a href="http://ayudawordpress.com/tutoriales-ajax-javascript-css-symfony-y-xhtml-gratis/">1</a>, <a href="http://tutorialesdeprogramacion.blogspot.com/2009_03_01_archive.html">2</a>, <a href="http://cachi.bligoo.com/tag/tutorial">3</a>, <a href="http://www.altatube.com/2009/12/tutorial-css-avanzado.html">4</a>, <a href="http://milrecursos.com/etiqueta/tutoriales/page/5/">5</a>, <a href="http://ceslava.com/blog/cmo-crear-icono-rss-con-css-vectorial-y-cross-browsers/">6</a>, <a href="http://www.tutorialesenlaweb.com/desarrollo-web/html-y-css/efecto-de-sombra-en-una-tipografia-con-css/">7</a>, <a href="http://www.cssblog.es/84-recursos-y-consejos-sobre-css/">8</a>, <a href="http://www.todosoluciones.es/2008/10/03/documentacion-y-recursos-sobre-hojas-de-estilo-css/">9</a>, <a href="http://www.comolohago.cl/category/diseno-web/css/page/2/">10</a></strong></span></span></span></span></p>
<div id='nr_fo_bot_of_post'></div> </section> <!-- end article section -->
<footer class="article-footer">
<p class="tags"><span class="tags-title">Etiquetas :</span> <a href="http://programaciondesarrollo.es/tag/css-2/" rel="tag">CSS</a>, <a href="http://programaciondesarrollo.es/tag/tutorial/" rel="tag">tutorial</a>, <a href="http://programaciondesarrollo.es/tag/tutorial-css/" rel="tag">Tutorial CSS</a>, <a href="http://programaciondesarrollo.es/tag/tutoriales-css/" rel="tag">Tutoriales CSS</a>, <a href="http://programaciondesarrollo.es/tag/tutoriales-de-css/" rel="tag">Tutoriales de CSS</a></p> <div class="social-networks-bottom">
<div class="background-social">
<div class="floatLeft">
<div class="social-networksDown">
<div class="fb_like_div">
<iframe src="http://www.facebook.com/widgets/like.php?href=http://programaciondesarrollo.es/tutoriales-de-css/&layout=button_count&show_faces=false&width=110&action=like&font&colorscheme=light&height=20&locale=es_ES" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:24px;" allowTransparency="true"></iframe>
</div>
<div class="g_plus">
<div class="g-plusone" data-size="medium" data-href="http://programaciondesarrollo.es/tutoriales-de-css/"></div>
</div>
<div class="twitter">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://programaciondesarrollo.es/tutoriales-de-css/" data-lang="es">Twittear</a>
</div>
</div>
</div>
<div class="comments_button_bottom">
<div style="float:left;" class="number_comments_bottom">0 </div><div class="floatRight"> comentarios</div> </div>
</div>
<div class="escribe-comentario">
<a href="#comments">
<img src="http://programaciondesarrollo.es/wp-content/themes/canguro/images/rojo/bocadilloColorGrande.png"/>
<div class="texto">Escribe un comentario</div>
</a>
</div>
</div>
<div align="center">
<div class="publi" align="left">
<!--/* OpenX Javascript Tag v2.8.1 */-->
<script type='text/javascript'><!--//<![CDATA[
var m3_u = (location.protocol=='https:'?'https://anuncios.blogsfarm.com/servidor/www/delivery/ajs.php':'http://anuncios.blogsfarm.com/servidor/www/delivery/ajs.php');
var m3_r = Math.floor(Math.random()*99999999999);
if (!document.MAX_used) document.MAX_used = ',';
document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
document.write ("?zoneid=524");
document.write ('&cb=' + m3_r);
if (document.MAX_used != ',') document.write ("&exclude=" + document.MAX_used);
document.write (document.charset ? '&charset='+document.charset : (document.characterSet ? '&charset='+document.characterSet : ''));
document.write ("&loc=" + escape(window.location));
if (document.referrer) document.write ("&referer=" + escape(document.referrer));
if (document.context) document.write ("&context=" + escape(document.context));
if (document.mmm_fo) document.write ("&mmm_fo=1");
document.write ("'></scr"+"ipt>");
//]]>--></script><noscript><a href='http://anuncios.blogsfarm.com/servidor/www/delivery/ck.php?n=a5561137&cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'><img src='http://anuncios.blogsfarm.com/servidor/www/delivery/avw.php?zoneid=524&cb=INSERT_RANDOM_NUMBER_HERE&n=a5561137' border='0' alt='' /></a></noscript>
</div>
</div>
<div class="block top_separator">
<span class="title">También te puede interesar...</span>
<div class="top_entry_long"></div>
<div class="related_posts">
<div class="entry_related right_separator">
<a href="http://programaciondesarrollo.es/border-css/">
<img src="http://programaciondesarrollo.es/wp-content/themes/canguro/timthumb.php?src=http://programaciondesarrollo.es/wp-content/uploads/44.jpg&w=135&h=101&zc=1&q=100" width="135px" height="101px"/>
</a>
<div class="text">
<a class="link-title" href="http://programaciondesarrollo.es/border-css/">border css <span class="more"> <button type="button" onclick="window.location.href='http://programaciondesarrollo.es/border-css/'" class="readMoreSmall" title="leer más">leer más >></button></span>
</a>
</div>
</div>
<div class="entry_related right_separator">
<a href="http://programaciondesarrollo.es/tutorial-css/">
<img src="http://programaciondesarrollo.es/wp-content/themes/canguro/timthumb.php?src=http://programaciondesarrollo.es/wp-content/uploads/75.jpg&w=135&h=101&zc=1&q=100" width="135px" height="101px"/>
</a>
<div class="text">
<a class="link-title" href="http://programaciondesarrollo.es/tutorial-css/">Tutorial CSS <span class="more"> <button type="button" onclick="window.location.href='http://programaciondesarrollo.es/tutorial-css/'" class="readMoreSmall" title="leer más">leer más >></button></span>
</a>
</div>
</div>
<div class="entry_related right_separator">
<a href="http://programaciondesarrollo.es/background-css/">
<img src="http://programaciondesarrollo.es/wp-content/themes/canguro/timthumb.php?src=http://programaciondesarrollo.es/wp-content/uploads/26.jpg&w=135&h=101&zc=1&q=100" width="135px" height="101px"/>
</a>
<div class="text">
<a class="link-title" href="http://programaciondesarrollo.es/background-css/">background css <span class="more"> <button type="button" onclick="window.location.href='http://programaciondesarrollo.es/background-css/'" class="readMoreSmall" title="leer más">leer más >></button></span>
</a>
</div>
</div>
</div>
</div>
<div class="top_entry_long"></div>
<div class="separator"></div>
</footer> <!-- end article footer -->
<!-- You can start editing here. -->
<h3 id="comment-form-title" class="h2">Deja tu comentario</h3>
<section id="respond" class="respond-form">
<div id="cancel-comment-reply">
<p class="small"><a rel="nofollow" id="cancel-comment-reply-link" href="/tutoriales-de-css/#respond" style="display:none;">Click here to cancel reply.</a></p>
</div>
<form action="http://programaciondesarrollo.es/wp-comments-post.php" method="post" id="commentform" onSubmit="javascript:if(document.getElementById('name_facebook_profile').value != '') publisStream('IMAGEN_LOGO', 'http://programaciondesarrollo.es/tutoriales-de-css/', 'Tutoriales de CSS',' Pero para quienes comienzan a interiorizarse con este tipo de estructuras y carecen de conocimientos prácticos, los tutoriales de CSS son una gran ayuda, los mismos se pueden encontrar en gran numero en la red, basados en ejemplos que para su aplicación no requieren más que un formateador de texto cómo el que podremos encontrar en Windows bajo “notepad”, o en Linux cómo “vi”. Una de las características.'); return true;">
<p><textarea name="comment" id="comment" placeholder="Escribe aquí tu comentario" tabindex="4"></textarea></p>
<div id="conectar_facebook">
<ul id="comment-form-elements" class="clearfix">
<li>
<div class="fb-login-button" scope="email, publish_stream">
Entrar con Facebook
</div>
</li>
<li>
<label for="author">Nombre</label>
<input class="inputComment" type="text" name="author" id="author" value="" placeholder="Nombre(obligatorio)" tabindex="1" aria-required='true' />
</li>
<li>
<label for="email">e-Mail</label>
<input class="inputComment" type="email" name="email" id="email" value="" placeholder="Escribe aqui tu e-mail(obligatorio)" tabindex="2" aria-required='true' />
<small>(No será publicado)</small>
</li>
<li>
<label for="url">Web</label>
<input class="inputComment" type="url" name="url" id="url" value="" placeholder="Escribe aquí tu web" tabindex="3" />
</li>
</ul>
</div>
<p>
<input name="submit" type="image" id="submit" class="publicar" tabindex="5" value="" src="http://programaciondesarrollo.es/wp-content/themes/canguro/images/publicar.png"/>
<input type='hidden' name='comment_post_ID' value='22' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</p>
<div class="alert info">
<p id="allowed_tags" class="small"><strong>XHTML:</strong> You can use these tags: <code><a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> </code></p>
</div>
<p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="9ef10885fc" /></p>
<p style="clear: both;" class="subscribe-to-comments">
<input type="checkbox" name="subscribe" id="subscribe" value="subscribe" style="width: auto;" />
<label for="subscribe">Notificarme de los comentarios por e-mail</label>
</p>
</form>
</section>
<h3 id="comments" name="comments"><span>Sin</span> Comentarios</h3>
<nav id="comment-nav">
<ul class="clearfix">
<li></li>
<li></li>
</ul>
</nav>
<ol class="commentlist">
</ol>
<nav id="comment-nav">
<ul class="clearfix">
<li></li>
<li></li>
</ul>
</nav>
</article> <!-- end article -->
</div> <!-- end #main -->
<div id="sidebar-line">
<div id="sidebar1" class="sidebar fourcol first clearfix" role="complementary">
<!--/* OpenX Javascript Tag v2.8.1 */-->
<script type='text/javascript'><!--//<![CDATA[
var m3_u = (location.protocol=='https:'?'https://anuncios.blogsfarm.com/servidor/www/delivery/ajs.php':'http://anuncios.blogsfarm.com/servidor/www/delivery/ajs.php');
var m3_r = Math.floor(Math.random()*99999999999);
if (!document.MAX_used) document.MAX_used = ',';
document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
document.write ("?zoneid=518");
document.write ('&cb=' + m3_r);
if (document.MAX_used != ',') document.write ("&exclude=" + document.MAX_used);
document.write (document.charset ? '&charset='+document.charset : (document.characterSet ? '&charset='+document.characterSet : ''));
document.write ("&loc=" + escape(window.location));
if (document.referrer) document.write ("&referer=" + escape(document.referrer));
if (document.context) document.write ("&context=" + escape(document.context));
if (document.mmm_fo) document.write ("&mmm_fo=1");
document.write ("'></scr"+"ipt>");
//]]>--></script><noscript><a href='http://anuncios.blogsfarm.com/servidor/www/delivery/ck.php?n=a4f51c8f&cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'><img src='http://anuncios.blogsfarm.com/servidor/www/delivery/avw.php?zoneid=518&cb=INSERT_RANDOM_NUMBER_HERE&n=a4f51c8f' border='0' alt='' /></a></noscript>
<div align="center">
<div class="publi marginLeft" align="left">
<p>··PUBLICIDAD··</p>
<div class="banner">
<!-- Banner bfd_banner_160_600 para blogsfarm en rojo -->
<script type='text/javascript'><!--//<![CDATA[
var m3_u = (location.protocol=='https:'?'https://anuncios.blogsfarm.com/servidor/www/delivery/ajs.php':'http://anuncios.blogsfarm.com/servidor/www/delivery/ajs.php');
var m3_r = Math.floor(Math.random()*99999999999);
if (!document.MAX_used) document.MAX_used = ',';
document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
document.write ("?zoneid=778");
document.write ('&cb=' + m3_r);
if (document.MAX_used != ',') document.write ("&exclude=" + document.MAX_used);
document.write (document.charset ? '&charset='+document.charset : (document.characterSet ? '&charset='+document.characterSet : ''));
document.write ("&loc=" + escape(window.location));
if (document.referrer) document.write ("&referer=" + escape(document.referrer));
if (document.context) document.write ("&context=" + escape(document.context));
if (document.mmm_fo) document.write ("&mmm_fo=1");
document.write ("'></scr"+"ipt>");
//]]>--></script><noscript><a href='http://anuncios.blogsfarm.com/servidor/www/delivery/ck.php?n=a0a88b9b&cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'><img src='http://anuncios.blogsfarm.com/servidor/www/delivery/avw.php?zoneid=778&cb=INSERT_RANDOM_NUMBER_HERE&n=a0a88b9b' border='0' alt='' /></a></noscript>
</div>
</div>
</div>
<!-- SECCION DE POSTS QUE TE INTERESAN -->
<div class="block" >
<span class="title">Seguro que te interesa...</span>
<div class="top_entry"></div>
<div class="entry">
<a href="http://programaciondesarrollo.es/tutorial-css/">
<img src="http://programaciondesarrollo.es/wp-content/themes/canguro/timthumb.php?src=http://programaciondesarrollo.es/wp-content/uploads/75.jpg&w=100&h=75&zc=1&q=100" width="100px" height="75px"/>
</a>
<div class="text">
<a class="link-title" href="http://programaciondesarrollo.es/tutorial-css/">
Tutorial CSS </a>
<span class="more"> <button type="button" onclick="window.location.href='http://programaciondesarrollo.es/tutorial-css/'" class="readMoreSmall" title="leer más">leer más >></button></span>
</div>
</div>
<div class="top_entry"></div>
<div class="entry">
<a href="http://programaciondesarrollo.es/safari-el-navegador-web-de-apple/">
<img src="http://programaciondesarrollo.es/wp-content/themes/canguro/timthumb.php?src=http://programaciondesarrollo.es/wp-content/uploads/safari.jpg&w=100&h=75&zc=1&q=100" width="100px" height="75px"/>
</a>
<div class="text">
<a class="link-title" href="http://programaciondesarrollo.es/safari-el-navegador-web-de-apple/">
Safari, el navegador web de Apple </a>
<span class="more"> <button type="button" onclick="window.location.href='http://programaciondesarrollo.es/safari-el-navegador-web-de-apple/'" class="readMoreSmall" title="leer más">leer más >></button></span>
</div>
</div>
<div class="top_entry"></div>
<div class="entry">
<a href="http://programaciondesarrollo.es/conociendo-siglas-cms/">
<img src="http://programaciondesarrollo.es/wp-content/themes/canguro/timthumb.php?src=http://programaciondesarrollo.es/wp-content/uploads/cms.jpg&w=100&h=75&zc=1&q=100" width="100px" height="75px"/>
</a>
<div class="text">
<a class="link-title" href="http://programaciondesarrollo.es/conociendo-siglas-cms/">
Conociendo las siglas: CMS </a>
<span class="more"> <button type="button" onclick="window.location.href='http://programaciondesarrollo.es/conociendo-siglas-cms/'" class="readMoreSmall" title="leer más">leer más >></button></span>
</div>
</div>
<div class="top_entry"></div>
<div class="entry">
<a href="http://programaciondesarrollo.es/javascript-librerias-jquery/">
<img src="http://programaciondesarrollo.es/wp-content/themes/canguro/timthumb.php?src=http://programaciondesarrollo.es/wp-content/uploads/jquery.png&w=100&h=75&zc=1&q=100" width="100px" height="75px"/>
</a>
<div class="text">
<a class="link-title" href="http://programaciondesarrollo.es/javascript-librerias-jquery/">
Javascript, librerías JQuery </a>
<span class="more"> <button type="button" onclick="window.location.href='http://programaciondesarrollo.es/javascript-librerias-jquery/'" class="readMoreSmall" title="leer más">leer más >></button></span>
</div>
</div>
<div class="top_entry"></div>
<div class="entry">
<a href="http://programaciondesarrollo.es/insercion-videos-youtube-2/">
<img src="http://programaciondesarrollo.es/wp-content/themes/canguro/timthumb.php?src=http://programaciondesarrollo.es/wp-content/uploads/icono-youtube-300x300.png&w=100&h=75&zc=1&q=100" width="100px" height="75px"/>
</a>
<div class="text">
<a class="link-title" href="http://programaciondesarrollo.es/insercion-videos-youtube-2/">
Inserción de vídeos desde Youtube (II) </a>
<span class="more"> <button type="button" onclick="window.location.href='http://programaciondesarrollo.es/insercion-videos-youtube-2/'" class="readMoreSmall" title="leer más">leer más >></button></span>
</div>
</div>
</div>
<!-- SECCION DE BOTONERA PARA REDES SOCIALES -->
<div class="block">
<div class="title light_bar">Síguenos en...</div>
<div class="icons_follow">
<div class="icon">
<button type="button" onclick="window.open('http://twitter.com/programciondEs')" class="SidebarSocial" title="TWITTER">
<img src="http://programaciondesarrollo.es/wp-content/themes/canguro/images/twitter.png" alt="Síguenos en twitter"/>
</button>
</div>
<div class="icon">
<button type="button" onclick="window.open('')" class="SidebarSocial" title="RSS">
<img src="http://programaciondesarrollo.es/wp-content/themes/canguro/images/rss.png" alt="Síguenos por rss"/>
</button>
</div>
<div class="icon">
<button type="button" onclick="window.open('http://facebook.com/programacionydesarrolloes')" class="SidebarSocial" title="FACEBOOK">
<img src="http://programaciondesarrollo.es/wp-content/themes/canguro/images/facebook.png" alt="Síguenos en facebook"/>
</button>
</div>
<div class="icon">
<button type="button" onclick="window.open('https://plus.google.com/115002131942973991553')" class="SidebarSocial" title="GOOGLE+">
<img src="http://programaciondesarrollo.es/wp-content/themes/canguro/images/googleplus.png" alt="Síguenos en Google Plus"/>
</button>
</div>
</div>
</div>
<div class="block banner_300_250 publi marginTop">
<p>··PUBLICIDAD··</p>
<!--/* OpenX Javascript Tag v2.8.1 */-->
<script type='text/javascript'><!--//<![CDATA[
var m3_u = (location.protocol=='https:'?'https://anuncios.blogsfarm.com/servidor/www/delivery/ajs.php':'http://anuncios.blogsfarm.com/servidor/www/delivery/ajs.php');
var m3_r = Math.floor(Math.random()*99999999999);
if (!document.MAX_used) document.MAX_used = ',';
document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
document.write ("?zoneid=519");
document.write ('&cb=' + m3_r);
if (document.MAX_used != ',') document.write ("&exclude=" + document.MAX_used);
document.write (document.charset ? '&charset='+document.charset : (document.characterSet ? '&charset='+document.characterSet : ''));
document.write ("&loc=" + escape(window.location));
if (document.referrer) document.write ("&referer=" + escape(document.referrer));
if (document.context) document.write ("&context=" + escape(document.context));
if (document.mmm_fo) document.write ("&mmm_fo=1");
document.write ("'></scr"+"ipt>");
//]]>--></script><noscript><a href='http://anuncios.blogsfarm.com/servidor/www/delivery/ck.php?n=af5884c3&cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'><img src='http://anuncios.blogsfarm.com/servidor/www/delivery/avw.php?zoneid=519&cb=INSERT_RANDOM_NUMBER_HERE&n=af5884c3' border='0' alt='' /></a></noscript> </div>
<!-- SECCION DE TOP 5 ARTICULOS -->
<div class="block ">
<span class="title">
Top 5 artículos </span>
<div class="top_entry"></div>
<div class="clear"></div>
<div class="entry_mini">
<img class="numberImg" src="http://programaciondesarrollo.es/wp-content/themes/canguro/images/rojo/1.png" width="40px" height="45px"/>
<a href="http://programaciondesarrollo.es/php-substr/">
<img src="http://programaciondesarrollo.es/wp-content/themes/canguro/timthumb.php?src=http://programaciondesarrollo.es/wp-content/uploads/119.jpg&w=56&h=42&zc=1&q=100" width="56px" height="42px"/>
</a>
<div class="text">
<a class="link-title" href="http://programaciondesarrollo.es/php-substr/">
php substr </a>
<span class="more"> <button type="button" onclick="window.location.href='http://programaciondesarrollo.es/php-substr/'" class="readMoreSmall" title="leer más">leer más >></button></span>
</div>
</div>
<div class="entry_mini">
<img class="numberImg" src="http://programaciondesarrollo.es/wp-content/themes/canguro/images/rojo/2.png" width="40px" height="45px"/>
<a href="http://programaciondesarrollo.es/crear-una-red-social-con-elgg/">
<img src="http://programaciondesarrollo.es/wp-content/themes/canguro/timthumb.php?src=http://programaciondesarrollo.es/wp-content/uploads/elgg1.jpg&w=56&h=42&zc=1&q=100" width="56px" height="42px"/>
</a>
<div class="text">
<a class="link-title" href="http://programaciondesarrollo.es/crear-una-red-social-con-elgg/">
Crear una red social con Elgg </a>
<span class="more"> <button type="button" onclick="window.location.href='http://programaciondesarrollo.es/crear-una-red-social-con-elgg/'" class="readMoreSmall" title="leer más">leer más >></button></span>
</div>
</div>
<div class="entry_mini">
<img class="numberImg" src="http://programaciondesarrollo.es/wp-content/themes/canguro/images/rojo/3.png" width="40px" height="45px"/>
<a href="http://programaciondesarrollo.es/scripts-que-son-y-para-que-sirven/">
<img src="http://programaciondesarrollo.es/wp-content/themes/canguro/timthumb.php?src=http://programaciondesarrollo.es/wp-content/uploads/123.jpg&w=56&h=42&zc=1&q=100" width="56px" height="42px"/>
</a>
<div class="text">
<a class="link-title" href="http://programaciondesarrollo.es/scripts-que-son-y-para-que-sirven/">
Scripts, qué son y para qué sirven </a>
<span class="more"> <button type="button" onclick="window.location.href='http://programaciondesarrollo.es/scripts-que-son-y-para-que-sirven/'" class="readMoreSmall" title="leer más">leer más >></button></span>
</div>
</div>
<div class="entry_mini">
<img class="numberImg" src="http://programaciondesarrollo.es/wp-content/themes/canguro/images/rojo/4.png" width="40px" height="45px"/>
<a href="http://programaciondesarrollo.es/que-es-un-entorno-de-desarrollo-integrado-ide/">
<img src="http://programaciondesarrollo.es/wp-content/themes/canguro/timthumb.php?src=http://programaciondesarrollo.es/wp-content/uploads/2b-300x214.jpg&w=56&h=42&zc=1&q=100" width="56px" height="42px"/>
</a>
<div class="text">
<a class="link-title" href="http://programaciondesarrollo.es/que-es-un-entorno-de-desarrollo-integrado-ide/">
Qué es un entorno de desarrollo integrado, IDE </a>
<span class="more"> <button type="button" onclick="window.location.href='http://programaciondesarrollo.es/que-es-un-entorno-de-desarrollo-integrado-ide/'" class="readMoreSmall" title="leer más">leer más >></button></span>
</div>
</div>
<div class="entry_mini">
<img class="numberImg" src="http://programaciondesarrollo.es/wp-content/themes/canguro/images/rojo/5.png" width="40px" height="45px"/>
<a href="http://programaciondesarrollo.es/%c2%bfque-es-sdk/">
<img src="http://programaciondesarrollo.es/wp-content/themes/canguro/timthumb.php?src=http://programaciondesarrollo.es/wp-content/uploads/iphone_1-2_hack.jpg&w=56&h=42&zc=1&q=100" width="56px" height="42px"/>
</a>
<div class="text">
<a class="link-title" href="http://programaciondesarrollo.es/%c2%bfque-es-sdk/">
¿Qué es SDK? </a>
<span class="more"> <button type="button" onclick="window.location.href='http://programaciondesarrollo.es/%c2%bfque-es-sdk/'" class="readMoreSmall" title="leer más">leer más >></button></span>
</div>
</div>
</div>
<!-- SECCION DE CATEGORIAS Y 160_600 -->
<div class="block categories">
<span class="title light_bar">Categorías</span>
<ul>
<li><a href="/category/diseno-web">diseno-web <span class="more">(37)</span></a></li><li><a href="/category/uncategorized">uncategorized <span class="more">(35)</span></a></li><li><a href="/category/navegadores-de-internet">navegadores-de-internet <span class="more">(25)</span></a></li><li><a href="/category/redes-sociales">redes-sociales <span class="more">(17)</span></a></li><li><a href="/category/cms">cms <span class="more">(16)</span></a></li><li><a href="/category/html">html <span class="more">(15)</span></a></li><li><a href="/category/lenguajes-de-programacion">lenguajes-de-programacion <span class="more">(14)</span></a></li><li><a href="/category/sistemas-operativos-2">sistemas-operativos-2 <span class="more">(14)</span></a></li><li><a href="/category/php">php <span class="more">(12)</span></a></li><li><a href="/category/bases-de-datos">bases-de-datos <span class="more">(11)</span></a></li><li><a href="/category/wordpress">wordpress <span class="more">(11)</span></a></li><li><a href="/category/equipo">equipo <span class="more">(11)</span></a></li><li><a href="/category/tutoriales">tutoriales <span class="more">(10)</span></a></li><li><a href="/category/complementos-2">complementos-2 <span class="more">(9)</span></a></li><li><a href="/category/joomla">joomla <span class="more">(8)</span></a></li><li><a href="/category/sistemas-operativos-para-moviles">sistemas-operativos-para-moviles <span class="more">(8)</span></a></li><li><a href="/category/html5">html5 <span class="more">(7)</span></a></li><li><a href="/category/facebook">facebook <span class="more">(6)</span></a></li><li><a href="/category/mail">mail <span class="more">(6)</span></a></li><li><a href="/category/p2p">p2p <span class="more">(5)</span></a></li></ul>
</div>
<div class="block publi banner_160_600">
<p>··PUBLICIDAD··</p>
</div>
<div class="block">
<div class="fb-like-box"
data-href="http://www.facebook.com/programacionydesarrolloes"
data-width="300" data-height="260" data-show-faces="true"
data-stream="false" data-header="false"></div>
</div>
<div class="block banner_300_250 publi marginTop">
<p>··PUBLICIDAD··</p>
<div style="float:left;width:100%;border-bottom: 1px solid rgb(221, 221, 221);padding-bottom:10px;margin-top:10px">
<!--/* OpenX Javascript Tag v2.8.1 */-->
<script type='text/javascript'><!--//<![CDATA[
var m3_u = (location.protocol=='https:'?'https://anuncios.blogsfarm.com/servidor/www/delivery/ajs.php':'http://anuncios.blogsfarm.com/servidor/www/delivery/ajs.php');
var m3_r = Math.floor(Math.random()*99999999999);
if (!document.MAX_used) document.MAX_used = ',';
document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
document.write ("?zoneid=520");
document.write ('&cb=' + m3_r);
if (document.MAX_used != ',') document.write ("&exclude=" + document.MAX_used);
document.write (document.charset ? '&charset='+document.charset : (document.characterSet ? '&charset='+document.characterSet : ''));
document.write ("&loc=" + escape(window.location));
if (document.referrer) document.write ("&referer=" + escape(document.referrer));
if (document.context) document.write ("&context=" + escape(document.context));
if (document.mmm_fo) document.write ("&mmm_fo=1");
document.write ("'></scr"+"ipt>");
//]]>--></script><noscript><a href='http://anuncios.blogsfarm.com/servidor/www/delivery/ck.php?n=a93610c6&cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'><img src='http://anuncios.blogsfarm.com/servidor/www/delivery/avw.php?zoneid=520&cb=INSERT_RANDOM_NUMBER_HERE&n=a93610c6' border='0' alt='' /></a></noscript>
</div>
<div style="float:left;width:100%;border-bottom: 1px solid rgb(221, 221, 221);padding-bottom:10px;margin-top:10px">
<!-- Podría haber otro código aquí -->
</div>
<div style="float:left;width:100%;border-bottom: 1px solid rgb(221, 221, 221);padding-bottom:10px;margin-top:10px">
<!-- Podría haber otro código aquí -->
</div> </div>
<div class="block">
<div class="title light_bar">Más sobre css...</div>
<div class='row_entry_max'> <div class="entry_max right_thin_separator">
<a href="http://programaciondesarrollo.es/tutoriales-de-css/">
<img src="http://programaciondesarrollo.es/wp-content/themes/canguro/timthumb.php?src=http://programaciondesarrollo.es/wp-content/uploads/511.jpg&w=147&h=110&zc=1&q=100" width="147px" height="110px"/>
</a>
<div class="text">
<a class="link-title" href="http://programaciondesarrollo.es/tutoriales-de-css/">
Tutoriales de CSS
</a>
<span class="more"> <button type="button" onclick="window.location.href='http://programaciondesarrollo.es/tutoriales-de-css/'" class="readMoreSmall" title="leer más">leer más</button></span>
</div>
</div>
<div class="entry_max ">
<a href="http://programaciondesarrollo.es/tutorial-css/">
<img src="http://programaciondesarrollo.es/wp-content/themes/canguro/timthumb.php?src=http://programaciondesarrollo.es/wp-content/uploads/75.jpg&w=147&h=110&zc=1&q=100" width="147px" height="110px"/>
</a>
<div class="text">
<a class="link-title" href="http://programaciondesarrollo.es/tutorial-css/">
Tutorial CSS
</a>
<span class="more"> <button type="button" onclick="window.location.href='http://programaciondesarrollo.es/tutorial-css/'" class="readMoreSmall" title="leer más">leer más</button></span>
</div>
</div>
</div><div class='row_entry_max'> <div class="entry_max right_thin_separator">
<a href="http://programaciondesarrollo.es/background-css/">
<img src="http://programaciondesarrollo.es/wp-content/themes/canguro/timthumb.php?src=http://programaciondesarrollo.es/wp-content/uploads/26.jpg&w=147&h=110&zc=1&q=100" width="147px" height="110px"/>
</a>
<div class="text">
<a class="link-title" href="http://programaciondesarrollo.es/background-css/">
background css
</a>
<span class="more"> <button type="button" onclick="window.location.href='http://programaciondesarrollo.es/background-css/'" class="readMoreSmall" title="leer más">leer más</button></span>
</div>
</div>
<div class="entry_max ">
<a href="http://programaciondesarrollo.es/border-css/">
<img src="http://programaciondesarrollo.es/wp-content/themes/canguro/timthumb.php?src=http://programaciondesarrollo.es/wp-content/uploads/44.jpg&w=147&h=110&zc=1&q=100" width="147px" height="110px"/>
</a>
<div class="text">
<a class="link-title" href="http://programaciondesarrollo.es/border-css/">
border css
</a>
<span class="more"> <button type="button" onclick="window.location.href='http://programaciondesarrollo.es/border-css/'" class="readMoreSmall" title="leer más">leer más</button></span>
</div>
</div>
</div></div>
<script type='text/javascript'><!--//<![CDATA[
var m3_u = (location.protocol=='https:'?'https://anuncios.blogsfarm.com/servidor/www/delivery/ajs.php':'http://anuncios.blogsfarm.com/servidor/www/delivery/ajs.php');
var m3_r = Math.floor(Math.random()*99999999999);
if (!document.MAX_used) document.MAX_used = ',';
document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
document.write ("?zoneid=808");
document.write ('&cb=' + m3_r);
if (document.MAX_used != ',') document.write ("&exclude=" + document.MAX_used);
document.write (document.charset ? '&charset='+document.charset : (document.characterSet ? '&charset='+document.characterSet : ''));
document.write ("&loc=" + escape(window.location));
if (document.referrer) document.write ("&referer=" + escape(document.referrer));
if (document.context) document.write ("&context=" + escape(document.context));
if (document.mmm_fo) document.write ("&mmm_fo=1");
document.write ("'><\/scr"+"ipt>");
//]]>--></script><noscript><a href='http://anuncios.blogsfarm.com/servidor/www/delivery/ck.php?n=ae676087&cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'><img src='http://anuncios.blogsfarm.com/servidor/www/delivery/avw.php?zoneid=808&cb=INSERT_RANDOM_NUMBER_HERE&n=ae676087' border='0' alt='' /></a></noscript>
<script type='text/javascript'><!--//<![CDATA[
var m3_u = (location.protocol=='https:'?'https://anuncios.blogsfarm.com/servidor/www/delivery/ajs.php':'http://anuncios.blogsfarm.com/servidor/www/delivery/ajs.php');
var m3_r = Math.floor(Math.random()*99999999999);
if (!document.MAX_used) document.MAX_used = ',';
document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
document.write ("?zoneid=808");
document.write ('&cb=' + m3_r);
if (document.MAX_used != ',') document.write ("&exclude=" + document.MAX_used);
document.write (document.charset ? '&charset='+document.charset : (document.characterSet ? '&charset='+document.characterSet : ''));
document.write ("&loc=" + escape(window.location));
if (document.referrer) document.write ("&referer=" + escape(document.referrer));
if (document.context) document.write ("&context=" + escape(document.context));
if (document.mmm_fo) document.write ("&mmm_fo=1");
document.write ("'><\/scr"+"ipt>");
//]]>--></script><noscript><a href='http://anuncios.blogsfarm.com/servidor/www/delivery/ck.php?n=ae676087&cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'><img src='http://anuncios.blogsfarm.com/servidor/www/delivery/avw.php?zoneid=808&cb=INSERT_RANDOM_NUMBER_HERE&n=ae676087' border='0' alt='' /></a></noscript>
</div> </div>
</div> <!-- end #inner-content -->
</div> <!-- end #content -->
<footer class="footer" role="contentinfo">
<div id="sup_footer">
<div id="inner-footer" class="wrap clearfix">
<p class="info_bf">
Un blog de Blogsfarm Network SL | <a href="http://blogsfarm.com/about/exclusion-de-garantias-y-responsabilidad-condiciones-de-uso/" rel="nofollow">Aviso Legal</a> | <a href="http://blogsfarm.com/about/condiciones-de-uso-de-los-contenidos/" rel="nofollow">Condiciones de Uso y Licencia</a> | <a href="http://blogsfarm.com/contacto" rel="nofollow">Publicidad</a> | <a href="http://blogsfarm.com/contacto" rel="nofollow">Contacto</a>
</p>
<p class="source-org copyright floatRight">
© 2013 Programacion Desarrollo.
</p>
</div>
</div>
<!-- div id="inf_footer">
<div id="inner-footer" class="wrap clearfix">
<nav role="navigation">
</nav>
</div> <!-- end #inner-footer -->
</div -->
</footer> <!-- end footer -->
</div> <!-- end #container -->
<!-- all js scripts are loaded in library/bones.php -->
<style type='text/css'>.nrelate_flyout {display:block; right: -400px; bottom: 0px; width:360px;} #nrelate_flyout_open{display:block; right: -80px;bottom: 0px;} #nrelate_flyout_close{background: #fff url(http://programaciondesarrollo.es/wp-content/plugins/nrelate-flyout/images/close_window.gif) no-repeat 0 0} </style>
<div id="nrelate_flyout_1" class="nrelate nrelate_flyout nr_slideout_right nr_animate_type_slideout nrelate_animate_style_simplydk nrelate_huf nr_1col nr_100"></div>
<!--[if IE 6]>
<script type="text/javascript">jQuery('.nrelate_huf').removeClass('nrelate_huf');</script>
<![endif]-->
<script type="text/javascript">
/*<![CDATA[*/
function getScrollY() {
scrOfY = 0;
if( typeof( window.pageYOffset ) == "number" ) {
scrOfY = window.pageYOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
scrOfY = document.body.scrollTop;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
scrOfY = document.documentElement.scrollTop;
}
return scrOfY;
}
function nr_fo_get_closed_cookie(){
var NameOfCookie="nr_fo_closed";
if (document.cookie.length > 0) {
begin = document.cookie.indexOf(NameOfCookie+"=");
if (begin != -1) {
begin += NameOfCookie.length+1;
end = document.cookie.indexOf(";", begin);
if (end == -1)
end = document.cookie.length;
return unescape(document.cookie.substring(begin, end));
}
}
return "false";
}
function nr_fo_set_closed_cookie(value,domain) {
var NameOfCookie="nr_fo_closed";
var ExpireDate = new Date ();
ExpireDate.setTime(ExpireDate.getTime() + (7*24*60*60*1000));
document.cookie = NameOfCookie + "=" + value + "; expires=" + ExpireDate.toGMTString()+"; path=/" + "; domain="+domain ;
}
value=nr_fo_get_closed_cookie();
if(value=="false")
nr_fo_closed=false;
else
nr_fo_closed=true;
var nr_fo_hidden = true;
jQuery(function($){$(window).scroll(function() {var lastScreen;lastScreen = getScrollY() + $(window).height() < ($("#nr_fo_bot_of_post").offset().top) ? false : true;if (lastScreen && !nr_fo_closed && getScrollY()!=0 && nRelate.flyout_show) {$(".nrelate_flyout").stop().animate({"right":"0px"});nr_fo_hidden = false}else if (nr_fo_closed && lastScreen && getScrollY()!=0 && nRelate.flyout_show) {$("#nrelate_flyout_open").stop().animate({"right":"0px"});nr_fo_hidden=false;}else if (!nr_fo_hidden && !nr_fo_closed) {$(".nrelate_flyout").stop().animate({"right":"-400px"});nr_fo_hidden = true;}else if (!nr_fo_hidden && nr_fo_closed) {$("#nrelate_flyout_open").stop().animate({"right":"-80px"});nr_fo_hidden = true;}});$("#nrelate_flyout_close").live("click",function() { $(".nrelate_flyout").stop().animate({"right":"-400px"}); $("#nrelate_flyout_open").stop().animate({"right":"0px"}); nr_fo_closed = true; nr_fo_hidden = false; nr_fo_set_closed_cookie(true,"programaciondesarrollo.es");});$("#nrelate_flyout_open").live("click",function() { $("#nrelate_flyout_open").stop().animate({"right":"-80px"}); $(".nrelate_flyout").stop().animate({"right":"0px"});nr_fo_closed = false; nr_fo_hidden = false; nr_fo_set_closed_cookie(false,"programaciondesarrollo.es");});});
nRelate.domain = "programaciondesarrollo.es";
var entity_decoded_nr_url = jQuery('<div/>').html("http://api.nrelate.com/fow_wp/0.51.4/?tag=nrelate_flyout&keywords=Tutoriales+de+CSS&domain=programaciondesarrollo.es&url=http%3A%2F%2Fprogramaciondesarrollo.es%2Ftutoriales-de-css%2F&nr_div_number=1").text();
nRelate.getNrelatePosts(entity_decoded_nr_url);
/*]]>*/
</script>
<div id='nrelate_flyout_open' class='nrelate_animate_style_simplydk nr_slideout_right'></div><script type='text/javascript'>
/* <![CDATA[ */
var post_ratings = {"blog_url":"http:\/\/programaciondesarrollo.es\/"};
/* ]]> */
</script>
<script type='text/javascript' src='http://programaciondesarrollo.es/wp-content/plugins/post-ratings/post-ratings.js'></script>
<script type='text/javascript' src='http://programaciondesarrollo.es/wp-content/themes/canguro/library/js/scripts.js'></script>
<!-- network socials js -->
<!-- Google Plus script -->
<script type="text/javascript">
window.___gcfg = {lang: 'es'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!-- Twitter script -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</body>
</html> <!-- end page. what a ride! --> 
