Workshop
Linguagem de Hipertextos
Formatação de Páginas para Web com
CSS
Sumário
HTML
CSS
Introdução
Introdução
Estrutura
Escrita
Tags
Propriedades
Tipos de elementos
Novidades
Tabelas
Imagens
HTML
HyperText Markup Language (Linguagem
de Marcação de Hipertexto) utilizada para
disponibilizar conteúdo na internet.
HTML
Introdução
Código HTML são marcações
(tags) feitas entre conteúdo,
que lidas por navegadores
formatam o conteúdo,
apresentam mídia (áudio,
vídeo, animação), interage
com banco de dados.
HTML e sua estrutura
Início do documento <html>
Cabeçalho do documento
<head>
Corpo do documento
<body>
+
HTML e suas Tags
Elementos
*Containers <div>
*Tabelas <table> <tr> <td>
*Parágrafo <p>
*Formatação
Negrito <strong> ou <b>
Itálico <em> <i>
**Quebra de linha <br>
Sublinhado <u>
**Imagem <img>
Títulos <h1> <h2>… <h6>
**Linha divisória <hr>
*Link <a>
Substituir <del> / <ins>
*Lista <ul> <ol> <li>
Destacar <mark> e <span>
*Elementos de encapsulamento
Estes elementos possuem tags de abertura e fechamento.
Parágrafo:
Negrito
<p>Lorem Ipsum is simply dummy text of the printing and
typesetting industry.</p>
<p>Lorem Ipsum is <strong>simply dummy</strong> text of the
printing and typesetting industry.</p>
Sublinhado
<p>Lorem Ipsum is <strong>simply dummy</strong> text of the
printing and <u>typesetting industry</u>.</p>
**Elementos de marcação
São tags simples, não possuem fechamento
Imagem
<img src=“http://www.unisul.br/gra/matricula-201501/img/matricule-se.jpg” width=“300” height=“80”
alt=“Matricule-se para o semestre 2015/1” >
Quebra de linha
<p>Lorem Ipsum is <strong>simply dummy</strong> <br>text
of the printing and <u>typesetting industry</u>.</p>
+
Imagens
<img src=“http://www.unisul.br/gra/matricula-201501/img/matricule-se.jpg” width=“300” height=“80” alt=“Matriculese para o semestre 2015/1” >
src: caminho absoluto do arquivo a ser mostrado;
width: largura da imagem (px / %);
height: altura da imagem (px / %);
alt: texto mostrado quando a imagem não carrega.
+
Links
<a href=“http://www.unisul.br” title=“Site da Unisul”>Unisul</a>
<a href=“http://www.unisul.br” title=“Site da Unisul”><img
src=“http://www.unisul.br/…/marca-unisul.jpg” alt=“Marca Unisul”
width=“70” height=“35”></a>
href: url da página a ser visitada ao clicar no link;
title: dica a ser mostrada ao passar o mouse sobre o link.
Tabelas
<table>
<tr> (Linhas)
<td></td> (células/colunas)
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
+
Tabelas – Mesclar células
<table>
<tr>
<td colspan=“2”></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<table>
<tr>
<td rowspan=“2”></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Não Ordenada
Listas
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Item 1
Item 2
Item 3
Ordenada
+
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
1.
Item 1
2.
Item 2
3.
Item 3
CSS
Linguagem que formata o conteúdo da
internet.
CSS
Introdução
CSS dá forma e posiciona o
conteúdo contido no HTML.
Os arquivos .css são chamados
de folhas de estilos.
CSS
Escrita
Vinculado
Incorporado
Inline
Vinculado ≅ Incorporado
As duas formas utilizam classes para formatar os elementos.
.teste {
color: #FFFFFF;
}
.teste-2 {
color: #000000;
}
<p class=“teste”>Texto…</p>
<p class=“teste2”>Texto…</p>
CSS - Vinculado
Escrita
Quando temos dois arquivos e o CSS
é chamado através de um link no
html, dentro da tag <head> e usam
as classes das tags para formatá-las:
<html>
<head>
<link href=“nome-do-arquivo.css” rel=“stylesheet”
type=“text/css”>
</head>
…
CSS - Incorporado
Escrita
Se escreve no próprio arquivo HTML, dentro da tag <head>
em uma tag <style> e assim como no vinculado são
utilizadas classes para a formatação:
<head>
<style type="text/css">
.teste {
color: #FFFFFF;
}
</style>
</head>
CSS - Inline
Escrita
Quando o CSS é escrito na própria tag que irá receber a
propriedade:
<html>
…
<body>
<p style=“color: #cccccc; text-decoration: underline;”>
texto</p>
</body>
</html>
+
Propriedades
Texto
Plano de Fundo
Container
Lista
Posicionamento
Propriedades de texto
font-family: famílias de fontes
a serem utilizadas;
font-family: Arial, Helvetica,
sans-serif;
font-size: tamanho da fonte;
font-size: 16px;
font-style: estilo da fonte;
font-style: italic;
font-weight: espessura da
fonte;
font-weight: bold;
text-decoration: mostra ou
não decorações no texto
text-decoration: underline;
Propriedades de plano de fundo
background-color: cor do
fundo;
background-color: #eeffee;
background-image: imagem
de fundo;
background-image:
url(http://www.unisul.br/.../imag
e/fundo.jpg);
background-repeat: repetição
da imagem de fundo;
background-repeat: no-repeat;
background-attachment:
fixação da imagem de fundo;
background-position: posição
da imagem de fundo.
background-attachment: fixed;
background-position: left;
Propriedades de container
width: largura;
width: 250px;
height: altura;
height: 150px;
float: flutuar perante os próximos;
clear: limpar float;
margin: espaço entre o container
e objetos ao seu redor;
padding: espaço entre a borda
do container e seu conteúdo.
float: left;
clear: left;
margin: 20px;
padding: 5px;
Propriedades de container
border-style: estilo da borda;
border-top-style: solid;
border-width: espessura da borda;
border-top-width: 2px;
border-color: cor da borda;
border-top: borda do topo;
border-right: borda da direita;
border-bottom: borda da base.
border-left: borda da esquerda.
border-top-color: #ff98ee;
border-top: solid 2px #ff98ee;
Propriedades de lista
list-style-type: símbolo a ser
mostrado como bullet;
list-style-type: circle;
list-style-image: imagem a
ser mostrada como bullet;
list-style-position:
posicionamento dos bullet
perante o container.
list-style-image:
url(http://www.unisul.br/.../imag
e/bullet.jpg);
list-style-position: outside;
Propriedades de posicionamento
position: tipo de posicionamento;
overflow: definição sobre a sobra de
conteúdo;
overflow: scroll;
top: distância entre o topo do elemento
e o elemento acima;
top: 20px;
right: distância entre a borda direita do
elemento e o elemento a sua direita;
right: 20px;
bottom: distância entre a base do
elemento e o elemento abaixo;
bottom: 20px;
left: distância entre a borda esquerda
do elemento e o elemento a sua
esquerda;
left: 20px;
position: relative;
CSS 3
Propriedades
Com o CSS é possível customizar o texto (fonte, corpo,
parágrafo, cor) caixas (div) de conteúdo (fundo, borda,
posição).
A chegada da versão 3 do CSS trás consigo mais
propriedades, aprimora algumas já existentes e desativa
outras.
Agora customizações que precisavam de imagens para
serem feitas podem ser implementadas com CSS.
CSS 3
Novidades
Entre as novidades do CSS, destacam-se as seguintes
propriedades:
Transition: faz animações com as estruturas;
Transform: atribui modificações a estruturas já
customizadas;
Shadow: aplica sombra em estruturas e em textos;
border-radius: arredonda os cantos dos elementos.
Obrigado!
Eduardo Cardillo
email: [email protected]
site: www.eduardocardillo.com.br
skype: eduardo.cardillo
Download
