Introdução ao CSS

CSS representa a tabela de estilo em cascata (Cascading Style Sheets). O CSS é um linguagem de tabela de estilo padrão, usada para descrever a representação do documento da web (ou seja, a disposição e o formato).

Antes do CSS, quase todas as propriedades de representação do documento HTML estavam contidas dentro da marcação HTML (especialmente dentro das tags HTML). Todas as cores de fonte, estilos de fundo, alinhamento dos elementos, bordas e tamanhos precisavam ser descritos explicitamente no HTML.

A consequência disso é que, devido à repetição da informação de estilo em cada página do site, o desenvolvimento de grandes sites se tornou um processo longo e caro, aumentando também os custos de manutenção.

Para resolver esse problema, a World Wide Web Consortium (W3C) no1996Introduziu o CSS, a aliança também manteve seu padrão. O CSS visa separar a representação e o conteúdo. Agora, os designers de web podem mover as informações de formatação da página da web para tabelas de estilo separadas, simplificando significativamente a marcação HTML e aumentando a manutenibilidade.

CSS3É a versão mais recente do padrão CSS. CSS3Adicionou novas funcionalidades de estilo e melhorias para melhorar as funções de demonstração da Web.

O que o CSS pode fazer

O CSS pode fazer mais coisas.

• Você pode aplicar facilmente as mesmas regras de estilo a vários elementos.

• Você pode usar uma tabela de estilo para controlar a exibição de várias páginas do site.

• Você pode exibir a mesma página de diferentes maneiras em diferentes dispositivos.

• Você pode definir o estilo do estado dinâmico do elemento (como hover, foco, etc.), que de outra forma não seria possível.

• Você pode alterar a posição do elemento na página da web sem alterar a marcação.

• Você pode alterar a exibição de elementos HTML existentes.

• Você pode no2Ou D3Transformações de escalonamento, rotação, inclinação e outros elementos no espaço D.

• Você pode criar efeitos de animação e transição sem usar nenhum JavaScript.

• Você pode criar versões amigáveis da web para impressão.

Existem muitos outros benefícios do CSS, você pode usar CSS para muitas outras operações interessantes. Em capítulos futuros, você vai saber mais sobre tudo isso.

Os benefícios de usar CSS

A maior vantagem do CSS é que ele pode separar o estilo e a disposição do conteúdo do documento. Existem mais vantagens, por que escolher usar CSS?

• O CSS economiza muito tempo -O CSS oferece muita flexibilidade para definir atributos de estilo dos elementos. Você pode escrever uma vez CSS. Em seguida, o mesmo código pode ser aplicado a grupos de elementos HTML, ou repetido em várias páginas HTML.

• Fácil de manter — O CSS oferece uma maneira fácil de atualizar o formato do documento e manter a consistência entre vários documentos. Porque você pode controlar todo o conteúdo da página da web com um ou mais folhetos de estilo.

• Velocidade de carregamento da página mais rápida -O CSS permite que várias páginas compartilhem informações de formatação, reduzindo a complexidade e a repetição do conteúdo da estrutura do documento. Isso reduz significativamente o tamanho do arquivo de transferência, acelerando a velocidade de carregamento da página.

• Estilos avançados do HTML -O CSS tem uma função de representação mais ampla do que o HTML e pode controlar melhor o layout da página da web. Portanto, em comparação com os elementos e atributos de representação do HTML, você pode fazer com que a página da web pareça melhor.

• Compatibilidade com múltiplos dispositivos -O CSS também permite otimizar a página da web para vários tipos de dispositivos ou mídias. Com o CSS, é possível apresentar o mesmo documento HTML com diferentes estilos de visualização para diferentes dispositivos de exibição (por exemplo, computadores de mesa, celulares, etc.).

Conteúdo coberto neste tutorial

Este série de tutoriais de CSS cobre todos os fundamentos do CSS, incluindo conceitos de seletores, métodos para definir cores e fundos, maneiras de definir o formato de fontes e texto, estilos para elementos UI como hiperligações, listas, tabelas, etc., e o modelo de caixa do CSS, etc.

Após familiarizar-se com os fundamentos, você entrará no próximo nível, que apresentará como definir o tamanho e alinhamento dos elementos, métodos para posicionar elementos na página da web usando sprites de imagem, conceitos de relativo e associativo. Unidades absolutas, modelo de formato visual, exibição e visibilidade, camadas, pseudo-classes e elementos, estilos relacionados à mídia, etc.

Por fim, você explorará o CSS3algumas funcionalidades avançadas introduzidas, como cores de gradiente, efeitos de sombra,2D e3Transformações D, alpha de transparência, métodos para criar transições e efeitos de animação, alinhamento flexível, efeitos de filtro, consultas de conceitos de mídia etc.