Unb 2012. 1- dweb - b - css proproedades

1 Monday, 19 de March de 12 Apêndice B - CSS (Propriedades)

Curso Superior de Tecnologia em Design Gráfico

“E não vos conformeis com este século, mas transformai-vos pela renovação da vossa mente, para que experimenteis qual seja a boa, agradável e perfeita vontade de Deus..” Romanos 12:2

B CSS : Propriedades

DWEB - Design para Web

DWEB – Design para Web / Carlos José


Contato

Carlos José

[email protected] www.carlosjose.net

twitter.com/carlosjoser2n



Objetivo da Aula

n Apresentar os fundamentos da linguagem de formatação CSS.



Agenda

n Propriedades



CSS : Propriedades

n  A propriedade font î As propriedades para as fontes, definem as

características das letras que constituem os textos dentro dos elementos HTML.

î As propriedades básicas são:

color:.................cor da fonte font-family:..........tipo de fonte font-size:.............tamanho da fonte font-style:............estilo da fonte font-variant:.........fontes maiúsculas de menor altura font-weight:.........quanto mais escura a fonte é (negrito) font:..................maneira abreviada para todas as propriedades



CSS : Propriedades

n  A propriedade font î  Valores válidos para a propriedade:

n  color: î  código hexadecimal: #FFFFFF; código rgb: rgb(255,235,0) ; nome da cor:

red, blue, green...etc n  font-family:

î  family-name: define-se pelo nome da fonte, ex:"verdana", "helvetica", "arial", etc.

n  font-size: î  length: uma medida reconhecida pelas CSS (px, %, em)

n  font-style: î  normal: fonte normal na vertical; italic: fonte inclinada; oblique:fonte

obliqua n  font-variant:

î  normal: fonte normal; small-caps: transforma em maiúsculas de menor altura;

n  font-weight: î  Normal; bold; bolder; lighter; 100 até 900



CSS : Propriedades

n  A propriedade text î As propriedades para textos, definem as características

(os valores na regra CSS) dos textos inseridos dentro dos elementos HTML.


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 browser trata os espaços em branco;



CSS : Propriedades n  A propriedade text

î  Valores válidos para a propriedade: n  letter-spacing:

î  normal: é o espaçamento default; lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) São válidos valores negativos

n  word-spacing: î  normal: é o espaçamento default; lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) São

válidos valores negativos n  text-align:

î  left: alinha o texto a esquerda; right: alinha o texto a direita; center: alinha o texto no centro; justify: força o texto a ocupar toda a extensão da linha da esquerda a direita

n  text-decoration: î  none: nenhuma decoração; underline: coloca sublinhado no texto; overline: coloca um sobrelinhado

no texto; line-through: coloca uma linha em cima do texto; blink: faz o texto piscar n  text-indent:

î  lenght: uma medida reconhecida pelas CSS (px, em); % : porcentagem da largura do elemento pai n  text-transform:

î  none: texto normal; capitalize: todas as primeiras letras do texto em maiúsculas; uppercase: todas as letras do texto em maiúsculas; lowercase: todas as letras do texto em minúsculas

n  direction: î  ltr: texto escrito da esquerda para a direita; rtl: texto escrito da direita para a esquerda

n  white-space: î  normal: os espaços em branco serão ignorados pelo browser; pre: os espaços em branco serão

preservados pelo browser; nowrap: o texto será apresentado todo ele numa linha única na tela. Não há quebra de linha até ser encontrada uma tag <br />



CSS : Propriedades

n  A propriedade background î A propriedade background define as características (os

valores na regra CSS) do fundo dos elementos HTML. î As propriedades básicas são:

background-color............... cor do fundo; background-image.............. imagem de fundo; background-repeat............. maneira como a imagem de fundo é posicionada; background-attachment....... se a imagem de fundo "rola" ou não com a tela; background-position........... como e onde a imagem de fundo é posicionada; background...................... maneira abreviada para todas as propriedades;



CSS : Propriedades

n  A propriedade background î Valores válidos a propriedade:

n  background-color: î  código hexadecimal: #FFFFFF; código rgb: rgb(255,235,0); nome

da cor: red, blue, green...etc; transparente: transparent n  background-image:

î  URL: url(caminho/imagem.gif) n  background-repeat:

î  não repete: no-repeat; repete vertical e horizontal: repeat; repete vertical: repeat-y; repete horizontal: repeat-x

n  background-attachment: î  imagem fixa na tela: fixed; imagem "rola" com a tela: scroll

n  background-position: î  x-pos y-pos; x-% y-%; î  top left; top center; top right; î  center left; center center; center right î  bottom left; bottom center; bottom right



CSS : Propriedades

n  A propriedade border î As propriedades para as bordas, definem as

características (os valores na regra CSS) das quatro bordas de um elemento HTML.


border-width:................ espessura da borda border-style:................. estilo da borda border-color:................. cor da borda



CSS : Propriedades

n  A propriedade border î As propriedades básicas são:

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-left-width:........... espessura da borda esquerda border-left-style:............ estilo da borda esquerda border-left-color:............ cor da borda esquerda



CSS : Propriedades

n  A propriedade border î As propriedades abreviadas são:

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



CSS : Propriedades n  A propriedade border

î  Valores válidos a propriedade: n  color:

î  código hexadecimal: #FFFFFF î  código rgb: rgb(255,235,0) î  nome da cor: red, blue, green...etc

n  style: î  none: nenhuma borda î  hidden: equivalente a none î  dotted: borda pontilhada î  dashed: borda 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

n  width: î  thin: borda fina î  medium: borda média î  thick: borda grossa î  length: uma medida reconhecida pelas CSS (px, %, em)



CSS : Propriedades

n  A propriedade margin î A propriedade para margens, define um valor para

espessura das margens dos elementos HTML. î As propriedades básicas são:

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



CSS : Propriedades

n  A propriedade margin î  Valores válidos a propriedade:

n  auto: valor default da margem n  length: uma medida reconhecida pelas CSS (px, em) n  %: porcentagem da largura do elemento pai



CSS : Propriedades

n  A propriedade padding î A propriedade para espaçamentos (alguns traduzem

como "enchimento"), define um valor para os espaçamentos entre o conteúdo e as bordas dos elementos HTML.


padding-top:........... define a espaçamento superior; padding-right:......... define a espaçamento direita; padding-bottom:...... define a espaçamento inferior; padding-left:.......... define a espaçamento esquerda; padding:..............maneira abreviada para todas os espaçamentos



CSS : Propriedades

n  A propriedade padding î  Valores válidos a propriedade:

n  auto: valor default da margem n  length: uma medida reconhecida pelas CSS (px, em) n  %: porcentagem da largura do elemento pai



CSS : Propriedades

n  A propriedade list î A propriedade list define as características (valores) das

listas HTML. î As propriedades básicas são:

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; Valores válidos



CSS : Propriedades

n  A propriedade list î  Valores válidos a propriedade:

n  list-style-image: î  none î  URL: url(caminho/marcador.gif)

n  list-style-position: î  outside: marcador fora do alinhamento do texto î  inside: marcador alinhado com texto

n  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 î  lower-roman: romano minúsculo i, ii, iii, iv, ... î  upper-roman: romano maiúsculo I, II, III, IV, ... î  lower-alpha: letra minúscula a, b, c, d, ... î  upper-alpha: letra maiúscula A, B, C, D, ...



CSS : Propriedades

n  A propriedade positioning î Controla o posicionamento dos elementos HTML. î As propriedades básicas são:

min-height:... define uma altura mínima de um elemento. min-width:.... define a largura mínima de um elemento. max-height:... define a altura máxima de um elemento. max-width:.... define a largura máxima de um elemento. height:......... define a altura de um elemento. width:.......... define a largura de um elemento. line-height:.... define a distância entre linhas.



CSS : Propriedades


top:....... define a que distância está o elemento relativamente posicionado do limite superior da página ou do elemento pai que esteja posicionado relativamente. right:..... define a que distância está o elemento relativamente posicionado do limite direito da página ou do elemento pai que esteja posicionado relativamente. bottom:... define a que distância está o elemento relativamente posicionado do limite inferior da página ou do elemento pai que esteja posicionado relativamente. left:....... define a que distância está o elemento relativamente posicionado do limite esquerdo da página ou do elemento pai que esteja posicionado relativamente.



CSS : Propriedades


z-index:......... define a posição de um elemento quando este é sobreposto a um ou vários outros elementos. Entenda como sendo o nível da “camada”. vertical-aling:.. define o alinhamento vertical de um elemento.



CSS : Propriedades

n  A propriedade positioning î  Valores válidos a propriedade:

n  min-height e min-width î  length: uma medida reconhecida pelas CSS (px, em). î  %: Define a altura/largura mínima em percentagem em um bloco. î  Inherit: Especifica que o valor da propriedade min-height e min-width

deve ser herdado do elemento pai. n  max-height e max-width

î  none: Nenhum altura máxima. Este é o padrão. î  length: uma medida reconhecida pelas CSS (px, em). î  %: Define a altura/largura máxima em percentagem em um bloco. î  Inherit: Especifica que o valor da propriedade max-height e max-width

deve ser herdado do elemento pai. n  height e width

î  auto: o browser(navegador) faz o cálculo. Este é o padrão. î  length: uma medida reconhecida pelas CSS (px, em). î  %: Define a altura/largura em percentagem em um bloco. î  Inherit: Especifica que o valor da propriedade height e width deve ser

herdado do elemento pai.



CSS : Propriedades


n  line-height î  normal: Altura padrão utilizada pelo navegador. î  number: Um número que será multiplicado com o tamanho da fonte atual

para definir o espaçamento aplicado pela linha heigh î  length: Define a altura fixa de uma linha pelas CSS (px, em). î  %: Define a altura em percentagem em relação ao tamanho da fonte. î  Inherit: Especifica que o valor da propriedade deve ser herdado do

elemento pai. n  top, right, bottom e left

î  auto: Permite que o navegador calcular a posição do elemento em relação a borda.

î  length: uma medida reconhecida pelas CSS (px, em) para posicionar um elemento. Não é permitido valores negativos

î  %: Define em percentagem o posicionamento do elemento. Não é permitido valores negativos.

î  Inherit: Especifica que o valor da propriedade deve ser herdado do elemento pai.



CSS : Propriedades


n  z-index î  auto: Define a ordem da pilha igual a seus pais. Este é o

padrão . î  number: Define a ordem da pilha do elemento. Os

números negativos são permitidos. î  Inherit: Especifica que o z-index deve ser herdada do

elemento pai.



CSS : Propriedades


n  vertical-aling î  length: Aumenta ou diminui o comprimento de um elemento

especificado. Os valores negativos são permitidos . î  %: Aumenta ou diminui em percentagem um elemento em conjunto com

a propriedade "line-height". Os valores negativos são permitidos î  baseline: Alinha na base do elemento com a linha de base do elemento

pai. Este é o padrão. î  sub: Alinha o elemento que foi subscrito. î  super: Alinha o elemento que foi sobrescrito. î  top: O topo do elemento é alinhado com o topo do elemento mais alto na

linha. î  text-top: O topo do elemento é alinhado com o topo do elemento pai a

fonte. î  middle: O elemento é colocado no meio do elemento pai. î  bottom: A parte inferior do elemento é alinhado com o menor elemento

na linha. î  text-bottom: A parte inferior do elemento é alinhado com o fundo do

elemento pai a fonte. î  Inherit: Especifica que o valor da propriedade vertical-align deve ser

herdado do elemento pai.



Perguntas

?



Considerações Finais

Fonte: Silva, Maurício Samy., HTML 5: A linguagem de marcação do futuro, São Paulo, Novatec Brasil, julho 2011; ROBBINS, Jennifer Niederst. Aprendendo Web Design – guia para iniciantes, 3ª Edição; http://www.htmldog.com/; http://www.w3schools.com

Documents

Unb 2012. 1- dweb - b - css proproedades