Cascading Style Sheets, carinhosamente conhecido como CSS, é uma linguagem de design simples destinada a simplificar o processo de tornar as páginas da web apresentáveis.
A seguir estão as vantagens de usar CSS -
CSS saves time- Você pode escrever CSS uma vez e reutilizar a mesma folha em várias páginas HTML. Você pode definir um estilo para cada elemento HTML e aplicá-lo a quantas páginas da Web desejar.
Pages load faster- Se você estiver usando CSS, não precisa escrever atributos de tag HTML todas as vezes. Basta escrever uma regra CSS de uma tag e aplicá-la a todas as ocorrências dessa tag. Portanto, menos código significa tempos de download mais rápidos.
Easy maintenance - Para fazer uma mudança global, basta alterar o estilo e todos os elementos em todas as páginas da web serão atualizados automaticamente.
Superior styles to HTML - CSS tem uma gama de atributos muito mais ampla do que HTML, então você pode dar uma aparência muito melhor para sua página HTML em comparação com atributos HTML.
Multiple Device Compatibility- As folhas de estilo permitem que o conteúdo seja otimizado para mais de um tipo de dispositivo. Usando o mesmo documento HTML, diferentes versões de um site podem ser apresentadas para dispositivos portáteis, como PDAs e telefones celulares, ou para impressão.
Global web standards- Agora os atributos HTML estão sendo preteridos e é recomendado o uso de CSS. Portanto, é uma boa ideia começar a usar CSS em todas as páginas HTML para torná-las compatíveis com navegadores futuros.
Offline Browsing - CSS pode armazenar aplicações web localmente com a ajuda de uma biblioteca offline. Usando isso, podemos visualizar sites offline. O cache também garante carregamento mais rápido e melhor desempenho geral do site.
Platform Independence - O Script oferece independência de plataforma consistente e também pode suportar os navegadores mais recentes.
Uma regra de estilo é composta por três partes -
Selector- Um seletor é uma tag HTML na qual um estilo será aplicado. Pode ser qualquer tag como <h1> ou <table> etc.
Property- Uma propriedade é um tipo de atributo de tag HTML. Simplificando, todos os atributos HTML são convertidos em propriedades CSS. Eles podem ser coloridos, bordados, etc.
Value- Os valores são atribuídos às propriedades. Por exemplo, a propriedade de cor pode ter o valor vermelho ou # F1F1F1 etc.
O seletor de tipo simplesmente corresponde ao nome de um tipo de elemento. Para dar uma cor a todos os títulos de nível 1 -
h1 {
color: #36CFFF;
}Em vez de selecionar elementos de um tipo específico, o seletor universal simplesmente corresponde ao nome de qualquer tipo de elemento -
* {
color: #000000;
}Esta regra exibe o conteúdo de cada elemento em nosso documento em preto.
Suponha que você queira aplicar uma regra de estilo a um elemento específico apenas quando ele estiver dentro de um elemento específico. Conforme fornecido no exemplo a seguir, a regra de estilo se aplicará ao elemento <em> apenas quando ele estiver dentro da tag <ul>.
ul em {
color: #000000;
}Você pode definir regras de estilo com base no atributo de classe dos elementos. Todos os elementos que possuem essa classe serão formatados de acordo com a regra definida.
.black {
color: #000000;
}Esta regra renderiza o conteúdo em preto para cada elemento com o atributo de classe definido como preto em nosso documento.
Você pode torná-lo um pouco mais específico. Por exemplo -
h1.black {
color: #000000;
}Esta regra renderiza o conteúdo em preto apenas para elementos <h1> com atributo de classe definido como preto.
Você pode definir regras de estilo com base no atributo id dos elementos. Todos os elementos com esse id serão formatados de acordo com a regra definida.
#black {
color: #000000;
}Esta regra renderiza o conteúdo em preto para cada elemento com o atributo id definido como preto em nosso documento.
Você pode torná-lo um pouco mais específico. Por exemplo -
h1#black {
color: #000000;
}Esta regra renderiza o conteúdo em preto apenas para elementos <h1> com o atributo id definido como preto.
Considere o seguinte exemplo -
body > p {
color: #000000;
}Esta regra renderizará todos os parágrafos em preto se eles forem filhos diretos do elemento <body>. Outros parágrafos colocados dentro de outros elementos como <div> ou <td> não teriam qualquer efeito nesta regra.
Você também pode aplicar estilos a elementos HTML com atributos específicos. A regra de estilo abaixo corresponderá a todos os elementos de entrada com um atributo de tipo com um valor de texto -
input[type = "text"] {
color: #000000;
}A vantagem desse método é que o elemento <input type = "submit" /> não é afetado e a cor é aplicada apenas aos campos de texto desejados.
p [lang]: Seleciona todos os elementos de parágrafo com um atributo lang.
p [lang = "fr"] - Seleciona todos os elementos de parágrafo cujo atributo lang tem um valor exatamente "fr".
p [lang ~ = "fr"] - Seleciona todos os elementos de parágrafo cujo atributo lang contém a palavra "fr".
p [lang | = "en"] - Seleciona todos os elementos de parágrafo cujo atributo lang contém valores que são exatamente "en" ou começam com "en-".
Existem quatro maneiras de associar estilos ao seu documento HTML. Os métodos mais comumente usados são CSS inline e CSS externo.
Embedded CSS - O elemento <style>: você pode colocar suas regras CSS em um documento HTML usando o elemento <style>.
Inline CSS - O atributo de estilo: você pode usar o atributo de estilo de qualquer elemento HTML para definir regras de estilo.
External CSS - O elemento <link>: O elemento <link> pode ser usado para incluir um arquivo de folha de estilo externo em seu documento HTML.
Imported CSS - Regra @import: @import é usado para importar uma folha de estilo externa de maneira semelhante ao elemento <link>.
A seguir está a regra para substituir qualquer regra da folha de estilo -
Qualquer folha de estilo embutida tem a maior prioridade. Portanto, ele substituirá qualquer regra definida nas tags <style> ... </style> ou regras definidas em qualquer arquivo de folha de estilo externo.
Qualquer regra definida nas tags <style> ... </style> substituirá as regras definidas em qualquer arquivo de folha de estilo externo.
Qualquer regra definida em um arquivo de folha de estilo externo tem a prioridade mais baixa e as regras definidas neste arquivo serão aplicadas apenas quando as duas regras acima não forem aplicáveis.
% - define uma medida como uma porcentagem em relação a outro valor, normalmente um elemento envolvente.
p {font-size: 16pt; line-height: 125%;}cm - Define uma medida em centímetros.
div {margin-bottom: 2cm;}em - uma medida relativa para a altura de uma fonte em espaços em. Como uma unidade em é equivalente ao tamanho de uma determinada fonte, se você atribuir uma fonte a 12pt, cada unidade "em" terá 12pt; assim, 2em seria 24pt.
p {letter-spacing: 7em;}ex - Este valor define uma medida em relação à altura x de uma fonte. A altura x é determinada pela altura da letra minúscula da fonte.
p {font-size: 24pt; line-height: 3ex;}in - Define uma medida em polegadas.
p {word-spacing: .15in;}mm - Define uma medida em milímetros.
p {word-spacing: 15mm;}pc - Define uma medida em picas. Uma pica equivale a 12 pontos; portanto, existem 6 picas por polegada.
p {font-size: 20pc;}pt - Define uma medida em pontos. Um ponto é definido como 1/72 de polegada.
body {font-size: 18pt;}px - define uma medida em pixels da tela.
p {padding: 25px;}vh - 1% da altura da janela de visualização.
h2 { font-size: 3.0vh; }vw - 1% da largura da janela de visualização.
h1 { font-size: 5.9vw; }vmin 1vw ou 1vh, o que for menor.
p { font-size: 2vmin;}Você pode especificar os valores das cores em vários formatos. A tabela a seguir lista todos os formatos possíveis -
| Formato | Sintaxe | Exemplo |
|---|---|---|
| Código Hex | #RRGGBB | p {cor: # FF0000;} |
| Código Hex Curto | #RGB | p {cor: # 6A7;} |
| RGB% | rgb (rrr%, ggg%, bbb%) | p {cor: rgb (50%, 50%, 50%);} |
| RGB Absoluto | rgb (rrr, ggg, bbb) | p {cor: rgb (0,0,255);} |
| palavra-chave | água, preto, etc. | p {cor: azul-petróleo;} |
Há uma lista de 216 cores que supostamente são as cores mais seguras e independentes do computador. Essas cores variam do código hexa 000000 a FFFFFF. O uso dessas cores é seguro porque garantem que todos os computadores exibam as cores corretamente ao executar uma paleta de 256 cores.
A propriedade background-color é usada para definir a cor de fundo de um elemento.
A propriedade background-image é usada para definir a imagem de fundo de um elemento.
A propriedade background-repeat é usada para controlar a repetição de uma imagem em segundo plano.
A propriedade background-position é usada para controlar a posição de uma imagem no fundo.
A propriedade background-attachment é usada para controlar a rolagem de uma imagem em segundo plano.
A propriedade background é usada como uma abreviação para especificar várias outras propriedades de background.
A propriedade font-family é usada para alterar a face de uma fonte.
A propriedade font-style é usada para tornar uma fonte itálica ou oblíqua.
A propriedade font-variant é usada para criar um efeito de versalete.
A propriedade font-weight é usada para aumentar ou diminuir o quão em negrito ou claro uma fonte aparece.
A propriedade font-size é usada para aumentar ou diminuir o tamanho de uma fonte.
A propriedade da fonte é usada como abreviação para especificar várias outras propriedades da fonte.
A propriedade color é usada para definir a cor de um texto.
A propriedade direction é usada para definir a direção do texto.
A propriedade letter-spacing é usada para adicionar ou subtrair espaço entre as letras que compõem uma palavra.
A propriedade word-spacing é usada para adicionar ou subtrair espaço entre as palavras de uma frase.
A propriedade text-indent é usada para indentar o texto de um parágrafo.
A propriedade text-align é usada para alinhar o texto de um documento.
A propriedade text-decoration é usada para sublinhar, sobrelinha e tachado.
A propriedade text-transform é usada para capitalizar o texto ou converter o texto em letras maiúsculas ou minúsculas.
A propriedade de espaço em branco é usada para controlar o fluxo e a formatação do texto.
A propriedade text-shadow é usada para definir a sombra do texto em torno de um texto.
A propriedade border é usada para definir a largura da borda de uma imagem.
A propriedade height é usada para definir a altura de uma imagem.
A propriedade width é usada para definir a largura de uma imagem.
A propriedade -moz-opacity é usada para definir a opacidade de uma imagem.
O: link significa hiperlinks não visitados.
O: visitado significa hiperlinks visitados.
O: hover significa um elemento que atualmente tem o ponteiro do mouse do usuário pairando sobre ele.
O: active significa um elemento no qual o usuário está clicando no momento.
O recolhimento da borda especifica se o navegador deve controlar a aparência das bordas adjacentes que se tocam ou se cada célula deve manter seu estilo.
O espaçamento da borda especifica a largura que deve aparecer entre as células da tabela.
As legendas do lado da legenda são apresentadas no elemento <caption>. Por padrão, eles são renderizados acima da tabela no documento. Você usa a propriedade caption-side para controlar o posicionamento da legenda da tabela.
As células vazias especifica se a borda deve ser mostrada se uma célula estiver vazia.
O layout da tabela permite que os navegadores acelerem o layout de uma tabela usando as primeiras propriedades de largura encontradas para o resto de uma coluna, em vez de ter que carregar a tabela inteira antes de renderizá-la.
A cor da borda especifica a cor de uma borda.
O estilo da borda especifica se a borda deve ser sólida, linha tracejada, linha dupla ou um dos outros valores possíveis.
A largura da borda especifica a largura de uma borda.
A margem especifica uma propriedade abreviada para definir as propriedades da margem em uma declaração.
A margem inferior especifica a margem inferior de um elemento.
A margem superior especifica a margem superior de um elemento.
A margem esquerda especifica a margem esquerda de um elemento.
A margem direita especifica a margem direita de um elemento.
O tipo de estilo de lista permite que você controle a forma ou aparência do marcador.
A posição do estilo de lista especifica se um ponto longo que passa para uma segunda linha deve se alinhar com a primeira linha ou começar abaixo do início do marcador.
O list-style-image especifica uma imagem para o marcador em vez de um marcador ou número.
O estilo de lista atua como um atalho para as propriedades de estilo.
O deslocamento do marcador especifica a distância entre um marcador e o texto na lista.
O padding-bottom especifica o padding inferior de um elemento.
O padding-top especifica o padding superior de um elemento.
O padding-left especifica o padding esquerdo de um elemento.
O padding-right especifica o preenchimento correto de um elemento.
O preenchimento atua como uma abreviação para todas as propriedades de preenchimento.
A propriedade cursor do CSS permite que você especifique o tipo de cursor que deve ser exibido para o usuário.
auto - a forma do cursor depende da área de contexto sobre a qual ele está. Por exemplo, um 'I' sobre o texto, uma 'mão' sobre um link e assim por diante.
crosshair - uma cruz ou sinal de mais.
padrão - uma seta.
ponteiro - uma mão que aponta (no IE 4 esse valor é mão).
mover ou texto - A barra 'I'.
espere - Uma ampulheta.
help - Um ponto de interrogação ou balão, ideal para usar sobre os botões de ajuda.
Sim! definir o url como a fonte de um arquivo de imagem do cursor.
A propriedade outline-width é usada para definir a largura do contorno.
A propriedade outline-style é usada para definir o estilo da linha do contorno.
A propriedade cor do contorno é usada para definir a cor do contorno.
A propriedade de contorno é usada para definir todas as propriedades de contorno em uma única instrução.
A propriedade height é usada para definir a altura de uma caixa.
A propriedade width é usada para definir a largura de uma caixa.