Aula Css

CSS - Cascading Style Sheet
Feol 2 Perodo Sistemas de Informao Profa. Andrea Alves
Introduo
A introduo deste conceito preconiza o uso dos elementos (tags) HTML, exclusivamente para marcar e estruturar o contedo do documento. Nenhum elemento HTML ser usado para alterar a apresentao, ou seja estilizar o contedo. A tarefa de estilizao ficar a cargo das CSS que nada mais do que um arquivo independente do arquivo HTML no qual so declaradas propriedades e valores de estilizao para os elementos do HTML. Estas declaraes de estilo, quer sejam estruturadas em um arquivo externo com extenso .css quer sejam declaradas de outros modos (importadas, lincadas, incorporadas ou inline), contm todas as regras de estilo para os elementos do documento HTML.
Sintaxe - CSS
Uma regra CSS uma declarao que segue uma sintaxe prpria e que define como ser aplicado estilo a um ou mais elementos HTML . Um conjunto de regras CSS formam uma Folha de Estilos. Uma regra CSS, na sua forma mais elementar, compe-se de trs partes: um seletor, uma propriedade e um valor e tem a sintaxe conforme mostrado abaixo: seletor { propriedade: valor; } Seletor: genericamente, o elemento HTML identificado por sua tag, ou por uma classe, ou por uma ID, ou etc., e para o qual a regra ser vlida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...); Propriedade: o atributo do elemento HTML ao qual ser aplicada a regra (por exemplo: font, color, background, etc...). Valor: a caracterstica especfica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc...)
Primeiro Exemplo
p { font-size: 12px; } body { color: #000000; background: #FFFFFF; font-weight: bold; }
O seletor classe
Mas voc no est restrito somente aos elementos HTML (tags) para aplicar regras de estilo! Voc pode "inventar" um nome e com ele criar uma classe a qual definir as regras CSS. E o mais interessante das classes, que elas podem ser aplicadas a qualquer elemento HTML. E mais ainda, voc pode aplicar estilos diferentes para o mesmo tipo de elemento do HTML, usando classes diferentes para cada um deles. A sintaxe para o seletor classe mostrada abaixo. Elemento HTML mais um nome qualquer que voc "inventa" precedido de . (ponto):
Exemplo
Por exemplo: suponha que voc queira ter dois tipos de pargrafos em seu documento: um pargrafo com letras na cor preta e um pargrafo com letras na cor azul.
Exemplo
p.corum {color:#000000; } p.cordois { color:#0000FF; } No seu documento HTML as regras seriam aplicadas conforme abaixo: <p class ="corum"> este pargrafo ter cor preta.</p> <p class ="cordois"> este pargrafo ter cor azul. </p>
Seletor Class
Ao criar uma classe voc talvez queira que ela seja aplicvel a qualquer elemento HTML. Neste caso basta que se omita o nome do elemento antes da classe. Por exemplo: a regra CSS a seguir pode ser aplicada a qualquer elemento HTML ao qual voc deseja atribuir cor azul: .cortres { color: #0000FF; } No exemplo a seguir tanto o cabealho <h2> como o pargrafo <p> tero cor azul: <h2 class="cortres"> Este cabealho azul. </h2> <p class="cortres"> Este pargrafo azul. </p >
Tipos de CSS
As folhas de estilo podem ser vinculadas a um documento de trs maneiras distintas: Importadas ou lincadas; Incorporadas; Inline.
Tipos de CSS
Folha de estilo externa Uma folha de estilo dita externa, quando as regras CSS esto declaradas em um documento a parte do documento HTML. A folha de estilo um arquivo separado do arquivo html e que tem a extenso .css Uma folha de estilo externa ideal para ser aplicada a vrias pginas. Com uma folha de estilo externa , voc pode mudar a aparncia de um site inteiro mudando um arquivo apenas (o arquivo da folha de estilo). O arquivo css da folha de estilo externa dever ser lincado ou importado ao documento HTML, dentro da tag <head> do documento. A sintaxe geral para lincar uma folha de estilo chamada estilo.css mostrada abaixo. <head> .......... <link rel="stylesheet" type="text/css" href="estilo.css"> .......... </head>
Tipos de CSS
Folha de estilo incorporada ou interna Uma folha de estilo dita incorporada ou interna, quando as regras CSS esto declaradas no prprio documento HTML. Uma folha de estilo incorporada ou interna, ideal para ser aplicada a uma nica pgina. Com uma folha de estilo incorporada ou interna, voc pode mudar a aparncia de somente um documento, aquele onde a folha de estilo esta incorporada. As regras de estilo, vlidas para o documento, so declaradas na seo <head> do documento com a tag de estilo <style>, conforme sintaxe mostrada abaixo: <head> ........... <style type="text/css">  </style> ........... </head> O browser ler agora as regras de estilo na prpria pgina, e formatar o documento de acordo com elas.
Tipos de CSS
Folha de estilo inline Uma folha de estilo dita inline, quando as regras CSS esto declaradas dentro da tag do elemento HTML. Um estilo inline s se aplica a um elemento HTML. Ele perde muitas das vantagens de folhas de estilo pois mistura o contedo com a apresentao. Use este mtodo excepcionalmente, como quando quiser aplicar um estilo a uma nica ocorrncia de um elemento. A sintaxe para aplicar estilo inline mostrada a seguir: <p style="color:#000000; margin: 5px;"> Aqui um pargrafo de cor preta e com 5px nas 4 margens. </p>
Propriedades Font
As propriedades para as fontes, definem as caractersticas (os valores na regra CSS) das letras que constituem os textos dentro dos elementos HTML. As propriedades bsicas para fontes e que abordaremos neste tutorial so as listadas abaixo: color:...................cor da fonte font-family:..........tipo de fonte font-size:.............tamanho de fonte font-style:............estilo de fonte font-variant:.........fontes maisculas de menor altura font-weight:.........quanto mais escura a fonte (negrito) font:....................maneira abreviada para todas as propriedades
Valores vlidos Font

color:
cdigo hexadecimal: #FFFFFF cdigo rgb: rgb(255,235,0) nome da cor: red, blue, green...etc family-name: define-se pelo nome da fonte, p. ex:"verdana", "helvetica", "arial", etc. generic-family: define-se pelo nome genrico, p. ex:"serif", "sans-serif", "cursive", etc. xx-small x-small small medium large x-large xx-large smaller larger length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) % normal: fonte normal na vertical italic: fonte inclinada oblique:fonte obliqua normal: fonte normal small-caps: transforma em maisculas de menor altura normal bold bolder lighter
font-family:
font-size:
font-style:
font-variant:
font-weight:
Exemplo
<html> <head> <style type="text/css">  </style> </head> <body> <h1>Cabealho com letras vermelhas</h1> <h2>Cabealho com letras verdes</h2> <p>Pargrafo com letras azuis</p> </body> </html>
Exemplo com folha externa

body { font-family: "Courier New", Courier, mono; font-size: 10px; font-style: italic; font-weight: 200; color: #003366; } Obs.: Salvar como estilo.css
Exemplo de pgina
<html> <head> <title> Teste de Estilos </title> <link href = "estilo.css" rel="stylesheet" type="text/css"> </head> <body> <p> Estamos testando os estilos </p> </body> </html>
Propriedades Text
As propriedades para textos, definem as caractersticas (os valores na regra CSS) dos textos inseridos dentro dos elementos HTML. As propriedades para textos so as listadas abaixo: color.....................cor do texto; letter-spacing........espaamento entre letras; word-spacing.........espaamento entre palavras; text-align..............alinhamento do texto; text-decoration......decorao do texto; text-indent............recuo do texto; text-transform.......forma das letras; direction...............direo do texto; white-space.........como o browser trata os espaos em branco;
Valores Aceitos Text

color:
cdigo hexadecimal: #FFFFFF cdigo rgb: rgb(255,235,0) nome da cor: red, blue, green...etc
letter-spacing:
normal: o espaamento default lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) So vlidos valores negativos
word-spacing:
normal: o espaamento default lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) So vlidos valores negativos
text-align:
left: alinha o texto a esquerda right: alinha o texto a direita center: alinha o texto no centro justify: fora o texto a ocupar toda a extenso da linha da esquerda a direita
Valores Aceitos Text

text-decoration:
none: nenhuma decorao 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 lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) % : porcentagem da largura do elemento pai
text-indent:

text-transform:
none: texto normal capitalize: todas as primeiras letras do texto em maisculas uppercase: todas as letras do texto em maisculas lowercase: todas as letras do texto em minsculas
ltr: texto escrito da esquerda para a direita rtl: texto escrito da direita para a esquerda normal: os espaos em branco sero ignorados pelo browser pre: os espaos em branco sero preservados pelo browser nowrap: o texto ser apresentado todo ele numa linha nica na tela. No h quebra de linha at ser encontrada uma tag <br>
direction:

white-space:
Propriedades Margin
A propriedade para margens, define um valor para espessura das margens dos elementos HTML. As propriedades para margens so as listadas abaixo: 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 .
Valores Margin
auto: valor default da margem length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) %: porcentagem da largura do elemento pai
Exemplo Margin
<html> <head> <style type="text/css">  </style> </head> <body> <p>Uma margem superior de 2cm</p> </body> </html>
Propriedade
background
Descrio
Oferece-nos uma forma abreviada para escrever todas as propriedades do fundo numa nica declarao.
Valores
Esta propriedade aceita os valores que podemos dar a todas as restantes propriedades desta tabela (backgroundcolor, background-image, background-repeat background-attachment e background-position) scroll fixed
W3C
CSS1
background-attachment
A propriedade backgroundattachment indica se a imagem de fundo deve permanecer imvel na janela do browser ou se acompanha o contedo quando o movemos (scroll). Define a cor de fundo de um elemento.
CSS1
background-color
color-rgb color-hex color-name transparent url none
CSS1
background-image background-position
Define uma imagem de fundo para ser usada no elemento Define o local onde se comea a desenhar a imagem de fundo.
CSS1 CSS1
top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos repeat repeat-x repeat-y no-repeat
background-repeat
Estabelece se a imagem de fundo deve repetir-se (formando um mosaico) ou no, e as direces da repetio.
CSS1
Propriedade
border
Descrio
Oferece uma forma abreviada para escrever numa nica declarao todos os parmetros relativos s linhas de fronteira. Aceita os valores que podem ser dados s propriedades listadas direita. Oferece-nos uma forma abreviada para escrever todas as propriedades da linha de fronteira do lado de baixo numa nica declarao. Aceita os valores que podem ser dados s propriedades listadas direita. Define a cor da linha de fronteira de baixo Define o estilo da linha de fronteira de baixo Define a espessura da linha de fronteira de baixo Define as cores das quatro linhas de fronteira. Aceita de um a quatro valores. Oferece-nos uma forma abreviada para escrevermos todas as propriedades da linha de fronteira do lado esquerdo numa nica declarao. Aceita os valores que podem ser dados s propriedades listadas direita.
Valores
border-width border-style border-color
W3C
CSS1
border-bottom
CSS1
border-bottom-color border-bottom-style border-bottom-width border-color
border-color border-style border-width cor
CSS2 CSS2 CSS1 CSS1
border-left
CSS1
border-left-color
Define a cor da linha de fronteira do lado esquerdo Define o estilo da linha de fronteira do lado esquerdo Define a espessura da linha de fronteira do lado esquerdo
border-color
CSS2
border-left-style
border-style
CSS2
border-left-width
border-width
CSS1
border-right
Oferece-nos uma forma abreviada para escrevermos todas as propriedades da linha de fronteira do lado direito numa nica declarao. Aceita os valores que podem ser dados s propriedades listadas direita.
CSS1
border-right-color
Define a cor da linha de fronteira do lado direito Define o estilo da linha de fronteira do lado direito
border-color
CSS2
border-right-style
border-style
CSS2
border-right-width
Define a espessura da linha de fronteira do lado direito A propriedade borderstyle define o estilo das quatro linhas de fronteira. Aceita de um a quatro valores.
border-width
CSS1
border-style
none hidden dotted dashed solid double groove ridge inset outset border-width border-style border-color
CSS1
border-top
Oferece-nos uma forma abreviada para escrevermos todas as propriedades da linha de fronteira do lado de cima numa nica declarao. Aceita os valores que podem ser dados s propriedades listadas direita. Define a cor da linha de fronteira superior Define o estilo da linha de fronteira superior Define a espessura da linha de fronteira superior Oferece-nos uma forma abreviada para definirmos as espessuras de todas as linhas de fronteira. Aceita de um a quatro valores.
CSS1
border-top-color border-top-style border-top-width border-width
border-color border-style border-width thin medium thick comprimento
CSS2 CSS2 CSS1 CSS1

Aula Css

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Aula Css

Uploaded by

Copyright:

Available Formats

CSS - Cascading Style Sheet

Feol 2 Perodo Sistemas de Informao Profa. Andrea Alves

Valores vlidos Font

Exemplo com folha externa

Valores Aceitos Text

Valores Aceitos Text

color-rgb color-hex color-name transparent url none

border-width border-style border-color

border-bottom-color border-bottom-style border-bottom-width border-color

border-color border-style border-width cor

CSS2 CSS2 CSS1 CSS1

border-width border-style border-color

border-width border-style border-color

border-top-color border-top-style border-top-width border-width

border-color border-style border-width thin medium thick comprimento

CSS2 CSS2 CSS1 CSS1

You might also like