Upload
others
View
20
Download
0
Embed Size (px)
Citation preview
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).
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, 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.
Professor Leonardo Cabral da R. Soares
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
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 <br>.
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: 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;
Professor Leonardo Cabral da R. Soares
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.
Professor Leonardo Cabral da R. Soares
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;