Post 5

403 views
323 views

Published on

Post 5

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
403
On SlideShare
0
From Embeds
0
Number of Embeds
187
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Post 5

  1. 1. Propriedades CSS1.Bordas –Propriedadeborder-top-widthborder-right-widthborder-bottom-widthborder-left-widthDescriçãoLargura das bordas em cada um dos quatro lados: superior, direito,inferior e esquerdoValores[ thin | medium | thick | <tamanho> ]Descriçãothin: espessura finamedium: espessura médiathick: espessura grossaExemplo:e {border-bottom-width: medium; }Propriedadeborder-widthDescriçãoAtalho para definir de uma só vez larguras de bordas para todos os ladosValores[ thin | medium | thick | <tamanho> ] {1,4}
  2. 2. DescriçãoExemplos:Todas as bordas com espessura thin:e {border-width: thin;}Bordas superior e inferior com espessura thin, bordas direita eesquerda com espessura thick:e {border-width: thin thick;}Borda superior com espessura thin, bordas direita e esquerda comespessura thick, borda inferior com espessura medium:e {border-width: thin thick medium;}Borda superior com espessura thin, borda direita com espessurathick, borda inferior com espessura medium, borda esquerda comespessura thin:e {border-width: thin thick medium thin;}Propriedadeborder-top-colorborder-right-colorborder-bottom-colorborder-left-colorDescriçãoCor das bordas em cada um dos quatro lados: superior, direito,inferior e esquerdoValores[ <color> | transparent ]DescriçãoExemplo:e {border-top-color: black; }
  3. 3. Propriedadeborder-colorDescriçãoAtalho para definir de uma só vez cores de bordas para todos os ladosValores[ <color> | transparent ] {1,4}DescriçãoExemplos:Todas as bordas com a cor black:e {border-color: black;}Bordas superior e inferior com a cor black, bordas direita e esquerdacom a cor silver:e {border-color: black silver;}Borda superior com a cor black, bordas direita e esquerda com a corsilver, borda inferior com a cor gray:e {border-color: black silver gray; }Borda superior com a cor black, borda direita com a cor silver,borda inferior com a cor gray, borda esquerda com a cor white:e {border-color: black silver gray white; }Propriedadeborder-top-styleborder-right-styleborder-bottom-styleborder-left-styleDescriçãoEstilo de bordas em cada um dos quatro lados: superior, direito,inferior e esquerdoValores[ none | hidden | dotted | dashed | solid | double | groove | ridge |inset | outset ]
  4. 4. Descriçãonone: nenhuma borda (largura computada como zero)hidden: idêntico à none, exceto na resolução de conflito de bordas noselementos de uma tabeladotted: série de pontosdashed: série de segmentos de pequenas linhassolid: segmento de linha simples e contínuadouble: Duas linhas solid. A soma das duas linhas e o espaço entreelas é igual ao valor definido em border-widthgroove: Efeito 3D, entalhadaridge: Efeito 3D, oposto de groove: ressaltadainset: Efeito 3D, baixo relevooutset: Efeito 3D, alto relevoExemplo:e {border-left-style:dotted; }Propriedadeborder-styleDescriçãoAtalho para definir de uma só vez estilos de bordas para todos os ladosValores[ none | hidden | dotted | dashed | solid | double | groove | ridge |inset | outset ] {1,4}DescriçãoExemplos: Todas as bordas com estilo solid:e {border-style: solid;}Bordas superior e inferior com estilo solid, bordas direita e esquerdacom estilo dotted:e {border-style: solid dotted;}Borda superior com estilo solid, bordas direita e esquerda com estilodotted, borda inferior com o estilo dashed:e {border-color: solid dotted dashed; }Borda superior com estilo solid, borda direita com estilo dotted,borda inferior com estilo dashed, borda esquerda com o estilodouble:e {border-color: solid dotted dashed double; }
  5. 5. Propriedadeborder-topborder-rightborder-bottomborder-leftDescriçãoAtalho para definir largura, estilo e cor das bordas superior, direita,inferior ou esquerdaValores[ <border-top-width> || <border-top-style> || <border-top-color> ]DescriçãoExemplo:e {border-bottom: thick solid red;}PropriedadeborderDescriçãoAtalho para largura, estilo e cor das quatro bordasValores[ <border-top-width> || <border-top-style> || <border-top-color> ]DescriçãoExemplo:e {border: thick solid red;}
  6. 6. 2.Margens –Propriedademargin-topmargin-rightmargin-bottommargin-leftDescriçãoTamaho da margem para cada um dos lados: superior, direito, inferior eesquerdoValores[ <tamanho> | <porcentagem> | auto ]DescriçãoExemplo:body {margin-top: 2em }PropriedademarginDescriçãoAtalho para definir de uma só vez o tamanho da margem para todos osladosValores[ <tamanho> | <porcentagem> | auto ]{1,4}
  7. 7. DescriçãoExemplo:Exemplos:Todas as margens com 2em:body {margin: 2em }Margem superior e inferior com 1em, esquerda e direita com 2em:body {margin: 1em 2em }Margem superior com 1em; direita com 2em; inferior com 3em; e esquerdacom 2em:body {margin: 1em 2em 3em }Margem superior com 1em; direita com 2em; inferior com 3em; e esquerdacom 4em:body {margin: 1em 2em 3em 4em }Propriedadepadding-toppadding-rightpadding-bottompadding-leftDescriçãoDistância utilizada para espaçamento em cada um dos quatro lados:superior, direito, inferior e esquerdoValores[ <tamanho> | <porcentagem> ]DescriçãoExemplo:body {padding-top: 2em }Propriedadepadding
  8. 8. DescriçãoAtalho para definir de uma só vez a distância de espaçamento para todosos ladosValores[ <tamanho> | <porcentagem> ]{1,4}DescriçãoExemplos:Todas as margens com 2em:body {padding: 2em }Margem superior e inferior com 1em, esquerda e direita com 2em:body {padding: 1em 2em }Margem superior com 1em; direita com 2em; inferior com 3em; e esquerdacom 2em:body {padding: 1em 2em 3em }Margem superior com 1em; direita com 2em; inferior com 3em; e esquerdacom 4em:body {padding: 1em 2em 3em 4em }3.Cores e fundo –PropriedadecolorDescriçãoCor do texto presente no elementoValores[ <color>DescriçãoExemplo:e {color: red; }e {color: rgb(255,0,0); }
  9. 9. Propriedadebackground-colorDescriçãoCor de fundo do elementoValores[ <color> | transparent ]DescriçãoPara transparent será adotada a cor de fundo do elemento superior e naausência deste, a cor de fundo padrão do browserExemplo:e {background-color: #f00; }e {background-color: transparent; }Propriedadebackground-imageDescriçãoCor de fundo do elementoValores[ <color> | transparent ]DescriçãoExemplo:e {background-image: url(http://caminho/imagem.jpg); }
  10. 10. Propriedadebackground-repeatDescriçãoDefine se e como a imagem de fundo utilizada se repetiráValores[ repeat | repeat – x | repeat – y | no-repeat ]Descriçãorepeat: a imagem é repetida em ambas as direções: horizontal e verticalrepeat-x: a imagem é repetida somente horizontalmenterepeat-y: a imagem é repetida somente verticalmente.no-repeat: a imagem não será repetida e somente uma cópia da mesma serárenderizadaExemplo:e {background-repeat: no-repeat;}Propriedadebackground-attachmentDescriçãoPosição da imagem de fundo utilizada.Valoresscroll: a imagem acompanha a rolagem da página na janela do browser,mantendo-se como imagem de fundofixed: a imagem é fixada na página e não acompanhará a rolagem da página
  11. 11. Descriçãotop: Equivalente a 0% do posicionamento verticalright: Equivalente a 100% do posicionamento horizontalbottom: Equivalente a 100% do posicionamento verticalleft: Equivalente a 0% do posicionamento horizontal.center: Equivalente a 50% do posicionamento horizontal ou 50% doposicionamento verticalExemplo:body {background-position: right top; }body {background-position: 100% 0; }Propriedadebackground-positionDescriçãoPosição da imagem de fundo utilizada.Valores[ [ <porcentagem> | <tamanho> | left | center | right ] [ <porcentagem>| <tamanho> | top | center | bottom]? ] | [ [ left | center | right ] ||[ top | center | bottom ] ]Descriçãotop: Equivalente a 0% do posicionamento verticalright: Equivalente a 100% do posicionamento horizontalbottom: Equivalente a 100% do posicionamento verticalleft: Equivalente a 0% do posicionamento horizontal.center: Equivalente a 50% do posicionamento horizontal ou 50% doposicionamento verticalExemplo:body {background-position: right top; }body {background-position: 100% 0; }
  12. 12. PropriedadebackgroundDescriçãoAtalho para definir de uma só vez todas as propriedades de imagem defundoValores[ <background-color> || <background-image> || <background-repeat> ||<background-attachment> || <background-position> ]DescriçãoExemplo:e {background: red url("chess.png")repeat-x fixed 50% right; }4.Fontes tipográficas –Propriedadefont-familyDescriçãoFamília(s) de fontesValores[ [ <nome-fonte> | <família-genérica> ] [, <nome-fonte> | <família-genérica> ]* ]
  13. 13. DescriçãoAs seguintes famílias-genéricas de fontes são definidas em CSS2.1: serif sans-serif cursive fantasy monospaceExemplo: e {font-family: "New Century Schoolbook", serif; }Propriedadefont-styleDescriçãoEstilo utilizado na fonteValores[ normal | italic | oblique ]Descriçãonormal: fonte do elemento sem efeito itálico ou oblíquoitalic: fonte do elemento com efeito itálicooblique: fonte do elemento com efeito oblíquoExemplo:e {font-style: italic; }Propriedadefont-variant
  14. 14. DescriçãoExibe o texto em pequena caixa-alta (versalete) ou fonte normalValores[ normal | small-caps ]Descriçãonormal: fonte do elemento sem efeito de capitalização small-caps: fontedo elemento com efeito de pequena caixa alta (versalete)Exemplo:e {font-variant: small-caps; }Propriedadefont-weightDescriçãoPeso da fonteValores[ normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 |700 | 800 | 900 ]Descriçãonormal: fonte do elemento com efeito padrão de peso (corresponde aovalor 400)bold: fonte do elemento com efeito de negrito (corresponde ao valor 700)bolder: fonte do elemento com o valor de peso imediatamente superior aodo valor herdado (p.ex: de 400 para 500)lighter: fonte do elemento com o valor de peso imediatamente inferior aodo valor herdado (p.ex: de 400 para 300)Exemplo:e {font-weight: bold; }
  15. 15. Propriedadefont-sizeDescriçãoTamanho da fonteValores[ [ xx-small | x-small | small | medium | large | x-large | xx-large] |[larger | smaller] | <tamanho> | <porcentagem> ]Descriçãomedium: fonte do elemento com valor padrão de tamanho e equivalente aopadrão do browser. Os demais valores ( xx-small | x-small | small |large | x-large | xx-large) são calculados pelo browser considerandoesse valor medium.larger | smaller: aumenta ou diminui o tamanho em relação ao valorherdado.tamanho: valor absoluto. Não são permitidos valores negativos.porcentagem: porcentagem do tamanho do valor herdado.Exemplo:e {font-size: 90%; }PropriedadefontDescriçãoAtalho para definir de uma só vez todas as propriedades de fonteValores[ [ [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ /<line-height> ]? <font-family> ] | caption | icon | menu | message-box |small-caption | status-bar ]
  16. 16. DescriçãoAlém dos valores para as propriedades de estilo, variação, peso,tamanho, altura da linha e família, pode-se utilizar os seguintes, deacordo com o ambiente do usuário:caption: fonte utilizada por controles com legenda (ex.: botões, drop-downs, etc.)icon: fonte utilizada em íconesmenu: fonte utilizada em menus do sistema (ex.: dropdown menus e menussuspensos)message-box: fonte utilizada em caixas de diálogo.small-caption: fonte utilizada em controles com legenda reduzidastatus-bar: fonte utiliza em barra de status das janelasExemplo:e {font: 300 italic 1.3em/1.7em "Helvetica", sans-serif; }Propriedadefont-weightDescriçãoPeso da fonteValores[ normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 |700 | 800 | 900 ]Descriçãonormal: fonte do elemento com efeito padrão de peso (corresponde aovalor 400)bold: fonte do elemento com efeito de negrito (corresponde ao valor 700)bolder: fonte do elemento com o valor de peso imediatamente superior aodo valor herdado (p.ex: de 400 para 500)lighter: fonte do elemento com o valor de peso imediatamente inferior aodo valor herdado (p.ex: de 400 para 300)Exemplo:e {font-weight: bold; }
  17. 17. 5.Texto –Propriedadetext-indentDescriçãoRecuo à esquerda da primeira linha em um bloco de textoValores[ <tamanho> | <porcentagem> ]DescriçãoExemplo:e {text-indent: 3em; }Propriedadetext-alignDescriçãoAlinhamento do textoValores[ left | right | center | justify ]
  18. 18. Descriçãoleft: alinhamento do texto à esquerdaright: alinhamento do texto à direitacenter: alinhamento do texto centralizadojustify: alinhamento do texto justificadoExemplo:e {text-align: center; }Propriedadetext-decorationDescriçãoEfeitos decorativos no texto como sublinhado, tachado, linha acima episcanteValores[ none | [ underline || overline || line-through || blink ] ]Descriçãonone: não produz decoração no texto do elementounderline: cada linha de texto do elemento terá uma linha abaixo(sublinhado)overline: cada linha de texto do elemento terá uma linha acimaline-through: cada linha de texto do elemento terá uma linha cortando-oao meio (tachado)blink: textos piscantes alternadamente entre visíveis e não visíveisExemplo:e {text-decoration: underline; }
  19. 19. Propriedadeletter-spacingDescriçãoEspaçamento entre caracteresValores[ normal | <tamanho> ]DescriçãoExemplo:e {letter-spacing: 0.1em; }Propriedadeword-spacingDescriçãoEspaçamento entre palavrasValores[ normal | <tamanho> ]
  20. 20. DescriçãoExemplo:e {word-spacing: 1em; }Propriedadetext-transformDescriçãoTransforma o texto em maiúsculas/minúsculasValores[ capitalize | uppercase | lowercase | none ]Descriçãocapitalize: coloca o primeiro caracter de cada palavra do elemento emmaiúsculas (caixa alta)uppercase: coloca todos os caracteres de cada palavra do elemento emmaiúsculas (caixa alta)lowercase: coloca todos os caracteres de cada palavra do elemento emminúsculas (caixa baixa)none: não aplica efeitos de capitalizaçãoExemplo:e {text-transform: capitalize; }
  21. 21. 6.Modelo de formatação visual –PropriedadefloatDescriçãoPosicionamento adjacente à esquerda ou à direita do elementoValores{ left | right | none ]Descriçãoleft: o elemento será posicionado flutuando à esquerda. O fluxo doconteúdo não integrante do elemento será posicionado à direita a partirdo top do elemento que recebe a propriedade floatright: similar à left, mas com o elemento flutuando à direitanone: o elemento não flutuaExemplo:e {float: right;}PropriedadeclearDescriçãoControle para os posicionamentos floatValores[ none | left | right | both ]
  22. 22. Descriçãonone: nenhum controle de limpeza de flutuação será executadoleft: limpeza de flutuação à esquerda: o elemento será posicionadoabaixo da borda inferior do elemento flutuante à esquerdaright: limpeza de flutuação à direita: o elemento será posicionadoabaixo da borda inferior do elemento flutuante à direitaboth: o elemento será posicionado abaixo da borda inferior de qualquerelemento flutuante, seja à direita ou à esquerdaExemplo: e { clear: both;}PropriedadewidthDescriçãoLarguraValores[ <tamanho> | <porcentagem> | auto ]DescriçãoExemplo:e {width: 25%;}
  23. 23. PropriedadeheightDescriçãoAlturaValores[ <tamanho> | <porcentagem> | auto ]DescriçãoExemplo:e {height: 250px;}Propriedadeline-heightDescriçãoDistância entre as linhas de um textoValores[ normal | <número> | <tamanho> | <porcentagem> ]
  24. 24. DescriçãoExemplo:e {line-height: 1.2em;}Propriedadevertical-alignDescriçãoAlinhamento vertical do textoValores[ baseline | sub | super | top | text-top | middle | bottom | text-bottom | <porcentagem> | <tamanho> ]Descriçãobaseline - A linha de base do elemento e do elemento superior (elemento-pai) serão consideradas para alinhamento. Se não houver linha de base noelemento, será considerado sua margem inferiorsub - A linha de base do elemento será alinhada com a linha de base deconteúdo subscrito do elemento superiorsuper - A linha de base do elemento será alinhada com a linha de base deconteúdo superescrito do elemento superiortop - Alinha o topo do elemento com a linha de topo do elemento superiortext-top - A base superior do elemento será alinhada com a linhasuperior do conteúdo de textos do elemento-paimiddle - A linha central do elemento e de seu elemento superior serãoconsideradas para alinhamento. (linha central do elemento superior =ponto central da altura da letra x)bottom - Alinha o rodapé do elemento com o rodapé do elemento superiortext-bottom - A base inferior do elemento será alinhada com a linhainferior do conteúdo de textos do elemento-paiExemplo:e {vertical-align: sub;}
  25. 25. Propriedadevertical-alignDescriçãoAlinhamento vertical do textoValores[ baseline | sub | super | top | text-top | middle | bottom | text-bottom | <porcentagem> | <tamanho> ]Descriçãobaseline - A linha de base do elemento e do elemento superior (elemento-pai) serão consideradas para alinhamento. Se não houver linha de base noelemento, será considerado sua margem inferiorsub - A linha de base do elemento será alinhada com a linha de base deconteúdo subscrito do elemento superiorsuper - A linha de base do elemento será alinhada com a linha de base deconteúdo superescrito do elemento superiortop - Alinha o topo do elemento com a linha de topo do elemento superiortext-top - A base superior do elemento será alinhada com a linhasuperior do conteúdo de textos do elemento-paimiddle - A linha central do elemento e de seu elemento superior serãoconsideradas para alinhamento. (linha central do elemento superior =ponto central da altura da letra x)bottom - Alinha o rodapé do elemento com o rodapé do elemento superiortext-bottom - A base inferior do elemento será alinhada com a linhainferior do conteúdo de textos do elemento-paiExemplo:e {vertical-align: sub;}7.listas –Propriedadelist-style-typeDescriçãoEstilo visual aplicado aos marcadores de uma lista
  26. 26. Valores[ disc | circle | square | decimal | decimal-leading-zero | lower-roman| upper-roman | lower-greek | lower-latin | upper-latin | armenian |georgian | lower-alpha | upper-alpha | none ]Descriçãobaseline - A linha de base do elemento e do elemento superior (elemento-pai) serão consideradas para alinhamento. Se não houver linha de base noelemento, será considerado sua margem inferiorsub - A linha de base do elemento será alinhada com a linha de base deconteúdo subscrito do elemento superiorsuper - A linha de base do elemento será alinhada com a linha de base deconteúdo superescrito do elemento superiortop - Alinha o topo do elemento com a linha de topo do elemento superiortext-top - A base superior do elemento será alinhada com a linhasuperior do conteúdo de textos do elemento-paimiddle - A linha central do elemento e de seu elemento superior serãoconsideradas para alinhamento. (linha central do elemento superior =ponto central da altura da letra x)bottom - Alinha o rodapé do elemento com o rodapé do elemento superiortext-bottom - A base inferior do elemento será alinhada com a linhainferior do conteúdo de textos do elemento-paiExemplo:e {vertical-align: sub;}Propriedadelist-style-imageDescriçãoImagem aplicada aos elementos de uma listaValores[ url("http://...") | none ]
  27. 27. DescriçãoExemplo:li {list-style-image: url("http://png.com/ellipse.png");}Propriedadelist-style-positionDescriçãoPosicionamento interno dos marcadores de uma listaValores[ inside | outside ]Descriçãoinside – conteúdo da lista será indentado, mas o texto não será alinhadoapós quebra de linhaoutside – diferente de inside, o texto será alinhado na indentação mesmocom quebra de linhaExemplo:ul {list-style-position: outside; }ul.compact {list-style-position: inside;}Propriedadelist-styleDescriçãoAtalho para definir de uma só vez todas as propriedades de lista: type,position e image.
  28. 28. Valores[ <list-style-type> || <list-style-position> || <list-style-image> ]DescriçãoExemplo:li {list-style: decimal-leading-zero outside url(imagem.jpg); }Fonte: W3CLink: http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-seletoresExemplos de CSS usando cores e propriedades
  29. 29. Código –<!doctype><html lang="pt-br"><head><title>Folhas de estilo</title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="site.css"</head><body><section id="geral"><header id="cabecalho">cabecalho<header><nav id="menu">menu</nav><section id="principal">conteudo</section><footer id="rodape">Rodape</footer></section></body></html>OBS: Salvar em formato HTML.
  30. 30. Inserir cores e tamanho –@charset "utf-8";/* CSS Document */body {background-color:#CCC;}#geral{background-color:#999;width:500px;heigth:500px;}#cabecalho{background-color:#F9F;width:500px;heigth:1000px;}#menu{background-color:#6CF;width:100px;heigth:350px;float:right;}#principal{background-color:#CF6;width:400px;heigth:350px;float:left;
  31. 31. }#rodape{background-color:#999;width:500px;heigth:50px;clear:both;}1º Para inserir colores digite a tag background-color2º Com a tag width você consegue aumentar ou diminuir a lagura da palavra.3º Com a tag height você consegue aumentar ou diminuir a altura da palavra.OBS: Salvar o código em formato CSS.

×