Como se hace el Sekano XII – Hojas de estilo CSS
12th Septiembre 2007 | Internet, WordPress
/*
CSS Name: CSS Blix Sekano
Description: CSS Blix Sekano (http://www.sekano.es/) es la hoja de estilos del tema Blix Sekano
Version: 1.0
CSS Blix Sekano Author: Sekano
Blix Theme original: Sebastian Schmieg
CSS Blix Sekano Author URI: http://www.sekano.es/
Última modificación el 24 de junio de 2007
*/
/* -- HEADER -- */
.caja {
float:right;
width:565px;
padding:15px;
border:1px solid orange;
margin:10px 0px 10px 0px;
text-align:justify;
overflow:auto;
height:100px;
clear:left;
}
#cabecera {
margin:auto;
width:833px;
height:156px;
margin-top:3px;
background-color:#F0F9F9;
background-image:url(images/cabecera/cabecera.jpg);
}
#cabecera h1, #cabecera h1 a {
text-align:right;
padding-top:28px;
margin-right:55px;
color:#000000;
font-size:50px;
font-family:Georgia, serif;
font-weight:bold;
}
#cabecera h1 a:hover {
color:#000080;
border-bottom-style: dashed;
border-bottom-width: 3px;
border-bottom-color: #666666;
}
#cabecera h2 {
text-align:right;
margin-top:85px;
margin-right:140px;
font-size:14px;
font-family:Georgia, serif;
color:#FFFFFF;
font-weight:bold;
}
body,h1,h2,h3,h4,h5,h6,p,form,fieldset {margin:0;padding:0;}
.low {display:none;}
/* -- BODY -- */
body {
margin:0px;
padding:3px 0px 10px 0px;
font-family:Arial, Helvetica, Verdana;
font-size:13px;
line-height:1.6em;
text-align:center;
color:#414141;
background-color: #F7F7F4;
}
body#commentspopup {padding:0; background:white;}
hr.red {
size: 1px;
color: #FF3300;
}
p.red {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
}
.red { color:#940F04; }
.center { float:none; }
/* -- TITULOS H2 y H3 -- */
.entry h2, #comments h2 {
font-family:Georgia;
font-size:18px;
width: auto;
display:block;
padding:5px;
margin:0px;
color:#000000;
border-bottom-width: 1px;
border-bottom-style:dotted;
border-bottom-color: #000000;
}
.entry h2 a { color:#000080; }
.entry h2 a:hover {
color:#990000;
background:url(images/iconset/sekanos.gif) no-repeat;
padding: 0px 0px 5px 25px; }
.entry h3 {
font-size: 14px;
font-weight:normal;
padding: 5px 0px 0px 30px;
border-bottom: 1px solid orange;
}
/* -- BAJO EL TITULO DEL POST -- */
.autor {
background:url(images/iconset/autor.gif) no-repeat;
padding: 0 0 5px 25px;
margin: 0px;
font-size: 11px;
font-family:Arial, Helvetica, Verdana;
}
.categoria {
background:url(images/iconset/categoria.gif) no-repeat;
padding: 0 0 5px 25px;
margin: 0px;
font-size: 11px;
font-family:Arial, Helvetica, Verdana;
}
.fecha {background:url(images/iconset/fecha.gif) no-repeat;
padding: 0 0 5px 25px;
margin: 0px;
font-size: 11px;
font-family:Arial, Helvetica, Verdana;
}
/* -- TITULOS CONTENT -- */
#content h3 {
margin:0 0 18px 0;
font-size:14px;
margin-top:-3px;
padding:3px;
}
#content.archive h3 {
margin:0 0 10px 0;
font-family:Georgia, serif;
font-size:1.3em;
font-weight:normal;
}
#content.archive h5 {
margin:0;
font-size:1em;
}
h3 a {color:#FF6600;}
h4 a {color:#009193;}
h3 a:hover {color:#CC0000;}
h4 a:hover {color:#FEC42D;}
/* -- ENLACES -- */
a {text-decoration:none; color:#6C8C37; }
.entry a { font-weight:bold; }
a img { border: none; }
a:hover { color:#990000; }
/* -- MORE -- */
.more { color:navy; }
a:hover .more { color:red; }
/* -- PARRAFOS -- */
p.center{ text-align:center; }
p {
text-align:justify;
margin:0;
padding:0 0 18px 0;
}
ul {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
blockquote{
width: 350px;
padding: 10px 20px 10px 40px;
background: #F4F4F4 url(images/iconset/comillas.gif) no-repeat left top;
font-style: normal;
text-align:justify;
margin-bottom: 10px;
color: #666666;
}
pre {
overflow:auto;
margin:0 0 18px 0;
padding:4px;
}
acronym { color:blue; }
/* -- IMAGES -- */
embed.left {
float:left;
margin:0 12px 0 0;
}
img.left {
float:left;
margin:0 12px 0 0;
}
img.right {
float:right;
margin:0 0 0 12px;
}
img.left2 {
float:left;
margin:0px;
}
img.right2 {
float:right;
margin:0px;
}
img.center {
float:none;
display: block;
margin:0 auto;
}
a img, a img.center, a img.left, a img.right {
border-style: solid;
border-width: 1px;
border-color: #FFFFFF;
padding:1px;
}
a:hover img, a:hover img.center, a:hover img.left, a:hover img.right {
border-style: solid;
border-width: 1px;
border-color: orange;
}
/* -- CONTAINER -- */
#container {
width:800px;
margin:0 auto;
padding:10px 15px 0px 15px;
text-align:left;
background-color: #FFFFFF;
}
#commentspopup #container {
width:565px;
padding:0 15px;
}
/* -- CONTENT --*/
#content {
float:left;
width:565px;
padding-top:0px;
background-color: #FFFFFF;
}
.singlecol #content {
float:none;
width:550px;
margin:0 70px;
}
#commentspopup #content {
float:none;
padding-top:0px;
}
/* -- ENTRY --*/
.entry {
margin-bottom:2px;
background-color: #FFFFFF;
font-family:Georgia, Arial, Helvetica, Verdana;
}
.referencias {
width: auto;
margin: 10px 0px 5px 20px;
padding: 0px 10px 0px 15px;
font-size:11px;
font-weight:bold;
list-style-type:none;
font-family:Arial, Helvetica, Verdana;
border-left-style: solid;
border-left-width: 5px;
border-left-color: #666666;
}
.piepost{
width: auto;
margin-bottom:3px;
padding:4px;
font-size:11px;
font-weight:bold;
list-style-type:none;
font-family:Arial, Helvetica, Verdana;
}
.normas {
width: auto;
border-width: 1px;
border-style: dotted;
border-color: #666666;
margin: 3px;
padding: 20px;
font-size:10px;
font-weight:normal;
font-family:Arial, Helvetica, Verdana;
}
.cajetincomentarios{
width: 557px;
background-color: #FFEEBF;
border: none;
margin-bottom: 10px;
padding: 4px;
font-size:11px;
font-weight:normal;
list-style-type:none;
}
p.cajetincomentarios{
background-color: #EFD768;
}
.citas {
width: 450px;
padding: 10px 25px 10px 40px;
background: #F4F4F4 url(images/iconset/comillas.gif) no-repeat left top;
font-style: normal;
text-align:justify;
margin-bottom: 10px;
color: #666666;
}
.entry h4 {
font-size: 11px;
padding: 5px 0px 0px 30px;
}
.entry ul li {
padding-left: 10px;
list-style-type:none;
}
/* -- PIEPOST -- */
.comentar {
background:url(images/iconset/comentar.gif) no-repeat;
padding: 0px 0px 5px 23px;
margin: 0px;
font-size: 11px;
}
.comentar a:hover { color: red;}
.editar {
background:url(images/iconset/editar.gif) no-repeat left top;
padding: 0px 0px 5px 25px;
margin: 0px;
font-size: 11px;
}
.entry .info {
position:relative;
margin-top:-3px;
padding:3px;
border-top:1px solid;
border-bottom:1px solid;
font-size:0.9em;
}
.entry.single .info {
margin:0 0 22px 0;
}
.entry .info a {
margin-right:6px;
padding-right:9px;
border-right:1px solid;
}
.entry .info em {
padding-right:6px;
font-style:normal;
}
.entry #filedunder {
clear:both;
padding:3px 0 0 0;
font-size:0.9em;}
/* -- COMMENTS -- */
#comments {
font-family:Georgia, Helvetica, Verdana;
font-size:12px;
}
#comments a { font-weight:bold; }
#comments ul { margin:0 0 0 20px; }
#comments li {
position:relative;
margin:0px 0px 15px 35px;
padding:10px;
border-width:1px;
border-style:solid;
border-color:#666666;
}
#comments li p {
padding:0 0 10px 0;
}
#comments .header {
position:relative;
min-height:19px; /* 19 + 3 +3 = 25px = height of gravatar */
margin:0px 0px 10px 0px;
padding:6px 6px;
}
* html #comments .header {
height:19px;
} /* IEWin */
#comments .header strong {
font-family:Georgia,sans-serif;
}
#comments .header .gravatar {
position:absolute;
top:1px; right:1px;
}
#comments h4 {
font-size: 11px;
padding: 5px 0px 0px 30px;
}
#comments h2 {margin-bottom:24px;}
#comments h2 a {color:#6C8C37;}
#comments li.comment {list-style-image:url(images/iconset/comentario.gif);}
#comments li.trackback,#comments li.pingback {list-style-image:url(images/iconset/pingback.gif);}
#comments .header {
background-color:#FFECCF;
font-weight:bold;
}
#comments .header.alt {
background-color:#DFFFE9;
font-weight:bold;
}
.gravatar {
margin-left:3px;
border-width:1px;
border-style:solid;
border-color:orange;
}
/* -- ARCHIVES -- */
.archive .postspermonth {
margin:0;
list-style:none;
}
/* -- NAVEGADOR POST MODO SINGLE -- */
.next a {
padding-right:20px;
background:url(images/iconset/right.gif) center right no-repeat;
float:right;
}
.previous a {
padding-left:20px;
background:url(images/iconset/left.gif) center left no-repeat;
float:left;
}
.navegador {
overflow: auto;
height:1%;
width: 559px;
background-color: #FFFFFF;
border: 1px dotted #000000;
margin:10px 0px 10px 0px;
padding: 3px;
font-size:11px;
font-weight:bold;
}
/* -- SUBCONTENT -- */
#subcontent {
float:right;
width:220px;
margin-top:0px;
padding:0px 0px 0px 0px;
font-size:11px;
line-height:16px;
background:#FFFFFF;
font-weight:bold;
}
#subcontent a:link, #subcontent a:visited, #subcontent a:active{ color: navy; }
#subcontent a:hover{
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: red;
}
* html #subcontent {padding-top:10px;}
/* -- SUBCONTENT HEADINGS -- */
#subcontent h2 {
margin:2px 0px 10px 0px;
font-family:Georgia,serif;
font-size:12px;
line-height:1em;
padding:8px 8px;
color:#000000;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: orange;
}
/* -- SUBCONTENT LIST -- */
#subcontent ul, #subcontent p {margin:8px 0px 8px 5px;}
#subcontent ul li {
margin:2px 0px 5px 2px;
list-style-type:none;
}
/* -- CALENDAR -- */
#wp-calendar {display:inline-table; border-collapse:collapse;
width:185px; margin:0px 10px 0 10px; text-align:center;}
#subcontent table caption {margin:-5px 10px 0 10px;
padding-bottom:5px; border-bottom:1px solid; letter-spacing:0.1em;}
#subcontent table thead tr {border-bottom:1px solid;}
#subcontent table th {border-bottom:1px solid;}
#subcontent table td {width:200px; padding:1px; font-size:0.9em;}
#subcontent table td#today {padding:0; border:1px solid; font-size:1em; font-weight:bold;}
#subcontent table td a {display:block; border-bottom:1px solid; font-weight:bold; font-size:1.15em;}
#subcontent table tfoot {border-top:1px solid;}
#subcontent table tfoot a {border:none; font-weight:bold;}
#subcontent table tfoot #prev a {text-align:left;}
#subcontent table tfoot #next a {text-align:right;}
/* -- calendar -- */
#wp-calendar {color:#A0A0A0;}
#subcontent table caption {border-bottom-color:#F3F4F4;}
#subcontent table thead tr {border-bottom-color:#F3F4F4; color:#414141;}
#subcontent table th {border-bottom-color:#F3F4F4;}
#subcontent table td#today {border-color:#F3F4F4; color:#414141;}
#subcontent table td a {border-bottom-color:#A3C159; background-color:#EDF3DE;}
#subcontent table tfoot {border-top-color:#F3F4F4;}
#subcontent table tfoot a {background:none;}
/* -- FORM -- */
form {padding:6px 0;}
#commentform, #contactform {margin-bottom:18px;}
form fieldset {border:0 solid;} /* Opera */
form p {padding:6px 0; border-bottom:1px solid;}
form label { display:block; float:left; width:60px;}
#commentform label {margin:0 15px 0 15px;}
#contactform label {margin:0 15px 0 0;}
form em {margin-left:5px; font-size:0.9em; font-style:normal;}
form input, form textarea , form select {
width:auto;
padding:5px;
margin-top:5px;
border:1px solid;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
border-color:#000000;
}
form input {color:#000000;}
form textarea {
overflow:auto;
width:450px;
margin-left:50px;
}
#commentform input {width:200px;}
#commentform textarea {width:440px;}
#contactform textarea, #contactform #bx_subject {width:465px;}
* html #commentform textarea {width:320px;} /* IE WIN; but why? */
* html #contactform textarea,
* html #contactform #bx_subject {width:445px;} /* IE WIN; but why? */
form .button {width:90px !important; border-bottom:1px solid; font-weight:bold;}
#commentform .button {margin-left:90px;}
#contactform .button {margin-left:75px;}
form .hiddenfield {display:none;}
form .info {padding-left:90px;}
form p {border-color:white;}
form label { color:#6C8C37;}
form em {color:#C8C8B4;}
form .button {border-color:#000000; background-color:#FFFFFF;}
/* -- MINI-ENTRY -- */
.minientry {
padding:10px;
border:none;
}
.minientry p { padding:0;}
.minientry .commentlink {
margin-left:3px;
padding-right:7px;
border-right:1px solid;
font-size:0.9em;
}
.minientry .permalink {
margin-left:3px;
font-size:0.9em;
font-style:normal;
}
.minientry .author, .minientry .editlink a {
margin-left:6px;
padding:0 8px 0 10px;
border-left:1px solid;
font-size:0.9em;
font-style:normal;
}
.minientry .editlink a { margin:0; }
/* set millions of background images */
.rbroundbox { background: url(images/roundcss/nt.gif) repeat; }
.rbtop div { background: url(images/roundcss/tl.gif) no-repeat top left; }
.rbtop { background: url(images/roundcss/tr.gif) no-repeat top right; }
.rbbot div { background: url(images/roundcss/bl.gif) no-repeat bottom left; }
.rbbot { background: url(images/roundcss/br.gif) no-repeat bottom right; }
/* height and width stuff, width not really nessisary. */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 7px;
font-size: 1px;
}
.rbcontent { margin: 0 7px; }
.rbroundbox { width: 100%; margin: 1em auto; }
/* -- CONTAINER EQUIPO -- */
#infodiv {width: 550px; margin: 0px; height: 520px; float: none;}
#infoleft {width: 250px; margin: 0px 30px 0px 0px; float: left; }
#inforigth {width: 250px; margin-left: 280px; float: right;}
/* -- COMMENT QUICKTAGS -- */
#comment_quicktags {text-align: left; margin-left: 1%;font-size:12px;}
#comment_quicktags input.ed_button {background: #F4F4F4; border: 1px solid #D6D3CE;
color: #000000; font-family: Georgia, "Times New Roman", Times, serif; margin: 1px; width: auto;}
#comment_quicktags input:focus.ed_button {background: #FFFFFF; border: 1px solid #686868;}
#comment_quicktags #ed_strong {font-weight: bold;}
#comment_quicktags #ed_em {font-style: italic;}
/* -- FOOTER -- */
#footer {clear:both; padding:5px 0 5px 0; font-size:11px; color:#000000;
background:white url(images/spring_flavour/footer_bg.gif) 470px 0px no-repeat;}
.singlecol #footer {padding:25px 0 15px 0; background-image:none;}
#footer p {padding:5px 0 5px 0}
#footer strong {font-weight:bold; color:green;}
.singlecol #footer p {padding:12px 70px 18px 70px;}
#footer a {font-weight:bold; color:blue;}
#footer a:hover {color:red;}
Cosas más raras he posteado, pero esta es de las que se llevan la palma. Quería comentaros sobre las Hojas de estilo en cascada o CSS. Se trata de un archivo que contiene la información de estilo de todo un sitio web. Los que hayaís hecho alguna página web hace tiempo recordareís que además de establecer la etiqueta de párrafo p había que colorear el texto con font-color=”#FFCD45″ y especificar un tipo y tamaño de fuente font-family=”Arial” y font-size=”12px”. Esta operación se repetía para cada párrafo de cada una de las páginas que contenía el sitio y era un coñazo cuando querías cambiar el aspecto de la web.
Con CSS es mucho más sencillo porqué en los archivos HTML sólo se etiquetan los elementos y es una única hoja de estilo la que dice al navegador como han de mostrarse estas etiquetas ante el visitante.
p {
text-align:justify;
margin:0;
padding:3px 0px 10px 0px;
font-family:Arial, Helvetica, Verdana;
font-size:13px;
line-height:1.6em;
color:#414141;
background-color: #F7F7F4;
}
El código anterior, colocado una sola vez en el archivo CSS, se encargará de que todas las páginas web que lo tengan vinculado, muestren las etiquetas de párrado justificadas, sin margen, con acolchado, en Arial de 13 píxeles, con una separación de líneas de 1.6em, en el color 414141 y con un fondo F7F7F4 (el color es en formato hexadecimal).
De esta forma para cambiar la apariencia de todo el sitio, basta con hacer los cambios pertinentes en la hoja de estilo. Se pueden definir todas las etiquetas usadas del HTML y también crear nuestras propias etiquetas específicas con estilos propios. El tamaño de las páginas es considerablemente menor al no existir información redundante y las posibilidades de diseño se amplían con la posibilidad de crear elementos flotantes como cajas y bloques.
Esperando no perder muchos visitantes me despido hasta el próximo post.
Como se hace Sekano II – Plugin Postviews
Como se hace Sekano III – Citando en la red
Como se hace Sekano IV – Extensiones de FireFox
Como se hace Sekano V – Visitantes del Sekano
Como se hace el Sekano VI – Accesibilidad Web del Sekano
Como se hace el Sekano VII – Ataque de spam al Sekano
Como se hace el Sekano VIII – Superados test del W3C
Como se hace el Sekano IX – Sekano Evolution
Como se hace el Sekano X – Maldito Wordpress 2.1 y su link2cat
Como se hace el Sekano XI – Desconexión de fin de semana
