CSS - Introdução

Cascading Style Sheets, também conhecido como CSS, é uma linguagem de folha de estilos usada para descrever a apresentação de um documento gravado em uma linguagem de marcação como HTML. Simplifica basicamente o processo de tornar as páginas da Web apresentáveis. Ele lida com a aparência da página da web e é usado para controlar os recursos de uma página da web, como a cor do texto, o estilo das fontes, o espaçamento entre parágrafos, o alinhamento de colunas, as imagens e as cores de segundo plano e uma variedade de outros efeitos. . As vantagens de uma folha de dicas CSS é que ela economiza tempo, as páginas carregam mais rápido, manutenção fácil, estilos superiores, compatibilidade com vários dispositivos e padrões globais da Web.

Comandos e conteúdo no CSS da folha de dicas

Sintaxe básica

A sintaxe básica do CSS da folha de dicas consiste em um seletor e componentes de declaração. O componente seletor especifica o elemento HTML que deve ser estilizado. O componente de declaração contém duas ou mais propriedades e suas especificações separadas por ponto e vírgula. O componente de declaração sempre inicia e termina com chaves.

Abaixo estão os comandos CSS do Cheatsheet mencionados que executam diferentes tipos de operações:

Especificação Comando
CoresAs cores são especificadas usando nomes de cores predefinidos ou valores RGB, HEX, HSL, RGBA, HSLA.
Planos de fundoA cor do plano de fundo de um elemento é especificada pela propriedade background-color
Fronteiras
  • A propriedade border define todas as propriedades da borda
  • cor da borda define a cor das quatro bordas
  • raio da borda define as bordas com cantos arredondados
  • estilo de borda define o estilo das quatro bordas
  • border-width define a largura das quatro bordas
MargensA propriedade Margin define as propriedades das margens em uma declaração.
PreenchimentoA propriedade para definir as propriedades de preenchimento em uma declaração é preenchimento.
Altura larguraAs propriedades height e width são usadas para especificar a altura e a largura de um elemento.
EsboçoA propriedade estilo de estrutura de tópicos especifica o tipo de estrutura de tópicos para um elemento.
TextoA propriedade color é usada para definir a cor do texto.
FontesA propriedade font-family é usada para definir a fonte do texto selecionado.
LigaçõesA propriedade de decoração de texto é usada para remover sublinhados dos links e a propriedade cor de fundo pode ser usada para especificar a cor de fundo dos links.
ListasA propriedade de estilo de lista define a propriedade de uma lista em uma declaração. A imagem no estilo da lista especifica uma imagem como o marcador do item da lista. A posição do estilo da lista especifica a posição do marcador do item da lista. O tipo de estilo de lista especifica o tipo de marcador de item de lista.
TabelasBorda define todas as propriedades da borda em uma declaração. O recolhimento de borda especifica se uma borda deve ser recolhida ou não. O espaçamento entre bordas a distância ou espaçamento entre células adjacentes. O lado da legenda especifica o posicionamento de uma legenda da tabela. O layout da tabela define o algoritmo para o layout de uma tabela.
ExibiçãoA propriedade display especifica se um elemento é exibido e como é exibido.
Largura máximaNo processo de especificar a largura de um elemento de bloco, o uso de max-width melhorará o manuseio de pequenas janelas pelo navegador.
PosiçãoA propriedade position especifica a posição de um elemento.
TransbordarA propriedade overflow controla o texto que é muito grande para caber em uma área.
FlutuadorA propriedade float especifica como um elemento deve flutuar.

Dicas e Truques gratuitos para o uso de comandos CSS da folha de dicas: -

Alguns truques essenciais do CSS da folha de dicas são os seguintes.

  • Box-Model: O CSS Box-Model é essencialmente uma caixa que envolve todos os elementos HTML. Consiste em margens, bordas, preenchimento e conteúdo.
  • Pseudo-classe: é usada para definir um estado específico de um elemento que envolve estilizar um elemento de maneira diferente quando um usuário passa o mouse sobre ele, estilizando links visitados e não visitados e estilizando elementos que estão em foco.
  • Pseudoelemento: É usado para estilizar uma parte de um elemento como a primeira letra, palavra ou linha. Também ajuda na inserção de conteúdo antes e depois do conteúdo de um elemento.
  • Altura vertical da tela: especifica até que ponto o conteúdo deve ocupar a tela.
  • Estilo de links telefônicos: especifica as propriedades dos links que são abertos como números de telefone no telefone.
  • Barras de navegação: É importante que um site tenha uma boa navegação. O CSS transforma menus HTML chatos em barras de navegação bonitas.

Conclusão

O CSS da folha de dicas, como uma ferramenta de criação de sites, é muito eficaz. Como as opções para uma melhor apresentação de um site e a adição de recursos úteis são mais com CSS, é muito preferido.

Artigos recomendados

Este foi um guia para o CSS da folha de dicas. Aqui discutimos o conteúdo e o comando, além de dicas e truques gratuitos para CSS das folhas de dicas. Você também pode consultar o artigo a seguir para saber mais -

  1. Cheat Sheet SQL
  2. Principais perguntas da entrevista CSS
  3. Diferenças entre CSS e CSS3
  4. Perguntas e respostas da entrevista do CSS3
  5. Folha de dicas interessantes para UNIX
  6. Cheat Sheet JavaScript: Funções