Cascading Style Sheets (CSS) é uma linguagem de folha de estilo usada para descrever a apresentação de documentos escritos em HTML ou XML (incluindo dialetos XML como SVG , MathML ou XHTML ) . CSS descreve como os elementos devem aparecer na tela, no papel, em uma apresentação ou em outra mídia.
CSS é uma das principais linguagens da web aberta e é padronizado entre os navegadores da web de acordo com as especificações do W3C . Anteriormente, o desenvolvimento de diversas partes da especificação CSS era feito em paralelo, o que permitia o versionamento das propostas mais recentes. Você já deve ter ouvido falar de CSS1, CSS2.1 ou mesmo CSS3. Nunca haverá CSS3 ou CSS4; em vez disso, hoje em dia tudo é CSS sem números de versão.
Após o CSS 2.1, o escopo da especificação aumentou significativamente e o progresso dos diferentes módulos CSS começou a diferir bastante, tornando-se mais eficiente desenvolver e publicar recomendações para cada módulo individualmente . O W3C não realiza mais controle de versão na especificação CSS, mas tira regularmente instantâneos do estado estável mais recente da especificação CSS e do progresso de cada módulo. Os módulos CSS agora têm números de versão ou níveis, como CSS Color Module Level 5 .
1. Recursos principais
1.1 Introdução ao CSS
Se você é novo no desenvolvimento web, leia nosso artigo básico de CSS para aprender o que é CSS e como usá-lo.
1.2 Tutorial CSS
Nossa área de aprendizado de CSS contém diversos tutoriais que levam você do iniciante ao proficiente, cobrindo todos os conceitos básicos.
1.3 Referência CSS
Fornecemos uma referência CSS exaustiva para desenvolvedores web experientes , descrevendo cada propriedade e conceito de CSS.
2. Tutorial
Nossa área de aprendizado de CSS possui vários módulos que ensinam CSS desde o básico - sem necessidade de conhecimento prévio.
2.1 Primeiros passos em CSS
CSS (Cascading Style Sheets) é usado para estilizar e organizar páginas da web - por exemplo, alterando a fonte, cor, tamanho e espaçamento do conteúdo, dividindo-o em colunas ou adicionando animações e outros recursos decorativos. Este módulo oferece um começo suave para dominar os fundamentos do CSS, incluindo como ele funciona, como é a sintaxe e como começar a usá-lo para adicionar estilos ao HTML.
2.2 Blocos de construção CSS
Este módulo continua onde começamos com CSS Step One — agora que você está familiarizado com a linguagem e sua sintaxe e ganhou alguma experiência básica em seu uso, é hora de se aprofundar um pouco mais. Este módulo cobrirá cascata e herança ( cascade and inheritance), todos os tipos de seletores, unidades, tamanhos disponíveis, estilo de planos de fundo e bordas, depuração e muito mais .
O objetivo deste artigo é fornecer um kit de ferramentas para escrever CSS competente e ajudá-lo a entender toda a teoria básica antes de passar para assuntos mais específicos, como estilo de texto e layout CSS .
1.3 Estilos de texto CSS
Depois de abordar o básico da linguagem CSS, o próximo tópico sobre CSS é o estilo de texto – uma das coisas mais comuns a se fazer com CSS. Aqui, examinamos os princípios básicos do estilo de texto, incluindo configuração de fontes, negrito, itálico, espaçamento entre linhas e letras, sombreamento e outros recursos de texto . Completaremos este módulo examinando a aplicação de fontes personalizadas às páginas e o estilo de listas e links.
1.4 Layout CSS
Até agora, vimos os fundamentos do CSS, como estilizar o texto e como definir e manipular a caixa onde o conteúdo está. Agora é hora de ver como posicionar as caixas na posição correta em relação à janela de visualização e em relação umas às outras . Cobrimos os pré-requisitos necessários, então agora podemos mergulhar no layout CSS, observando diferentes configurações de exibição, ferramentas de layout modernas como flexbox, grade e posicionamento CSS, bem como algumas tecnologias legadas que você ainda pode estar se perguntando.
1.5 Use CSS para resolver problemas comuns
Este módulo fornece links para seções que explicam como usar CSS para resolver problemas comuns na criação de páginas web.
3, referência
- Referência CSS : Esta é uma referência exaustiva para desenvolvedores web experientes, descrevendo todas as propriedades e conceitos de CSS.
- Conceitos-chave CSS:
- Gramática e forma de linguagem
- Especificidade , herança e cascata
- Unidades CSS, valores e símbolos de função
- Modelo de caixa e colapso de borda
- contém bloco
- Contexto de empilhamento e formatação de blocos
- Valor inicial , valor calculado , valor usado e valor real
- Propriedades abreviadas CSS
- layout de grade
- Seletor
- consulta de mídia
- animação
4、Livro de receitas
O objetivo do livro de receitas de layout CSS é reunir um livro de receitas de padrões de layout comuns que você pode precisar implementar em seu site. Além de fornecer código que pode servir como ponto de partida para o seu projeto, esses livros de receitas destacam diferentes maneiras de usar especificações de layout e as escolhas que você pode fazer como desenvolvedor.
5. Ferramentas de desenvolvimento CSS
- Você pode usar o serviço de validação de CSS do W3C para verificar se seu CSS é válido. Esta é uma ferramenta de depuração muito útil.
- As ferramentas para desenvolvedores do Firefox permitem que você visualize e edite o CSS ativo de uma página por meio do inspetor e do editor de estilo .
- A extensão Web Developer para Firefox permite rastrear e editar CSS ao vivo na visualização de sites.
Demonstrações CSS
Liberte a sua criatividade explorando exemplos das mais recentes técnicas CSS.