Download pdf - Sintaxe Básica da Linguagem CSS - larback...Professor Leonardo Cabral da R. Soares Sintaxe Básica da Linguagem CSS • Valor - É a característica a ser assumida pela parte propriedade

Professor Leonardo Cabral da R. Soares

Sintaxe Básica da Linguagem CSS

• Regras - Regra CSS é uma declaração com sintaxe própria, que indica como seráaplicado um estilo a um ou mais elementos HTML. Ela é composta por três partes:um seletor, uma propriedade e um valor.

Sintaxe de uma regra: seletor { propriedade: valor; }• Seletor - Genericamente, é o elemento HTML identificado por sua tag, por uma

classe ou por uma ID. A regra será válida para o elemento indicado (exemplo: <p>,<h1>, <form> e .umaclassequalquer).

• Propriedades - é o atributo do elemento HTML ao qual será aplicada a regra(exemplo: font, colos e background).


Sintaxe Básica da Linguagem CSS

• Valor - É a característica a ser assumida pela parte propriedade (exemplo:font/letra tipo Verdana, fundo preto, cor vermelha).

Na sintaxe de uma regra CSS, é necessário escrever o seletor e, em seguida, apropriedade e o valor separados por dois pontos e entre chaves { }. Quando mais deuma propriedade for definida na regra, é necessário utilizar ponto-e-vírgula parasepara-las.

• Vários Seletores Juntos

Quando uma regra CSS possui vários seletores, podemos agrupá-los, separando-oscom uma virgula.


Propriedades CSS

• FONT – Ao utilizar as propriedades para fontes nas regras CSS, definimos ascaracterísticas dos caracteres que constituirão os textos dentro dos elementosHTML.A seguir podemos observar as propriedades básicas para fontes.

color Cor da fonte

font-family Tipo da fonte

font-size Tamanho da fonte

font-style Estilo da fonte

font-variant Fontes maiúsculas de menor altura

font-weight Escurecimento da fonte (negrito)

font Maneira abreviada para todas as propriedades


Propriedades CSS

Podemos verificar, também, exemplos de tipo de valores para cada propriedade de fonte.

Color• Código hexadecimal: #FFFFFF;• Código RGB: rgb (0-255,0-255);• Nome da cor: red, blue, green.

Font-Family• Family name: defini-se pelo nome da fonte (courier, arial, verdana etc.)• Generic – Family: defini-se pelo nome genérico (sans-serif, cursive, serif etc.).

Font-size

• Xx – Small, x-small, small, médium, large, x-large, xx-large, smaller, larger;• Length: Tamanho da fonte nas medidas px, pt, em, cm.


Propriedades CSS

Font-style

• Normal: fonte normal na vertical;• Italic: Fonte inclinada• Oblique: Fonte Oblíqua

Font-Variant• Normal: fonte normal;• Small-caps: transforma em maiúscula de menor altura

Font-Weight• Normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.


Propriedades CSS

• TEXT –A tabela a seguir mostra as propriedades existentes para textos HTML

Color Cor do texto

Letter-Spacing Espaçamento entre letras

Word-Spacing Espaçamento entre palavras

Text-align Alinhamento do texto

Text-decoration Decoração do texto

Text-indent Recuo do texto

Text-transform Forma das letras

Direction Direção do texto

White-space Como o navegador Trata os espaços em branco


Propriedades CSS


Letter-Spacing• Normal é o espaçamento padrão;• Lenght: quantidade de espaçamento do texto nas medidas px, pt, em, cm.

Word-Spacing• Normal é o espaçamento padrão;• Lenght: quantidade de espaçamento entre as palavras do texto nas medidas px, pt, em, cm.


Propriedades CSS

Text-align

Text-decoration

• Left: alinha o texto à esquerda;• Right: alinha o texto à direita;• Center: alinha o texto no centro:• Justify: força o texto a ocupar toda a extensão da linha da esquerda á direira

• None: nenhuma decoração;• Underline: texto sublinhado; • Overline: texto sobrelinhado;• Line-through: text riscado


Propriedades CSS

Text-transform

Direction

• Lenght: quantidade de espaço a partir da margem selecionada (padrão: esquerda), no inicio da linha do texto. Medidas px, pt, em, cm;

• % : porcentagem da largura do elemento pai.

• None: texto normal;• Capitalize: todas as letras iniciais do texto em maiúscula; • Uppercase: todas as letras do texto em maiúscula;• Lowercase: todas as letras do texto em minúsculas.

• Ltr (left-to-right): texto escrito da esquerda para a direita • Rtl (right-to-left): texto escrito da direita para a esquerda.

Text-indent


Propriedades CSS

White-space

• Normal: os espaços em branco serão ignorados pelo navegador;• Pre: os espaços em branco serão preservados pelo navegador;• Nowrap: o texto será apresentado todo em uma linha única na tela, não

havendo uma quebra de linha até que se encontre uma tag <br>.


Propriedades CSS

MARGIN – A propriedade da margin permite o controle do espaçamento em volta dos elemento em HTML. São validos valores negativos para margem, com o objetivo de sobrepor os elementos.

A tabela a seguir mostra as propriedades existentes para margin.

Margin-top Define a margem superior

Margin-right Define a margem direita

Margin-bottom Define a margem inferior

Margin-left Define a margem esquerda

Margin Maneira abreviada para todas as margens


Propriedades CSS

Border- width Espessura da borda

Border-style Estilo da borda

Border-color Cor da borda

Border-top-width Espessura da borda superior

Border-top-style Estilo da borda superior

Border-top-color Cor da borda superior

Border-right-width Espessura da borda direita

Border-right-style Estilo da borda direita

Border-right-color Cor da borda direita

Border-bottom-width Espessura da borda inferior

Border-bottom-style Estilo da borda inferior

Border-bottom-color Cor da borda inferior

BORDER


Propriedades CSS

Border-left-width Espessura da borda esquerda

Border-left-style Estilo da borda esquerda

Border-left-color Cor da borda esquerda

Border- top Maneira abreviada para todas as propriedades da borda superior

Border-right Maneira abreviada para todas as propriedades da borda direita

Border-bottom Maneira abreviada para todas as propriedades da borda inferior

Border-left Maneira abreviada para todas as propriedades da borda esquerda

Border Maneira abreviada para todas as bordas

BORDER


Propriedades CSS

Exemplos de tipos de valores para cada propriedade da borda:


Style• None: nenhuma borda;• Hidden: equivalente a none;• Dotted: pontilhada;• Dashed: tracejada;• Solid:borda contínua;

• Double:borda dupla;• Groove: borda entalhada; • Ridge: borda em ressalto;• Inset: borda em baixo relevo; • Outset: borda em alto relevo;


Propriedades CSS

Width• Thin: borda fina;• Medium: borda média;• Thick: borda grossa;• Length: espessura da borda, medida em px, pt, em ou cm


Propriedades CSS

PADDING

A propriedade padding define um valor para os espaçamentos entre o conteúdo e as bordas dos elementos HTML

Padding-top Define o espaçamento superior

Padding-right Define o espaçamento direito

Padding-bottom Define o espaçamento inferior

Padding-left Define o espaçamento esquerdo

Padding Maneira abreviada para todos os o espaçamentos.

Exemplos de tipo de valores para cada propriedade de padding:• Auto: valor padrão da margem;• Length: largura do espaçamento, medido em px, pt, ou em cm;• % porcentagem da largura do elemento pai.

Observe que não são validos valores negativos para o espaçamento


Propriedades CSS

Background-color Cor do fundo

Background- image Imagem do fundo

Background-repeat Maneira como a imagem do fundo é posicionada

Background-attachment Se a imagem de fundo funciona ou não com a tela

Background-position Como e onde a imagem de fundo é posicionada

BACKGROUND

Background- image• URL: url(caminhodaimagem/imagemqualquer.jpg).


Propriedades CSS

Background-repeat• Não repete: no-repeat;• Repete vertical e horizontal: repeat;• Repete vertical: repeat-y;• Repete Horizontal: repeat-x;

Background-attachment• Imagem fixa na tela: fixed;• Imagem rola com a tela: scroll

Background-position• x-pos, y-pos;• x-%, y-%;• Top left;• Top center;


Propriedades CSS

List-style-image Imagem como marcador da lista

List-style-position Onde o marcador da lista é posicionado

List-style-type Tipo do marcador da lista

List-style Maneira abreviada para todas as propriedades

LIST

List-style-image• None;• URL: url(caminho/marcador.gif).

A seguir, temos alguns exemplos de tipo de valores para cada propriedade de list.


Propriedades CSS

List-style-position• Outside: marcador fora do alinhamento do texto;• Inside: marcador alinhado ao texto.

List-style-type• None: sem marcador;• Disc: círculo (bolinha cheia);• Circle: circunferência (bolinha vazia);• Square: quadrado cheio;• Decimal: números 1,2,3,4...;• decimal-leading-zero;