0

Estou estudando HTML e CSS através da apostila da Caelum e estou tendo problemas para fazer o CSS funcionar corretamente na página.

Tenho o seguinte código CSS:

body {
    color: #333333;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans serif;
}

h1 {
    background-image: url(C:\Users\Caique\Documents\Study\HTML - CSS - JavaScript\Caelum\Mirror Fashion\caelum-arquivos-curso-web\mirrorfashion\img\sobre-background.jpg);
}

h2 {
    border-bottom: 2px solid #333333;
}

figure {
    background-color: #F2EDED
    border: 1px solid #ccc;
    text-align: center;
}

figcaption{
    font-style: italic;
}

E o código HTML:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sobre a Mirror Fashion</title>
        <link rel="stylesheet" href="estilos.css">
    </head>
    <body>
        <img src="C:\Users\Caique\Documents\Study\HTML - CSS - JavaScript\Caelum\Mirror Fashion\caelum-arquivos-curso-web\mirrorfashion\img\logo.png">

        <h1>A Mirror Fashion</h1>

        <p>
        A <strong>Mirror Fashion</strong> é a maior empresa comércio eletrônico no segmento de moda em todo o mundo. 
        Fundada em 1932, possui filiais em 124 países, sendo líder de mercado com mais de 90% de 
        participação em 118 deles.
        </p>

        <p>
        Nosso centro de distribuição fica em Jacarezinho, no Paraná. De lá, saem 48 aviões que 
        distribuem nossos produtos às casas do mundo todo. Nosso centro de distribuição:
        </p>

        <figure>
            <img src="C:\Users\Caique\Documents\Study\HTML - CSS - JavaScript\Caelum\Mirror Fashion\caelum-arquivos-curso-web\mirrorfashion\img\centro-distribuicao.png">
            <figcaption>Centro de Distribuição da Mirror Fashion</figcaption>
        </figure>

        <p>
        Compre suas roupas e acessórios na <strong>Mirror Fashion</strong>. Acesse nossa loja ou entre em contato 
        se tiver dúvidas. Conheça também nossa história e nossos diferenciais.
        </p>

        <h2>História</h2>

        <figure>
            <img src="C:\Users\Caique\Documents\Study\HTML - CSS - JavaScript\Caelum\Mirror Fashion\caelum-arquivos-curso-web\mirrorfashion\img\familia-pelho.jpg">
            <figcaption>Família Pelho</figcaption>
        </figure>

        <p>
        A fundação em 1932 ocorreu no momento da descoberta econônica do interior do Paraná. A 
        família <em>Pelho</em>, tradicional da região, investiu todas as suas economias nessa nova iniciativa, 
        revolucionária para a época. O fundador <em>Eduardo Simões Pelho</em>, dotado de particular visão 
        administrativa, guiou os negócios da empresa durante mais de 50 anos, muitos deles ao lado 
        de seu filho <em>E. S. Pelho Filho</em>, atual CEO. O nome da empresa é inspirado no nome da família.
        </p>

        <p>
        O crescimento da empresa foi praticamente instantâneo. Nos primeiros 5 anos, já atendia 18 países. 
        Bateu a marca de 100 países em apenas 15 anos de existência. Até hoje, já atendeu 740 milhões 
        de usuários diferentes, em bilhões de diferentes pedidos.
        </p>

        <p>
        O crescimento em número de funcionários é também assombroso. Hoje, é a maior empregadora do 
        Brasil, mas mesmo após apenas 5 anos de sua existência, já possuía 30 mil funcionários. Fora do 
        Brasil, há 240 mil funcionários, além dos 890 mil brasileiros nas instalações de Jacarezinho e 
        nos escritórios em todo país.
        </p>

        <p>
        Dada a importância econômica da empresa para o Brasil, a família <em>Pelho</em> já recebeu diversos prêmios, 
        homenagens e condecorações. Todos os presidentes do Brasil já visitaram as instalações da Mirror 
        Fashion, além de presidentes da União Européia, Ásia e o secretário-geral da ONU.
        </p>
    </body>
</html>

Porém não vejo a alteração do backgroud-image e do background-color na página.

1 Resposta 1

3

Inverta as barras e adicione aspas:

background-image: url("C:/Users/Caique/Documents/Study/HTML - CSS - JavaScript/Caelum/Mirror Fashion/caelum-arquivos-curso-web/mirrorfashion/img/sobre-background.jpg");

Isso é porque talvez as barras que você usou em HTML e CSS podem estar "escapando algo", um detalhe importante de saber é que C: (que é basicamente usar o protocolo file:///) não funcionará quando seu site for para um servidor WEB, use o caminho relativo ao invés de absoluto.

Supondo que sua estrutura de pastas seja assim:

./mirrofashion
├── index.html
├── estilo.css
└── ./img
    ├── sobre-background.jpg
    ├── familia-pelho.jpg
    └── centro-distribuicao.png

Você pode ajustar seu CSS para isto:

h1 {
    background-image: url(img/sobre-background.jpg);
}

E seu HTML para isto:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sobre a Mirror Fashion</title>
        <link rel="stylesheet" href="estilos.css">
    </head>
    <body>
        <img src="img/logo.png">

        <h1>A Mirror Fashion</h1>

        <p>
        A <strong>Mirror Fashion</strong> é a maior empresa comércio eletrônico no segmento de moda em todo o mundo. 
        Fundada em 1932, possui filiais em 124 países, sendo líder de mercado com mais de 90% de 
        participação em 118 deles.
        </p>

        <p>
        Nosso centro de distribuição fica em Jacarezinho, no Paraná. De lá, saem 48 aviões que 
        distribuem nossos produtos às casas do mundo todo. Nosso centro de distribuição:
        </p>

        <figure>
            <img src="img/centro-distribuicao.png">
            <figcaption>Centro de Distribuição da Mirror Fashion</figcaption>
        </figure>

        <p>
        Compre suas roupas e acessórios na <strong>Mirror Fashion</strong>. Acesse nossa loja ou entre em contato 
        se tiver dúvidas. Conheça também nossa história e nossos diferenciais.
        </p>

        <h2>História</h2>

        <figure>
            <img src="img/familia-pelho.jpg">
            <figcaption>Família Pelho</figcaption>
        </figure>

        <p>
        A fundação em 1932 ocorreu no momento da descoberta econônica do interior do Paraná. A 
        família <em>Pelho</em>, tradicional da região, investiu todas as suas economias nessa nova iniciativa, 
        revolucionária para a época. O fundador <em>Eduardo Simões Pelho</em>, dotado de particular visão 
        administrativa, guiou os negócios da empresa durante mais de 50 anos, muitos deles ao lado 
        de seu filho <em>E. S. Pelho Filho</em>, atual CEO. O nome da empresa é inspirado no nome da família.
        </p>

        <p>
        O crescimento da empresa foi praticamente instantâneo. Nos primeiros 5 anos, já atendia 18 países. 
        Bateu a marca de 100 países em apenas 15 anos de existência. Até hoje, já atendeu 740 milhões 
        de usuários diferentes, em bilhões de diferentes pedidos.
        </p>

        <p>
        O crescimento em número de funcionários é também assombroso. Hoje, é a maior empregadora do 
        Brasil, mas mesmo após apenas 5 anos de sua existência, já possuía 30 mil funcionários. Fora do 
        Brasil, há 240 mil funcionários, além dos 890 mil brasileiros nas instalações de Jacarezinho e 
        nos escritórios em todo país.
        </p>

        <p>
        Dada a importância econômica da empresa para o Brasil, a família <em>Pelho</em> já recebeu diversos prêmios, 
        homenagens e condecorações. Todos os presidentes do Brasil já visitaram as instalações da Mirror 
        Fashion, além de presidentes da União Européia, Ásia e o secretário-geral da ONU.
        </p>
    </body>
</html>

Desta maneira, mesmo que se mover a pasta para outro local ou para um servidor online ainda irá funcionar provavelmente e não será necessário nenhum ajuste.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .