Esta lição investiga o aumento dos visuais HTML usando folhas de estilo em cascata (CSS). Começaremos com os seletores CSS - as ferramentas para direcionar elementos HTML específicos.

folhas de estilo em cascata (css)

CSS determina a aparência dos componentes HTML: cor, espaçamento, tamanho e muito mais. Embora você possa estilizar elementos individuais usando atributos em linha (por exemplo,

), isso é ineficiente para sites grandes.

Uma abordagem mais eficaz envolve o uso de um elemento na seção ) vinculado ao seu html usando :

/* style.css */
p {
  color: red;
  text-decoration: underline;
}

elementos. Ferramentas do desenvolvedor do navegador (por exemplo, clique com o botão direito do mouse, "Inspecione" no Chrome) permitem examinar e modificar estilos aplicados para solução de problemas.

selecionando elementos html

... } seleciona todos

elementos. Para estruturas mais complexas,

id e classe atributos fornecem mais control. classe e seletores de id Cada elemento pode ter um id exclusivo

. ID Selectors (

#idname ) elementos de destino por id

. No entanto,

id deve ser único, limitando sua flexibilidade. As classes oferecem maior versatilidade. Vários elementos podem compartilhar a mesma classe. Classe Selectors (. ClassName ) Elementos de destino com essa classe. Os elementos podem ter várias classes (por exemplo,

).

. Red-text {color: Red; } estiliza todos os elementos com o red-text classe.

combinador seletores O Modelo de Objeto do Documento (DOM) representa a estrutura da página como uma árvore. Seletores de combinadores aproveitam esta hierarquia. div p : seleciona todos

elementos dentro de