Criar plano de fundo e borda para tag HTML
Neste artigo, mostrarei como criar um plano de fundo para tags HTML, através do qual você saberá como usar algumas propriedades CSS sobre o plano de fundo.
Para criar uma cor de fundo para qualquer tag HTML, usamos a propriedade background. Este artigo eu apresentei na série de aprendizado de CSS, mas para sua conveniência, hoje vou criar uma lição completamente nova. Você pode conferir o artigo que vinculei acima para saber mais.
1. Crie uma cor de fundo para tags HTML
Suponha que eu tenha uma tag div , quero criar um plano de fundo e borda para ela, basta usar as propriedades background e border .
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> div{ background: red; height: 200px; } </style> </head> <body> <div> Nội dung bên trong </div> </body> </html>Adicione borda a ele.
div{ background: red; height: 200px; border: solid 3px blue; }Como você pode ver, o plano de fundo dessa tag div tem um comprimento de 100%. O motivo é porque a tag div é exibida como um bloco, portanto, tem uma largura de 100%. Se a substituirmos por uma tag span agora, será completamente diferente.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> span{ background: red; border: solid 3px blue; } </style> </head> <body> <span>Thẻ span</span> </body> </html>2. Entendendo as cores de fundo e de borda
Em relação às cores, você pode usar de acordo com as seguintes regras:
- Use nomes em inglês como preto, branco, vermelho, azul…
- Use o formato RGB como:
- rgb(255,0,0) = vermelho
- rgb(0,255,0) = verde
- rgb(0,0,255) = azul
- rgb(0,0,0) = preto
- rgb(255.255.255) = branco
- Use o formato Hex como:
- #ff0000 = vermelho
- #00ff00 = verde
- #0000ff = azul
- #000000 = preto
- #ffffff = branco
- E alguns outros formatos como RGBA e HSL
Costumamos usar o formato Hex, porque esse é o código de cores padrão no Photoshop.
Por exemplo : Defina o plano de fundo para vermelho, você pode escrever uma das maneiras abaixo.
background: red; background: #ff0000; background: rgb(255,0,0); Bài viết liên quan:
Dịch vụ thiết kế Wesbite
