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

View
6.416
Download
3
Category

Technology

Preview:

Citation preview

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.

2UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

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.

3UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

CSS a sigla para Cascading Style Sheetsque em português foi traduzido parafolhas de estilo em cascata.Folhas de estilo nada mais são do quedocumentos onde são definidas regrasde formatação e de estilos, a seremaplicadas aos elementos estruturais demarcação de texto (Exemplos deaplicação do CSS: HTML, XHTML, XML,etc).

4UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

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;

5UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

Dreamweaver, NotePad++, Coda, Gedit, NetBeans, Eclipse, HomeSite, Kedit, EditPlus,

CSSEdit, EclipseStyle, CSS Tab Designer, (…)

Para testes rápidos Try W3Schools.

UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

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)

7UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

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>

8UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

http://rafael.adm.br/css_browser_selector/�

Arquivo externo<head>

</head> Interno<head>

</style></head> Em linha<p style="color:blue;margin-left:20px">This is

a paragraph.</p>9UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

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

10UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

MarcadoresOs marcadores são atributos das Tags HTML ou elas mesmas

ID#para1{

text-align: center;color: red;

} CLASS

.center { text-align: center; }

Tagh2 { font-size: 20px;}

*Nunca começar classes com números, pois somente o Internet Explorer suporta isto.

11UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

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

12UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

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;

}

13UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

Tags HTMLUma 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

14UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

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.

15UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

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-repeatright top;

16UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

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;

17UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

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;

18UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

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;

19UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

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

20UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

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

21UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

table, th, td (...)

border: 1px solid black;

border-collapse:collapse;

border-collapse:separate;

vertical-align:top;

vertical-align:middle;

vertical-align:bottom; (...)

22UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

23UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

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.

24UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

A imagem abaixo ilustra o modelo de caixa:

25UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

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;

}

26UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

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.

27UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

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

28UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

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

29UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

FloatEspecifica se ou não uma caixa deve flutuar.

div { float: left;} float: left;

float: right;

float: none;

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

30UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

Fazer o seguinte Layout

Inserir um menu Inserir conteúdo

31UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

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

32UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

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.

33UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

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

http://www.tableless.com.br/faq�

http://www.tableless.com.br/o-caminho-suave-para-o-tableless�

http://www.tableless.com.br/formulario-basico-em-8-minutos�

34UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

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

http://www.tableless.com.br/video-menu-horizontal-em-5-minutos�

http://www.mxmasters.com.br/tableless-css/tableless-menu-dropdownsubmenu/�

http://www.tableless.com.br/colocar-rodape-fixo-no-bottom�

35UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

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

http://www.tableless.com.br/propriedade-float-do-css�

http://www.tableless.com.br/css3-columns�

36UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

Valide seu código no W3 Schools

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

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

37UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

O CSS está para o desenvolvedor como o martelo está para omarceneiro. Companheiro inseparável na hora de implementaralgum site.Atualmente o CSS está em sua segunda versão. Ele surgiu no anode 94 e a partir daí vem facilitando cada vez mais a vida dosdesenvolvedores.

Navegadores que suportam› Safari (completamente)› Chrome (parcialmente)› Firefox (parcialmente)

Sites em CSS 3› http://css3watch.com/

http://css3watch.com/�

Dúvidas Ajuda Comentários Depoimentos ...

38UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

vanessametonini@gmail.com

@vanessametonini

slideshare.net/vanessametonini

LinkedIn: Vanessa Me Tonini

39UNIVALI - Universidade do Vale do Itajaí . Minicurso CSS: definição e aplicação básica. Vanessa Me Tonini.

mailto:vanessametonini@gmail.com�

http://dl.dropbox.com/u/6914931/minicurso-css/reset.css