CSS - Cascading Style Sheets
CSS significa Cascading Style Sheets, descreve como os elementos HTML devem ser exibidos na tela, papel ou em outro mídia. CSS economiza muito trabalho pode ser utilizado para configurar o layout de várias páginas da web de uma só vez. Folhas de estilo externas são armazenadas em arquivos CSS.CSS resolveu um grande problema
O HTML foi criado para descrever o conteúdo de uma página da web, como:
<h1> Este é um cabeçalho </h1>
<p> Este é um parágrafo. </p>
Quando tags como <font>, e atributos de cores foram adicionados à especificação do HTML 3.2, ele começou um pesadelo para os desenvolvedores da web. O desenvolvimento de sites grandes, onde fontes e informações de cores foram adicionadas a cada página.
Para resolver esse problema, o World Wide Web Consortium (W3C) criou CSS.
O CSS removeu a formatação do estilo da página HTML!
CSS resolveu um grande problema
O HTML NUNCA pretendia conter tags para formatar uma página da web!
O HTML foi criado para descrever o conteúdo de uma página da web, como:
<h1> Este é um cabeçalho </h1>
<p> Este é um parágrafo. </p>
Quando tags como <nome e atributos de cores foram adicionados à especificação do HTML 3.2, ele começou um pesadelo para os desenvolvedores da web. O desenvolvimento de sites grandes, onde fontes e informações de cores foram adicionadas a cada página, tornou-se um processo longo e caro.
Para resolver esse problema, o World Wide Web Consortium (W3C) criou CSS.
O CSS removeu a formatação do estilo da página HTML!
Com um arquivo de folha de estilo externo, pode-se modificar a aparência de um site inteiro alterando apenas um arquivo!
CSS Syntax
Um conjunto de regras CSS consiste em um seletor e um bloco de declaração:
O selector - identifica o elemento HTML que que se pretende estilizar.
O bloco de declaração contém uma ou mais declarações separadas por ponto e vírgula.
Cada declaração inclui um nome de propriedade CSS e um valor, separados por dois pontos.
Uma declaração CSS sempre termina com ponto e vírgula e os blocos de declaração são cercados por chavetas.
CSS Selectors
Os seletores CSS são usados para "encontrar" (ou selecionar) os elementos HTML que você deseja estilizar.
Podemos dividir os seletores CSS em cinco categorias:
- Selectores simples - seleccionam elementos com base no nome, ID, classe
- Seletores combinadores - seleccionam elementos com base em um relacionamento específico entre eles
- Selectores de pseudo-classe - seleccionam elementos com base em um determinado estado
- Selectores de pseudoelementos - seleccionam e estilizam uma parte de um elemento
- Selectores de atributos - seleccionam elementos com base em um atributo ou valor de atributo
Seleccionam elementos com base no nome, ID, classe
Em um documento HTML, os selectores de ID e Class do CSS seleccionam um elemento baseado no conteúdo do seu atributo, o qual deve ser exactamente igual ao valor dado ao selector
Ex: Seleccionando elemento com base no ID
#principal {
color: red; }
color: red; }
Selecciona o conteúdo identificado pelo id principal e muda a côr do texto
Ex: Seleccionando elemento com base na classe
#principal {
color: red; }
color: red; }
Selecciona o conteúdo identificado pela classe principal e muda a côr do texto
Selectores combinatórios
Seleccionam elementos com base em um relacionamento específico entre eles, e é baseado num combinador que explica o relacionamento entre os selectores.
Um seletor de CSS pode conter mais de um seletor simples. Entre os seletores simples, podemos incluir um combinador.
Existem quatro combinadores diferentes no CSS:
espaço - selector descendente
Ex: div p - selecciona todos elementos contidos em uma Div
> - selector filho
Ex: div > p - Selecciona todos os elementos <p> nos quais o <div> é o um elemento pai
+ - selector de irmão adjacente
Ex: div + p - Selecciona todos os elementos <p> que são colocados imediatamente após os elementos <div>
~ - selector geral de irmãos
Ex: p ~ ul - Selecciona todos os elementos <ul> precedidos por um elemento <p>
Selectores pseudo-classe
Seleccionam elementos com base em um determinado estado. Um pseudo-classe é usado para definir um estado especial de um elemento.
Por exemplo, ele pode ser usado para:
- Estiliza um elemento quando posicionamos o mouse sobre o elemento
- Estiliza os links visitados e não visitados de maneira diferente
- Estilize um elemento quando ele receber um foco
- Exemplos:
- :active - Selecciona o link activo
- :disabled - Selecciona todo elemento desactivado
- :empty - Selecciona todos elementos sem filhos
- :first-child - selecciona o primeiro filho
- :hover - selecciona o elemento apontado
- :link - selecciona todos elementos não visitados
Selectores pseudo-elements
CSS - O pseudoelemento :: selection
O pseudoelemento :: selection corresponde à parte de um elemento que é selecionada por um utilizador
As seguintes propriedades CSS podem ser aplicadas a :: selection: color, background, cursor e outline.
O exemplo a seguir torna o texto selecionado vermelho em um fundo amarelo:
::selection {
color: red;
background: yellow; }
color: red;
background: yellow; }
Alguns selectores:
::after - Insere algo após o conteúdo de cada elemento
::before - Insere algo antes do conteúdo de cada elemento
::first-letter - Seleciona a primeira letra de cada elemento
::first-line - Seleciona a primeira linha de cada elemento
Selectores de atributos
Este selector básico ira escolher nós baseados no valor de um de seus atributos, ou até mesmo pelo próprio atributo.
[attribute] - selecciona o atributo em causa
[attribute=value] - selecciona o atributo em causa e que tenha um determinado valor
[attribute~=value] - selecciona o atributo em causa e que tenha uma determinada palavra(value)
Referencias
0 comentários:
Enviar um comentário