Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

omagoo

Escreve em css na folha de estilo para o html puxar

Por , em Desenvolvimento frontend

Recommended Posts

omagoo    0

omagoo
Postado

Olá pessoal, tenho uma loja virtual que posso alterar elementos visuais através do css, é possível eu inserir um texto para que o html puxe esse dado?

 

Tentei com content mas não estou conseguindo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marco Bruno    19

Marco Bruno
Postado

Olá, omagoo.

 

Segua abaixo um exemplo utilzando o pseudo elemento :before:

 

HTML (index.html):

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Exemplo</title>

    <link rel="stylesheet" href="css/post.css">
</head>
<body>
    <article class="post">
        <img class="post-photo" src="http://imageplaceholder.com?size=300x300" alt="Exemplo de imagem para Post">
        <h1 class="post-title">Título do Post</h1>
        <p class="post-description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur neque dui, id blandit odio porttitor id. Etiam tristique at nisl ut consequat. Morbi hendrerit elementum feugiat. Vivamus sit amet iaculis nulla, vitae convallis lectus. Donec ullamcorper orci nec lacus rutrum sollicitudin. Quisque sapien mi, aliquam ac pretium sit amet, tempus in leo. Proin dictum fringilla leo, vitae ornare purus fringilla id. Duis nulla erat, gravida sit amet interdum facilisis, sollicitudin a erat. Maecenas at augue vulputate, commodo tortor quis, convallis felis. In elementum turpis consectetur, viverra felis ac, congue mi. Suspendisse tristique nisl id molestie ultrices. Vestibulum maximus ullamcorper ultrices. Aliquam at rhoncus justo. Integer eleifend auctor magna ac vulputate. In mauris lorem, accumsan vel urna nec, rutrum finibus turpis. Nam nec venenatis sem.
        </p>
    </article>
</body>
</html>

CSS (post.css):

/*
Reset CSS
*/
* {
    margin: 0;
    padding: 0;
    border: none;
    list-style: none;
}

/*
Código para alinhar as coisas na página
*/

body {
    font-family: Arial, sans-serif;
    font-size: 16px;
}

.post {
    background-color: #ecf0f1;
    overflow: hidden;
    padding: 10px;
}
.post-photo {
    float: left;
    margin-right: 40px;
}

/*
Você pode usar o before ou aftner para adicoanr conteúdo pelo css.
Na propriedade CSS content o valor dela pode ser texto ou uma imagem, se quiser
adicionar uma imagem use a url(caminho/imagem.png).
*/
.post-description:before {
    content: 'Texto inserido pelo CSS';
    font-size: 3em;
    color: #c0392b;
}

Qualquer dúvida só mandar no forum. :-)

 

[]'s

Marco Bruno.

Compartilhar este post

Link para o post
Compartilhar em outros sites

omagoo    0

omagoo
Postado

Obrigado pela resposta marco, mas como eu não tenho acesso ao html me sinto engessado e acabou não conseguindo, tentei aqui algumas formas e não consegui mesmo vendo seu exemplo funcionando.

 

Segue um exemplo, gostaria de inserir algo após o 2015, como ficaria o css?

<div class="span9 span12" style="text-align: center; min-height: 20px; width: 100%;">
          <p style="margin-bottom: 0;">
            © Todos os direitos reservados. 2015
          </p>
        </div>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito