HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Tutorial de CSS

CSS INÍCIO Introdução CSS Sintaxe CSS Seletores CSS CSS Como fazer Comentários CSS Cores CSS
Cores RGB HEX HSL
Planos de fundo CSS
Cor de fundo Imagem de fundo fundo de repetição Anexo de fundo Abreviação de fundo
Bordas CSS
Fronteiras Largura da borda Cor da borda Lados da borda Abreviação de borda Bordas arredondadas
Margens CSS
Margens Recolher Margem
Preenchimento CSS CSS Altura/Largura Modelo de caixa CSS Esboço CSS
Contorno Largura do contorno Cor do contorno Resumo do resumo Deslocamento de contorno
Texto CSS
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
Fontes CSS
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
Ícones CSS Links CSS Listas CSS Tabelas CSS
Table Borders Table Size Table Alignment Table Style Table Responsive
Exibição CSS Largura máxima do CSS Posição CSS Índice Z CSS Estouro de CSS CSS flutuante
Float Clear Float Examples
Bloco CSS Inline Alinhamento CSS Combinadores CSS Pseudoclasse CSS Pseudoelemento CSS Opacidade CSS Barra de navegação CSS
Navbar Vertical Navbar Horizontal Navbar
Listas suspensas de CSS Galeria de imagens CSS Sprites de imagem CSS Seletores de atributos CSS Formulários CSS Contadores CSS Layout do site CSS Unidades CSS Especificidade CSS CSS !importante Funções matemáticas CSS

CSS Avançado

Cantos arredondados CSS Imagens de borda CSS Planos de fundo CSS Cores CSS Palavras-chave de cores CSS Gradientes CSS
Linear Gradients Radial Gradients Conic Gradients
Sombras CSS
Shadow Effects Box Shadow
Efeitos de texto CSS Fontes da Web CSS Transformações CSS 2D Transformações CSS 3D Transições CSS Animações CSS Dicas de CSS Imagens de estilo CSS Reflexão de imagem CSS Ajuste de objeto CSS posição do objeto CSS Mascaramento CSS Botões CSS Paginação CSS CSS Múltiplas Colunas Interface de usuário CSS Variáveis ​​CSS
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Dimensionamento da caixa CSS Consultas de mídia CSS Exemplos de CSS MQ CSS Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

Responsivo a CSS

Introdução ao RWD Janela de visualização RWD Visualização de Grade RWD Consultas de mídia RWD Imagens RWD Vídeos RWD Estruturas RWD Modelos RWD

Grade CSS

Introdução à grade Contêiner de Grade Item de grade

CSS SASS

Tutorial SASS

Exemplos de CSS

Modelos CSS Exemplos de CSS teste css Exercícios de CSS Certificado CSS

Referências CSS

Referência CSS Seletores CSS Funções CSS Aural de referência CSS Fontes CSS seguras para a Web CSS Animatable Unidades CSS CSS PX-EM Converter Cores CSS Valores de cores CSS Valores padrão de CSS Suporte ao navegador CSS

Abreviação de fundo CSS

❮ Anterior Próximo ❯

Fundo CSS - propriedade abreviada

Para encurtar o código, também é possível especificar todas as propriedades do plano de fundo em uma única propriedade. Isso é chamado de propriedade abreviada.

Em vez de escrever:

body {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Você pode usar a propriedade abreviada background:

Exemplo

Use a propriedade abreviada para definir as propriedades do plano de fundo em uma declaração:

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

Ao usar a propriedade abreviada, a ordem dos valores da propriedade é:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Não importa se um dos valores da propriedade está faltando, desde que os outros estejam nesta ordem. Observe que não usamos a propriedade background-attachment nos exemplos acima, pois ela não possui um valor.

Teste-se com exercícios

Exercício:

Defina a cor de fundo do elemento <h1> como "azul claro".

<style>
h1 {
  : lightblue;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

Todas as propriedades de plano de fundo CSS

Property Description
background Sets all the background properties in one declaration
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page
background-clip Specifies the painting area of the background
background-color Sets the background color of an element
background-image Sets the background image for an element
background-origin Specifies where the background image(s) is/are positioned
background-position Sets the starting position of a background image
background-repeat Sets how a background image will be repeated
background-size Specifies the size of the background image(s)

❮ Anterior Próximo ❯