Aprendamos CSS: Hoja de estilos CSS

Archivo CSS

Un archivo CSS es un documento de hoja de estilos en cascada que puede vincularse a un documento web ya sea HTML, PHP u otro, con la finalidad de darle estilo y que este no desordene nuestro código, en otras palabras que tengamos una página web con un código limpio. A continuación un ejemplo del diseño de una página web con una hoja de estilos CSS.

El siguiente código corresponde a html:

<head>
 <title>Diseño web...</title>
    <link rel="stylesheet" href="estilos.css" type="text/css" />
</head>
<div id="contenedor">
 <div id="cabecera">
     Disenho web con Style
    </div>
    <div id="cabe_derecha">
     <img src="logo.png" width="300" height="120">
  </div>
    <div id="capamenu">
     <ul id="menu">
         <li><a href="#">INICIO</a></li>
            <li><a href="#">GALERIA</a></li>
            <li><a href="#">VIDEOS</a></li>
            <li><a href="#">PREGUNTAS</a></li>
            <li><a href="#">MISION Y VISION</a></li>
            <li><a href="#">CONTACTOS</a></li>
        </ul>
    </div>
    <div id="contenido">
        
  </div>
</div>

En éste código resaltaremos el uso de la etiqueta link con la cual vinculamos con el archivo css llamado estilos.css, el código empleado es:

<link rel="stylesheet" href="estilos.css" type="text/css" />

Cada una de las capas que se crearan en la hoja de estilos estan insertadas en utilizando la etiqueta div, por ejemplo la capa contenedor tiene el siguiente código:

<div id="contenedor">

Porsupuesto que al final se debe cerrar con </div>

El código del archivo estilos.css es el siguiente:

#contenedor {
 width:900px;
 height:600px;
 margin:auto;
 padding:5px;
 border-radius:25px 25px 0px 0px;
 background:#000;
}

#cabecera {
 width:600px;
 height:120px;
 position:absolute;
 color:#FFF;
 font-size:40px;
 font-family:Arial;
 line-height:120px;
 text-align:center;
 border-radius:25px 0px 0px 0px;
 background: #a90329; 
}

#cabe_derecha {
 width:295px;
 height:120px;
 position:absolute;
 margin-left:605px;
 border-radius:0px 25px 0px 0px;
 background: #a90329;
}

#capamenu {
 width:900px;
 height:50px;
 position:absolute;
 margin-top:125px;
 background: #cedce7; 
}

#menu {
        padding:10px;
  margin-top:0px;
  margin-left:200px;
    }
    #menu li {
        display:inline;
    }
    #menu li a {
        font-family:arial;
        font-size:15px;
        text-decoration:none;
        float:left;
        padding:5px;
        color:#000;
    }
    #menu li a:hover {
        color:#fff;
        margin-top:-5px;
        padding-bottom:10px;
        margin-left:5px;
        margin-right:5px;
        font-size:17px;
        font-family:"Times New Roman", Times, serif;
  background: #a90329; 
    }

#contenido {
 width:890px;
 height:410px;
 position:absolute;
 margin-top:180px;
 border:5px solid;
 border-color:#999;
}

La página se verá de esta manera: abrir ejemplo en otra ventana

Aprendamos CSS

jueves, 19 de julio de 2012

Hoja de estilos CSS

No hay comentarios:

Publicar un comentario