prueba2

sábado, 20 de abril de 2013

<div id="section-<nombre de la sección>" class="section section-<nombre de la sección>">
... contenido ($content) ...
</div>
<div id="zone-<nombre de la zona>-wrapper" class="zone zone-<nombre de la zona>-wrapper">
<div id="zone-<nombre de la zona>" class="zone zone-<nombre de la zona>">
... contenido ($content) ...
</div>
</div>
<div id="region-<nombre de la región>" class="region region-<nombre de la región>">
<div class="region-inner region-<nombre de la región>-inner">
... contenido ($content) ...
</div>
</div>

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>

<b:skin><![CDATA[/*La hoja de estilos en Blogger se encuentra en la etiqueta b:skin*/

/* Content
----------------------------------------------- */
body, .body-fauxcolumn-outer {
font: normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #000000;
background: #ffffff url(http://2.bp.blogspot.com/-EAfLrcgdf9E/UOGZi4j_3CI/AAAAAAAAJ00/Qd0bIYA6biE/s0/bg.jpg) repeat scroll top left;
padding: 0 0 0 0;
}

html body .region-inner {
min-width: 0;
max-width: 100%;
width: auto;
}

a:link {
text-decoration:none;
color: #da8d3e;
}

a:visited {
text-decoration:none;
color: #da8d3e;
}

a:hover {
text-decoration:underline;
color: #000000;
}

.body-fauxcolumn-outer .fauxcolumn-inner {
background: transparent none repeat scroll top left;
_background-image: none;
}

.body-fauxcolumn-outer .cap-top { 
position: absolute;
z-index: 1;
height: 400px;
width: 100%;
background: #ffffff url(http://2.bp.blogspot.com/-EAfLrcgdf9E/UOGZi4j_3CI/AAAAAAAAJ00/Qd0bIYA6biE/s0/bg.jpg) repeat scroll top left;
}

.body-fauxcolumn-outer .cap-top .cap-left {
width: 100%;
background: transparent none repeat-x scroll top left;
_background-image: none;
}

.content-outer { 
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 0 #333333;
box-shadow: 0 0 0 rgba(0, 0, 0, .15);
margin-bottom: 1px;
}
.content-inner { 
padding: 10px 40px;
}
.content-inner {
background-color: transparent;
}

/* CABECERA
----------------------------------------------- */
.header-outer { 
background: transparent none repeat-x scroll 0 -400px;
_background-image: none;
}
.Header h1 { 
font: normal normal 40px 'Trebuchet MS',Trebuchet,Verdana,sans-serif;
color: #000000;
text-shadow: 0 0 0 rgba(0, 0, 0, .2);
}
.Header h1 a {
color: #000000;
}
.Header .description {
font-size: 18px;
color: #000000;
}
.header-inner .Header .titlewrapper {
padding: 22px 0;
}
.header-inner .Header .descriptionwrapper {
padding: 0 0;
}

/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
border-top: 0 solid #dddddd;
}
.tabs-inner .section:first-child ul {
margin-top: -1px;
border-top: 1px solid #dddddd;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
}
.tabs-inner .widget ul {
background: transparent none repeat-x scroll 0 -800px;
_background-image: none;
border-bottom: 1px solid #dddddd;
margin-top: 0;
margin-left: -30px;
margin-right: -30px;

}
.tabs-inner .widget li a {
display: inline-block;
padding: .6em 1em;
font: normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #000000;
border-left: 1px solid transparent;
border-right: 1px solid #dddddd;
}
.tabs-inner .widget li:first-child a {
border-left: none;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #000000;
background-color: #eeeeee;
text-decoration: none;
}

/* Columns
----------------------------------------------- */
.main-outer { 
border-top: 0 solid transparent;;
margin-left: 15px;
}
.fauxcolumn-left-outer .fauxcolumn-inner {  
border-right: 1px transparent;
}
.fauxcolumn-right-outer .fauxcolumn-inner {  
border-left: 1px solid transparent;
}

/* TITULARES
----------------------------------------------- */
h2 {
margin: 0 0 1em 0;
font: normal bold 11px 'Trebuchet MS',Trebuchet,Verdana,sans-serif;
color: #000000;
text-transform: uppercase;
}

/* Widgets
----------------------------------------------- */
.widget .zippy {
color: #999999;
text-shadow: 2px 2px 1px rgba(0, 0, 0, .1);
}
.widget .popular-posts ul {
list-style: none;
}

/* Posts
----------------------------------------------- */
.date-header span {
background-color: transparent;
color: #ffffff;
padding: 0.4em;
letter-spacing: 3px;
margin: inherit;
}
.main-inner {  
padding-top: 35px;
padding-bottom: 65px;
}
.main-inner .column-center-inner {  
padding: 0 0;
}
.main-inner .column-center-inner .section {
margin: 0 1em;
}
.post {
margin: 0 0 45px 0;
}
h3.post-title, .comments h4 {
font-family: 'Just Another Hand', cursiva ;
margin: .75em 0 0;
font-size:50px;
}
.post-body {
position: relative;
}

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 2px;
background: transparent;
border: 1px solid transparent;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

.post-body img, .post-body .tr-caption-container {
padding: 5px;
}
.post-body .tr-caption-container {
color: #666666;
}

.post-body .tr-caption-container img {
padding: 0;
background: transparent;
border: none;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 0 rgba(0, 0, 0, .1);
}

.post-header {
margin: 0 0 1.5em;
line-height: 1.6;
font-size: 90%;
}

.post-footer {
margin: 20px -2px 0;
padding: 5px 10px;
color: #666666;
background-color: transparent;
border-bottom: 1px solid #eeeeee;
line-height: 1.6;
font-size: 90%;
}

#comments .comment-author {
padding-top: 1.5em;
border-top: 1px solid #da8d3e;
background-position: 0 1.5em;
}
#comments .comment-author:first-child {
padding-top: 0;
border-top: none;
}
.avatar-image-container {
margin: .2em 0 0;
}
#comments .avatar-image-container img {
border: 1px solid transparent;
}

/* Comments
----------------------------------------------- */
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}
.comments .comments-content .loadmore a {
border-top: 1px solid #999999;
border-bottom: 1px solid #999999;
}
.comments .comment-thread.inline-thread {
background-color: transparent;
}
.comments .continue {
border-top: 2px solid #999999;
}

/* Accents
---------------------------------------------- */
.section-columns td.columns-cell {
border-left: 1px solid #da8d3e;
}
.blog-pager {
background: transparent url(//www.blogblog.com/1kt/simple/paging_dot.png) repeat-x scroll top center;
}
.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
background-color: transparent;
padding: 5px;
}
.footer-outer {
border-top: 1px dashed #bbbbbb;
}

/* subscribe
----------------------------------------------- */
#subscribe {
background-image: url("http://i11.photobucket.com/albums/a165/danakiller/wonderforest/january/subscribe.jpg");
background-repeat: no-repeat;
float: left;
height: 150px;
margin-left: 5px;
margin-top: -10px;
padding-left: 8px;
padding-top: 55px;
width: 235px;
}

/* Mobile
----------------------------------------------- */
body.mobile {
background-size: auto;
}
.mobile .body-fauxcolumn-outer {
background: transparent none repeat scroll top left;
}
.mobile .body-fauxcolumn-outer .cap-top {
background-size: 100% auto;
}
.mobile .content-outer {
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
box-shadow: 0 0 3px rgba(0, 0, 0, .15);
padding: 0 0;
}
body.mobile .AdSense {
margin: 0 -0;
}
.mobile .tabs-inner .widget ul {
margin-left: 0;
margin-right: 0;
}
.mobile .post {
margin: 0;
}
.mobile .main-inner .column-center-inner .section {
margin: 0;
}
.mobile .date-header span {
padding: 0.1em 10px;
margin: 0 -10px;
}
.mobile h3.post-title {
margin: 0;
}
.mobile .blog-pager {
background: transparent none no-repeat scroll top center;
}
.mobile .footer-outer {
border-top: none;
}
.mobile .main-inner, .mobile .footer-inner {
background-color: transparent;
}
.mobile-index-contents {
color: #000000;
}
.mobile-link-button {
background-color: #da8d3e;
}
.mobile-link-button a:link, .mobile-link-button a:visited {
color: #ffffff;
}
.mobile .tabs-inner .section:first-child {
border-top: none;
}
.mobile .tabs-inner .PageList .widget-content {
background-color: #eeeeee;
color: #000000;
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
}
.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
border-left: 1px solid #dddddd;
}

/* DISEÑO PROPIO */
body, .body-fauxcolumn-outer {background-color:transparent} 

.header-inner .Header .titlewrapper, .Header h1, .header-inner .Header #header-inner, #navbar, .sidebar h2, header-outer {display:none;}

img {vertical-align:top; padding:0; margin:0;}

.tabs-inner {padding:0px; margin:0}

div.content {
margin-left:0px;
margin:0;
padding:0;
}

div.content-inner { 
padding:0; margin:0;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ7Fl89Cx05LrA-mVBPyVhOY7hKkPmw5zg9iqiKyEm0Hngmj9bJHo0D4g2SJfYsbhwHPv3c-G63PdmiKj-fAEwzqHOnKbVrgjooMTXsD2KdMEAKU-7KKNXnpMp-lE1-M0Zqn7SBU4nKdM/s1600/contenido1.png); 
background-repeat:repeat-y;
position:absolute;
top:0px;
}

#topsidebar {
width:439px;
}

#subscribe {
width: 235px;
background-image:url(http://i11.photobucket.com/albums/a165/danakiller/wonderforest/january/subscribe.jpg);
float:left;
height:150px;
margin-left:5px;
background-repeat:no-repeat;
padding-top:55px;
padding-left:8px;
margin-top:-10px;
}

.bigad {
margin-left:9px;
}

#social {
position:fixed;
top:0px;
left:50%;
margin-left:-611px;
z-index:1000;
width:40px;
}

#backtotop {
position:fixed;
left:50%;
margin-left:-622px;
bottom:0px;
}

img {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
vertical-align: top;
}

h1.post-title, h1.entry-title {
background-color:#ffd88d;
height:24px;
width:557px;
position:relative;
margin-top:-35px;
left:92px;
padding-left:10px;
color:#ff6872;
text-transform:uppercase;
font-size:16px;
}

h1.post-title a {
color:#ff6872;}
h1.post-title a:hover {
color:#000}

.main-inner {
padding-top:0px;
padding-bottom:0px;
}

.main-inner .column-center-inner {
width:90%;
margin-left:45px;
margin-top:20px;
padding:0px;
}

h1.page-title {
background-color:#ffd88d;
height:24px;
width:645px;
position:relative;
margin-top:0px;
left:0px;
padding-left:10px;
color:#ff6872;
text-transform:uppercase;
font-size:16px;
font-weight:normal;
font-family:Oswald;
}

.footer-outer {
border-top:1px solid #bab7a6;
background-repeat:no-repeat;
margin-top:50px;
}

.comment-link {
background-color:#ff8b8a;
padding:5px;
}

.post-body {
padding-left:7px;
padding-right:15px;
width:98%
}

a.comment-link {
color:#fff;
text-transform:lowercase;
font-size:11px;
font-weight:bold}

h2.date-header{
left:0px;
z-index:10;
position:relative;
font-weight:normal;
background-color:#ff8b8a;
width:80px;
padding-top:0px;
padding:5px;
}

.date-header span {
color:#fff;
font-size:11px;
padding:10px;
}

.main-inner .column-right-inner {
width:310px;
margin-left:-10px;
color:#585858;
margin-top:-5px;
padding:5px;
}
.main-inner .column-left-inner .widget {
padding-bottom:10px;
}

.post-body img {
margin-left:-11px;
box-shadow:none;
padding:0;
max-width:640px;
max-height:auto;
border:none;
padding-bottom:3px
}

.section, .widget {
margin:0px; padding:0;
}

.footer-inner {
background-color:transparent;
padding:20px;
color:#000;
border:none;
text-align:left;
}

.footer-outer {
border:none}
div#Attribution1{
float:right;
display:none

.footer-inner .widget-content {
background:none;
width:100%}

#blog-pager {left:0px; background:none; font-size:24px;font-family: Oswald; text-transform:uppercase}

.post-footer {
border-color:#d1d1d1;
border-bottom-style:solid;
padding-top:30px;
height:40px;
background-image: url(http://i11.photobucket.com/albums/a165/danakiller/wonderforest/march/sharetweetetc.png:original);
background-position: 489px -102px;
background-repeat:no-repeat;
}

input.gsc-search-button {
background-color:#fff;
border:1px solid #000;
height:30px;
color:#000}
input.gsc-input {
height:28px;
font-family: Oswald;
}
div.main-inner {
margin-top:-0px}

.about {
font-size:10.5px;
color:#d79938;
width:153px;
height:47px;
position:absolute;
left:6px;
top:58px;
}

.newshead {
width:300px;
background-color:#ff8b8a;
color:#fff;
text-transform:uppercase;
text-align:center;
height:25px;
padding-top:3px;
font-size:16px;
font-family: Oswald;
}

.newsheadyel {
width:300px;
background-color:#f1af48;
color:#fff;
text-transform:uppercase;
text-align:center;
height:25px;
padding-top:3px;
font-size:16px;
font-family: Oswald;
}

.newssignup {
width:280px;
background-color:#fff;
text-align:center;
color:#000;
padding:10px;
}

div#comments h4 {
background-image:url(http://i11.photobucket.com/albums/a165/danakiller/wonderforest/january/commentbg.jpg);
background-repeat:no-repeat;
background-position:top left;
width:677px;
height:40px;
padding-top:57px;
}

}]]></b:skin>

<b:template-skin>
<b:variable default='960px' name='content.width' type='length' value='940px'/>
<b:variable default='0' name='main.column.left.width' type='length'/>
<b:variable default='310px' name='main.column.right.width' type='length'/>

<![CDATA[
body {
min-width: 1145px;
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: 1100px;
max-width: 1100px;
_width: 1100px;
}

.main-inner .columns {
padding-left: 0px;
padding-right: 340px;
}

.main-inner .fauxcolumn-center-outer {
left: 0px;
right: 340px;

/* IE6 does not respect left and right together */
_width: expression(this.parentNode.offsetWidth -
parseInt("0px") -
parseInt("340px") + 'px');
}

.main-inner .fauxcolumn-left-outer {
width: 0px;
}
.main-inner .fauxcolumn-right-outer {
width: 340px;
}
.main-inner .column-left-outer {
width: 0px;
right: 100%;
margin-left: -0px;
}
.main-inner .column-right-outer {
width: 340px;
margin-right: -340px;
}
#layout {
min-width: 0;
}
#layout .content-outer {
min-width: 0;
width: 800px;
}
#layout .region-inner {
min-width: 0;
width: auto;
}

]]>
</b:template-skin>
</head>

<body class='' data-twttr-rendered='true'>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Barra de navegación' type='Navbar'>
<b:includable id='main'><script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener('load',
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val; });
}
}
</script>
<div id="navbar-iframe-container"></div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">
gapi.load("iframes-styles-bubble", function() {
if (window.iframes && iframes.open) {
iframes.open(
'//www.blogger.com/navbar.g?targetBlogID\0751506534019257182688\46blogName\75prueba2\46publishMode\75PUBLISH_MODE_BLOGSPOT\46navbarType\75LIGHT\46layoutType\75LAYOUTS\46searchRoot\75http://summertemplate.blogspot.com/search\46blogLocale\75es\46v\0752\46homepageUrl\75http://summertemplate.blogspot.com/\46vt\758606500838693626168',
{
container: "navbar-iframe-container",
id: "navbar-iframe"
},
{
});
}
});
</script><script type="text/javascript">
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//pagead2.googlesyndication.com/pagead/js/google_top_exp.js';
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(script);
}})();
</script>
</b:includable>
</b:widget>
</b:section>

<b:if cond='data:blog.pageType == "index"'>
<div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>
<meta expr:content='data:blog.title' itemprop='name'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' itemprop='description'/>
</b:if>
</div>
</b:if>

<div class='body-fauxcolumns'>
<div class='fauxcolumn-outer body-fauxcolumn-outer'>
<div class='cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left'>
<div class='fauxborder-right'/>
<div class='fauxcolumn-inner'>
</div>
</div>
<div class='cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</div>

<div class='content'>
<div class='content-fauxcolumns'>
<div class='fauxcolumn-outer content-fauxcolumn-outer'>
<div class='cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left'>
<div class='fauxborder-right'/>
<div class='fauxcolumn-inner'>
</div>
</div>
<div class='cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</div>

<div class='content-outer'>
<div class='content-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left content-fauxborder-left'>
<div class='fauxborder-right content-fauxborder-right'/>
<div class='content-inner'>

<header>
<div class='header-outer'>
<div class='header-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left header-fauxborder-left'>
<div class='fauxborder-right header-fauxborder-right'/>
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Un documento sin cuerpo es el siguiente:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
/*La hoja de estilos en Blogger se encuentra en la etiqueta b:skin*/
]]></b:skin>

</head>
<body>

</body>
</html>

El documento en este ejemplo es un elemento básico, no incluye información de ningún tipo, sólamente muestra la codificación (DOCTYPE), versión de documento (En formato UTF-8, el cual permite carácteres como tíldes y ñ), un elemento </head> y un elemento </body>, los cuales son básicamente la cabeza y el cuerpo del blog.

En el </head> se insertan distintos elementos que son ajenos al cuerpo del documento, ya sean scripts, CSS, etc.

El </body> tiene la función de insertar el contenido dinámico y este es el cual se trabajará con CSS.

Anteriormente mencionamos que Blogger tiene su propio lenguaje, si bien es posible utilizar distintos tipos de CSS, esta plataforma incluye una hoja obligatoria llamada </b:skin>, en ésta se inserta toda la hoja de estilos del blog, si bien es posible insertar los atributos aquí, también se pueden usar los otros tipos de CSS.

El cuerpo (</body>):

Es la estructura de la página web, ésta se encuentra seccionada mediante etiquetas las cuales otorgan un órden lógico al documento. En Blogger es exactamente lo mismo, pero el documento cargará dinámicamente mediante otras etiquetas las cuales asignan funciones y elementos.

Un documento básico tiene un encabezamiento, un cuerpo, una barra lateral y un pié de página, estos de por sí ya incluyen subelementos (Encabezados, párrafos, etc.):

<div id="cabecera">
       <h1>Este es un encabezamiento</h1>
</div>

<div id="cuerpo">
     <div id="documento-entrada">
          <p>Este es un párrafo dentro de una entrada<p>
     </div>
<div id="barra-lateral">
          <img src="...." alt="Esta es una imagen en la barra lateral" />
</div>

<div id="pie-de-pagina">
          Esta es una línea de texto dentro del pié de página.
</div>

En el ejemplo anterior, verás que cada elemento está encerrado en etiquetas las cuales tienen un inicio "<>" y un cierre "</>", hay elementos los cuales incluyen su ruta, valores, etc. dentro de estos mismos, como por ejemplo lo es la etiqueta <img>, la cual tiene el cierre incluído al final de la etiqueta.

Tipos de CSS:

La etiqueta </b:skin> hace el trabajo de incluir la hoja de estilos, pero en un documento normal el CSS puede alojarse de 3 formas distintas:

Hoja de estilos externa: Este tipo de CSS se aloja en un archivo externo, y es posible insertarlo mediante la etiqueta </link>:

<link href='URL.CSS' rel='stylesheet' type='text/css'/>

Hoja de estilos interna: Esta forma de inclusión es la más sencilla, y es la que se usa en Blogger, pero a diferencia que por norma esta se hace mediante la etiqueta </style>:

<style type="text/css">
/*Hoja de estilos*/
</style>

Hoja de estilos Inline: Esta forma se basa en crear un elemento y en el mismo elemento se definen los atributos mediante el valor style:

<div style="atributos;">Lorem Ipsum</div>

Las clases, indentificadores y selectores:

Selectores: Un selector corresponde a un elemento que puede ser una etiqueta, una class o un identificador. Su estructura CSS es la siguiente:

selector {
atributo:valor;
atributo:valor;
}

Para poder entender mejor haremos un ejemplo mas claro:

h2 {
font-size:40px;
font-family: Arial;
}

En donde h2 corresponde al selector, y los elementos que se encierran entre {} son los atributos que se le asignarán a dicho selector.

También es posible asignar subselectores (Un selector dentro de otro). Para ello tomemos el código del ejemplo 2 (Sólamente la cabecera):

<div id="cabecera">
<h1>Este es un encabezamiento</h1>
</div>

Verás que hay un elemento </h1> dentro del contenedor "cabecera", para asignar este selector y no afectar los otros se hace mediante la siguiente síntaxis:

selector subselector {
atributo:valor;
atributo:valor;
}

En el caso del ejemplo, queremos añadir atributos al elemento </h1> dentro de "cabecera", entonces:

#cabecera h1 {
font-size:56px;
text-shadow:1px 1px 0 #2d2d2d;
}

Supongamos que ahora el elemento </h1> tiene un enlace (Etiqueta </a>), entonces quedaría de la siguiente forma:

#cabecera h1 a {
color:orange;
}

Con esto ya deberíamos ver el elemento con los atributos ya incluidos, pero ¿Qué haríamos si queremos aplicar estilos a varios selectores mediante una sóla síntaxis?

La síntaxis es muy sencilla:

selector1, selector2, selector3 {
atributo:valor;
atributo:valor;
}

Tal como se puede apreciar, cada elemento está separado por una coma (,) y con esto estamos aplicando los mismos atributos tanto para el selector1 como para el selector2 y selector3.

Las Clases e Identificadores:

Si bien ya cada elemento se define con una etiqueta distinta, es posible asignarle una class o un identificador los cuales permitan que el elemento pueda ser personalizado fácilmente.

¿Cuál es la diferencia entre ID y CLASS?

El ID (Identificador) es utilizado para elementos ÚNICOS, es decir que ninguna otra etiqueta se repetirá. Esta se puede usar preferentemente para secciones grandes, como una cabecera, un pié de página, etc. Mientras que la class (Clase), es aplicable a varios elementos. Veamos un ejemplo:

<div id="texto-unico">
<p class="linea1">Esta es un párrafo con clase linea1</p>
<p class="linea2">Esta es un párrafo con clase linea2</p>
<p class="linea1">Esta es un párrafo con clase linea1</p>
<p class="linea2">Esta es un párrafo con clase linea1</p>
</div>

Es permitido que tanto las clases "linea1" y "linea2" sean repetidas, mientras que el ID es único y no se repetirá nunca más.

¿Cómo trabajar con CSS los ID y las classes?

La síntaxis CSS para los IDs es la siguiente:

#elemento-unico {
atributo:valor;
atributo:valor;
}

Los ID siempre se trabajan con una almohadilla (#).

En el caso de las clases, se utiliza un punto (.) antes del nombre de éstas:

.elementos {
atributo:valor;
atributo:valor;
}

Como cualquier atributo, existen distintas formas de incluir los valores a insertar ya que una de las bondades de CSS es su capacidad de manipulación.

Tutorial 1: Atributos para fuentes.
Tutorial 2: Atributos para párrafos.
Tutorial 3: Atributos para contenedores.

Tutorial 1: Atributos para fuentes:

Estos atributos están pensados principalmente para la manipulación en la apariencia de las fuentes del documento.

La lista de propiedades para fuentes son las siguientes:

font: Establece todos los parámetros en una sóla definición.
font-family: Establece la tipografía del texto.
font-size: Define el tamaño del texto.
font-style: Permite definir el estilo del texto.
font-weight: Permite definir el ancho de la fuente.

Como ya explicamos, la propiedad "font" permite insertar todos los estilos de las fuentes en una sóla línea, tal como lo define el siguiente ejemplo:

#ejemplo {
font: 100% Arial,sans-serif bold;
}

En el ejemplo se ha definido tanto font-size (100%), como font-family (Arial, sans-serif) y font-weight (bold). Recuerda que puedes definir los siguientes valores para cada propiedad:

Propiedad	Valor	Ejemplo
font-family	Nombre fuente	#ejemplo {font-family: Arial;}
font-size	píxeles, puntos, porcentajes, em	#ejemplo {font-size:15px;}
font-style	normal, italic, oblique	#ejemplo {font-style:italic;}
font-height	normal, bold, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900	#ejemplo {font-weight:bold;}

Tutorial 2: Atributos para párrafos:

A diferencia de los atributos font, éstos permiten modificar la forma en la que se insertan los textos en el documento, los valores font sólo permitían añadir el estilo, forma y tamaño de la fuente.

La lista de atributos es la siguiente:

line-height: Permite establecer el alto de cada línea en un párrafo.
text-transform: Permite transformar a mayúsculas o minúsculas determinado texto.
text-indent: Permite establecer un espacio de sangría en la primera línea de un párrafo.
text-decoration: Permite establecer la decoración del texto.
text-align: Define la alineación del texto.

Propiedad	Valor	Ejemplo
line-height	píxeles, em, pt	#ejemplo {line-height:20px;}
text-transform	none, uppercase, lowercase, capitalize	#ejemplo {text-transform:uppercase;}
text-indent	píxeles, em, pt	#ejemplo {text-indent:40px;}
text-decoration	none, underline, line-through, overline	#ejemplo {text-transform:underline;}
text-align	left, center, right, justify	#ejemplo {text-align:right;}

Tutorial 3: Atributos para contenedores y similares:

Para comprender estos atributos, he creado una breve descripción, además de un ejemplo junto con su código fuente.

Propiedad	Descripción	Valor	Ejemplo
Margin	Permite definir el espaciado externo de algún elemento	píxeles, em, centímetros, etc	#ejemplo {margin:20px;}
Padding	Permite definir el espaciado interno de algún elemento	píxeles, em, centímetros, etc	#ejemplo {padding:20px;}
Width	Permite definir el ancho de algún elemento	píxeles, em, centímetros, porcentajes, etc	#ejemplo {width:80px;}
Height	Permite definir el alto de algún elemento	píxeles, em, centímetros, porcentajes, etc	#ejemplo {height:120px;}
Float	Permite escoger si se alineará a la izquierda o derecha el elemento	left, right, none	#ejemplo {float:right;}

prueba2

Cabecera

sábado, 20 de abril de 2013

Sonido

Datos personales

Botones grandes

Iconos laterales