Sintaxe Bأ،sica da Linguagem CSS - ... Professor Leonardo Cabral da R. Soares Sintaxe Bأ،sica da Linguagem

  • View
    0

  • Download
    0

Embed Size (px)

Text of Sintaxe Bأ،sica da Linguagem CSS - ... Professor Leonardo Cabral da R. Soares Sintaxe Bأ،sica da...

  • 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:

    , , e .umaclassequalquer).

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

  • Professor Leonardo Cabral da R. Soares

    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.

  • Professor Leonardo Cabral da R. Soares

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

  • Professor Leonardo Cabral da R. Soares

    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.

  • Professor Leonardo Cabral da R. Soares

    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.

  • Professor Leonardo Cabral da R. Soares

    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

  • Professor Leonardo Cabral da R. Soares

    Propriedades CSS

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

    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.

  • Professor Leonardo Cabral da R. Soares

    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

  • Professor Leonardo Cabral da R. Soares

    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

  • Professor Leonardo Cabral da R. Soares

    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
    .

  • Professor Leonardo Cabral da R. Soares

    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

  • Professor Leonardo Cabral da R. Soares

    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

  • Professor Leonardo Cabral da R. Soares

    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

  • Professor Leonardo Cabral da R. Soares

    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;

  • Professor Leonardo Cabral da R. Soares

    Propriedades CSS

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

  • Professor Leonardo Cabral da R. Soares

    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

  • Professor Leonardo Cabral da R. Soares

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

  • Professor Leonardo Cabral da R. Soares

    Propriedades CSS

    Background-repeat • Não repete: no-repeat; • Repete vertical e horizontal: re