Tutorial de CSS

CSS INÍCIO Introdução CSS Sintaxe CSS Seletores CSS CSS Como fazer Comentários CSS Cores CSS Planos de fundo CSS Bordas CSS Margens CSS Preenchimento CSS CSS Altura/Largura Modelo de caixa CSS Esboço CSS Texto CSS Fontes CSS Ícones CSS Links CSS Listas CSS Tabelas CSS Exibição CSS Largura máxima do CSS Posição CSS Índice Z CSS Estouro de CSS CSS flutuante Bloco CSS Inline Alinhamento CSS Combinadores CSS Pseudoclasse CSS Pseudoelemento CSS Opacidade CSS Barra de navegação CSS 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 Sombras CSS 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 Dimensionamento da caixa CSS Consultas de mídia CSS Exemplos de CSS MQ CSS Flexbox

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

Palavras- chave de cores CSS


Esta página explicará as palavras-chave transparent, currentcolor, e inherit.


A palavra-chave transparente

A transparentpalavra-chave é usada para tornar uma cor transparente. Isso geralmente é usado para criar uma cor de fundo transparente para um elemento.

Exemplo

Aqui, a cor de fundo do elemento <div> será totalmente transparente e a imagem de fundo será exibida:

body {
  background-image: url("paper.gif");
}

div {
  background-color: transparent;
}

Nota: A transparent palavra-chave é equivalente a rgba(0,0,0,0). Os valores de cor RGBA são uma extensão dos valores de cor RGB com um canal alfa - que especifica a opacidade de uma cor. Leia mais em nosso capítulo CSS RGB e em nosso capítulo CSS Colors .


A palavra-chave cor atual

A currentcolorpalavra-chave é como uma variável que contém o valor atual da propriedade color de um elemento.

Essa palavra-chave pode ser útil se você quiser que uma cor específica seja consistente em um elemento ou página.

Exemplo

Neste exemplo, a cor da borda do elemento <div> será azul, porque a cor do texto do elemento <div> é azul:

div {
  color: blue;
  border: 10px solid currentcolor;
}

Exemplo

Neste exemplo, a cor de fundo do <div> é definida para o valor de cor atual do elemento body:

body {
  color: purple;
}

div {
  background-color: currentcolor;
}

Exemplo

Neste exemplo, a cor da borda e a cor da sombra do <div> são definidas para o valor de cor atual do elemento body:

body {
 color: green;
}

div {
  box-shadow: 0px 0px 15px currentcolor;
  border: 5px solid currentcolor;
}

A palavra-chave herdada

A palavra- inheritchave especifica que uma propriedade deve herdar seu valor de seu elemento pai.

A inheritpalavra-chave pode ser usada para qualquer propriedade CSS e em qualquer elemento HTML.

Exemplo

Neste exemplo, as configurações de borda do <span> serão herdadas do elemento pai: 

div {
  border: 2px solid red;
}

span {
  border: inherit;
}