--- title: CSS Syntax and Selectors localeTitle: Sintaxe CSS e Seletores --- ## Sintaxe CSS e Seletores Quando falamos sobre a sintaxe do CSS, estamos falando sobre como as coisas são apresentadas. Existem regras sobre o que vai onde, tanto para que você possa escrever CSS de forma consistente e um programa (como um navegador) pode interpretá-lo e aplicá-lo à página corretamente. Existem duas maneiras principais de escrever CSS. ### CSS Inline Detalhes sobre especificidade de CSS: [truques de CSS](https://css-tricks.com/specifics-on-css-specificity/) O CSS inline aplica o estilo a um único elemento e seus filhos, até que outro estilo que substitua o primeiro seja encontrado. Para aplicar CSS inline, adicione o atributo "style" a um elemento HTML que você gostaria de modificar. Citações internas, incluem uma lista delimitada por ponto-e-vírgula de pares de chave / valor (cada um por sua vez separados por dois pontos) indicando os estilos a serem definidos. Aqui está um exemplo de CSS inline. As palavras "One" e "Two" terão uma cor de fundo de amarelo e cor de texto de vermelho. A palavra "Três" tem um novo estilo que substitui o primeiro, e terá uma cor de fundo de cor verde e texto de ciano. No exemplo, estamos aplicando estilos a tags `
` , mas você pode aplicar um estilo a qualquer elemento HTML. ```html
One
Two
Three
``` ### CSS interno Enquanto escrever um estilo inline é uma maneira rápida de alterar um único elemento, há uma maneira mais eficiente de aplicar o mesmo estilo a vários elementos da página de uma só vez. O CSS interno tem seus estilos especificados na tag `
One
Two
Three
Four
``` Os seletores mostrados acima são extremamente simples, mas podem ser bastante complexos. Por exemplo, é possível aplicar estilos somente a elementos aninhados; isto é, um elemento que é filho de outro elemento. Aqui está um exemplo em que estamos especificando um estilo que só deve ser aplicado a elementos `div` que são um filho direto de outros elementos `div` . O resultado é que "Dois" e "Três" aparecerão como texto vermelho em um fundo amarelo, mas "Um" e "Quatro" permanecerão inalterados (e provavelmente texto preto em um fundo branco). ```html
One
Two
Three
Four
``` ### CSS externo Todo o estilo tem seu próprio documento que está vinculado na tag `` . A extensão do arquivo vinculado é `.css` #### Mais Informações: * [Sintaxe CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax) @ MDN * [Seletores de CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) @ MDN * [Referência de Seletores CSS](https://www.w3schools.com/cssref/css_selectors.asp) * [Especificidade de Seletores CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)