Desenvolvimento Web 2.0 – Aula 1

Posted by: joseact Categories: Sem categoria

O que é CSS e para que serve?

O CSS (Cascading Style Sheets ou Folha de Estilo em Cascatas) é um fragmento do código HTML(ou documento separado) responsável por estilizar as páginas, ou seja, colocar uma cor, deixar a borda mais arredondada, mudar a fonte do texto, posicionar algum elemento mais para a esquerda ou para direita, existe uma infinidade de estilos que podemos construir com CSS.

Inscreva-se no Canal do ACT!

Sintaxe

Atributo style dentro de uma tag html(inline)

Tag <style></style>

Arquivo CSS separado

estilo.css:

Seletor é a parte onde definimos quais elementos serão aplicados os estilos criados.

● Seleção por elemento

Qual elemento HTML queremos aplicar a regra de estilo definida

● Seleção por classe

Seleção de elementos por meio do nome da classe que foi definida como atributo e que tem como sintaxe o caractere . (ponto) seguido do nome da classe.

● Seleção por ID

Consiste na seleção de elementos por meio do nome de um id que foi definido como atributo.

Combinadores

Um elemento de combinação é algo que explica a relação entre os seletores. Há quatro combinadores diferentes em CSS:

Seletor descendente se trata de todos os elementos que têm a filiação a uma elemento especificado. Exemplo:

div p {background-color: blue;}

Seletor filho corresponde a todos os elementos que são os filhos imediatos de um elemento especificado. Exemplo:

div > p {background-color: blue;}

Seletor irmão adjacente seleciona os elementos que são os irmão adjacentes de um elemento. Exemplo:

div + p {background-color: blue;}

Seletor irmão em geral seleciona os elementos que são imrãos (mesmo pai) de um elementos especificado. Exemplo:

div ~ p {background-color: blue;}

3 Bases do CSS

Herança

Herança assim como na vida real é algo que é passado de pai para filho, na programação, não é diferente!

Existem estilos, que ao serem atribuídos para um elemento, todos os seus elementos filhos, ou seja elementos que estão dentro desse, recebem essa estilização automaticamente.

Especificidade

A especificidade é a ordem de prioridade em que as propriedades definidas em CSS são utilizadas. Caso essa prioridade seja igual, vale a última declaração no código.

Esta prioridade está na seguinte ordem, da menor para a maior:

Seletores Universais -> Classes seletoras -> Seletores ID -> Estilo Inline.

Cascata

A cascata é basicamente o algoritmo que o navegador decide qual estilo de CSS aplicar a cada elemento.

Temos 4 níveis:

A Origem
A importância
A Especificidade
A Posição

Origem

Na camada de Origem, existem 3 principais estilizações

A feita pelo navegador que já vem com ele;
A que o usuário define;
A da página web, que é a que o programador define;

Importância

A Camada de importância se refere basicamente a propriedade !important, que podemos passar para uma estilização dentro dos arquivos CSS, essa propriedade permite dizer que aquela estilização específica, é mais importante que outra e ela será priorizada

Cascata | Especificidade

No terceiro nível da cascata, temos a especificidade, onde é levado em consideração a especificidade dos seletores e combinadores que foram explicadas e exemplificadas anteriormente, usando todo o que foi explicado, você consegue estilizar a maioria das páginas, sem necessitar do !important./t

Cascata | Posição

E na última camada, temos a posição, basicamente nessa camada a posição de declaração de cada estilo importa, estilos declarados posteriormente, sobrescrever os estilos já escritos, assim como a declaração de uma folha externa após a outra sobrescreve a anterior!