CSS Programacion Web
j0namty26 de Octubre de 2013
702 Palabras (3 Páginas)710 Visitas
Investigar para contestar las siguientes preguntas:
¿Qué es CSS, en programación web?
(Cascading Style Sheets, u Hojas de Estilo en Cascada) es la tecnología desarrollada por el World Wide Web Consortium (W3C) con el fin de separar la estructura de la presentación.
Sirve para organizar la presentación y aspecto de una página web.
¿Cómo se programan, codifican, colocan en una página web?
CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.
h1 {color: red;}
h1 es el selector
{color: red;} es la declaración
El selector funciona como enlace entre el documento y el estilo, especificando los elementos que se van a ver afectados por esa declaración. La declaración es la parte de la regla que establece cuál será el efecto. En el ejemplo anterior, el selector h1 indica que todos los elementos h1 se verán afectados por la declaración donde se establece que la propiedad color va a tener el valor red (rojo) para todos los elementos h1 del documento o documentos que estén vinculados a esa hoja de estilos.
Las tres formas más conocidas de dar estilo a un documento son las siguientes:
• Utilizando una hoja de estilo externa que estará vinculada a un documento a través del elemento <link>, el cual debe ir situado en la sección <head>.
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">
• <html>
• <head>
• <title>Título</title>
• <link rel="stylesheet" type="text/css" href="http://www.w3.org/css/officeFloats.css" />
• </head>
• <body>
• .
• .
• .
• .
• </body>
• </html>
• Utilizando el elemento <style>, en el interior del documento al que se le quiere dar estilo, y que generalmente se situaría en la sección <head>. De esta forma los estilos serán reconocidos antes de que la página se cargue por completo.
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">
• <html>
• <head>
• <title>hoja de estilo interna</title>
• <style type="text/css">
•
• body {
• padding-left: 11em;
• font-family: Georgia, "Times New Roman", serif;
• color: red;
• background-color: #d8da3d;
• }
•
• h1 {
• font-family: Helvetica, Geneva, Arial, sans-serif;
• }
•
• </style>
• </head>
• <body>
• <h1>Aquí se aplicará el estilo de letra para el Título</h1>
• </body>
• </html>
• Utilizando estilos directamente sobre aquellos elementos que lo permiten a través del atributo <style> dentro de <body>. Pero este tipo de definición del estilo pierde las ventajas que ofrecen las hojas de estilo al mezclarse el contenido con la presentación.
Algunas normas básicas a la hora de crear una CSS son las siguientes:
• En el siguiente ejemplo, h1{color: red;}, el selector, <h1>, le dice al navegador la parte del documento que se verá afectada por esa regla. Los selectores pueden aparecer individualmente o agrupados, separándolos con comas:
• h1, h2, h3 {
...