Sei sulla pagina 1di 8

CSS

3.0
(exemplo de um elemento)

Sintaxe XHTML

Sintaxe CSS

(cascading Slyte Sheets)

H duas formas de aplicar estilo dentro de um documento XHTML: Estilo em linha (in-line): aplicao do atributo style e respectivas propriedade + valor. Exemplo: <p style=background-color:#FFF; font-family: verdana>um pargrafo com com de fundo e tipo de letra definidos</p> Estilo interno: atravs da marca style, inserida no cabealho do documento. Efectua-se a seleco da marca e aplicam-se propriedades. Exemplo:

<head> <style> p { background-color:#FFF; font-family: verdana; } </style> </head> <body> <p>um pargrafo com com de fundo e tipo de letra definidos</p></body>
Escola Secundria Quinta das Palmeiras | Curso EFA Tcnico/a de Multimdia - Nvel III |Mdulo: CSS |Formador: Ricardo Silva

CSS
Propriedade

3.0

REFERENCIAL: Introduo a fundos, fontes, texto e organizao do espao


Valores / Descrio Descrio e Exemplos

Fundo (background)
A propriedade permite background especificar um mximo de 5 valores de sub-propriedades separadas por espaos numa nica declarao: - background-color - background-image - background-repeat - background-attachment - background-position Representa a cor de fundo de background-color um elemento. - cor (nome ou #rgb) (por defeito o valor transparente) <style> p { background-color: #FF45E4; } </style> <style> body { background-image: url(img/fundo.png); background-color: #000000; }</style>

Coloca uma determinada backgroundimage imagem como fundo de um elemento.

Escola Secundria Quinta das Palmeiras | Curso EFA Tcnico/a de Multimdia - Nvel III |Mdulo: CSS |Formador: Ricardo Silva

Repetio ou no de uma backgroundrepeat imagem de fundo. Valores: - repeat (valor default): a <style> body { background-image: url(img/foto1.png);

imagem ser repetida em ambos background-repeat: noos eixos. - repeat-x - no eixo horizontal. - repeat-y - no eixo vertical. - no-repeat - a imagem no ser repetida. Especifica o posicionamento backgroundposition inicial de uma imagem de fundo. A posio pode ser assinalada em pixels, em percentagem da caixa que rodeia o contedo do elemento ou podem ser utilizados os seguintes valores: - top left - top center - top right - center left - center - center right - bottom left - bottom center - bottom right Define se h o surgimento de backgrounduma barra (horizontal e/ou vertical) de auxlio de <style> body { background-image: url(img/foto1.png); <style> body { background-image: url(img/foto1.png); background-position: topleft; } </style> repeat; background-color: #000; } </style>

Escola Secundria Quinta das Palmeiras | Curso EFA Tcnico/a de Multimdia - Nvel III |Mdulo: CSS |Formador: Ricardo Silva

attachment

visualizao integral, dentro do elemento a que o fundo aplicado. - scroll ; - fixed

background-attachment: fixed; } </style>

Fontes (font) Permite especificar valores de Font sub-propriedades separados por espaos numa nica declarao: - font-style - font-weight - font-size - font-family Define uma lista de tipos de letra Font-family a serem utilizados no elemento em causa, por ordem de preferncia, e estando os valores <style> separados por vrgulas. Valores: - nome de uma famlia body { font-family: courier, serif; } p { font-family: arial,

tipogrfica (se consistir em mais "lucida console", sansdo que uma palavra, conter entre serif; } aspas (aspa simples se definido <p style="font-family: arial, no atributo style do XHTML); - nome genrico: serif, sansserif, fantasy, monospace.
Os diferentes valores devem ser separados por vrgulas e o ltimo valor da lista deve sempre ser um nome genrico.
Escola Secundria Quinta das Palmeiras | Curso EFA Tcnico/a de Multimdia - Nvel III |Mdulo: CSS |Formador: Ricardo Silva

'lucida console', sansserif"> </style>

Designa o tamanho do tipo de Font-size letra. Os valores permitido so, por ordem crescente de tamanho, xx-small, x-small, p { font-size: 20px; } small, medium, large, xlarge e xx-large. Tambm possvel aplicar os valores do tamanho sob a forma do tamanho do pixel. Esta propriedade faz a seleco <style> Font-style entre trs tipos de texto distintos: normal, itlic e oblique. font-style: italic; } </style> Com esta propriedade podemos <style> Font-weight selccionar se o tipo de letra vai aparecer mai ou menos escuro. Os valores so os seguintes: lighter, normal, bold e bolder (do mais claro para o mais escuro). Texto Alinhamento de texto. Text-align Pode tomar os valores left, right, center e justify <style> p { text-align: right;} </style> font-weight: bold; } </style> p { font-size: 10px; p { font-size: 20px; </style> h1 { font-size: 40%; } <style>

Escola Secundria Quinta das Palmeiras | Curso EFA Tcnico/a de Multimdia - Nvel III |Mdulo: CSS |Formador: Ricardo Silva

Esta propriedade define o Word-spacing espaamento entre palavras.

<style> p { word-spacing: ;} </style>

Define os espaamento entre Letter-spacing caracteres, adicional ao que existe predefinido para o texto.

<style> p { letter-spacing: ;} </style>

Permite acrescentar alguns Text-decoration efeitos ao texto, tais como o texto ser sublinhado (underline), sobe o texto (overline), com efeito de piscar (blink). Define o espao enre linhas de Line-height texto. Pode tomar o valor normal, um valor numrico que multiplicado pelo valor normal d /* aumenta a altura das o novo espaamento ou pode ser colocado em percentagem. linhas do texto em 50% */ </style> <style> p { line-height: 1.5;} p { text-decoration: none;} </style> <style>

Define o espao que aparece no Text-indent incio da primeira linha. Tratando-se de um compriemento, o seu valor pode ser especificado, por exemplo, em percentagem.

Escola Secundria Quinta das Palmeiras | Curso EFA Tcnico/a de Multimdia - Nvel III |Mdulo: CSS |Formador: Ricardo Silva

Organizao de espaos O modelo de formatao CSS assume que cada elemento resulta numa ou mais caixas, cada caixa com o contedo (por exemplo, texto). Ao redor do contedo, existem trs zonas lgicas (padding, border e margin).

Descreve a zona de fronteira Border entre a zona interior (contedo at border) e zona exterior (da border em frente). Sub-propriedades ( permite img { border: 2px;} /* signica que aparecer <style>

especificar apenas um dos lados uma linha de borda com da caixa do contedo): border-top border-right 2px ao redor de toda a caixa do contedo (cima, direita, baixo, esquerda) */ </style>

Escola Secundria Quinta das Palmeiras | Curso EFA Tcnico/a de Multimdia - Nvel III |Mdulo: CSS |Formador: Ricardo Silva

border-bottom border-left border-style (estilo de linha, seja em pontos, traos, contnua, etc) border-color (escolha da cor da border) Descreve a zona interior. Padding Sub-propriedades: padding-top padding-right padding-bottom padding-left <style> img { border: 2px; padding: 20px;} /* aumento em 20px da rea entre o contedo e a border, em todos os lados da caixa */ </style> Descreve a zona exterior. Margin Sub-propriedades: margin-top margin-right margin-bottom margin-left <style> img { border: 2px; padding: 20px; margin-right: 100px; margin-top: 200px; } </style>

Escola Secundria Quinta das Palmeiras | Curso EFA Tcnico/a de Multimdia - Nvel III |Mdulo: CSS |Formador: Ricardo Silva