Como funciona o CSS
O CSS pode ser usado para alterar o design do layout, então você só precisa escrever um código para todos os seus elementos. Ao usar CSS, você pode usar menos código para criar sua página da web. Você pode aplicar uma regra CSS a todas as tags em uma página. Ao aprender CSS, você pode fazer com que seu site pareça ótimo.
Como funciona o CSS
O processo em cascata de CSS permite que várias folhas de estilo sejam combinadas. Ajuda a evitar conflitos quando diferentes estilos definem a mesma propriedade, como o tamanho da fonte. Quando um elemento tem mais de uma folha de estilo, o navegador escolhe o mais apropriado (o mais recente) e resolverá o conflito.
Componentes de um código CSS
Esta seção descreve as instâncias fundamentais de um código CSS.
Vamos dar o exemplo de um código CSS simples para um título (H1):
H1 cor: preto; intensidade da fonte: Negrito;O código CSS acima é composto pelas seguintes partes:
- H1 é conhecido como "Seletor”
- O texto escrito dentro do aparelho encaracolado é chamado de “declaração“; O código dentro dos aparelhos encaracolados é aplicado ao seletor que é definido antes do aparelho encaracolado.
- O cor e espessura da fonte são as propriedades, enquanto o preto e audacioso são os valores das propriedades
Além dos componentes declarados acima, um ponto e vírgula é inserido após cada propriedade antes de iniciar o outro. Em suma, um código CSS simples possui quatro componentes: Seletor, declaração, propriedade e valor.
Como o código CSS está incorporado
Um código CSS pode ser incorporado de uma das seguintes maneiras:
- Dentro de um elemento HTML: As propriedades são definidas em um elemento específico de HTML e a imagem mostrada abaixo mostra a aplicação do CSS embutido.
- Como um CSS interno: O código é escrito usando elemento e dentro do cabeça tag do arquivo html. Para uma melhor subestimação dos CSs internos, anexamos a imagem que mostra a fonte e a cor estão definidas para parágrafos:
- Como um arquivo CSS externo: um código CSS é escrito dentro de um arquivo separado e, em seguida, o arquivo CSS está vinculado ao arquivo HTML:
Como CSS e HTML funcionam juntos
O fenômeno CSS e HTML estão interligados um ao outro. Um código HTML pode ser referido como a estrutura do edifício, enquanto o CSS é o processo de embelezamento dessa estrutura. Uma estrutura bruta é inútil sem tinta e outras decorações. O HTML e o CSS trabalham em colaboração em uma página da web:
Uma página da Web segue o processo de baixo declarado para carregar corretamente:
- Uma página HTML é carregada pelo navegador
- O navegador converte essa árvore HTML em DOM (modelo de objeto de dados)
- Enquanto isso, o navegador carrega os estilos associados a essa página HTML: para isso, o arquivo CSS (vinculado a esse arquivo html) é analisado para criar uma árvore de modelo de objeto de dados (DOM).
- Após a adição bem -sucedida das regras de estilo, a última etapa (exibição) é realizada
A representação visual de carregar uma página da web é exibida abaixo
O modelo de objeto de dados (DOM) é uma estrutura hierárquica (semelhante a uma árvore) do código HTML. Cada elemento e suas propriedades associadas são conhecidas como nós DOM. Os seletores CSS (pode ser qualquer elemento HTML) são verificados com os nós DOM e os nós correspondentes adotam as propriedades/valores que são definidos em um arquivo CSS.
Conclusão
O processo CSS identifica os elementos de uma página da web. Ele também determina como os estilos são aplicados a esses elementos. É essencial entender que o CSS não é um idioma limitado a um idioma ou uma única folha de estilo. Este post descritivo esclarece os fundamentos e o trabalho do CSS. Inicialmente, fornecemos breves detalhes sobre o conceito fundamental de CSS e depois descrevemos o trabalho colaborativo de HTML e CSS.
Computação feliz!