Unb 2012. 1- dweb - b - css proproedades

Curso Superior de Tecnologia em Design Gráfico

DWEB - Design para
Web

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:2

1 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/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, deﬁnem 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: deﬁne-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, deﬁnem 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 deﬁne as características (os
valores na regra CSS) do fundo dos elementos HTML.

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 ﬁxa na tela: ﬁxed; 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, deﬁnem 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

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

î  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  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 ﬁna
î  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, deﬁne um valor para
espessura das margens dos elementos HTML.

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
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"), deﬁne 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
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 deﬁne as características (valores) das
listas HTML.

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
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.

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
bottom:... define a que distância está o elemento relativamente
posicionado do limite inferior da página ou do elemento pai que esteja
left:....... define a que distância está o elemento relativamente
posicionado do limite esquerdo da página ou do elemento pai que esteja



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  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.
î  %: 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.
î  %: 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
especiﬁcado. 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: Especiﬁca 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


Unb 2012. 1- dweb - b - css proproedades

Recommandé

Recommandé

Contenu connexe

Similaire à Unb 2012. 1- dweb - b - css proproedades

Similaire à Unb 2012. 1- dweb - b - css proproedades (19)

Plus de Claudenio Alberto

Plus de Claudenio Alberto (17)

Unb 2012. 1- dweb - b - css proproedades