css

CSSClara Ferreira

O que é?

CSS é a sigla de Cascading Style Sheets – Formatar estilos em cascata do HTML. O HTML não serve para formatações, foi criado para inserir conteúdos. Formatar textos, imagens, fundos, zonas específicas em HTML é um processo

demorado e repetitivo. O CSS pode ser um ficheiro à parte do HTML, criando estilos que depois, podem ser

usados sempre que se queira através do HTML.

Como se faz?

A sintaxe do CSS é simples:Seletor

body

Propriedade

{background – color:

Valor

#FF0000;}

Aplicar a HTML

Cria-se um documento HTML. Cria-se um documento CSS. No HTML referimo-nos aos estilos criados em CSS:

<html> <head><link rel="stylesheet" type="text/css“href="ex1.css"/> </head> <body><h1>This header is 36 pt</h1> <h2>This header is blue</h2> <p>This paragraph has a left margin of 50 pixels</p> </body> </html>

body{ background-color:yellow;}H1 {font-size:36pt;}H2 { color:blue;}P {margin-left:50px;}

HTML CSS

Formas diferentes de aplicar estilos

Método 1 – Dentro do próprio documento HTML – usando o Style como atributo.

<html><head>

<title>Exemplo</title></head><body style="background-color: #FF0000;">

<p>Esta é página tem o fundo vermelho</p></body></html>


Método 2 – Dentro do próprio documento HTML – usando o Style como tag.

<html><head>

<title>Exemplo</title><style type="text/css">

body {background-color: #FF0000;}</style>

</head><body>

<p>Esta página tem o fundo vermelho</p></body></html>


Método 3 – Usando um ficheiro à parte. Melhor método – forma mais estruturada e menos confusa.

Index.html<html><head>

<title>Meu documento</title><link rel="stylesheet" type="text/css" href="style.css" />

</head><body>

<h1>Minha primeira folha de estilos</h1></body></html>

Style.cssbody { background-color: #FF0000; }

Classes e ID’s

E se precisássemos de definir uma cor diferente para cada cabeçalho de um site? E se eu quiser formatar botões que em tudo são iguais exceto na cor?

Para formatar um elemento de forma única, usamos o ID. Para formatar classes de elementos com caraterísticas iguais, usamos as classes.

Exemplo do uso de ID’s

<html><head><style type="text/css">#para1{text-align:center;color:red;} </style></head>

<body><p id="para1">Parágrafo com estilo</p><p>Parágrafo sem estilo</p></body></html>

Exemplo do uso de Classes

<html><head><style type="text/css">.center{text-align:center;}</style></head>

<body><h1 class="center">Titulo centrado</h1><p class="center“>Parágrafo centrado</p> </body></html>

As cores

Alguns browsers não conseguem mostrar todas as cores, cingindo-se a nossa escolha portanto, às chamadas Web Safe Colors.

Existem muitos sites com listagens de cores Web Site, entre eles: http://erikasarti.net/html/tabela-cores-seguras-web-safe/.

Se se pretender fazer um bom estudo de cor para um site, deveremos recorrer a sites como o http://colorschemedesigner.com/ que segundo as cores escolhidas até permite visualizar um site exemplo.

http://erikasarti.net/html/tabela-cores-seguras-web-safe/

http://colorschemedesigner.com/

Os fundos

background-color – muda a cor do fundo. background-image – adiciona uma imagem ao fundo. background-repeat – repete uma imagem.

Opções O que fazem?Background-repeat: repeat-x Repete a imagem na horizontal

background-repeat: repeat-y Repete a imagem na vertical

background-repeat: repeat

Repete a imagem na horizontal e vertical

background-repeat: no-repeat Não repete a imagem

Os fundos

background-attachment – fixa a imagem ou move-a com o conteúdo.

Opções O que fazem?

Background-attachment: scroll A imagem move-se com o conteúdo

Background-attachment: fixed A imagem fica sempre visível

Os fundos

background-position – Define a posição da imagem no fundo.

Opções O que fazem?left topleft centerleft bottomright topright centerright bottomcenter topcenter centercenter bottom

x% y% O canto superior esquerdo é 0% 0%. O canto inferior direito é 100% 100%.

xpos ypos Pode medir-se em pixeis , cm, mm, in. inherit Herda a característica do componente acima na hirerarquia

Exercício 1

Use o ficheiro exerccss1.html, a imagem Fundo1.jpg e através de um ficheiro CSS reproduza o site. (Não poderá alterar o HTML)

Textos - Tipos de Letra

Propriedade Exemplofont-style p.italic {font-style:italic} (normal, italic, oblique)font-weight p.thick {font-weight:bold;} (normal, bold, lighter, 100…900)font-size/line-height h2 {font-size:200%}

font-family P { font-family:"Times New Roman",Georgia,Serif; }

Textos – o que ter em consideração

Nem todos os tipos de letra são “Web Safe”, poderás escolher um tipo de letra que está no teu PC e não ser reconhecido pelo browser.

Os tipos de letra por defeito são estes:

• Georgia• Palatino Linotype• Book Antiqua• Times New Roman• Arial• Helvetica• Comic Sans MS• Impact• Charcoal• Lucida Sans Unicode• Lucida Grande

• Tahoma• Geneva• Trebuchet MS• Verdana• Geneva• Courier• Monaco

Textos- Google Fonts

Quando queremos sair fora da caixa em termos de fontes, há uma forma muito simples de o fazer.

Vamos a https://fonts.google.com/ Depois, escolhemos uma entre muitas fontes lá listadas. Carregamos no símbolo de adicionar E em baixo aparece o código que teremos de adicionar ao HTML e CSS.

https://fonts.google.com/

https://fonts.google.com/

Textos

Propriedade Exemplo:color h1 {color:#00ff00;}letter-spacing h1 {letter-spacing:2px} (muda o espaço entre as letras)line-height p.piqueno {line-height:80%}text-align h2 {text-align:left} (left, right, center, justify)text-indent text-indent:50px;text-shadow p.Teste { text-shadow: #6374AB 20px -12px 2px; }text-transform h2 {text-transform:capitalize;} (capitalize, lowercase, uppercase)

vertical-align Texto {vertical-align:text-top;} (length, %, Sub, Super, top, text-top, middle, bottom, text-bottom)

word-spacing P { word-spacing:30px; }

Exercício

Reproduza sem alterar o HTML, o seguinte site:

Links

Exemplo:

<html><head><style type="text/css">a:link {text-decoration:none;} /* unvisited link */a:visited {text-decoration:none;} /* visited link */a:hover {text-decoration:underline;} /* mouse over link */a:active {text-decoration:underline;} /* selected link */</style></head><body><p><b><a href=“google.com" target="_blank">Link para carregar</a></b></p></body></html>

Marcas

Exemplo:

<html><head><style type="text/css">ul {list-style:square url(“quadrado.gif");}</style></head>

<body><ul><li>Leite</li><li>Café</li><li>Coca Cola</li></ul></body></html>

Caixas – Box Model

Uma box model é a forma como o CSS estrutura os elementos do HTML. Cada elemento tem:

Margin Border Padding Content

Este tipo de abordagem permite, mais facilmente dispor os elementos de uma página.


Margin – Cria um espaço à volta da borda. É completamente transparente.

Border – Uma borda à volta do conteúdo.

Padding – Cria uma área à volta do content.

Content – O conteúdo.

MarginBorder

PaddingContent


As dimensões de uma box são as dimensões totais das várias partes. Exemplo:

250px (Conteúdo)+ 20px (Preenchimento direito e esquerdo)+ 10px (Limite direito e esquerdo)+ 20px (Margem esquerda e direita)= 300px

width:250px;padding:10px;border:5px solid gray;margin:10px;

Box Model - Border

As linhas limites podem ser definidas segundo as seguintes opções: Style (none, dotted, dashed, double, groove, ridge, inset, outset) Width Color Lados individuais (border-top-style, border-right-style,

border-bottom-style, border-left-style:solid;)

Box Model - Outline

A OutLine não faz parte do modelo de caixa no entanto, poderá ser usada para criar uma linha à volta da border.

As dimensões da caixa não são alteradas. Exemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css">p {border:1px solid red;outline:green dotted thick;}</style></head>

<body><p><b>Nota:</b> para que funcione no IE8 tem que ser declarado um DOCTYPE</p></body></html>

Posicionamento

Para colocar elementos atrás de outros, ao lado de ouros, antes de outros, defenir o que acontece quando um elemento é grande demais para uma zona - os valores de top, bottom, left e right não chegam.

Temos que usar um dos quatro métodos de posicionamento: Fixed – move-se com fundo. Relative – posição relativa ao seu posicionamento normal. Absolute – posição relativa ao elemento anterior que tiver um

posicionamento não estático – se não houverem elementos o elemento anterior é o bloco <html>.

Overlapping – Posicionar-se por cima de outro elemento. (z-index)

Moldagem

Com o Float, um elemento pode ser mudado para a direita ou esquerda, permitindo que outros elementos o rodeiem – como uma moldagem do Word.

As moldagens apenas funcionam na horizontal. Exemplo:

<style type="text/css">img {float:right;}</style></head>

<body><p><img src=“clara.gif" width="95" height="84" /><h1>Texto para aqui escrito para visualizar o exemplo. Texto para aqui escrito para visualizar o exemplo.Texto para aqui escrito para visualizar o exemplo.Texto para aqui escrito para visualizar o exemplo.Texto para aqui escrito para visualizar o exemplo.Texto para aqui escrito para visualizar o exemplo.Texto para aqui escrito para visualizar o exemplo.Texto para aqui escrito para visualizar o exemplo.Texto para aqui escrito para visualizar o exemplo. Texto para aqui escrito para visualizar o exemplo.</p>

Alinhar objetos

Usando as margens: se forem ambas auto – o objeto fica centrado automaticamente.

Exemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css">.centrado{margin:auto;width:70%;background-color:#993333;}</style></head>

<body><div class="centrado"><p>Este texto estará centrado por definição do Css.</p><p>É muito simples, esta matéria.</p></div><p><b>Note: </b>Isto não funciona no IE8, se o !DOCTYPE não for declarado.</p></body></html>

Alinhar objetos Usando a posição absoluta. Exemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css">.direita{position:absolute;right:0px;width:300px;background-color:#660066;}</style></head>

<body><div class="direita"><p>Este texto fica encostado à direita.</p><p>É muito simples, esta matéria.</</p></div></body></html>

Alinhar objetos Usando a moldagem. Exemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css">.direita{float:right;width:300px;background-color:#99FF33;}</style></head>

<body><div class="direita"><p>Este texto fica encostado à direita.</p><p>É muitos simples, esta matéria.</p></div></body></html>

Pseudo-Classes No CSS podemos modificar elementos como se fossem classes. Exemplo – mudar a forma como links se comportam:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css">a:link {color:#FFFFFF ; background-color:#006666; text-decoration:none;} /* unvisited link */a:visited {color:#00FF00;} /* visited link */a:hover {color:#FF0000;} /* mouse over link */a:active {color:#FFFFFF;} /* selected link */</style></head>

<body><p><b><a href="google.com" target="_blank">Google</a></b></p></body></html>

css

Education