Program A Cao Client e Css 2013

Desenvolvimento para Web
UFSCar - Sorocaba
Desenvolvimento na Web
Desenvolvimento no Cliente CSS
Introduo (I)
O HTML permite que sejam especificadas a estrutura e contedo do texto. CSS Cascading Style Sheets (Folhas de Estilo). Trabalha com a apresentao dos elementos: fontes, cores, espaamentos, etc. A separao entre estrutura e a apresentao facilita a manuteno. Especificao mantida pelo W3C.
Profa. Dra. Luciana Zaina
UFSCar - Sorocaba
Introduo (II)
Histria: CSS 1 - 1996 CSS 2 - 1998 CSS 2.1 (reviso) 2003 CSS 3 - em desenvolvimento Os documentos CSS podem ser validados no link: http://jigsaw.w3.org/css-validator/
Web 2.0
Contribuiu para evoluo das Interfaces Ricas ( RIA). Exemplos:
http://www.quark.com/ http://phish.com/
UFSCar - Sorocaba
CSS + HTML
Inline Incorporadas Importadas
Desenvolvimento para Web 5
Folhas de Estilo Inline
Inline: Declaram o formato de um elemento individualmente usando o atributo style no prprio XHTML. Exemplo: <p style = "font-size: 20pt">
exInline.html
UFSCar - Sorocaba
Folhas de Estilo Incorporadas
Incorporadas: O documento CSS descrito na seo head do HTML. Para referenciar os itens definidos so usado seletores CSS. No corpo da folha de estilos so declaradas regras CSS. Exemplo: <style type = "text/css"> em { font-weight: bold; color: black }
h1
p </style>
{ font-family: tahoma, helvetica, sans-serif }

{ font-size: 12pt; font-family: arial, sans-serif }
.special { color: #6666ff }
exEmbedded.html
Exemplo HTML 5
<html lang="pt-br"> <head> <title>Layout em HTML 5</title>
...css
</head> <body> <div id="divCorpo"> <header id="headerTopo> Topo (header)
<nav id="navMenu1> <nav id="navMenu2> Menu 1 (nav) Menu 2 (nav) </nav> </nav>
</header>
<section id="sectionConteudo>
<header id="headerConteudo> <h1>
(section)
(header) </header> </article> </footer> Contedo (article)
Ttulo do contedo(h1)....</h1>
<article id="articleConteudo> <footer id="footerConteudo>
Rodap do contedo (footer)
</section> <footer id="footerRodape> </div> </body> </html>
Rodap (footer)
</footer>
UFSCar - Sorocaba
Exemplo HTML 5 - CSS

<style type="text/css"> body {margin: 0px;} #divCorpo {margin: 0 auto; width: 975px;} #headerTopo {width: 100%; height: 150px; background-color: Orange; }
#navMenu1 {width: 100%; height: 50px; background-color: Aqua; }

#navMenu2 {width: 150px; min-height: 380px; background-color: Aqua; float: left;} #sectionConteudo {width: 825px; min-height: 350px; background-color: Yellow; float: left; } #footerRodape {width: 100%; height: 50px; background-color: Gray; clear: both;} #headerConteudo{ border: 1px solid orange; min-height: 60px; } #articleConteudo {border: 1px solid orange; min-height: 200px;} #footerConteudo {border: 1px solid orange; height:50px;} </style>
Folhas de estilos externas

criado um documento externo que contm apenas as regras CSS. Todas as pginas de uma mesma aplicao podem utilizar o padro.
Facilita a manuteno de estilos porque permite que a alterao seja centralizada. Exemplo:
<head> <title>Linking External Style Sheets</title> <link rel = "stylesheet" type = "text/css" href = "styles.css" /> </head>
exExterno.html (styles.css)
UFSCar - Sorocaba
Elementos
a.nodec { text-decoration: none }

Vnculo com referncia: apenas os elementos a que aplicarem o nodec tero esta formatao como vlida
a:hover { text-decoration: underline }

Vnculo sem fazer referncia: ser aplicado no item anterior aos : no caso a, sem que isto seja explicitamente declarado.
li em { font-weight: bold }
Herana: todos os elementos em filhos de li tem a formatao especificada.
h1, em { text-decoration: underline }

E: regras sero aplicadas aos dois elementos.
ul ul { font-size: .8em }
Descendentes: ul descendentes de ul.
Menus Exemplo HTML 5

..... <link rel="stylesheet" type="text/css" href="estilo.css" /> <body> <nav>
<ul class="menu">
<li><a href="#">Home</a></li> <li><a href="#">Sobre</a></li> <li><a href="#">O que fazemos?</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">SEO</a></li> <li><a href="#">Design</a></li> </ul> </li> <li><a href="#">Links</a></li> <li><a href="#">Contato</a></li>
Executando...
</ul> </nav> </body>

Retirado de: http://www.linhadecodigo.com.br/artigo/3474/menu-em-css-menu-dropdown-horizontal-com-html5-e-css3.aspx
UFSCar - Sorocaba
Menus Exemplo CSS 3

Remover borda, estilizando links: acessar link abaixo para verificar
cdigo CSS...
Escondendo submenu:
.menu li ul{ position:absolute; top:25px; left:0;
background-color:#fff;display:none;
}
Exibindo submenu:
.menu li:hover ul {display:block;} .menu li ul li{ border:1px solid #c0c0c0; display:block; width:150px; }
Retirado de: http://www.linhadecodigo.com.br/artigo/3474/menu-em-css-menu-dropdown-horizontal-com-html5-e-css3.aspx
Sugesto de Tutoriais
Maujor: http://maujor.com/ W3School: http://www.w3schools.com/css/ Para elaborao de menus: http://www.accessify.com/tools-andwizards/developer-tools/list-o-matic/ Exemplos de padres de menus: http://www.dynamicdrive.com/style
UFSCar - Sorocaba
15
Referenciais
http://www.w3schools.com/css3/ http://www.deitel.com/ResourceCenters/Programming/ CSS21/CSS3/tabid/2225/Default.aspx http://www.cssplay.co.uk/ Templates: http://www.freecsstemplates.org/csstemplates/

Program A Cao Client e Css 2013

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Program A Cao Client e Css 2013

Enviado por

Direitos autorais:

Formatos disponíveis

Desenvolvimento para Web

Desenvolvimento para Web

Profa. Dra. Luciana Zaina

Desenvolvimento para Web

Desenvolvimento para Web

Desenvolvimento para Web

Profa. Dra. Luciana Zaina

Desenvolvimento para Web

Desenvolvimento para Web 5

Folhas de Estilo Inline

Desenvolvimento para Web

Profa. Dra. Luciana Zaina

Desenvolvimento para Web

Folhas de Estilo Incorporadas

{ font-family: tahoma, helvetica, sans-serif }

.special { color: #6666ff }

<article id="articleConteudo> <footer id="footerConteudo>

Rodap do contedo (footer)

</section> <footer id="footerRodape> </div> </body> </html>

Desenvolvimento para Web

Profa. Dra. Luciana Zaina

Desenvolvimento para Web

Exemplo HTML 5 - CSS

#navMenu1 {width: 100%; height: 50px; background-color: Aqua; }

Folhas de estilos externas

Profa. Dra. Luciana Zaina

Desenvolvimento para Web

a.nodec { text-decoration: none }

a:hover { text-decoration: underline }

h1, em { text-decoration: underline }

Desenvolvimento para Web 11

Menus Exemplo HTML 5

</ul> </nav> </body>

Desenvolvimento para Web 12

Profa. Dra. Luciana Zaina

Desenvolvimento para Web

Menus Exemplo CSS 3

Retirado de: http://www.linhadecodigo.com.br/artigo/3474/menu-em-css-menu-dropdown-horizontal-com-html5-e-css3.aspx

Desenvolvimento para Web 13

Desenvolvimento para Web 14

Profa. Dra. Luciana Zaina

Desenvolvimento para Web

Desenvolvimento para Web

Desenvolvimento para Web 16

Profa. Dra. Luciana Zaina

Você também pode gostar