Skip to content

Definição de design da propriedade CSS

1 de junho de 2021

O estilo visual e o layout de um site são ditados por CSS ou Cascading Style Sheets. Esses 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 que resultam dessa marcação. CSS lida com o layout de uma página, bem como com cores, imagens 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. Cada folha de estilo é composta por várias regras CSS. Essas regras, quando tomadas na íntegra, são o que estiliza o site.

As partes de uma regra CSS

Uma regra 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 deve ser estilizado. Por exemplo: p {
cor: # 000;
}

type = “code”> Esta é uma regra CSS. A parte do seletor é o p, que é um seletor de elemento para “parágrafos”. Seria, portanto, selecionar TODOS os parágrafos em um site e fornecer a eles este estilo (a menos que haja parágrafos que são direcionados por estilos mais específicos em outro lugar em seu documento CSS). A parte da regra que diz: “cor: # 000;“é o que se conhece como a declaração. Essa declaração é composta de duas partes – a propriedade e a valor. O propriedade é o cor parte desta declaração. Ele determina qual aspecto do seletor será alterado visualmente. O valor é para onde a propriedade CSS escolhida será alterada. Em nosso exemplo, estamos usando o valor hexadecimal de # 000, que é a abreviação de CSS para “preto”. Portanto, usando esta regra CSS, nossa página teria parágrafos exibidos em uma cor de fonte preta.

CSS Property Basics

Ao escrever propriedades CSS, você não pode simplesmente criá-las como achar melhor. Por exemplo, “color” é uma propriedade CSS real, portanto, você pode usá-la. Esta propriedade é o que determina a cor do texto de um elemento. Se você tentar usar “text-color” ou “font-color” como propriedades CSS, elas falharão 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 como plano de fundo, como este: .logo {
background-image: url (“/ images / company-logo.png”);
}

type = “code”> Se você tentasse 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 CSS

Existem várias propriedades CSS que você pode usar para definir o estilo de um site. Alguns exemplos são:

  • Borda (incluindo estilo da borda, cor da borda e largura da borda)
  • Preenchimento (incluindo padding-top, padding-right, padding-bottom e padding-left)
  • Margens (incluindo margem superior, margem direita, margem inferior e margem esquerda)
  • 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 diretas e, mesmo que você não conheça CSS, provavelmente pode 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
  • Transformação de texto
  • Z-index

Conforme você se aprofunda no design da web, encontrará (e usará) todas essas propriedades e muito mais!

As propriedades precisam de valores

Cada vez que você usa uma propriedade, você deve atribuir um valor a ela – e certas propriedades só podem aceitar determinados valores. Em nosso primeiro exemplo da propriedade “color”, precisamos usar um valor de cor. Pode ser um valor hexadecimal, valor RGBA ou até mesmo palavras-chave coloridas. Qualquer um desses valores funcionaria, no entanto, se você usasse a palavra “sombrio” com essa propriedade, não faria nada porque, por mais descritiva que essa palavra possa ser, não é um valor reconhecido no CSS. Nosso segundo exemplo de “imagem de fundo” requer que um caminho de imagem seja usado para obter uma imagem real dos arquivos do seu site. Este é o valor / sintaxe necessário. Todas as propriedades CSS têm valores que eles esperam. Por exemplo:

  • A cor da borda espera um valor de cor.
  • O tamanho da borda espera um valor de dimensionamento, como pixels ou porcentagens.
  • Os estilos de borda esperam um dos estilos reservados usados ​​para esta propriedade, como “sólido”.

Se você examinar 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.

Formato mla apa chicago Sua Citação

Kyrnin, Jennifer. “Definição de Design de Propriedade CSS.” ThoughtCo, maio. 14 de 2021, thinkingco.com/property-definition-3466899.
Kyrnin, Jennifer. (2021, 14 de maio). Definição de design da propriedade CSS. Obtido em https://www.thoughtco.com/property-definition-3466899
Kyrnin, Jennifer. “Definição de Design de Propriedade CSS.” ThoughtCo. https://www.thoughtco.com/property-definition-3466899 (acessado em 1 de junho de 2021).