Introdução ao Cheatsheet CSS3
A CSS (Cascading Stylesheet) é basicamente uma linguagem de folha de estilo usada para implementar a aparência e a formatação de um documento desenvolvido em uma linguagem de marcação. A especificação CSS é mantida principalmente pelo World Wide Web Consortium (W3C). O principal motivo para implementar CSS é mostrar a separação de apresentação e conteúdo que inclui frentes, formatos de layout. CSS3 é a versão ou padrão mais recente para CSS após CSS2. CSS3 é principalmente uma combinação de especificações CSS2 e algumas novas funcionalidades.
Veja abaixo alguns módulos importantes do Cheatsheet CSS3:
- Modelo da caixa
- Seletores
- Efeitos de texto
- Transformações 2D
- Transformações 3D
- Representação de Imagem
- Interfase do usuário
- Vários layouts de coluna
- Animações
- Ajuste e realocação de conteúdo
Neste artigo da CSS3 do Cheatsheet, discutiremos o que é CSS3 e os diferentes comandos CSS3.
Comandos e conteúdo na Cheatsheet CSS3
O CSS3 possui uma extensa biblioteca, interativa, extensível e contém muitos métodos embutidos para calcular operações comuns. Abaixo estão os comandos CSS3 do Cheatsheet mencionados que executam diferentes operações de linha de comando:
|
COMANDO |
DESCRIÇÃO |
| : foco | Para se concentrar em um elemento |
| : ativo | Para exibir e selecionar um elemento ativo |
| : ativado | Para exibir um elemento que está ativado |
| : verificado | Para exibir um elemento que está marcado |
| : lang | Para permitir que o desenvolvedor especifique o idioma para um elemento específico |
| : seleção | Para exibir o elemento destacado e selecionado |
| : raiz | Para exibir o elemento raiz dentro do documento |
| :primeiro filho | Para exibir o primeiro elemento irmão |
| : último filho | Para exibir o último elemento irmão |
| :filho único | Para exibir o único elemento filho |
| : primeiro do tipo | Para exibir o primeiro elemento irmão de um tipo específico |
| : último do tipo | Para exibir o último elemento irmão de um tipo específico |
| : apenas do tipo | Para exibir o único elemento irmão de um tipo específico |
| : vazio | Para exibir o elemento que não tem filhos |
| ::primeira carta | Para adicionar um estilo específico à primeira letra de um texto |
| ::primeira linha | Para adicionar um estilo específico à primeira linha de um texto |
| :: depois de | Para inserir algum conteúdo após um elemento de texto |
| :: antes | Para inserir algum conteúdo antes de um elemento de texto |
Operadores: - Os diferentes tipos de operadores no CSS3 são operadores de comparação (relacionais), operadores de atribuição, operadores lógicos e operadores de identidade.
Escalas de Medição: As escalas de medição CSS3 da folha de dicas são as seguintes
|
ESCALA / PARÂMETRO |
DESCRIÇÃO |
| em | Tamanho da fonte do elemento atual |
| ex | Altura da fonte do elemento |
| px | Visualizando o pixel do dispositivo |
| rem | Tamanho da fonte do elemento raiz |
| vh | Altura da janela de visualização |
| vw | Largura da janela de visualização |
| % | Percentagem |
| pc | Pica |
| pt | Ponto |
Código de cores: Nome da cor = vermelho, azul, verde e verde escuro. Encontre abaixo os códigos para o mesmo
|
CÓDIGO |
DESCRIÇÃO / SIGNIFICADO |
| rgb (x, y, z) | Para vermelho = rgb (255, 0, 0) |
| rgb (x%, y%, z%) | Para vermelho = rgb (100%, 0, 0) |
| #rrggbb | Para vermelho = # ff000 |
| sabor | Cor selecionada pelo usuário para personalizar a interface do usuário |
| rgba (x, y, z, alfa) | Para vermelho = rgb (255, 0, 0) |
Propriedades da interfase do usuário : CSS3 As propriedades da interfase do usuário da folha de dicas são as seguintes.
|
VALORES DE PROPRIEDADE |
DESCRIÇÃO |
| ícone | Para fornecer o ícone na área |
| redimensionar | Para redimensionar os elementos de área especificados |
| tamanho da caixa | Para corrigir a área do elemento especificada |
| aparência | Para implementar os elementos como elementos da interface do usuário |
| nav-down | Para mover os elementos de acordo com o botão de seta para baixo do teclado |
| nav-left | Para mover para a esquerda os elementos de acordo com o botão de seta esquerda do teclado |
| navegação | Para mover os elementos de acordo com o botão de seta esquerda do teclado |
| nav-right | Para mover para a direita os elementos de acordo com o botão de seta para a direita do teclado |
| deslocamento de contorno | Para desenhar o contorno da área de texto selecionada |
Tipos de seletor : Os tipos de seletor CSS3 da folha de dicas são os seguintes.
|
DIGITE O NOME |
DESCRIÇÃO / SIGNIFICADO |
| Universal | Para exibir qualquer elemento |
| Tipo | Para exibir qualquer elemento de tipo específico |
| Classe | Para exibir vários elementos de diferentes tipos |
| Eu iria | Para exibir e identificar um único tipo de elemento específico sem afetar outros |
| Criança | Para exibir um elemento que cai diretamente cai sob outro elemento |
| Agrupamento | Para identificar vários elementos de diferentes tipos |
| Irmão adjacente | Para buscar todos os elementos que possuem o mesmo pai e elementos e estão na sequência imediata |
| Irmão geral | Para buscar todos os elementos que possuem o mesmo pai e elementos e não estão necessariamente na sequência imediata |
Dicas e Truques gratuitos do uso de Comandos CSS3 da Cábula: -
- O modo de mesclagem CSS3 pode ser usado para unificar a aparência do conteúdo especificado e também permite que os usuários definam diferentes versões de cores da imagem. Existem cerca de 15 valores do modo de mesclagem presentes na CSS3 Cheat Sheet. Ele também adiciona uma vantagem extra da perspectiva da representação em interfase do usuário.
- O recorte é outro ótimo recurso do CSS. Usando a funcionalidade de recorte, um usuário pode definir a visibilidade da área da imagem conforme o requisito. Portanto, se alguma parte da imagem estiver fora da área desejada, o recorte poderá ser implementado para ocultar essa área extra da imagem.
- No caso do CSS, as propriedades shape-inside e shape-outside podem ser implementadas para envolver o conteúdo em torno do caminho personalizado do CSS e podem ser definidas e alocadas conforme os requisitos do usuário final. Basicamente, permite ao usuário projetar a interfase de acordo com as especificações definidas.
- O uso de animação SVG (escalable vector graphics) é outra vantagem do CSS3. Usando SVG com animação CSS3, a interfase se tornará mais interativa e o SVG também possui sua própria API DOM.
- A função de mapa será aplicada a todos os itens em uma lista de entrada.
- A função de redução é usada para aplicar algum cálculo em uma lista e retorna um valor
- Efeitos suspensos podem ser implementados usando CSS3 Cheat Sheet
- Um menu pegajoso pode ser implementado usando filtros CSS3 e SVG e isso ajuda a uma nova abordagem representativa da perspectiva da interfase do usuário
- Da perspectiva do design da web, efeitos de paralaxe podem ser produzidos usando CSS3.
- Estrutura 3D interativa e interfase do usuário podem ser produzidas usando CSS3
- Usando uma combinação diferente de seletor, um ícone de formato de arquivo ao lado do link de download pode ser produzido usando CSS3.
Conclusão
Neste artigo da CSS3 da Cheat sheet, vimos que o CSS3 é fácil de usar e sua sintaxe é mais fácil de lembrar. O CSS3 pode ser usado na representação de tecnologias de desenvolvimento da Web usando diferentes abordagens e tecnologias de folha de estilo que suportam CSS3. Com base no tipo de necessidade do projeto, tempo de trabalho e em todos os outros aspectos discutidos, o CSS3 deve ser usado para atingir a meta desejada.
Artigos recomendados
Este foi um guia para a Folha de dicas CSS3. Aqui discutimos o conteúdo e o comando, além de dicas e truques gratuitos da Folha de dicas CSS3. Você também pode consultar o artigo a seguir para saber mais -
- CSS da folha de dicas
- Cheat sheet HTML
- Folha de dicas incríveis para UNIX
- Cheat Sheet JavaScript: Recursos