El ligarse a un archivo externo del CSS
Hemos escrito un documento estándar del HTML y hemos incluido el archivo de layout.css de una línea del código en el
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>CSS Layout</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<link href=”layout.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
</body>
</html>
Presentación de columnas
Hay dos maneras de presentar a columnas en el CSS: Absoluto que coloca y que coloca relativo. Ambos métodos son muy flexibles
Using the <div> tag
Entremos derecho la disposición para esta página. Hagamos una página usando tres divs. Es un HTML page estándar que usted puede utilizar con nuestro archivo de layout.css.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>CSS Layout</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<link href=”layout.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<div id=”header”>Header - Mi título irá para arriba aquí…</div>
<div id=”centreposition”> Sección central de su disposición de página </div>
<div id=”footer”>Footer - Este est el footer.</div>
</body>
</html>
La navegación se puede entonces insertar como
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>CSS Layout</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<link href=”layout.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<div id=”header”>Header - Mi título irá para arriba aquí…</div>
<div id=”centreposition”>Centreposition - Éste es el centro de la página.</div>
<div id=”footer”>Footer - Éste es el pie.</div>
<div id=”left”>Left - for the navigation<div>
</body>
</html>
Poner un div dentro de un div
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>CSS Layout</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<link href=”layout.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<div id=”header”>Header - Mi titular irá para arriba aquí…</div>
<div id=”centreposition”>
<div id=”centrecontent”>
Centrecontent - Éste es el nuevo centro de la página.
</div>
</div>
<div id=”footer”>Footer - Éste es el pie.</div>
<div id=”left”>Left - for the navigation<div>
</body>
</html>
¡Los CSS2 “heredan” el valor - disponible para cada característica - conducen al acuerdo”! “reglas importantes del estilo que gobiernan la mayoría o todo el documento. Por ejemplo, el estilo siguiente gobierna la fuerza todos los fondos al blanco y todos los colores del primero plano para ennegrecerse:
Ejemplo
/* Sets the text color to black
and the background color to
White for the document body. */
BODY {
Color: black! importante ;
background: white !importante
}
/* Causa los valores del “color” y del “fondo”
que se heredará por el resto de los elementos,
¡Consolidado cerca! importante. Observe que esto
puede ser eliminado por otro, más específico,
estilos del usuario. */
* {
color: inherit ! importante ;
background: inherit ! importante
}
El ejemplo siguiente demuestra cómo utilizar las hojas del estilo para crear un efecto de la gota-casquillo.
Ejemplo
<HEAD>
<TITLE>Drop caps</TITLE>
<STYLE type=”text/css”>
.dropcap { font-size : 120%; font-family : Helvetica }
</STYLE>
</HEAD>
<BODY>
<P><SPAN class=”dropcap”>O</SPAN>nce upon a time…
</BODY>
Cuando las hojas del estilo se dan vuelta apagado, cuando las hojas del estilo del usuario eliminan el mecanismo que oculta, o cuando las hojas del estilo no se apoyan.
Ejemplo
<STYLE type=”text/css”>
.endoflist { display: none }
</STYLE>
<UL>
<LI>Paper:
<UL>
<LI>Envelopes
<LI>Notepaper
<LI>Letterhead
<LI>Poster paper
<span class=”endoflist”>(End of Paper)</span>
</UL>
<LI>Pens:
<UL>
<LI>Blue writing pens
<LI>whiteboard pens
<span class=”endoflist”>(End of Pens)</span>
</UL>
<LI>Fasteners:
<UL>
<LI>paper clips
<LI>staples
<LI>Big lengths of rope.
<span class=”endoflist”>(End of Fasteners)</span>
</UL>
<span class=”endoflist”>(End of Office Supplies)</span>
</UL>
(2 votes, average: 4.5 out of 5)
english
español
Deutsch
français
Italiano
Português
русский
Loading ...
Dejar un comentario