El nombre hojas de estilo en cascada viene del inglés Cascading Style Sheets, del que toma sus siglas.CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores.
concepto:
css3 es completamente compatible con versiones anteriores, por lo que no tendrá que modificar los diseños existentes. los navegadores siempre apoyará css2.
módulos de css3
css3 se divide en "módulos". la especificación de edad, ha sido dividida en pedazos más pequeños, y otros nuevos se añaden también.
algunos de los más importantes css3 módulos son:
selectores
caja modelo
fondos y bordes
efectos de texto
transformaciones 2d/3d
animaciones
diseño de columna múltiple
interfaz de usuario
cómo
funciona css?
En esta
lección aprenderás a crear tu primera hoja de estilo; conocerás el modelo
básico de CSS y qué código es necesario para usar CSS en un documento HTML.
Muchas de
las propiedades que se usan en las hojas de estilo en cascada (CSS) son
parecidas a las de HTML. Así pues, si estás acostumbrado a usar HTML para
cuestiones de presentación, lo más probable es que reconozcas gran parte del
código usado. Examinemos un ejemplo concreto.
La
sintaxis básica de CSS
Digamos
que queremos un bonito color rojo como fondo de nuestra página web:
Usando HTML
podríamos haberlo conseguido así:
<body bgcolor="#FF0000">
Con CSS
el mismo resultado puede lograrse así:
body {background-color: #FF0000;}
Como
verás, el código usado es más o menos idéntico para HTML y CSS. El ejemplo
anterior te muestra además el modelo CSS fundamental:
Pero ¿dónde se sitúa el código CSS? Eso, precisamente, es lo que vamos a estudiar ahora mismo.
Aplicando
CSS a un documento HTML
Podemos
aplicar CSS a un documento HTML de tres maneras diferentes. Todos estos métodos
se explican a continuación. Te recomendamos que te centres en el tercero, es
decir, el externo.
Método 1:
En línea (el atributo style)
Un modo de
aplicar CSS a HTML es usando el atributo de HTML style. Si ampliamos el ejemplo anterior sobre el color
de fondo rojo, CSS se puede aplicar así:
<html>
<head>
<title>Ejemplo</title>
</head>
<body style="background-color:
#FF0000;">
<p>Esta
es una página con fondo rojo</p>
</body>
</html>
Método 2:
Interno (la etiqueta style)
Otra forma
es incluir el código CSS usando la etiqueta HTML <style>. Por ejemplo, así:
<html>
<head>
<title>Ejemplo</title>
<style
type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Esta
es una página con fondo rojo</p>
</body>
</html>
Método 3:
Externo (enlace a una hoja de estilo)
El método
recomendado es enlazar con lo que se denomina hoja de estilo externa. A lo
largo de este tutorial usaremos este método en todos nuestros ejemplos.
Una hoja
de estilo externa es sencillamente un fichero de texto con la extensión .css.
Como cualquier otro fichero, puedes colocar la hoja de estilo en el servidor
web o en el disco duro.
Por
ejemplo, digamos que tu hoja de estilo se llama style.css y está
localizada en una carpeta que se llama style. Esta situación se puede
ilustrar de la siguiente manera:
El truco consiste en crear un vínculo desde el documento HTML (por ejemplo, default.htm) con la hoja de estilo (style.css). Dicho vínculo se puede crear con una sencilla línea de código HTML:
<link
rel="stylesheet" type="text/css" href="style/style.css"
/>
Fíjate
cómo la ruta a nuestra hoja de estilo aparece indicada por medio del atributo href.
La línea
de código debe insertarse en la sección de encabezado del código HTML, es
decir, entre la etiqueta <head> y </head>. De esta manera:
<html>
<head>
<title>Mi
documento</title>
<link
rel="stylesheet" type="text/css"
href="style/style.css" />
</head>
<body>
...
Este
vínculo indica al navegador que debería usar la presentación del fichero CSS al
mostrar el fichero HTML. Lo realmente bueno de este método es que se pueden
vincular varios documentos HTML con la misma hoja de estilo. En otras palabras,
se puede usar un único fichero CSS para controlar la presentación del muchos
documentos HTML.
Esta
técnica puede ahorrarte mucho trabajo. Si quisieras cambiar, por ejemplo, el
color de fondo de un sitio web compuesto por 100 páginas, un hoja de estilo
puede ahorrarte el tener que cambiar de forma manual los 100 documentos HTML.
Con CSS, el cambio se puede llevar a cabo en unos segundos modificando parte
del código de la hoja de estilo principal.
Vamos a
llevar a la práctica lo que acabamos de aprender.
Pruébalo
tú mismo
Abre el
Bloc de notas (o el editor de texto que utilices) y crea dos ficheros - un
fichero HTML y un fichero CSS - con el siguiente contenido:
Fichero
default.htm
<html>
<head>
<title>Mi
documento</title>
<link
rel="stylesheet" type="text/css" href="style.css"
/>
</head>
<body>
<h1>Mi
primera hoja de estilo</h1>
</body>
</html>
Fichero
style.css
body
{
background-color: #FF0000;
}
En este caso, vamos a crear
un sencillo formulario de registro o login, el código atendiendo lo antes dicho
sería:
<div
id="formulario">
<form method="post"
action="">
<fieldset>
<legend>Registrarse</legend>
<div class="medidas">
<label
for="user">Usuario:</label>
<input id="user"
name="user">
</div>
<div class="medidas">
<label for="pass">Contraseña:</label>
<input type="password"
id="pass"
name="pass">
</div>
<div class="check">
<input type="checkbox"
id="remember"
name="remember">
<label for="recordar">Recordar
mi nombre
de usuario en esta computadora</label>
</div>
</fieldset>
<div>
<input type="submit"
id="login"
value="Ingresar">
</div>
</form>
</div>
Como ven, <fieldset> y
<legend> son mostrados con un estilo por defecto en los navegadores, como
son otras etiquetas de HTML. El estilo de defecto rodea a los elementos
agrupándolos dentro de una caja, la etiqueta de leyenda (<legend>)
aparece en la cima de aquella caja.
Ahora bien, vamos a usar CSS
para dar un diseño estas etiquetas, cambiando el padding, márgenes, color,
botón, así como el estilo del texto de leyenda.
Dentro de las etiquetas
<head></head> definimos:
<style
type="text/css">
body{font:76% Arial,
sans-serif}
form{width:240px;padding:5px
0;
border: 2px solid #C6E9FF;
background:#CEF3FB;}
fieldset{border:0px solid
#000;}
legend{font:bold 140%
Arial,sans-serif;
color: #27518A;}
... continúa
Ahora definimos las medidas
del div que contiene al formulario, tanto el margen, ancho y alto.
div.medidas,div.check{margin:10px
0 10px 10px}
div.medidas
label{float:left;width:90px;
line-height:23px;}
div.medidas
input{width:120px;}
...continúa
Finalmente, modificamos el
botón de submit, fíjate como lo hacemos, al haberle dado una id (“login”) en el
código html, ahora para referirnos solamente a ese botón precisamos su id.
input#login{margin-left:
100px;
border:1px solid #27518A;
background:#ccc
url(fondoBoton.jpg) repeat-x}
</style>
Ahora diseñemos otro, uno
más angosto, como para ponerlo en el menú lateral de todo el site.
<style
type="text/css">
body{font: 12px Arial, sans-serif}
form{width: 120px;border: 1px solid
#C6E9FF;background-color: #CEF3FB;
color: #000;text-align: center}
fieldset{border: 0px solid #000;}
legend{color: #304A78;f
font-weight:bold;
margin:5px 0 0 15px;}
div.medidas{margin:5px 0}
div.medidas label{display:block}
div.medidas input{width:100px}
div.check{display:none}
input#login{margin:5px 0;border:1px
solid #27518A;
background:#ccc url(fondoBoton.jpg)
repeat-x}
</style>
Este
sería un ejemplo gráfico de jerarquización de un formulario utilizando los
elementos mencionados:Este sería el código HTML sin estilos y su apariencia inicial:
<div id="registro">
<fieldset>
<form>
<legend>Registro de Nuevo Usuario</legend>
<label for="user">Usuario:</label>
<input name="username " type="text" size="20" />
<label for="pass">Contraseña:</label>
<input name="password" type="password" size="20" />
<label for="pass">E-mail:</label>
<input name="email " type="text" size="20" />
<label for="pass">Nombre:</label>
<input name="firstname" type="text" size="20" />
<label for="pass">Apellidos:</label>
<input name="lastname " type="text" size="20" />
<label for="pass">Dirección:</label>
<textarea name="address" cols="26" rows="3">
</textarea>
<input name=" insert" type="submit" value="Aceptar" class="enviar"/>
</form>
</fieldset>
</div>
</div>
A continuación presentamos un ejemplo de formulario con estilos y el correspondiente código de css:
<fieldset id="registrousuario">
<form>
<legend>Registro de Nuevo Usuario</legend>
<label for="user">Usuario:</label>
<input class="texto" name="username " type="text" size="20" />
<label for="pass">Contraseña:</label>
<input class="texto" name="password" type="password" size="20" />
<label for="pass">E-mail:</label>
<input class="texto" name="email " type="text" size="20" />
<label for="pass">Nombres:</label>
<input class="texto" name="firstname" type="text" size="20" />
<label for="pass">Apellidos:</label>
<input class="texto" name="lastname " type="text" size="20" />
<label for="pass">Dirección:</label>
<textarea class="areadetexto" name="address" cols="26" rows="3">
</textarea>
<br />
<input class="botonenviar" name="insert" type="submit" value="Enviar" class="enviar"/>
</form>
</fieldset>
Código para la hoja de estilos (CSS):
#registrousuario {
background:transparent url(../images/bgfieldset.jpg) no-repeat scroll left bottom;
border:medium none;
color:#333333;
height:665px;
padding:0 0 0 50px;
width:515px;
}
#registrousuario legend {
color:#333333;
font-family:arial;
font-size:21px;
letter-spacing:-1px;
padding-bottom:20px;
padding-top:8px;
text-transform:capitalize;
}
#registrousuario input.texto {
background:#FFFFFF url(../images/bginputtexto.gif) no-repeat scroll left top;
border:medium none !important;
color:#666666;
font-size:12px;
height:24px;
padding-bottom:0;
padding-left:5px;
padding-top:5px;
width:454px;
font-family:arial,sans-serif;
}
#registrousuario textarea.areadetexto {
background: #ffffff url(../images/bgtextarea.gif) no-repeat scroll top left;
width: 454px;
height: 212px;
border:none !important;
padding-bottom:0;
padding-left:5px;
padding-top:5px;
color:#666666;
font-size:12px;
font-family:arial,sans-serif;
}
#registrousuario label {
display:block;
font-family:arial,sans-serif;
font-size:14px;
padding:10px 0 3px;
}
#registrousuario input.botonenviar {
background:transparent url(../images/bgbotonenviar.gif) no-repeat scroll left top;
border:medium none !important;
color:#FFFFFF;
display:block;
float:left;
font-family:arial,sans-serif;
height:30px;
margin-left:360px;
margin-top:20px;
text-align:center;
width:99px;
}
0 comentarios:
Publicar un comentario