Solucionado (ver solução)
Solucionado
(ver solução)
9
respostas

Não consigo destacar os textos com as tags <strong> e <span>

Referente ao curso HTML5 e CSS3 parte 3: trabalhando com formulários e tabelas, no capítulo Começando um formulário e atividade Campos básicos

por André Ferraz de Almeida
| 384.9k xp | 200 posts

Um bom dia! Estou tentando usar as tags <strong> e <span> mas o meu texto não altera de forma nenhuma! O que poso estar fazendo de errado? Nunca consigo usar estas duas tags corretamente :/

HTML

<div class="sqr1">
                    <h3 class="footer_titles"> Horário de Funcionamento </h3>
                    <ul class="horarios">
                        <li>
                            <strong> Segunda: </strong>
                            <span>     11:00 às 00:00 </span>
                        </li>
                        <li>
                            <strong> Terça: </strong>
                            <span>     Não abrimos </span>
                        </li>
                        <li>
                            <strong> Quarta: </strong>
                            <span>     11:00 às 00:00 </span>
                        </li>
                        <li>
                            <strong> Quinta: </strong>
                            <span>     11:00 às 00:00 </span>
                        </li>
                        <li>
                            <strong> Sexta: </strong>
                            <span>     11:00 às 02:00 </span>
                        </li>
                        <li>
                            <strong> Sábado: </strong>
                            <span>     11:00 às 02:00 </span>
                        </li>
                        <li>
                            <strong> Domingo: </strong>
                            <span>     11:00 às 00:00 </span>
                        </li>
                    </ul>
                </div>

CSS para vizualizar melhor

.sqr1{
    background-color: black;
    width: 50%;
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
}

.page_footer h3{
    color: #e59816;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 300;
    line-height: 1.1 !important;
    box-sizing: border-box;
}

.horarios{
    list-style: none;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 10px;
    box-sizing: border-box;
}

Agradeço a ajuda :D

9 respostas
solução!
por Diego Rodrigues Cravo Teixeira
| 168k xp | 361 posts

Olá, testei aqui e o código funcionou certinho. O Span visualmente não muda nada, a não ser que coloque um "style" nele.

https://www.w3schools.com/tags/tag_span.asp

por André Ferraz de Almeida
| 384.9k xp | 200 posts

Mas como que eu faço pra deixar o css do <span> configurado? É possível, ou. teria que alterar sempre o css inline?

Eu tentei adicionar uma class e não deu :/ Ai o <strong> eu marquei manualmente mas o span queria saber como configurar pq to utilizando mt nas outras páginas

por Diego Rodrigues Cravo Teixeira
| 168k xp | 361 posts

Você pode colocar a class dentro do span, e chama essa class no css. Utilizando uma parte do teu código, como exemplo, eu testei aqui e funcionou:

HTML:

    < li>
                < strong> Segunda: </strong>
                <span  class="azul">     11:00 às 00:00 </span>
        </li>

CSS:

.azul{
    background-color: blue;
    color: red;
}
por André Ferraz de Almeida
| 384.9k xp | 200 posts

Me manda o código do jeito que tu usou pfv pq devo estar fznd alguma coisa errada ou sem ordem. O strong ainda n enfatiza a letra tb, e o span ta zuado tb

por Diego Rodrigues Cravo Teixeira
| 168k xp | 361 posts

Não mencionei mas tinha uma classe do CSS que tava com o nome diferente. No caso vc declarou ela no CSS com um nome e no HTML chamou ela com outro nome. class="footer_titles" no HTML e .page_footer no CSS.

O código HTML:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="sqr1">
        <h3 class="footer_titles"> Horário de Funcionamento </h3>
        <ul class="horarios">
            <li>
                <strong> Segunda: </strong>
                <span  class="azul">     11:00 às 00:00 </span>
            </li>
            <li>
                <strong> Terça: </strong>
                <span>     Não abrimos </span>
            </li>
            <li>
                <strong> Quarta: </strong>
                <span>     11:00 às 00:00 </span>
            </li>
            <li>
                <strong> Quinta: </strong>
                <span>     11:00 às 00:00 </span>
            </li>
            <li>
                <strong> Sexta: </strong>
                <span>     11:00 às 02:00 </span>
            </li>
            <li>
                <strong> Sábado: </strong>
                <span>     11:00 às 02:00 </span>
            </li>
            <li>
                <strong> Domingo: </strong>
                <span>     11:00 às 00:00 </span>
            </li>
        </ul>
    </div>
</body>

CSS: 

.sqr1{
    width: 50%;
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
}

.footer_titles {
    background: black;
    color: #e59816;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 300;
    line-height: 1.1 !important;
    box-sizing: border-box;
}

.horarios{
    list-style: none;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 10px;
    box-sizing: border-box;
}    
.azul{
    background-color: blue;
    color: red;
}
por André Ferraz de Almeida
| 384.9k xp | 200 posts

Ahhh é uma classe que to usando pra outra coisa. Esse h3 é do footer em si, o footer_titles ta em outra div que não coloquei ai mas foi só ora deixar padrão! Valeu pelo código, vou trocar as classes e tentar novamente ;)

por Diego Rodrigues Cravo Teixeira
| 168k xp | 361 posts

Massa, se funcionar avisa.

por André Ferraz de Almeida
| 384.9k xp | 200 posts

Então amigo eu fiz de outra forma pois esta não deu certo. Vou te mandar aqui e cê me diz se esta pode ser usada (e os benefícios ou malefícios dela, se souber informar)

O HTML

<div class="sqr1">
                    <h3> Horário de Funcionamento </h3>
                        <ul class="horarios">
                            <li>
                                <strong> Segunda: </strong>
                                <span>     11:00 às 00:00 </span>
                            </li>
                            <li>
                            <strong> Terça: </strong>
                            <span>     Não abrimos </span>
                            </li>
                            <li>
                                <strong> Quarta: </strong>
                                <span>     11:00 às 00:00 </span>
                            </li>
                            <li>
                                <strong> Quinta: </strong>
                                <span>     11:00 às 00:00 </span>
                            </li>
                            <li>
                                <strong> Sexta: </strong>
                                <span>     11:00 às 02:00 </span>
                            </li>
                            <li>
                                <strong> Sábado: </strong>
                                <span>     11:00 às 02:00 </span>
                            </li>
                            <li>
                                <strong> Domingo: </strong>
                                <span>     11:00 às 00:00 </span>
                            </li>
                        </ul>
                </div>

O CSS


/** onde eu alterei o strong **/
.horarios li strong{
    font-weight: bold;
    font-size: 20px;
}

/** onde deixei o span da forma que queria **/
.horarios li span{
    font-family: sans-serif;
}
por Diego Rodrigues Cravo Teixeira
| 168k xp | 361 posts

Certíssimo, da pra usar desse jeito também!