• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML&CSS 4 - Intermediate CSS (1/2)
 

HTML&CSS 4 - Intermediate CSS (1/2)

on

  • 1,379 views

Slides for my in-house HTML & CSS trainning at SAPO.

Slides for my in-house HTML & CSS trainning at SAPO.

Intermediate CSS: the cascade, inheritance and text styling.

Statistics

Views

Total Views
1,379
Views on SlideShare
1,375
Embed Views
4

Actions

Likes
2
Downloads
72
Comments
1

1 Embed 4

http://drive-html-viewer.pansy.at 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

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

    HTML&CSS 4 - Intermediate CSS (1/2) HTML&CSS 4 - Intermediate CSS (1/2) Presentation Transcript

    • HTML& CSSDINIS CORREIA 2011 cbn
    • HTML 4& CSSDINIS CORREIA 2011 cbn
    • CSS 1 HTML + CSS 2 CASCADE E INHERITANCE 3 ESTILIZAR TEXTO
    • 3 ESTILIZAR TEXTOCSS ⇪na sessão anterior...
    • BENEFÍCIOSSeparação do conteúdo e apresentação 1. Acessibilidade 2. Flexibilidade 3. Largura de banda
    • SELECTOR DECLARAÇÃO p  { color:  blue; REGRA } PROPRIEDADE VALOR
    • SINTAXE 1. Elementoselectores 2. Class 3. ID
    • p  {  ...  }
    • .lead  {  ...  }
    • #logo  {  ...  }
    • p  {  color:  blue;  } h2  {  color:  blue;  }p,  h2  {  color:  blue;  }
    • 1. Descendent 2. Child 3. Universal SINTAXE 4. Adjacent siblingselectores  avançados 5. Attribute 6. Multiple classes 7. Pseudo-classes 8. Pseudo-elements
    • 1. Descendent 2. Child 3. Universal SINTAXE 4. Adjacent siblingselectores  avançados 5. Attribute 6. Multiple classes 7. Pseudo-classes 8. Pseudo-elements
    • CSS div  strong  {  color:  blue;  }HTML<div><strong>Alerta!</strong></div><div><h2><strong>Alerta!</strong></h2></div>
    • CSS .lead.destaque  {  color:  blue;  }HTML<p  class="lead">Lorem  ipsum  dolor....</p><p  class="destaque">Lorem  ipsum  dolor....</p><p  class="lead  destaque">Lorem  ipsum  dolor....</p>
    • CSS .destaque  {  color:  blue;  } .lead  {  margin:  2px;  }HTML<p  class="lead">Lorem  ipsum  dolor....</p><p  class="destaque">Lorem  ipsum  dolor....</p><p  class="lead  destaque">Lorem  ipsum  dolor....</p>
    • a:link  {  ...  }a:visited  {  ...  } a:focus  {  ...  } a:hover  {  ...  } a:active  {  ...  }
    • p:first-­‐letter  {  ...  } p:first-­‐line  {  ...  } :before  {  ...  } :after  {  ...  }
    • HTML + CSS
    • HTML + CSS 1. Inline 2. Embed 3. External
    • HTML + CSS 1. Inline 2. Embed 3. External
    • <p  style="color:  blue;">Lorem  ipsum  dolor.</p>
    • HTML + CSS 1. Inline 2. Embed 3. External
    • <head> <title>Um  título</title> <meta  name="description"  content="A  descrição  da  página"> <meta  name="keywords"  content="vídeos,fotos,pesquisa"> <style> p  { color:  blue; } </style></head>
    • HTML + CSS 1. Inline 2. Embed 3. External
    • <head> <title>Um  título</title> <meta  name="description"  content="A  descrição  da  página"> <meta  name="keywords"  content="vídeos,fotos,pesquisa"> <link  type="text/css"  rel="stylesheet"  media="screen"  href="style.css"></head>
    • CASCADE &INHERITANCE
    • User User Authoragent
    • User User Authoragent
    • INHERITANCE
    • HERDAM NÃO HERDAM color background font borderletter-spacing display line-height float/clear list-style height/width text-align margin text-indent outlinetext-transform overflow white-space paddingword-spacing position ... ...
    • CSS body  {  font-­‐family:  Arial;  }
    • CSS p  {  border:  inherit;  }
    • CASCADE
    • CSS p  {  color:  blue;  } p  {  color:  red;  }
    • CSS p  {  color:  blue;  } p  {  color:  red;  }
    • CONFLITOS 1. Origem resolvidos  por 2. Especificidade 3. Ordem
    • CONFLITOS 1. Origem resolvidos  por 2. Especificidade 3. Ordem
    • 1 2 3 User User Author agent
    • 1 2 3 User User Author agent 4 5 Author User !important !important
    • CSS p  {  color:  blue;  } p  {  color:  red  !important;  }
    • Useragent p  {  color:  blue;  } UserAuthor
    • Useragent p  {  color:  blue;  } User p  {  color:  yellow;  }Author
    • Useragent p  {  color:  blue;  } User p  {  color:  yellow;  }Author p  {  color:  green;  }
    • Useragent p  {  color:  blue;  } User p  {  color:  yellow;  } p  {  color:  green;  }Author p  {  color:  blue  !important;  }
    • Useragent p  {  color:  blue;  } p  {  color:  yellow;  } User p  {  color:  black  !important;  } p  {  color:  green;  }Author p  {  color:  blue  !important;  }
    • CONFLITOS 1. Origem resolvidos  por 2. Especificidade 3. Ordem
    • CONFLITOS 1. Origem resolvidos  por 2. Especificidade 3. Ordem
    • PONTUAÇÕES PARA CSSFOTO DE MICHAEL PICK cHTTP://FLIC.KR/P/6ZXG7A
    • p  {  color:  blue;  }#containter  .nav  p  {  color:  red;  }
    • Inline ID Class Elements0 0 0 0
    • CSS <p  style="color:  red;">Um  parágrafo.</p> Inline ID Class Elements 1 0 0 0
    • CSS #container  {  color:  red;  } Inline ID Class Elements 0 1 0 0
    • CSS .nav  {  color:  red;  } Inline ID Class Elements 0 0 1 0
    • CSS p  {  color:  red;  } Inline ID Class Elements 0 0 0 1
    • CSS p  {  color:  blue;  } .lead  {  color:  red;  }
    • CSS p  {  color:  blue;  } .lead  {  color:  red;  }
    • CSS #container  .content  p  {  color:  red;  } Inline ID Class Elements 0 1 1 1
    • CSS#container  .content  p:first-­‐line  {  color:  red;  } Inline ID Class Elements 0 1 2 1
    • CSS #container  .content  p  strong  {  color:  red;  } Inline ID Class Elements 0 1 1 2
    • CONFLITOS 1. Origem resolvidos  por 2. Especificidade 3. Ordem
    • CONFLITOS 1. Origem resolvidos  por 2. Especificidade 3. Ordem
    • CSS .content  p  {  color:  blue;  } .content  p  {  color:  red;  }
    • CSS .content  p  {  color:  blue;  } .content  p  {  color:  red;  }
    • EXERCÍCIOFOTO DE SOCIALISBETTER cHTTP://FLIC.KR/P/5BMFB7
    • Useragent h2  {  color:  blue;  } User h2  {  color:  yellow;  }Author
    • Useragent h2  {  color:  blue;  } User h2  {  color:  yellow;  }Author
    • Useragent h2  {  color:  blue;  } User h2  {  color:  yellow;  }Author h2  {  color:  red;  }
    • Useragent h2  {  color:  blue;  } User h2  {  color:  yellow;  }Author h2  {  color:  red;  }
    • Useragent h2  {  color:  blue;  } User h2  {  color:  yellow;  } h2  {  color:  red;  }Author <h2  style="color:  black;">Título</h2>
    • Useragent h2  {  color:  blue;  } User h2  {  color:  yellow;  } h2  {  color:  red;  }Author <h2  style="color:  black;">Título</h2>
    • Useragent h2  {  color:  blue;  } h2  {  color:  yellow;  } User h2  {  color:  green  !important;  }Author <h2  style="color:  black;">Título</h2>
    • Useragent h2  {  color:  blue;  } h2  {  color:  yellow;  } User h2  {  color:  green  !important;  }Author <h2  style="color:  black;">Título</h2>
    • CSS p.lead  {  color:  blue;  } p  {  color:  red;  }
    • CSS p.lead  {  color:  blue;  } p  {  color:  red;  }
    • CSS p.lead  {  color:  blue;  } p  {  color:  red;  } p.lead  {  color:  black;  }
    • CSS p.lead  {  color:  blue;  } p  {  color:  red;  } p.lead  {  color:  black;  }
    • CSS #container  p  {  color:  white;  } p.lead  {  color:  blue;  } p  {  color:  red;  } p.lead  {  color:  black;  }
    • CSS #container  p  {  color:  white;  } p.lead  {  color:  blue;  } p  {  color:  red;  } p.lead  {  color:  black;  }
    • ESTILIZAR TEXTO
    • ESTILIZAR TEXTO font-­‐size
    • CSS p  {  font-­‐size:  12px;  }
    • px em %keywords
    • ABSOLUTAS pxRELATIVAS em % keywords
    • ABSOLUTAS pxRELATIVAS em % keywords
    • ABSOLUTAS px font-­‐size:  12px;RELATIVAS em font-­‐size:  1.3em; % font-­‐size:  80%; keywords font-­‐size:  small;
    • CSS body  {  font-­‐size:  16px;  } p  {  font-­‐size:  0.86em  } 14px / 16px = 0.86
    • CSS body  {  font-­‐size:  62,5%;  } p  {  font-­‐size:  1.2em  } 10px x 1.2em = 12px
    • ESTILIZAR TEXTOfont-­‐family
    • CSS body  {  font-­‐family:  Helvetica,  Arial,  sans-­‐serif;  }
    • CSS body  {  font-­‐family:  "Times  New  Roman",  serif;  }
    • Exemplo serifExemplo sans-serifExemplo monospaceExemplo cursiveExemplo fantasy
    • Sans-serif Serif
    • ESTILIZAR TEXTO font-­‐style font-­‐weight font-­‐variant
    • CSS p  {  font-­‐style:  italic;  }   p  {  font-­‐style:  oblique;  }   p  {  font-­‐style:  normal;  }  
    • CSS p  {  font-­‐variant:  small-­‐caps;  }   p  {  font-­‐variant:  normal;  }  
    • CSS p  {  font-­‐weight:  normal;  }   p  {  font-­‐weight:  bold;  }   p  {  font-­‐weight:  400;  }
    • ESTILIZAR TEXTO shorthand
    • CSS body  {  font:  italic  normal  bold  12px  Helvetica,  Arial,  sans-­‐serif  }
    • CSS body  {  font:  italic  normal  bold  12px  Helvetica,  Arial,  sans-­‐serif  } -style -weight -family -variant -size
    • ESTILIZAR TEXTOoutras  propriedades
    • CSS p  {  text-­‐align:  right;  }   p  {  text-­‐align:  left;  } p  {  text-­‐align:  center;  } p  {  text-­‐align:  justify;  }  
    • CSS p  {  letter-­‐spacing:  0.05em;  }   p  {  word-­‐spacing:  0.3em;  }
    • CSS p  {  text-­‐indent:  10px;  }  
    • CSS p  {  text-­‐indent:  1.5em;  }  
    • CSS p  {  text-­‐transform:  uppercase;  }   p  {  text-­‐transform:  lowercase;  } p  {  text-­‐transform:  none;  }  
    • CSS p  {  text-­‐decoration:  underline;  }   p  {  text-­‐decoration:  line-­‐through;  } p  {  text-­‐decoration:  none;  }  
    • CSS p  {  line-­‐height:  16px;  }   p  {  line-­‐height:  1em;  } p  {  line-­‐height:  1.5;  }