Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 2 de 2

Tema: Problema con estilos

  1. #1
    Recien Llegado! Pasaba por aquí...
    Fecha de Ingreso
    29 ago, 15
    Mensajes
    1
    Poder de Reputación
    0

    Unhappy Problema con estilos

    Tengo un problema, hice mi index con estilos y eso bien ya lo visualizo y se ve bien, ahora tengo un problema cuando intento "copiar pegar" el mismo index para asi de ese mismo hacer mis otras paginas como contacto, formulario, tienda, etc apenas entro lo que borre afecta al index principal no se porque, supongo que por el estilo pero no se como hacer para que sean independientes, si alguien puede darme una mano lo agradecería un millon.



    Lo que basicamente quiero lograr es copiar el index, editarlo con dreamweaver cs6, quitarle todo y dejarlo asi, para usarlo de molde para todas las demas.

    esta es mi index:



    quiero dejarla asi para ponerle en contacto, formularios, etc! Otras cosas pero si borro algo tambien se borra del index :( :( :(

    La quiero asi:



    Sin que afecte mi index principal.

  2. #2
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,044
    Poder de Reputación
    21
    Hola!

    Al parecer no has entendido el sentido de los archivos CSS enlazados a través de link :).

    La idea de enlazar 1 o varios archivos CSS a las páginas de tu sitio, es que con un pequeño cambio en el archivo CSS principal estarás modificando todas las páginas que tengan este archivo enlazado. Esa es la idea principal de los estilos CSS y no lo puedes cambiar.

    Lo que puedes hacer es:

    - Copiar el archivo CSS con nombres distintos y enlazar cada uno de estos a su respectiva página. Por ejemplo, copiar estilos.css y renombrarlo como "contacto.css". Luego cambiar el atributo href de la etiqueta link. No te recomiendo que uses esta forma, pues se pierde la idea principal de los archivos CSS.
    - Puedes crear un div contenedor distinto en cada página y sobreescribir los estilos que quieras en este. Este punto es el recomendado y se hace así:

    estilos.css
    Código HTML:
    #cabecera { background-color: red }
    #contenido { background-color: green; }
    
    /* Estilos para Home */
    #home #contenido { background-color: blue; }
    
    /* Estilos para Contacto */
    #contacto #contenido { background-color: orange; }
    
    etc...

    plantilla.html
    Código HTML:
    <!DOCTYPE html>
    <html>
        <link href="estilos.css" ... />
    <head>
    </head>
    <body>
        <div id="cabecera">
            <header><h1>Bienvenidos a "mi página"</h1></header>
        </div>
        <div id="home">
            <div id="contenido">
                <h2>Home</h2>
            </div>
        </div>
        <footer>
            <p>Mi pie de página</p>
        </footer>
    </body>
    </html>
    contacto.html
    Código HTML:
    <!DOCTYPE html>
    <html>
        <link href="estilos.css" ... />
    <head>
    </head>
    <body>
        <div id="cabecera">
            <header><h1>Bienvenidos a "mi página"</h1></header>
        </div>
        <div id="contacto">
            <div id="contenido">
                <h2>Contacto</h2>
            </div>
        </div>
        <footer>
            <p>Mi pie de página</p>
        </footer>
    </body>
    </html>
    La idea es que sólo tengas que cambiar el id de la sección y luego definir los estilos para cada una.

    Cuando defines estilos, ten en cuenta que os estilos se sobreescriben unos a otros dependiendo del lugar donde aparezcan y los específicos que sean. Esto significa:

    - Con específicos me refiero a que, si yo escribo #contenido { reglas } es menos específico que #home #contenido { reglas }, por lo tanto, este último siempre sobreescribiará al primero (o menos específico).
    - Sobre el lugar donde aparezcan, básicamente significa que si defino un estilo en la línea 10 y luego lo redefino en la línea 30, este último sobreescribirá al primero.
    - Teniendo en cuenta lo anterior, los estilos se sobreescribirán según el orden de inclusión. El orden es el siguiente (de menor jerarquía a mayor jerarquía):
    1. Archivos enlazados a través de link. Estos serán sobreescritos por los que le sigan, incluso por lo que se incluyan en otros link después del primero.
    2. Estilos definidos con la etiqueta style. Estos sobreescriben a los de archivos enlazados.
    3. Estilos definidos en las etiquetas (ejemplo: <p style="color: red">texto...</p>). Estos sobreescriben a todos los anteriores.

    Como ves, todo se puede sobreescribir :).
    Última edición por skaparate; 29/08/2015 a las 17:21

Temas Similares

  1. problema con estilos.css
    Por mauricio-5 en el foro Foro General
    Respuestas: 2
    Último Mensaje: 28/02/2011, 23:37
  2. Problema con estilos.css
    Por Sven en el foro Curso Paso a Paso con Html-Kit.
    Respuestas: 7
    Último Mensaje: 09/11/2010, 12:42
  3. problema con estilos
    Por cristian20vt en el foro Foro General
    Respuestas: 2
    Último Mensaje: 12/09/2010, 16:51

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •