Propriedades CSS

Bordas

1 - border-top-width: largura da borda superior.
2 - border-right-width: largura da borda direita.
3 - border-bottom-width: largura da borda inferior.
4 - border-left-width: largura da borda esquerda.
5 - border-width: largura de todas as bordas.
6 - border‐top‐color: cor da borda especificada.
7 - border‐right‐color: cor da borda direita.
8 - border‐bottom‐color: cor da borda inferior.
9 - border‐left‐color: cor da borda esquerda.
10 - border‐color: cor das 4 bordas especificada.
11 - border‐top‐style: estilo da borda superior.
12 - border‐right‐style: estilo da borda direita.
13 - border‐bottom‐style: estilo da borda inferior.
14 - border‐left‐style: estilo da borda esquerda.
15 - border‐style: : estilo em todas as bordas.
16 - border‐top: estilo na borda superior.
17 - border‐right: borda direita.
18 - border‐bottom: borda inferior.
19 - border‐left: borda esquerda.
20 – border: borda dos 4 lados.

Margens

1 - margin-top: tamanho da margem superior.
2 - margin-right: tamanho da margem direita.
3 - margin-bottom: tamanho da margem inferior.
4 - margin-left: tamanho da margem esquerda.
5 - margin: tamanho das 4 margens.
6 - padding-top: define o espaço superior dos elementos.
7 - padding-right: define o espaço direito dos elementos.
8 - padding-bottom: define o espaço inferior dos elementos.
9 - padding-left: define o espaço esquerdo dos elementos.
10 - padding: define o espaço de todos os lados dos elementos.

Cores e fundo

1- color: cor de primeiro plano.
2 - background‐color: cor de fundo.
3 - background‐image: imagem de fundo.
4 - background‐repeat: imagem configurada lado-a-lado.
5 - background‐attachment: só a imagem de fundo rola.
6 - background‐position: posição da imagem de fundo.
7 – background: pode-se usar todos os parâmetros permitidos para essa propriedade.

Fontes Tipográficas

1 - font‐family: tipo da fonte.
2 - font‐style: estilo da fonte.
3 - font‐variant: fontes maiúsculas e minúsculas.
4 - font‐weight: largura da fonte.
5 - font‐size: tamanho da fonte.
6 - font: pode-se usar todos os parâmetros permitidos para essa propriedade.

Texto

1 - text‐indent: recuo do texto.
2 - text‐align: alinhamento do texto.
3 - text‐decoration: decoração do texto.
4 - letter‐spacing: espaço entre as letras.
5 - word‐spacing: espaço entre as palavras.
6 - text‐transform: forma das letras do texto.

Modelo de Formatação Visual

1 - float: é um elemento que pode ser empurrado para esquerda e para direita.
2 - clear: controle sobre os posicionamentos que usam float.
3 - width: largura.
4 - height: altura.
5 - line‐height: altura da linha do texto.
6 - vertical‐align: define o aliamento vertical do texto.

Listas

1 - list‐style‐type: tipo de marcador de lista.
2 - list‐style‐image: imagem como marcador de lista.
3 - list‐style‐position: posicionar o marcador de lista.
4 - list‐style: pode-se usar todos os parâmetros permitidos para essa propriedade.

Visão Geral CSS

O que é CSS – benefícios de utilização

CSS é Style Sheets que significa Folhas de Estilo. CSS é mais um forma de aperfeiçoar seus documentos.

Ele nos ajudam em:

Economizar tempo e diminuir o tamanho do código na página.

Sua página irá carregar mais rapidamente.

Mais facilidade na manutenção do código e do layout.

Formas de utilização (externo, embutido, inline)

Externo : as regras CSS ficam em um arquivo separado, a página HTML faz um link para esse arquivo CSS, dessa forma você pode atingir quantas páginas quiser no seu web site.

Imbutido: as regras CSS ficam no cabeçado do documento HTML,  as modificações do CSS afetam somente a página atual.

Inline: as regras Css são especificadas dentro de uma tag HTML, essa forma de css afeta somente a tag atual.

Sintaxe

Comentário: Para fazer um comentário basta começar com “/*” e terminar com ”*/”, o navegador ingnora oque está comentado.

Regras: A regra CSS é uma declaração que segue um sintaxe, que define como será aplicado o estilo na página HTML, a sintaxe CSS se divide em três partes, seletor, propriedade e valor, como é mostrado no exemplo abaixo:

Seletor{ propriedade:valor;}

Unidades

Relativas (px, em, ex): é tomada em relação a outra medida. Folhas de Estilo em Cascata, usam esse tipo de medida para diferentes tipos de mídia.

Px : dispositivo (midia) de exibição.

Em: tamanho de fonte(font-size)herdada.

Ex: altura da letra x(xis) da fonte herdada.

Absolutas(in, cm, mm, pt, pc): é medida de comprimento que não refenrencia e nem herda nenhum valor, elas são definidas nos sitemas de medias pela fisica como centímetros e polegadas.

In: polegadas.

Cm: centímetros.

Mm: milímetros.

Pt: pontos.

Pc: picas.

Porcetagem: esse tipo de valor é relativo a um outro valor anterior declarado. O valor anterior que já esta definido, está em uma determinada propriedade do mesmo elemento.

Formulários HTML.

Tag form.

<form> </form> essa tag é usada para criar formulários em HTML para receber dados do usuário.

Atributos:

Id =  esse atributo é usado para colocar um nome que seja único na pagina html, quando usar o css as modificações em alguma tag html, através do Id.

Action = esse atributo é usado para enviar  os dados do formulário para a página que está sendo indicada 

dentro do atributo Action.

Method =  esse atributo é usado especificando qual método os dados do formulário serão enviados.

Enctype = esse atributo determina a forma que os dados serão codificados.

Tag label.

<label></label> essa tag define um nome para o input.

Atributos:

Accesskey = esse atributo é usado para especificar uma tecla de atalho, para focar em algum elemento da página HTML.

For = esse atributo representa um ligação da tag label com o campo.

Tag input.

<input></input> essa tag é usada para definir um campo de entrada, onde o usuário informa seus dados.

Atributos:

Type = esse atributo define qual o tipo de botão será usado na página em html.

Text = esse atributo define um campo de texto no input.

Date = esse atributo define o ano, mês e dia ele controla a data não a hora.

Email = esse atributo define o input como campo de e-mail.

Number = esse atributo define o input como campo para digitar número.

Range = esse atributo define o input como um controle deslizante, que a entrada é um número.

Password = esse atributo define o input como um campo de senha criptografando oque é digitado pelo 

usuário.

Hidden = esse atributo define o input como um campo invisível

.

File = esse atributo define o input como um campo de busca de arquivos, como por exemplo carregar uma 

imagem que esta no seu computador.

Checkbox = esse atributo define o input como um campo de caixa de seleção.

Radio = esse atributo define o input como um campo de radio.

Button = esse atributo define o input como um campo clicável, assim que ele é acionado ele faz alguma função, como uma ação de java script.

Image = esse atributo define o input como uma imagem que serve de botão.

Submit = esse atributo define o input como um botão de envio.

Reset = esse atributo define o input como um botão que reseta todos os valores do formulário para o valor padrão.

Id = esse atributo é usado para colocar um nome que seja único tag html, quando usar o css para estilizar 

seu documento, a tag que você quer modificar é identificada através do seu id.

Name = esse atributo define um nome para o input.

Accesskey = esse atributo é usado para especificar uma tecla de atalho, para focar em algum elemento da página HTML.

Alt =  esse atributo define o input como um texto alternativo para imagens quando está usando o type=”imagem”.

Checked = esse atributo define o input como um botão pré-selecionado por padrão quando a página é carregada, mas é usado quando o input é do type=”checkbox” ou “radio”.

Disabled = esse atributo define o input como um elemento que deve ser desativado.

Maxlength = esse atributo define o input como limitador de caracteres.

Readonly = esse atributo define o input como um campo de entrada de leitura.

Size = esse atributo define o input como um campo que define a largura dos caracteres. 

Src = esse atributo define o input como uma campo que usa a url de uma imagem para botão de envio, esse atributo é usado com o type=”image”.

Tabindex = esse atributo define o input como um campo vai existir uma ordem de tabulação dos elementos input na página HTML, quando for usado a tecla “tab do teclado”.

Value = esse atributo define o input como um campo que tem um valor padrão com um nome qualquer.

Max = esse atributo define o input como um campo que tem um valor máximo de elementos.

Min = esse atributo define o input como um campo que tem um valor mínimo de elementos.

Step = esse atributo define o input como um campo que especifica os intervalos de número legal para campos de entrada.

Tag select.

<select></select> essa tag é usada para criar uma lista drop-drow.

Atributos:

Id = esse atributo é usado para colocar um nome que seja único tag html, quando usar o css para estilizar seu documento, a tag que você quer modificar é identificada através do seu id.

Multiple = esse atributo permite que você pode escolher mais de uma opção em uma lista.

Disable = esse atributo define que a lista drop-down deve ser desativado.

Size = esse atributo define o número de opções na lista drop-down.

Tabindex = esse atributo define o input como um campo que será especificado qual ordem vai percorrer de tabulação dos elementos select na página HTML, quando for usado a tecla “tab do teclado”.

Tag option.

<option></option> essa tag é usada para definir uma opção na lista de seleção.

Atributos:

Value = esse atributo deifne qual valor será enviado ao servidor.