Minicurso CSS: Definição e aplicação

 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

 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.


 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).

 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;

 Dreamweaver,  CSSEdit,
 NotePad++,  EclipseStyle,
 Coda,  CSS Tab Designer,
 Gedit,  (…)
 NetBeans,
 Eclipse,
 HomeSite,
 Kedit,
Para testes rápidos
 EditPlus, Try W3Schools.

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)


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>


 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>

 O CSS tem duas sintaxes básicas, o seletor e uma ou várias
declarações;


 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.

 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;}


 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;
}

 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


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.


 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;


 color:blue;
 color:#00F;
 color:rgb(255,0,0);
 direction:rtl;
 direction:ltr;
 font:bold 12px Verdana, Geneva, sans-serif;
 font-family:Verdana, Geneva, sans-serif;
 font-family:"Courier New", Courier, monospace;
 font-size:12px;
 font-size:2.5em; /* = 40px/ 16px = 2.5em */
 font-style:italic;
 font-style:normal;
 font-variant: small-caps;
 font-weight:bold;

 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;

 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;


 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 */


/* 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;


table, th, td (...)

 border: 1px solid black;

 border-collapse:collapse;
 border-collapse:separate;

 vertical-align:top;
 vertical-align:middle;
 vertical-align:bottom; (...)


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.


 A imagem abaixo ilustra o modelo de caixa:


 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;
}


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.


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*/


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*/

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;

Fazer o seguinte Layout
Inserir um menu
Inserir conteúdo


 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


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.


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


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

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


Valide seu código no W3 Schools

http://www.w3schools.com/site/site_validate.asp


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/

 Dúvidas
 Ajuda
 Comentários
 Depoimentos
 ...


 vanessametonini@gmail.com

 @vanessametonini

 slideshare.net/vanessametonini

 LinkedIn: Vanessa Me Tonini


 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


 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


Minicurso CSS: Definição e aplicação

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Minicurso CSS: Definição e aplicação

Mais de Vanessa Me Tonini

Último

Minicurso CSS: Definição e aplicação