Vanessa Martinez Tonini apresenta um minicurso sobre CSS com as seguintes informações essenciais:
1) Apresenta sua experiência profissional e objetivos do minicurso de fornecer uma introdução básica à sintaxe e aplicação do CSS.
2) Explica o que é CSS, como funciona a cascata de estilos, e ferramentas para editar arquivos CSS.
3) Demonstra exemplos básicos de como aplicar estilos de fontes, cores, fundos, links, listas e tabelas usando CSS.
2. Vanessa Martinez Tonini
Acadêmica do curso Tecnologia em
Sistemas para Internet, desde 2008.
Autônoma: desde 2007, Web designer
(etc..);
GrupoW: 1 ano e 8 meses, Web designer ;
Unimed Litoral: 9 meses, Suporte de
Sistemas;
VideoSoft : atual, Web designer.
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 2
3. Passar uma orientação básica como a
sintaxe, realizar exercícios para fixação e
dicas, ao ponto de ser possível criar
páginas simples.
Informar os caminhos que o CSS está
tomando para facilitar o usuário e o
desenvolvedor.
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 3
4. CSS a sigla para Cascading Style Sheets
que em português foi traduzido para
folhas de estilo em cascata.
Folhas de estilo nada mais são do que
documentos onde são definidas regras
de formatação e de estilos, a serem
aplicadas aos elementos estruturais de
marcação de texto (Exemplos de
aplicação do CSS: HTML, XHTML, XML,
etc).
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 4
5. CSS significa Cascading Style Sheets;
Os estilos definem como exibir os
elementos HTML;
Os estilos foram adicionados ao HTML 4.0
para resolver um problema;
Folhas de estilo externas podem poupar
um monte de trabalho;
Folhas de estilo externas são
armazenados em arquivos de extensão
CSS;
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 5
6. Dreamweaver, CSSEdit,
NotePad++, EclipseStyle,
Coda, CSS Tab Designer,
Gedit, (…)
NetBeans,
Eclipse,
HomeSite,
Kedit,
Para testes rápidos
EditPlus, Try W3Schools.
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 6
7. Ferramentas que auxiliam o desenvolvedor
(Plug-ins/Add-ons dos navegadores)
Web Developer (Firefox e Chrome)
FireBug (Firefox)
Ferramentas para desenvolvedores
/Developers Tools (Internet Explorer 8)
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 7
8. Correção de diferenças entre navegadores e
sistemas operacionais
CSS Browser Selector
Um arquivo desenvolvido em Java Script que
identifica o navegador e versão do
navegador no seu arquivo CSS, podendo
assim desenvolver CSS diferentes para cada
navegador.
http://rafael.adm.br/css_browser_selector/
<script src="css_browser_selector.js"></script>
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 8
9. Arquivo externo
<head>
<link rel="stylesheet" type="text/css"
href=“estilos.css" />
</head>
Interno
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
</style>
</head>
Em linha
<p style="color:blue;margin-left:20px">This is
a paragraph.</p>
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 9
10. O CSS tem duas sintaxes básicas, o seletor e uma ou várias
declarações;
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 10
11. Marcadores
Os marcadores são atributos das Tags HTML ou elas mesmas
ID
#para1{
text-align: center;
color: red;
}
CLASS
.center { text-align: center; }
Tag
h2 { font-size: 20px;}
*Nunca começar classes com números, pois somente o Internet
Explorer suporta isto.
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 11
12. Hierarquia (cascata)
Quando definimos um estilo para um marcador, todos
os elementos que se nele se encaixam vão herdar o
estilo.
Se defino um estilo para a Tag <P> todas as tags <P>
herdarão este estilo, a não ser que outra definição
anule este estilo.
Exemplo:
P {
color: red;
font-family: Verdana;
}
P.Contato {color: blue;}
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 12
13. Hierarquia (cascata)
O melhor jeito para se prevenir de hierarquias
indesejadas é definir um padrão bem simples no inicio
e depois definir profundamente os estilos dentro de
tags...
Exemplo:
Body {
font: normal 12px Verdana;
color: #000
}
div.Menu ul li a {
font: bold 14px Verdana;
color: #fff;
}
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 13
14. Tags HTML
Uma minoria de Tags HTML vem com um estilo pré
definido por padrão, isto muitas vezes atrapalha
no desenvolvimento do CSS. Para resolver este
problema existe um CSS pronto que “reseta” todas
as Tags, deixando as cruas para você começar
seu CSS.
Deve ser inserido nas primeiras linhas de sua folha
de estilo.
Disponível no link:
› http://dl.dropbox.com/u/6914931/minicurso-css/reset.css
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 14
15. 1. Criar um arquivo HTML (index.html);
2. Criar um arquivo CSS (estilos.css);
3. ‘Linkar’ o arquivo CSS no arquivo HTML.
O que vamos aprender?
Background (Fundos);
Textos e fontes;
Links;
Listas;
Tabelas;
Caixas.
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 15
16. background-color:blue;
background-color:#00F;
background-color:rgb(255,0,0);
background-image:url('paper.gif');
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
background-repeat: repeat;
background-attachment: scroll;
background-attachment: fixed;
background-position: right top;
background:#ffffff url('fundo.png') no-repeat
right top;
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 16
18. font-weight:normal;
font-weight:lighter;
font-weight:500;
letter-spacing:50px;
line-height: 14px;
line-height: 50%;
text-align:center;
text-align:justify;
text-align:left;
text-align:right;
text-decoration:blink;
text-decoration:line-through;
text-decoration:overline;
text-decoration:underline;
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 18
19. text-decoration:none;
text-indent:50px;
text-indent:50%;
text-transform:capitalize;
text-transform:lowercase;
text-transform:uppercase;
text-transform:none;
word-spacing:12px;
white-space:nowrap;
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 19
20. a {...}
/* pseudo-classes da tag A */
a:link {color:#FF0000;
a:visited {color:#00FF00;} /* Visitado */
a:hover {color:#FF00FF;} /* mouse over */
a:active {color:#0000FF;} /* selecionado */
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 20
21. /* UL listas não ordenadas */
list-style-type: none;
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style: none;
/* OL listas ordenadas */
list-style-type: armenian;
list-style-type: decimal; (...)
/* Imagens */
list-style-image: square url('marcador.gif');
/*Posicionamento*/
list-style-position: inside;
list-style-position: outside;
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 21
22. table, th, td (...)
border: 1px solid black;
border-collapse:collapse;
border-collapse:separate;
vertical-align:top;
vertical-align:middle;
vertical-align:bottom; (...)
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 22
23. O modelo Box CSS
Todos os elementos HTML podem ser considerados
como caixas.
Em CSS, o termo modelo caixa é usado quando se
fala de design e layout.
O modelo de caixa de CSS é essencialmente uma
caixa que envolve elementos HTML e é composto
por: margens, bordas, espaçamentos e conteúdo
real.
O modelo de caixa que nos permite colocar uma
borda em torno de elementos e elementos do
espaço em relação a outros elementos.
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 23
24. A imagem abaixo ilustra o modelo de caixa:
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 24
25. Largura e altura de um elemento
Height para definir a altura.
Width para definir a largura.
Com valor numérico e definido em Pixels (px)
div {
height: 500px;
width: 900px;
}
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 25
26. Explicação das diferentes partes:
Margin - Limpa uma área em torno da
fronteira. A margem ainda não tem uma cor
de fundo e é completamente transparente.
Border - A border se situa em torno do
preenchimento e conteúdo. A border é
afetado pela cor de fundo da caixa.
Padding - Limpa uma área em torno do
conteúdo. O preenchimento é afetado pela
cor de fundo da caixa.
Content (Conteúdo) - O conteúdo da caixa,
onde o texto e as imagens aparecem.
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 26
27. Margem
margin-top: 10px;
margin-right: 5px;
margin-bottom: 20px;
margin-left: 15px;
margin: 10px 5px 15px 20px; /*idem ao superior, em sentido
horário*/
Espaçamento
padding-top: 10px;
padding-right: 5px;
padding-bottom: 20px;
padding-left: 15px;
padding: 10px 5px 15px 20px;/*idem ao superior, em sentido
horário*/
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 27
28. Borda
border: 1px solid black;
border-bottom: 1px solid red;
border-left: 1px dashed #0FC;
border-right: 1px solid pink;
border-top: 1px dotted #000;
border-style:dashed;
border-style: dotted;
border-style: solid;
border-color:#36C;
border-width: medium; /* 2px */
outline: 1px solid red; /*idem ao border, é a
borda do Border*/
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 28
29. Float
Especifica se ou não uma caixa deve flutuar.
div { float: left;}
float: left;
float: right;
float: none;
Clear
Especifica que os lados de um elemento que
outros elementos flutuantes não são permitidos.
Div { clear: both;}
clear: left;
clear: right;
Clear: both;
clear: none;
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 29
30. Fazer o seguinte Layout
Inserir um menu
Inserir conteúdo
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 30
31. O que é tableless?
É uma forma de desenvolvimento de sites que não
utiliza tabelas para disposição de conteúdo na
página sugerido pela W3C, pois defende que os
códigos HTML deveriam ser usados para o
propósito que foram criados, sendo que tabelas
foram criadas para exibir dados tabulares.
Em vez de usarmos <Table> iremos usar <Div> :D
Div é divino é tudo que um web designer precisa pra ficar feliz ao
ver um código fonte rsrsrs
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 31
32. Porque devemos utilizar?
Melhor organizar e identar o código
(praticamente uma auto-ajuda);
O Google ama sites em tableless e vai
aumentar seu ranking;
É mais fácil manipular os elementos do
HTML com o CSS;
Resolve os problemas.
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 32
33. Como aplicar?
FAQ: http://www.tableless.com.br/faq
O caminho suave para o Tableless:
http://www.tableless.com.br/o-caminho-suave-
para-o-tableless
Formulários:
http://www.tableless.com.br/formulario-basico-
em-8-minutos
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 33
34. Como aplicar?
Menu Horizontal:
http://www.tableless.com.br/video-menu-
horizontal-em-5-minutos
Menu ‘drop-down’:
http://www.mxmasters.com.br/tableless-
css/tableless-menu-dropdownsubmenu/
Rodapé no fim da página:
http://www.tableless.com.br/colocar-rodape-fixo-
no-bottom
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 34
35. Como aplicar?
Propriedades do Float:
http://www.tableless.com.br/propriedade-float-
do-css
CSS3, textos e conteúdo com três colunas:
http://www.tableless.com.br/css3-columns
www.tableless.com.br
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 35
36. Valide seu código no W3 Schools
http://www.w3schools.com/site/site_validate.asp
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 36
37. O CSS está para o desenvolvedor como o martelo está para o
marceneiro. Companheiro inseparável na hora de implementar
algum site.
Atualmente o CSS está em sua segunda versão. Ele surgiu no ano
de 94 e a partir daí vem facilitando cada vez mais a vida dos
desenvolvedores.
Navegadores que suportam
› Safari (completamente)
› Chrome (parcialmente)
› Firefox (parcialmente)
Sites em CSS 3
› http://css3watch.com/
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 37
38. Dúvidas
Ajuda
Comentários
Depoimentos
...
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 38
39. vanessametonini@gmail.com
@vanessametonini
slideshare.net/vanessametonini
LinkedIn: Vanessa Me Tonini
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 39
40. http://dl.dropbox.com/u/6914931/minicurso-css/reset.css
http://dl.dropbox.com/u/6914931/minicurso-css/estilos.css
http://dl.dropbox.com/u/6914931/minicurso-
css/MinicursoCSS-Doc.pdf
http://dl.dropbox.com/u/6914931/minicurso-css/minicurso-
slide.pdf
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 40
41. http://www.w3schools.com/css
http://www.tableless.com.br/
http://www.mxmasters.com.br/tableless-css/
http://www.treinaweb.com.br/curso/css
http://neosite.ilogic.com.br/dicas/2007/04/curso-de-css-
gratuito-em-16-licoes.html
http://pt.wikipedia.org/wiki/Tableless
http://rafael.adm.br/css_browser_selector/
http://css3watch.com/
http://www.apple.com/pt/pr/library/2010/06/07safari.html
UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini. 41