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é
2 Monday, 19 de March de 12 Apêndice B - CSS (Propriedades)
Contato
Carlos José
[email protected] www.carlosjose.net
twitter.com/carlosjoser2n
DWEB – Design para Web / Carlos José
3 Monday, 19 de March de 12 Apêndice B - CSS (Propriedades)
Objetivo da Aula
n Apresentar os fundamentos da linguagem de formatação CSS.
DWEB – Design para Web / Carlos José
4 Monday, 19 de March de 12 Apêndice B - CSS (Propriedades)
Agenda
n Propriedades
DWEB – Design para Web / Carlos José
5 Monday, 19 de March de 12 Apêndice B - CSS (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
DWEB – Design para Web / Carlos José
6 Monday, 19 de March de 12 Apêndice B - CSS (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
DWEB – Design para Web / Carlos José
7 Monday, 19 de March de 12 Apêndice B - CSS (Propriedades)
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.
î 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;
DWEB – Design para Web / Carlos José
8 Monday, 19 de March de 12 Apêndice B - CSS (Propriedades)
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 />
DWEB – Design para Web / Carlos José
9 Monday, 19 de March de 12 Apêndice B - CSS (Propriedades)
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;
DWEB – Design para Web / Carlos José
10 Monday, 19 de March de 12 Apêndice B - CSS (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
DWEB – Design para Web / Carlos José
11 Monday, 19 de March de 12 Apêndice B - CSS (Propriedades)
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.
î As propriedades básicas são:
border-width:................ espessura da borda border-style:................. estilo da borda border-color:................. cor da borda
DWEB – Design para Web / Carlos José
12 Monday, 19 de March de 12 Apêndice B - CSS (Propriedades)
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
DWEB – Design para Web / Carlos José
13 Monday, 19 de March de 12 Apêndice B - CSS (Propriedades)
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
DWEB – Design para Web / Carlos José
14 Monday, 19 de March de 12 Apêndice B - CSS (Propriedades)
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)
DWEB – Design para Web / Carlos José
15 Monday, 19 de March de 12 Apêndice B - CSS (Propriedades)
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
DWEB – Design para Web / Carlos José
16 Monday, 19 de March de 12 Apêndice B - CSS (Propriedades)
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
DWEB – Design para Web / Carlos José
17 Monday, 19 de March de 12 Apêndice B - CSS (Propriedades)
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.
î 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çamentos
DWEB – Design para Web / Carlos José
18 Monday, 19 de March de 12 Apêndice B - CSS (Propriedades)
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
DWEB – Design para Web / Carlos José
19 Monday, 19 de March de 12 Apêndice B - CSS (Propriedades)
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
DWEB – Design para Web / Carlos José
20 Monday, 19 de March de 12 Apêndice B - CSS (Propriedades)
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, ...
DWEB – Design para Web / Carlos José
21 Monday, 19 de March de 12 Apêndice B - CSS (Propriedades)
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.
DWEB – Design para Web / Carlos José
22 Monday, 19 de March de 12 Apêndice B - CSS (Propriedades)
CSS : Propriedades
n 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.
DWEB – Design para Web / Carlos José
23 Monday, 19 de March de 12 Apêndice B - CSS (Propriedades)
CSS : Propriedades
n 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.
DWEB – Design para Web / Carlos José
24 Monday, 19 de March de 12 Apêndice B - CSS (Propriedades)
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.
DWEB – Design para Web / Carlos José
25 Monday, 19 de March de 12 Apêndice B - CSS (Propriedades)
CSS : Propriedades
n 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.
DWEB – Design para Web / Carlos José
26 Monday, 19 de March de 12 Apêndice B - CSS (Propriedades)
CSS : Propriedades
n 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.
DWEB – Design para Web / Carlos José
27 Monday, 19 de March de 12 Apêndice B - CSS (Propriedades)
CSS : Propriedades
n 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.
DWEB – Design para Web / Carlos José
28 Monday, 19 de March de 12 Apêndice B - CSS (Propriedades)
Perguntas
?
DWEB – Design para Web / Carlos José
29 Monday, 19 de March de 12 Apêndice B - CSS (Propriedades)
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