O estilo visual e o layout de um site são ditados por CSS ou Cascading Style Sheets. Estes são documentos que moldam a marcação HTML de uma página da Web, fornecendo aos navegadores da Web instruções sobre como exibir as páginas resultantes dessa marcação. O CSS lida com o layout de uma página, bem como cores, imagens de plano de fundo, tipografia e muito mais.
Se você olhar para um arquivo CSS, verá que, como qualquer linguagem de marcação ou codificação, esses arquivos têm uma sintaxe específica para eles. Cada folha de estilo é composta de várias regras CSS. Estas regras, quando tomadas na íntegra, são o que os estilos do site.
As partes de uma regra CSS
Uma regra de CSS é composta de duas partes distintas - o seletor e a declaração. O seletor determina o que está sendo estilizado em uma página e a declaração é como ele deve ser estilizado. Por exemplo:
p { cor: # 000;}
Esta é uma regra de CSS. A parte do seletor é o "p", que é um seletor de elementos para "parágrafos". Portanto, ele selecionaria TODOS os parágrafos em um site e forneceria a eles esse estilo (a menos que haja parágrafos que sejam direcionados por estilos mais específicos em outro local do documento CSS).
A parte da regra que diz "color: # 000;" é o que é conhecido como a declaração. Essa declaração é composta de duas partes - a propriedade e o valor.
A propriedade é a peça "colorida" desta declaração. Ele determina qual aspecto do seletor será alterado visualmente.
O valor é para o qual a propriedade CSS escolhida será alterada. Em nosso exemplo, estamos usando o valor hexadecimal de # 000, que é uma abreviação de CSS para "preto".
Portanto, usando essa regra de CSS, nossa página teria parágrafos exibidos em uma cor de fonte em preto.
Noções básicas de propriedade de CSS
Quando você escreve propriedades CSS, não pode simplesmente criá-las como achar melhor. Por exemplo, "cor" é uma propriedade CSS real, então você pode usá-la. Essa propriedade é o que determina a cor do texto de um elemento. Se você tentou usar "cor do texto" ou "cor da fonte" como propriedades CSS, elas falhariam porque não são partes reais da linguagem CSS.
Outro exemplo é a propriedade "background-image". Esta propriedade define uma imagem que pode ser usada para um plano de fundo, como este:
.logo { background-image: url (/images/company-logo.png);}
Se você tentou usar "background-picture" ou "background-graphic" como uma propriedade, eles falhariam porque, mais uma vez, essas não são propriedades CSS reais.
Algumas propriedades do CSS
Há várias propriedades CSS que você pode usar para estilizar um site. Alguns exemplos são:
- Border (incluindo border-style, border-color e border-width)
- Preenchimento (incluindo acolchoamento, acolchoamento, acolchoamento e acolchoamento à esquerda)
- Margens (incluindo margin-top, margin-right, margin-bottom e margin-left)
- Família de fontes
- Tamanho da fonte
- Cor de fundo
- Largura
- Altura
Essas propriedades CSS são ótimas para usar como exemplos, porque são todas muito simples e, mesmo que você não saiba CSS, provavelmente é possível adivinhar o que elas fazem com base em seus nomes.
Existem outras propriedades CSS que você também encontrará, que podem não ser tão óbvias como funcionam com base em seus nomes:
- Flutuador
- Claro
- Transbordar
- Texto-transformar
- Z-index
À medida que você se aprofunda no design da web, você encontrará (e usará) todas essas propriedades e mais!
Propriedades precisam de valores
Toda vez que você usa uma propriedade, você deve atribuir um valor a ela e determinadas propriedades podem aceitar apenas determinados valores.
Em nosso primeiro exemplo da propriedade "color", precisamos usar um valor de cor. Pode ser um valor hexadecimal, um valor RGBA ou até mesmo palavras-chave coloridas. Qualquer um desses valores funcionaria, no entanto, se você usasse a palavra "sombria" com essa propriedade, ela não faria nada porque, por mais descritiva que essa palavra possa ser, ela não é um valor reconhecido em CSS.
Nosso segundo exemplo de "imagem de fundo" requer que um caminho de imagem seja usado para buscar uma imagem real dos arquivos do seu site. Esse é o valor / sintaxe necessário.
Todas as propriedades CSS possuem valores esperados. Por exemplo:
- Border-color espera um valor de cor
- O tamanho da borda espera um valor de tamanho, como pixels ou porcentagens
- Os estilos de borda esperam um dos estilos reservados usados para essa propriedade, como "sólido"
Se você percorrer a lista de propriedades CSS, descobrirá que cada uma delas possui valores específicos que usarão para criar os estilos aos quais se destinam.
Editado por Jeremy Girard
