Sintaxe Básica da Linguagem CSS

Transcrição

1 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).

2 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, a propriedade e o valor separados por dois pontos e entre chaves { }. Quando mais de uma propriedade for definida na regra, é necessário utilizar ponto-e-vírgula para separa-las. Vários Seletores Juntos Quando uma regra CSS possui vários seletores, podemos agrupá-los, separando-os com uma virgula.

3 Propriedades CSS FONT Ao utilizar as propriedades para fontes nas regras CSS, definimos as características dos caracteres que constituirão os textos dentro dos elementos HTML. A seguir podemos observar as propriedades básicas para fontes. color font-family font-size font-style font-variant font-weight font Cor da fonte Tipo da fonte Tamanho da fonte Estilo da fonte Fontes maiúsculas de menor altura Escurecimento da fonte (negrito) Maneira abreviada para todas as propriedades Professor Leonardo Cabral da R. Soares

4 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.

5 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.

6 Propriedades CSS TEXT A tabela a seguir mostra as propriedades existentes para textos HTML Color Letter-Spacing Word-Spacing Text-align Text-decoration Text-indent Text-transform Direction White-space Cor do texto Espaçamento entre letras Espaçamento entre palavras Alinhamento do texto Decoração do texto Recuo do texto Forma das letras Direção do texto Como o navegador Trata os espaços em branco Professor Leonardo Cabral da R. Soares

7 Color Código hexadecimal: #FFFFFF; Código RGB: rgb (0-255,0-255); Nome da cor: red, blue, green. 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.

8 Text-align Text-decoration Propriedades CSS 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

9 Text-indent Text-transform Direction Propriedades CSS 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.

10 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>.

11 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 Margin-right Margin-bottom Margin-left Margin Define a margem superior Define a margem direita Define a margem inferior Define a margem esquerda Maneira abreviada para todas as margens Professor Leonardo Cabral da R. Soares

12 Propriedades CSS BORDER Border- width Border-style Border-color Border-top-width Border-top-style Border-top-color Border-right-width Border-right-style Border-right-color Border-bottom-width Border-bottom-style Border-bottom-color Espessura da borda Estilo da borda Cor da borda Espessura da borda superior Estilo da borda superior Cor da borda superior Espessura da borda direita Estilo da borda direita Cor da borda direita Espessura da borda inferior Estilo da borda inferior Cor da borda inferior Professor Leonardo Cabral da R. Soares

13 Propriedades CSS BORDER Border-left-width Border-left-style Border-left-color Border- top Border-right Border-bottom Border-left Border Espessura da borda esquerda Estilo da borda esquerda Cor da borda esquerda Maneira abreviada para todas as propriedades da borda superior Maneira abreviada para todas as propriedades da borda direita Maneira abreviada para todas as propriedades da borda inferior Maneira abreviada para todas as propriedades da borda esquerda Maneira abreviada para todas as bordas Professor Leonardo Cabral da R. Soares

14 Propriedades CSS Exemplos de tipos de valores para cada propriedade da borda: Color Código hexadecimal: #FFFFFF; Código RGB: rgb (0-255,0-255); Nome da cor: red, blue, green. 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;

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

16 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 Padding-right Padding-bottom Padding-left Padding Define o espaçamento superior Define o espaçamento direito Define o espaçamento inferior Define o espaçamento esquerdo 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 Professor Leonardo Cabral da R. Soares

17 Propriedades CSS BACKGROUND Background-color Background- image Background-repeat Background-attachment Background-position Cor do fundo Imagem do fundo Maneira como a imagem do fundo é posicionada Se a imagem de fundo funciona ou não com a tela Como e onde a imagem de fundo é posicionada Background- image URL: url(caminhodaimagem/imagemqualquer.jpg). Professor Leonardo Cabral da R. Soares

18 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;

19 Propriedades CSS LIST List-style-image List-style-position List-style-type List-style Imagem como marcador da lista Onde o marcador da lista é posicionado Tipo do marcador da lista Maneira abreviada para todas as propriedades A seguir, temos alguns exemplos de tipo de valores para cada propriedade de list. List-style-image None; URL: url(caminho/marcador.gif). Professor Leonardo Cabral da R. Soares

20 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;