Curso IT Fundamentos CSS 019_HelloCSS
O que é CSS?
CSS (Cascading Style Sheets, Folhas de Estilo em Cascata) é semelhante ao HTML, CSS também não é uma verdadeira linguagem de programação, nem mesmo uma linguagem de marcação. CSS é uma linguagem de folhas de estilo, usada para adicionar estilos a elementos HTML, descrever a aparência de documentos HTML e controlar cor, tamanho, fonte, layout, etc. dos elementos do documento HTML.
CSS é uma parte importante do desenvolvimento web, pode ajudá-lo a criar páginas web atraentes e fáceis de usar.
Estrutura Básica do CSS
Os estilos CSS são compostos por seletores e propriedades. Os seletores selecionam os elementos HTML aos quais os estilos serão aplicados. As propriedades especificam os valores dos estilos.
Exemplo:
p { color: red;}Resultado:
Análise da Estrutura:
[!Resumo]
Seletor (Selector) O nome do elemento HTML está no início do conjunto de regras. Ele seleciona um ou mais elementos aos quais adicionar estilos (neste exemplo, o elemento
<p>). Para adicionar estilos a diferentes elementos, basta alterar o seletor.Declaração (Declaration) Uma regra individual, como color: red; especifica as propriedades dos elementos a serem estilizados. As declarações CSS sempre terminam com ponto e vírgula ; e são cercadas por chaves {}:
Propriedades (Properties) O meio de alterar os estilos dos elementos HTML (neste exemplo, color é a propriedade do elemento
<p>). No CSS, o autor decide qual propriedade modificar.Valor da propriedade (Property value) À direita da propriedade, após os dois pontos, está o valor da propriedade, que seleciona um valor entre as muitas aparências possíveis (além de red, existem muitos outros valores para color).
Como incluir CSS?
Inclusão inline:
O código CSS é escrito diretamente nas tags HTML, usando o atributo style.
A inclusão inline consiste em escrever o código de estilo diretamente nas tags HTML, um método simples e rápido. Vantagens: conveniente e rápido, adequado para poucos estilos. Desvantagens:
- Desfavorável para reutilização de estilos, difícil de manter.
- Arquivos HTML desorganizados, não cumpre o princípio de separação.
- Desfavorável para cache do navegador, afeta o desempenho.
Exemplo:
<div style="color: red; font-size: 16px;">Este é um texto vermelho</div>Resultado:
Inclusão interna:
O código CSS é escrito em tags <style>, colocadas dentro da tag <head>.
A inclusão interna consiste em escrever o código de estilo nas tags style do arquivo HTML, uma abordagem relativamente equilibrada. Vantagens: estilos separados do arquivo HTML, fácil de manter. Além disso, o cache do navegador pode melhorar a velocidade de carregamento. Desvantagens:
- Requer solicitações de rede adicionais ao carregar a página, relativamente ineficiente.
- Estilos e arquivo HTML ainda têm certo acoplamento.
Exemplo:
div { color: red; font-size: 16px;} <div>Este é um texto vermelho</div>Resultado:
Inclusão externa:
O código CSS é escrito em um arquivo CSS separado e incluído usando a tag link.
A inclusão externa consiste em escrever o código de estilo em um arquivo CSS separado, um método padrão. Vantagens: estilos e arquivo HTML completamente separados, fácil de manter. Além disso, a aceleração CDN pode melhorar a velocidade de carregamento. A inclusão externa também suporta compressão e combinação para reduzir o tamanho do arquivo. Desvantagens:
- Requer solicitações de rede adicionais ao carregar a página, mas pode ser otimizado.
- Dependência de recursos externos, pode causar bloqueio ou falha de carregamento.
- Durante o desenvolvimento podem ser necessárias múltiplas solicitações a arquivos externos.
Exemplo:
<head>
<!-- No diretório atual, referência ao arquivo de estilos na subpasta styles --><link rel="stylesheet" href="style.css" />
<!-- No diretório atual, referência ao arquivo de estilos em styles/general --><link rel="stylesheet" href="/style.css" />
<!-- No diretório pai, referência ao arquivo de estilos na subpasta styles --><link rel="stylesheet" href="../styles/style.css" />
</head>div { color: red; font-size: 16px;}Resultado:
Ordem de Cascata e Prioridade
A ordem de cascata CSS (Cascading Order) e a especificidade (Specificity) são dois fatores chave que determinam o efeito de estilo CSS exibido.
Ordem de cascata: A ordem de cascata CSS define o peso das regras de estilo, do mais alto ao mais baixo:
- Importância (!important): Regras de estilo declaradas com !important têm a maior prioridade. Deve ser usado com moderação, pois o abuso dificulta a manutenção.
- Estilos do autor (Author Styles): Estilos definidos pelo desenvolvedor web, incluindo folhas de estilo externas, internas e estilos inline. Prioridade entre estilos do usuário e estilos do agente de usuário.
- Estilos do usuário (User Styles): Estilos definidos pelo usuário através de plugins ou configurações do navegador, prioridade maior que estilos do agente de usuário, ex: plugins de fontes.
- Estilos do agente de usuário (User Agent Styles): Os estilos padrão do navegador, menor prioridade, ex: fontes.
Prioridade: Quando há múltiplas regras de estilo do mesmo nível ou regras conflitantes, o CSS exibe os estilos de acordo com a prioridade.
- Estilos inline (Inline Styles): Estilos especificados dentro de tags HTML, maior prioridade.
- Seletor ID (id): Estilos especificados por seletor ID, ex: #header.
- Seletores de classe, atributo e pseudo-classe (class): Por seletor de classe, ex:
.container. Por seletor de atributo, ex:[type="text"]. Por seletor de pseudo-classe, ex::hover. - Seletor de elemento: Seletor com nome de elemento HTML, ex:
div,p.
Com a mesma prioridade, a regra definida por último tem precedência.
Exemplo:
#header { color: red;}
.container p { color: blue;}
p { color: green;}Herança CSS
A herança CSS significa que os elementos filhos herdam certos valores de propriedades dos elementos pais. A herança é uma característica importante no CSS que simplifica a escrita de estilos e melhora a manutenibilidade do código. Nem todas as propriedades CSS são herdáveis, apenas uma parte é definida como herdável.
As propriedades CSS herdáveis incluem principalmente:
- Propriedades de texto: font-family, font-size, font-weight, font-style, color, text-decoration, text-align, line-height, letter-spacing, word-spacing
- Propriedades de cor: background-color, border-color, color, outline-color
- Propriedades de borda: border-width, border-style, border-color
- Propriedades do modelo de caixa: margin, padding, width, height, display, float, position, z-index
Propriedades CSS não herdáveis incluem width, height, margin, padding e outras propriedades do modelo de caixa, posicionamento (position), flutuação (float), limpeza de flutuação (clear) e outras propriedades de layout.
Propriedades CSS comuns e suas funções:
Propriedades básicas width, height: Definir largura e altura do elemento. margin: Definir margem do elemento. padding: Definir preenchimento do elemento. color, background-color: Definir cor e cor de fundo do elemento. font-size, font-family, font-weight, font-style: Definir tamanho, família, peso e estilo da fonte.
Propriedades de layout display: Definir modo de exibição do elemento. float: Definir comportamento de flutuação do elemento. position: Definir posição do elemento. top, left, right, bottom: Definir posições superior, esquerda, direita e inferior. z-index: Definir ordem de empilhamento do elemento.
Propriedades de texto text-align: Definir alinhamento do texto. text-decoration: Definir decoração do texto. line-height: Definir altura da linha. font-variant: Definir variante da fonte. text-transform: Definir transformação do texto. letter-spacing, word-spacing: Definir espaçamento entre caracteres e palavras.
Propriedades de borda border: Definir estilo de borda do elemento. border-width: Definir largura da borda. border-style: Definir estilo da borda. border-color: Definir cor da borda. border-radius: Definir raio dos cantos da borda.
Propriedades de fundo background: Definir fundo do elemento. background-color: Definir cor de fundo. background-image: Definir imagem de fundo. background-repeat: Definir modo de repetição da imagem de fundo. background-position: Definir posição da imagem de fundo. background-size: Definir tamanho da imagem de fundo.
Propriedades de transição transition: Definir efeito de transição do elemento. transition-property: Definir propriedade de transição. transition-duration: Definir duração da transição. transition-timing-function: Definir função de transição. transition-delay: Definir atraso da transição.