Las hojas de estilo en cascada, CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML.
La información de estilo puede ser adjuntada tanto como un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "style".
Hoja de estilo externa, es una hoja de estilo que está almacenada en un archivo diferente al archivo donde se almacena el código HTML de la página Web. Esta es la manera de programar más potente, porque separa completamente las reglas de formateo para la página HTML de la estructura básica de la página.
Hoja de estilo interna, que es una hoja de estilo que está incrustada dentro de un documento HTML. De esta manera se obtiene el beneficio de separar la información del estilo, del código HTML propiamente dicho.
Estilo en línea, que es un método para insertar el lenguaje de estilo de página, directamente, dentro de una etiqueta HTML. Esta manera de proceder no es totalmente adecuada.
Enlaces: Tutorial CSS
La información de estilo puede ser adjuntada tanto como un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "style".
Formas de aplicar las reglas de estilo a una página Web:
Hoja de estilo externa, es una hoja de estilo que está almacenada en un archivo diferente al archivo donde se almacena el código HTML de la página Web. Esta es la manera de programar más potente, porque separa completamente las reglas de formateo para la página HTML de la estructura básica de la página.
<head> <link rel="stylesheet" type="text/css" href="miestilo.css" /> </head>
Hoja de estilo interna, que es una hoja de estilo que está incrustada dentro de un documento HTML. De esta manera se obtiene el beneficio de separar la información del estilo, del código HTML propiamente dicho.
<head> <style type="text/css"> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>
Estilo en línea, que es un método para insertar el lenguaje de estilo de página, directamente, dentro de una etiqueta HTML. Esta manera de proceder no es totalmente adecuada.
<p style="color:sienna;margin-left:20px">Agregar un texto.</p>
Sintaxis
Propiedades CSS
Enseguida algunas de las propiedades que podemos cambiar con el CSS.Backgrounds
Sirve para mostrar un color de fondo y/o una imagen de fondo.body { background-color:#b0c4de; background-image:url('imagen.png'); background-repeat:no-repeat; background-position:right top; } /*Forma abreviada*/ body { background:#b0c4de url('imagen.png') no-repeat right top; }
Text
Nos permite alinear el texto y transformar el contenido en mayúsculas, minúsculas o con letra capital.body {color:blue;} a {text-decoration:none;} p.main { text-align:left|right|center|justify; text-transform:uppercase|lowercase|capitalize; }
Fonts
Para elegir el tipo de letra, el estilo de la letra y su tamaño.p { font-family:"Times New Roman", Times, serif; font-style:normal|italic|oblique; font-size:14px; }
Links
Los colores de los vínculos según sea uno visitado, cuando se pasa el ratón por encima o cuando esta activo.a:link {color:#FF0000;} a:visited {color:#00FF00;} a:hover {color:#FF00FF;} a:active {color:#0000FF;}
Margin
Nos permite alinear contenido.#nuevo { margin-top:20px; margin-bottom:60px; margin-right:50px; margin-left:30px; } /*Forma abreviada*/ #nuevo { margin:20px 50px 60px 30px; }
Padding
Alinear contenido con respecto a otro elemento.#otro { padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px; } /*Forma abreviada*/ #otro { padding:25px 50px; }
Enlaces: Tutorial CSS
Bien, ocho puntos para el lab.
ResponderEliminar