Ir ao conteúdo
  • Cadastre-se

CSS CSS inline não funcionando.


Posts recomendados

Olá, comecei a programar a pouco tempo html, agora ja estou no css, mas, quando dou um: style color: red;

Não funciona

<!DOCTYPE html>
<html>
      <!-- Nome da página -->
    <head>
    <title>Lorem Ipsum</title>
    <meta charset=UTF-8>
</head>

<body>

    <h1>Lorem Ipsum</h1>
    <br> <br> <br> <br> <br> 



    <p> style color: red;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget metus sit amet turpis finibus suscipit pretium vitae urna. Sed egestas dui nisi, quis lobortis est dapibus eu. Proin vitae nunc interdum, vehicula dui efficitur, cursus augue. Donec congue libero fringilla risus tincidunt maximus. In maximus est id ornare porttitor. Duis placerat placerat turpis, sit amet aliquet metus egestas eu. Nulla facilisi. In mollis finibus lacinia. Praesent pharetra tortor quis aliquam fermentum.

Duis feugiat sapien quis justo pharetra, ut viverra ante venenatis. Nullam id feugiat dolor. Nullam bibendum bibendum ligula sollicitudin iaculis. Proin bibendum, elit id luctus dictum, nulla tellus aliquet diam, at dictum mauris urna quis urna. Maecenas et purus in ex consequat luctus. Donec feugiat feliz sit amet pretium feugiat. Donec eget nibh fermentum, molestie magna id, gravida nibh.

Ut mattis urna a sapien ornare congue. Sed feliz erat, pellentesque et ante feugiat, mattis eleifend lorem. Aliquam consectetur sem a lorem ultrices tristique. Etiam vel eleifend ante. In aliquam nec dui semper vestibulum. Aenean ut dui eget risus pulvinar suscipit vitae eget lacus. Ut a molestie erat, sed sodales velit. Morbi vel tortor vel turpis dictum euismod eget vitae odio. Donec blandit nisl rhoncus eros euismod, vel maximus diam cursus. Fusce vehicula tortor id orci efficitur, quis varius neque laoreet. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Integer sagittis, dolor vel volutpat rhoncus, tellus massa convallis leo, a accumsan eros dui vel enim. Maecenas id eros purus. Proin posuere ex lacinia nunc aliquam luctus. Phasellus sodales risus turpis, eu feugiat est mollis quis. In eu ultrices orci. Pellentesque id magna laoreet, dictum urna non, pellentesque metus. Ut porttitor sapien eu placerat accumsan.

Proin interdum ullamcorper sem a blandit. Praesent et euismod magna, in viverra tortor. Donec condimentum metus id fringilla sollicitudin. Donec id facilisis augue. Quisque tincidunt diam bibendum, condimentum libero nec, consequat elit. Morbi in leo nulla. Proin vel vehicula odio. In a quam nec enim scelerisque mollis eget a justo. Nullam eleifend libero feliz, quis sollicitudin augue rhoncus at. Phasellus eget ullamcorper augue. Phasellus nec elementum erat. Sed dictum risus id risus porta, eu placerat odio cursus. Ut ultricies nibh eros. Ut posuere eget feliz tempor faucibus. Aliquam cursus risus et mi mollis, quis porttitor justo scelerisque.

</p>



    <a href=sobre.html>Info</a>



  






    <table>

        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>

        
        <tr>
            <td>um</td>
            <td>dois</td>
            <td>três</td>

        </tr>

    </table>



















    </body>
</html>

 

 

 

Link para o comentário
Compartilhar em outros sites

  • Moderador

@NumSei0210 O erro foi ter colocado o estilo de forma errada.

No caso, você deve sempre colocar o estilo dentro do elemento. Caso tenha mais de um estilo, podes separar por "ponto e virgula " ; "

 

<p style="color:red; background-color: yellow">

 

@dyonatan_da_nova_geracao Embora não seja recomendado a usar sempre dessa maneira, não é errado também.

Basicamente, usamos o estilo inline quando queremos que o estilo prevaleça, pois ali na linha ele tem um grau de precedência maior.

Exemplo:

 

<p style="color: red;" class="corTexto"> olá seja bem-vindo, e bem-vindo também.</p>
.corTexto{
  color: blue;
}

 

Qual das cores o texto mostrará?

Caso responda, vermelho, acertou.

Pois o grau de precedência dele é maior do que o estilo do class ou id.

 

Mas, se adicionarmos este atributo !important assim:

.corTexto{
  color: blue !important;
}

Nesse caso, a cor azul será mostrada, pois o atributo !important,  sobrescreve a regra de estilo na linha, tornando o grau de precedência maior. 

Caso não saiba disso, será uma lição. Se já sabia, será um reforço ao seu conhecimento e uma dica para o colega que está aprendendo! 😁

 

Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...