Unb   2012.1 - dweb - 05 - css3 - fundamentos
Upcoming SlideShare
Loading in...5
×
 

Unb 2012.1 - dweb - 05 - css3 - fundamentos

on

  • 425 views

 

Statistics

Views

Total Views
425
Views on SlideShare
425
Embed Views
0

Actions

Likes
1
Downloads
12
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Unb   2012.1 - dweb - 05 - css3 - fundamentos Unb 2012.1 - dweb - 05 - css3 - fundamentos Presentation Transcript

    • Curso Superior de Tecnologia em Design GráficoDWEB - Design paraWeb 5 CSS3: Fundamentos “E não vos conformeis com este século, mas transformai-vos pela renovação da vossa mente, para que experimenteis qual seja a boa, agradável e perfeita vontade de Deus..” Romanos 12:21 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
    • DWEB - Design para Web / Carlos José Contato Carlos José carlosjose.unibratec@gmail.com www.carlosjose.net twitter.com/carlosjoser2n2 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
    • DWEB - Design para Web / Carlos José Objetivo da Aulan Apresentar os fundamentos da linguagem de formatação CSS.3 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
    • DWEB - Design para Web / Carlos José Agendan  O que é CSS?n  Sintaxe CSSn  Como inserir CSS em documentos HTMLn  Seletoresn  Medidas4 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
    • DWEB - Design para Web / Carlos José CSS - Cascading Style Sheetsn  O que é CSS? î  CSSé a sigla para Cascading Style Sheets, que pode ser traduzida para Folhas de Estilo em Cascata. n  A especificação CSS1 foi criada em 1996 pela W3C (World Wide Web Consortium www.w3c.org), com o objetivo de substituir as marcações HTML de formatação, separando assim a camada de apresentação (CSS) e a camada de informação (xHTML). î  CSS é uma linguagem simples e de fácil aprendizagem para a criação de layouts para web sites. n  É trabalho do CSS controlar cores, tamanho, tipografia e posicionamento dos elementos em um site.5 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
    • DWEB - Design para Web / Carlos José CSS - Cascading Style Sheetsn  Por que devemos utilizar CSS? î CSSapesar de simples e de fácil aprendizagem, é uma poderosa e precisa linguagem de formatação, que reduz drasticamente o consumo de banda do usuário pelo site. n  É uma linguagem padronizada pela W3C e é bem suportada por todos os navegadores modernos. n  Segue o link oficial com todas as referências do CSS î  http://www.w3schools.com/css/css_reference.asp6 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
    • DWEB - Design para Web / Carlos José CSS - Cascading Style Sheetsn  Quais as vantagens em se usar CSS? î Separando a formatação do conteúdo, a manutenção do site torna-se mais fácil. î Alterações no layout podem ser feitas sem a necessidade de se alterar o documento HTML, e o contrário também é verdadeiro; î Separar a formatação do conteúdo torna o site mais acessível.7 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
    • DWEB - Design para Web / Carlos José CSS + HTML HTML = conteúdo CSS = aparência8 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
    • DWEB - Design para Web / Carlos José XHTMLn  Comparando o velho com o novo! HTML XHTML9 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
    • DWEB - Design para Web / Carlos José Comparando o velho com o novo! HTML10 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
    • DWEB - Design para Web / Carlos José Comparando o velho com o novo! XHTML11 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
    • DWEB - Design para Web / Carlos José Comparando o velho com o novo! HTML12 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
    • DWEB - Design para Web / Carlos José Comparando o velho com o novo! XHTML13 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
    • DWEB - Design para Web / Carlos José HTML - uma estrutura de árvore html header body title ul li li li14 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
    • DWEB - Design para Web / Carlos José HTML - uma estrutura de árvore html Antecessor header body Descendente title ul Descendente li li li15 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
    • DWEB - Design para Web / Carlos José CSS - Cascading Style Sheetsn  Regra CSS î Escreverregras de CSS é muito simples. A sintaxe segue o seguinte modelo: seletor {propriedade: valor; propriedade: valor} seletor { propriedade: valor; propriedade: valor } Quando existir mais de uma propriedade, costuma-se endentar a declaração para facilitar a leitura!16 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
    • DWEB - Design para Web / Carlos José CSS - Cascading Style Sheetsn  Sintaxe CSS Seletor p { color: #ff0000; font-weight: bold; text-align: center; border: 1px solid #ff0000 } Propriedade Valor17 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
    • DWEB - Design para Web / Carlos José CSS - Cascading Style Sheetsn  Sintaxe CSS î Comentário em CSS n  Deve-se usar os delimitadores /* */, e deve ser usado para fazer comentário de uma única linha de texto ou de um bloco de texto. /* inicio da formatacao*/ seletor { propriedade: valor; propriedade: valor } /*fim*/18 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
    • DWEB - Design para Web / Carlos José CSS - Cascading Style Sheetsn  Antes de qualquer coisa! CSS3 - Fundamentos inline.html incorporado.html externo.html css style.css19 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
    • DWEB - Design para Web / Carlos José CSS - Cascading Style Sheetsn  Como inserir um CSS num documento HTML î Existem 3 formas: n  Estilos inline; n  Estilos incorporados; n  Estilos externos.20 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
    • DWEB - Design para Web / Carlos José CSS - Cascading Style Sheetsn  Como inserir um CSS num documento HTML î Estilos inline; n  Folhas de estilo inline são declaradas diretamente na marcação HTML que se quer formatar, através do atributo style. n  Sua formatação só é válida para aquele elemento em particular. n  Seu uso deve ser extremamente limitado ou restrito a poucas páginas, pois essa técnica retira toda a flexibilidade do CSS: quaisquer mudanças na formatação deverá ser feita diretamente na marcação que se deseja mudar.21 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
    • DWEB - Design para Web / Carlos José CSS - Cascading Style Sheets inline.html<!DOCTYPE html><html> <head> <meta charset=“utf-8” /> <title>CSS3 - Fundamentos</title> </head><body><h1>CSS3 - Fundamentos</h1><p style="color:#ff0000;font-weight:bold;text-align:center;border:1px solid #ff0000">O texto deste parágrafo serávermelho, negrito e centralizado, e terá uma borda vermelhade 1 pixel de largura ao redor dele.</p><p>O texto deste parágrafo está sem formatação.</p> </body></html>22 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
    • DWEB - Design para Web / Carlos José CSS - Cascading Style Sheetsn  Como inserir um CSS num documento HTML î Estilos incorporados; n  Folhas de estilo incorporados só são válidas para apenas um documento específico. n  A especificação do CSS é feita dentro do elemento <head>, através da marcação <style>. n  Os atributos possíveis para a marcação <style> são: î  type: especifica o tipo de conteúdo dentro do elemento. Seu valor para CSS é text/css; î  media: especifica o tipo de mídia ao qual serão aplicados os estilos.23 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
    • DWEB - Design para Web / Carlos José CSS - Cascading Style Sheets<!DOCTYPE html><html> <head> incorporado.html <meta charset=“utf-8” /> <title>CSS3 - Fundamentos</title> <style type=“text/css”> p{ color:#ff0000; font-weight:bold; text-align:center; border:1px solid #ff0000" } </style> </head><body><h1>CSS3 - Fundamentos</h1><p>O texto deste parágrafo será vermelho, negrito e centralizado, eterá uma borda vermelha de 1 pixel de largura ao redor dele.</p><p>O texto deste parágrafo também está com a formatação.</p> </body></html>24 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
    • DWEB - Design para Web / Carlos José CSS - Cascading Style Sheetsn  Como inserir um CSS num documento HTML î  Estilos externos; n  É um simples arquivo de texto, mas com extensão css, onde ficam contidas as declarações das regras de estilo. n  Este arquivo é vinculado a um ou mais documentos XHTML através da marcação <link>, que deve ser escrita dentro do cabeçalho do documento, ou seja, dentro da marcação <head></head>. n  Esta é a melhor forma de se inserir CSS em um site. n  Toda a formatação do site ficará contida em um único arquivo, e qualquer alteração neste arquivo, mudará a formatação em todos os demais documentos do site.25 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
    • DWEB - Design para Web / Carlos José CSS - Cascading Style Sheetsn  Como inserir um CSS num documento HTML î Estilos externos; n  Osatributos possíveis para a marcação <link > para CSS são: î  rel: especifica o tipo de relação existente entre o documento atual e o documento para qual a marcação <link /> está apontando. §  O valor declarado para este atributo será: stylesheet. î  type: especifica o tipo de conteúdo dentro do elemento. §  Seu valor para CSS é: text/css; î  href: deve indicar o local em que o arquivo CSS está armazenado. §  Seu valor deve ser uma URL.26 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
    • DWEB - Design para Web / Carlos José CSS - Cascading Style Sheets<!DOCTYPE html> externo.html<html> <head> <meta charset=“utf-8” /> <title>CSS3 - Fundamentos</title> <link rel=“stylesheet” type=“text/css” href=“css/style.css”/> </head><body><h1>CSS3 - Fundamentos</h1><p>O texto deste parágrafo será vermelho, negrito ecentralizado, e terá uma borda vermelha de 1 pixel de larguraao redor dele.</p><p>O texto deste parágrafo também está com a formatação.</p> </body></html>27 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
    • DWEB - Design para Web / Carlos José CSS - Cascading Style Sheets style.css @charset "utf-8"; /* CSS Document */ p { color: #ff0000; font-weight: bold; text-align: center; border: 1px solid #ff0000; }28 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
    • DWEB - Design para Web / Carlos José Perguntas ?29 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
    • DWEB - Design para Web / Carlos José Considerações FinaisFonte: Silva, Maurício Samy., CSS3: Desenvolva Aplicações Web Profissionais com o uso dos poderososrecursos de estilização das CSS3, São Paulo, Novatec Brasil, 2012; http://www.w3schools.com30 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12