Scribd Logo
Carica

Benvenuto in Scribd!

  • Hojas de Estilos

    Caricato da

    Jose Roberto Flores Elizalde
    3 visualizzazioni6 pagine

    Titolo originale

    Hojas de estilos

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formati disponibili

    DOCX, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    3 visualizzazioni6 pagine

    Hojas de Estilos

    Caricato da

    Jose Roberto Flores Elizalde

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 6

    Universidad Tecnolgica del sur de Sonora

    Tema: Hojas de estilo Alumno: Jos Roberto Flores Materia: Optativa Maestro: Ral Borquez Martnez

    12 octubre de 2011

    Introduccin
    Las hojas de estilo permiten centralizar y gestionar de manera bastante ms cmoda las instrucciones grficas que tradicionalmente se insertaban en el HTML. Se escriben en un lenguaje especial: el CSS.

    Que es una hoja de estilo?


    Una hoja de estilo es un conjunto de especificaciones que declara cmo deben mostrarse los componentes de una pgina web, es decir, cmo debe interpretar el navegador, a efectos de presentacin visual, los distintos elementos presentes en una pgina web. El formato de cada elemento de una pgina web se especifica mediante declaraciones de estilo denominadas reglas.
    Reglas

    Una regla CSS se compone de tres partes: 1. Selector 2. Propiedad 3. Valor

    Declaracin
    Las reglas de las hojas de estilo se pueden declarar en tres sitios distintos: 1. En la pgina web <head> <title>Aqu va un ttulo</title> <style type="text/css"> h1, h2, h3 { font-weight: normal; color: blue; } </style> </head> 2. En un archivo externo Las declaraciones se escriben en un archivo de texto con extensin .css sin ningn tipo de prembulo. En la seccin head de la pgina se debe indicar el enlace con el archivo que contiene las declaraciones de la hoja de estilo mediante el elemento link y los atributos rel, href y type: <head> <title>Aqu va un ttulo</title> <link rel="stylesheet" href="estilo.css" type="text/css" /> </head>

    3. En un elemento <p><acronym style="font-style: italic">W3C</acronym> son las siglas del World Wide Web Consortium</p>

    Cajas
    Desde el punto de vista de CSS, todo lo que hay en una pgina web es una caja. Lo que hace un selector es identificar la caja a la que se aplica el formato. Las cajas tienen: Contenido (content). El contenido de la caja: texto, imagen, etc. Relleno (padding). La distancia entre el contenido y el borde. Borde (border). El borde de la caja. Margen (margin). La distancia entre el borde y el elemento contenedor (p.e. body) u otro elemento adyacente. El siguiente diagrama muestra modelo oficial de cajas de CSS segn el W3C:

    Los componentes de la caja se pueden dividir en cuatro partes: top, bottom, right y left. Por tanto, en la ilustracin anterior, las siglas LM, RM, etc., significan LeftMargin, Right Margin, etc.

    Herencia
    Las cajas estn contenidas dentro de otras cajas y heredan los estilos de la caja contenedora si no hay una regla de nivel especfico. Por ejemplo, si declaramos un tipo de letra para el elemento body, todos los elementos que estn dentro, como h1, h2, p, etc. heredarn este tipo de letra. Ejemplo: Declaracin de reglas CSS: body { color: blue } h2 { color: red} Ahora el cdigo html de la pgina: <h1>Esto es un elemento h1</h1> <p>Este es un prrafo</p> <h2>Esto es h2</h2> <p>Ms texto marcado como prrafo</p> <h3>Esto es h3</h3> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <p>Apuesto a que todo es azul en esta pgina menos uno de los elementos</p> Ahora, el resultado en el navegador:

    Tipos de selectores
    Selectores de elemento h1 { color: blue } Selectores de clase .tituloFilm { font-size: 1.5em; font-family: Times New Roman; color: blue;} <p class=tituloFilm>2001: Una odisea del espacio</p> Selectores de identidad #navegacion { background-color: LightGrey; } <div id="navegacion">lalal</div>

    Buenas prcticas
    Para finalizar, mostraremos una lista de algunas buenas prcticas: 1. Declarar la hoja de estilo en un archivo separado (mejor que en la hoja de estilo, salvo necesidad especfica). 2. Utilizar medidas relativas (tanto por ciento en lugar de pxeles, o unidades em en lugar de puntos, etc.). 3. Usar elementos semnticos (h1, h2, blockquote, etc.) para organizar los contenidos de la pgina, no para conseguir una determinada apariencia de la misma. 4. Modificar la apariencia de la pgina exclusivamente mediante estilos (y no con elementos o atributos desaconsejados como font,center, etc. o usando elementos fuera de lugar). 5. Limitar al mximo declarar estilos dentro de elementos individuales (es decir, evitar el uso del atributo style dentro de elementos) .6. Denominar los selectores de clase y de identidad con nombres defuncin, p.e.: tituloFilm, menuGlobal, menuLocal, etc., (y no con el nombre de la apariencia resultante, p.e., negrita, letraMenor, letraGrande, etc.). Por tanto: usar nombres semnticos y no de apariencia. 7. Organizar los elementos principales de la pgina, p.e. cabecera, navegacin, contenido, etc., con secciones marcadas como elementos div.

    8. Utilizar elementos div (as como atributos y selectores id) con propiedades de posicionamiento para establecer la estructura de la pgina (layout) si fuera necesario en lugar de tablas o frames.

    Conclusin
    Las hojas de estilo nos ayudan mucho al momento de elaborar una pgina web y al modificarla, siempre y cuando la tengamos bien organizada y estructurada por que sino saldra la misma que dejarlo todo en el cdigo, si no la organizamos bien nos podemos perder y hacer muy tedioso el trabajo.

    Bibliografa
    http://www.lluiscodina.com/primeraGuiaCSSv1.pdf

    Potrebbero piacerti anche