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.

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.


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


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, NotePad++, Coda, Gedit, NetBeans, Eclipse, HomeSite, Kedit, EditPlus,

6

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)


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>


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

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


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.


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


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


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;


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


Valide seu código no W3 Schools

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

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


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


[email protected]

@vanessametonini

slideshare.net/vanessametonini

LinkedIn: Vanessa Me Tonini


mailto:[email protected]�

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://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/MinicursoCSS-Doc.pdf�

http://dl.dropbox.com/u/6914931/minicurso-css/minicurso-slide.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


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

Technology

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