Unb   2012. 1- dweb - b - css proproedades
Upcoming SlideShare
Loading in...5
×
 

Unb 2012. 1- dweb - b - css proproedades

on

  • 374 views

 

Statistics

Views

Total Views
374
Views on SlideShare
374
Embed Views
0

Actions

Likes
1
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Unb   2012. 1- dweb - b - css proproedades Unb 2012. 1- dweb - b - css proproedades Presentation Transcript

    • Curso Superior de Tecnologia em Design GráficoDWEB - Design paraWeb B CSS : Propriedades “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:21 Apêndice B - CSS (Propriedades) Monday, 19 de March de 12
    • DWEB – Design para Web / Carlos José Contato Carlos José carlosjose.unibratec@gmail.com www.carlosjose.net twitter.com/carlosjoser2n2 Apêndice B - CSS (Propriedades) Monday, 19 de March de 12
    • DWEB – Design para Web / Carlos José Objetivo da Aulan Apresentar os fundamentos da linguagem de formatação CSS.3 Apêndice B - CSS (Propriedades) Monday, 19 de March de 12
    • DWEB – Design para Web / Carlos José Agendan Propriedades4 Apêndice B - CSS (Propriedades) Monday, 19 de March de 12
    • DWEB – Design para Web / Carlos José CSS : Propriedadesn  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 propriedades5 Apêndice B - CSS (Propriedades) Monday, 19 de March de 12
    • DWEB – Design para Web / Carlos José CSS : Propriedadesn  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 6 Apêndice B - CSS (Propriedades) Monday, 19 de March de 12
    • DWEB – Design para Web / Carlos José CSS : Propriedadesn  A propriedade text î  As propriedades para textos, definem as características (os valores na regra CSS) dos textos inseridos dentro dos elementos HTML. î  As propriedades básicas são: 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; 7 Apêndice B - CSS (Propriedades) Monday, 19 de March de 12
    • DWEB – Design para Web / Carlos José CSS : Propriedadesn  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 /> 8 Apêndice B - CSS (Propriedades) Monday, 19 de March de 12
    • DWEB – Design para Web / Carlos José CSS : Propriedadesn  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;9 Apêndice B - CSS (Propriedades) Monday, 19 de March de 12
    • DWEB – Design para Web / Carlos José CSS : Propriedadesn  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 right10 Apêndice B - CSS (Propriedades) Monday, 19 de March de 12
    • DWEB – Design para Web / Carlos José CSS : Propriedadesn  A propriedade border î  As propriedades para as bordas, definem as características (os valores na regra CSS) das quatro bordas de um elemento HTML. î  As propriedades básicas são: border-width:................ espessura da borda border-style:................. estilo da borda border-color:................. cor da borda11 Apêndice B - CSS (Propriedades) Monday, 19 de March de 12
    • DWEB – Design para Web / Carlos José CSS : Propriedadesn  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 esquerda12 Apêndice B - CSS (Propriedades) Monday, 19 de March de 12
    • DWEB – Design para Web / Carlos José CSS : Propriedadesn  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 bordas13 Apêndice B - CSS (Propriedades) Monday, 19 de March de 12
    • DWEB – Design para Web / Carlos José CSS : Propriedadesn  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)14 Apêndice B - CSS (Propriedades) Monday, 19 de March de 12
    • DWEB – Design para Web / Carlos José CSS : Propriedadesn  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 margens15 Apêndice B - CSS (Propriedades) Monday, 19 de March de 12
    • DWEB – Design para Web / Carlos José CSS : Propriedadesn  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 pai16 Apêndice B - CSS (Propriedades) Monday, 19 de March de 12
    • DWEB – Design para Web / Carlos José CSS : Propriedadesn  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. î  As propriedades básicas são: 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çamentos17 Apêndice B - CSS (Propriedades) Monday, 19 de March de 12
    • DWEB – Design para Web / Carlos José CSS : Propriedadesn  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 pai18 Apêndice B - CSS (Propriedades) Monday, 19 de March de 12
    • DWEB – Design para Web / Carlos José CSS : Propriedadesn  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álidos19 Apêndice B - CSS (Propriedades) Monday, 19 de March de 12
    • DWEB – Design para Web / Carlos José CSS : Propriedadesn  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, ...20 Apêndice B - CSS (Propriedades) Monday, 19 de March de 12
    • DWEB – Design para Web / Carlos José CSS : Propriedadesn  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.21 Apêndice B - CSS (Propriedades) Monday, 19 de March de 12
    • DWEB – Design para Web / Carlos José CSS : Propriedadesn  A propriedade positioning î  Controla o posicionamento dos elementos HTML. î  As propriedades básicas são: 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.22 Apêndice B - CSS (Propriedades) Monday, 19 de March de 12
    • DWEB – Design para Web / Carlos José CSS : Propriedadesn  A propriedade positioning î  Controla o posicionamento dos elementos HTML. î  As propriedades básicas são: 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.23 Apêndice B - CSS (Propriedades) Monday, 19 de March de 12
    • DWEB – Design para Web / Carlos José CSS : Propriedadesn  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.24 Apêndice B - CSS (Propriedades) Monday, 19 de March de 12
    • DWEB – Design para Web / Carlos José CSS : Propriedadesn  A propriedade positioning î  Valores válidos a propriedade: 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.25 Apêndice B - CSS (Propriedades) Monday, 19 de March de 12
    • DWEB – Design para Web / Carlos José CSS : Propriedadesn  A propriedade positioning î  Valores válidos a propriedade: 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.26 Apêndice B - CSS (Propriedades) Monday, 19 de March de 12
    • DWEB – Design para Web / Carlos José CSS : Propriedadesn  A propriedade positioning î  Valores válidos a propriedade: 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.27 Apêndice B - CSS (Propriedades) Monday, 19 de March de 12
    • DWEB – Design para Web / Carlos José Perguntas ?28 Apêndice B - CSS (Propriedades) Monday, 19 de March de 12
    • DWEB – Design para Web / Carlos José Considerações FinaisFonte: 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.com29 Apêndice B - CSS (Propriedades) Monday, 19 de March de 12