Tutoriais
Folhas de Estilo em Cascata (CSS - Cascading Style Sheets) é uma linguagem de folha de estilo utilizada para descrever a apresentação de um documento escrito em HTML or XML (incluindo dialetos de XML, tais como SVG, MathML ou XHTML). CSS descreve como os elementos deverão ser renderizados no ecrã, no papel, na fala, ou em outra média.
CSS é uma das principais linguagens da Web aberta e está estandardizada nos navegadores de acordo com a especificação W3C. Desenvolvida em níveis, CSS1 está agora obsoleta, CSS2.1 é a recomendação, e CSS3, agora divida em pequenos módulos, está a progredir a caminho da estandardização
- Introdução a CSS
Se é novo no desenvolvimento Web, certifique-se que lê o nosso artigo de CSS - Essencial para saber o que é CSS e como utilizar.
- Tutoriais de CSS
A nossa área de aprendizagem de CSS contém uma grande quantidade de tutoriais para levá-lo do nível de principiante até à proficiência, abrangendo todos os conteúdos essenciais.
- Referência de CSS
A nossa referência exaustiva de CSS para os programadores da Web que descreve cada propriedade e conceito de CSS.
A nossa Área de Aprendizagem de CSS apresenta múltiplos módulos que ensinam CSS desde o início — não é necessário conhecimento prévio.
- Introdução ao CSS
- Este módulo permite-lhe começar com os básicos de como o CSS funciona, incluindo selectores e propriedades, escrever regras CSS, aplicar CSS a HTML, como especificar comprimento, cor e outras unidades em CSS, cascata e herança, modelos básicos de caixa e depuração de CSS.
- Estilizar texto
- Aqui aprendemos os fundamentos do estilo do texto, incluindo a definição da fonte, negrito e itálico, espaçamento entre linhas e letras, e sombras e outras características do texto. Nós terminamos o módulo, aplicando fontes personalizadas à sua página, e estilizando listas e links.
- Estilizar caixas
- A seguir, focamos em estilizar caixas, um dos passos fundamentais para a criação de uma página web. Neste módulo, recapitulamos o modelo da caixa e depois aprendemos a controlar a disposição das caixas, definindo preenchimentos, bordas e margens, cores de fundo personalizadas, imagens e outras características, bem como características mais avancadas como sombras e filtros nas caixas.
- Disposição de CSS (layout)
- Até agora, já analisámos os fundamentos do CSS, como estilizar os textos, e como estilizar e manipular as caixas que o seu conteúdo contém. Agora é altura de ver como colocar as suas caixas no lugar certo em relação ao viewport, e umas às outras. Cobrimos os pré-requisitos necessários para que possa agora mergulhar profundamente no layout do CSS, observando diferentes configurações de visualização, métodos tradicionais de layout envolvendo float e posicionamento, e novas ferramentas de posicionamento como o flexbox.
Referência
- CSS - Referência: This exhaustive reference for seasoned Web developers describes every property and concept of CSS.
- CSS key concepts:
- The syntax and forms of the language
- Specificity, inheritance and the Cascade
- Box model and margin collapse
- The containing block
- Stacking and block-formatting contexts
- Initial, computed, used, and actual values
- CSS shorthand properties
- CSS Flexible Box Layout
- CSS Grid Layout
- Media queries
Cookbook
The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.
Ferramentas para o desenvolvimento de CSS
- You can use the W3C CSS Validation Service to check if your CSS is valid. This is an invaluable debugging tool.
- Firefox Developer Tools lets you view and edit a page's live CSS via the Inspector and Style Editor tools.
- The Web Developer extension for Firefox lets you track and edit live CSS on watched sites.
- The Web community has created various other miscellaneous CSS tools for you to use.
Erros de metadados
- Firefox: bug 1323667
Consultar também:
- CSS demos: Get a creative boost by exploring examples of the latest CSS technologies in action.
- Web languages to which CSS is often applied: HTML, SVG, XHTML, and XML.
- Mozilla technologies that make extensive use of CSS: XUL, Firefox, and Thunderbird extensions and themes.