HTML & CSS – aula 5
Recordando
Na aula anterior...
propriedades.css
font
font-style
font-variant
font-weight
font-size
font-family
line-height
color
text-align
text-decoration
text-transform
text-indent
text-overflow
propriedades.css
list-style
list-style-position
list-style-type
position: absolute | relative |
fixed
top
left
float
clear
/*
* sprites
*/
Cascading
Style
Sheets
Compatibilidade multi-browser
Hacks NÃO recomendados
_propriedade: valor e -propriedade: valor
• Erro de parseamento
• Internet Explorer 6 e anteriores não reconhecem caracteres não alfanuméricos
inseridos no início das propriedades CSS
• Ignorada pelos outros navegadores.
• O Internet Explorer 7 corrigiu este bug.
*propriedade: valor
• Aplicada em todos os IE e ignorada pelos outros navegadores.
• Ao contrário dos caracteres _ e - as especificações para CSS não fazem reservas
ao asterísco como prefixo, assim usar este hack pode resultar em comportamento
inesperado com a evolução das especificações CSS.
Atenção: estes hack usa CSS que não valida!
Folha de estilo própria
Comentários condicionais
• Podem ser usados como hacks css
<head>
<!--[if IE]> <link href="ie.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if lt IE 7]>
<link href="ie6_anteriores.css" rel="stylesheet“ type="text/css">
<![endif]-->
<link href=“default.css" rel="stylesheet" type="text/css">
</head>
ie.css ie6_anteriores.css default.css
Boas Práticas
Utilize a declaração abreviada das propriedades e indente seu código
.css {
margin: 12px 10px 5px 5px;
border: 1px solid #000;
}
é melhor que:
.css {
margin-top: 12px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 5px;
border-style: solid;
border-width: 1px;
border-color: #000;
}
Boas Práticas
Faça uma divisão lógica do seu CSS
/* Geral */
/* Cabeçalho */
/* Estrutura */
/* Rodapé */
/* Tabelas */
/* Formulários */
/* Botões */
outra possibilidade é usar o cssDOC
/**
* Geral
*/
Boas Práticas
Ordene as propriedades dos seletores
Por ordem alfabética
.seletor {
border
height
margin
padding
position
width
}
Por agrupamento lógico
.seletor {
[fonte e propriedades de texto]
[tamanho]
[plano de fundo]
[bordas]
[espaçamentos]
[posicionamento]
}
Boas Práticas
mainsidebar-nav
top
sidebar-social
footer
Estabelecendo padrões de nomenclaturas para classes e Ids e
Usabilidade dos nomes
conteudo
Boas Práticas
Especialize classes ao invés de criar seletores semelhantes
<!-- html -->
<div class=“box”></div>
<div class=“box green”></div>
/* css */
.box {
width: 50px;
height: 50px;
background-color: black;
}
.box.green {
background-color: green;
}
Boas Práticas
Agrupe os seletores para não repetir o código
p, a {
font: 12px Arial, Serif;
color: #000;
}
é melhor que:
p {
font: 12px Arial, Serif;
color: #000;
}
a {
font: 12px Arial, Serif;
color: #000;
}
Test Drive
1. Organize seu css segundo as boas práticas ensinadas
Curiosidades
Elementos de estrutura
<header>
<footer>
<aside> <nav>
<section>
<header>
<article>
<footer>
<!DOCTYPE html>
<html>
<header> </header>
<body>
<aside> </aside>
<section>
<header> </header>
<article> </article>
<footer> </footer>
</section>
<nav> </nav>
</body>
<footer> </footer>
<html>
$E > F <!– html -->
<div>
<ul>
<li>Dedo mindinho</li>
<li>Seu vizinho</li>
<li><a>Pai de todos</a></li>
</ul>
</div>
<div>
<p><a>Fura bolo</a></p>
<p>Mata piolho</p>
</div>
/* css */
div { width: 50px; }
p, li {
font: arial 18px #000;
}
$div > p {
background: blue;
}
• Dedo mindinho
• Seu vizinho
• Pai de todos
Fura bolo
Mata piolho
:matches :local-link <!– html -->
<div>
<ul>
<li>Dedo mindinho</li>
<li>Seu vizinho</li>
<li><a>Pai de todos</a></li>
</ul>
</div>
<div>
<p><a href=“page.html”>
Fura bolo </a></p>
<p><a href=“www.google.com”>
Mata piolho </a></p>
</div>
/* css */
p, li { font: arial 18px #000;}
div :matches(a,p) {
color: green;
}
a:local-link { color: red; }
• Dedo mindinho
• Seu vizinho
• Pai de todos
Fura bolo
Mata piolho
OBRIGADA!

HTML & CSS - Aula 5

  • 1.
    HTML & CSS– aula 5
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
    Hacks NÃO recomendados _propriedade:valor e -propriedade: valor • Erro de parseamento • Internet Explorer 6 e anteriores não reconhecem caracteres não alfanuméricos inseridos no início das propriedades CSS • Ignorada pelos outros navegadores. • O Internet Explorer 7 corrigiu este bug. *propriedade: valor • Aplicada em todos os IE e ignorada pelos outros navegadores. • Ao contrário dos caracteres _ e - as especificações para CSS não fazem reservas ao asterísco como prefixo, assim usar este hack pode resultar em comportamento inesperado com a evolução das especificações CSS. Atenção: estes hack usa CSS que não valida!
  • 7.
    Folha de estiloprópria Comentários condicionais • Podem ser usados como hacks css <head> <!--[if IE]> <link href="ie.css" rel="stylesheet" type="text/css"> <![endif]--> <!--[if lt IE 7]> <link href="ie6_anteriores.css" rel="stylesheet“ type="text/css"> <![endif]--> <link href=“default.css" rel="stylesheet" type="text/css"> </head> ie.css ie6_anteriores.css default.css
  • 9.
    Boas Práticas Utilize adeclaração abreviada das propriedades e indente seu código .css { margin: 12px 10px 5px 5px; border: 1px solid #000; } é melhor que: .css { margin-top: 12px; margin-right: 10px; margin-bottom: 5px; margin-left: 5px; border-style: solid; border-width: 1px; border-color: #000; }
  • 10.
    Boas Práticas Faça umadivisão lógica do seu CSS /* Geral */ /* Cabeçalho */ /* Estrutura */ /* Rodapé */ /* Tabelas */ /* Formulários */ /* Botões */ outra possibilidade é usar o cssDOC /** * Geral */
  • 11.
    Boas Práticas Ordene aspropriedades dos seletores Por ordem alfabética .seletor { border height margin padding position width } Por agrupamento lógico .seletor { [fonte e propriedades de texto] [tamanho] [plano de fundo] [bordas] [espaçamentos] [posicionamento] }
  • 12.
    Boas Práticas mainsidebar-nav top sidebar-social footer Estabelecendo padrõesde nomenclaturas para classes e Ids e Usabilidade dos nomes conteudo
  • 13.
    Boas Práticas Especialize classesao invés de criar seletores semelhantes <!-- html --> <div class=“box”></div> <div class=“box green”></div> /* css */ .box { width: 50px; height: 50px; background-color: black; } .box.green { background-color: green; }
  • 14.
    Boas Práticas Agrupe osseletores para não repetir o código p, a { font: 12px Arial, Serif; color: #000; } é melhor que: p { font: 12px Arial, Serif; color: #000; } a { font: 12px Arial, Serif; color: #000; }
  • 15.
    Test Drive 1. Organizeseu css segundo as boas práticas ensinadas
  • 16.
  • 18.
    Elementos de estrutura <header> <footer> <aside><nav> <section> <header> <article> <footer> <!DOCTYPE html> <html> <header> </header> <body> <aside> </aside> <section> <header> </header> <article> </article> <footer> </footer> </section> <nav> </nav> </body> <footer> </footer> <html>
  • 20.
    $E > F<!– html --> <div> <ul> <li>Dedo mindinho</li> <li>Seu vizinho</li> <li><a>Pai de todos</a></li> </ul> </div> <div> <p><a>Fura bolo</a></p> <p>Mata piolho</p> </div> /* css */ div { width: 50px; } p, li { font: arial 18px #000; } $div > p { background: blue; } • Dedo mindinho • Seu vizinho • Pai de todos Fura bolo Mata piolho
  • 21.
    :matches :local-link <!–html --> <div> <ul> <li>Dedo mindinho</li> <li>Seu vizinho</li> <li><a>Pai de todos</a></li> </ul> </div> <div> <p><a href=“page.html”> Fura bolo </a></p> <p><a href=“www.google.com”> Mata piolho </a></p> </div> /* css */ p, li { font: arial 18px #000;} div :matches(a,p) { color: green; } a:local-link { color: red; } • Dedo mindinho • Seu vizinho • Pai de todos Fura bolo Mata piolho
  • 22.

Notas do Editor

  • #7 Devido a um erro de parseamento o Internet Explorer 6 e anteriores não reconhecem caracteres não alfanuméricos inseridos no início das propriedades CSS. Iniciando a escrita de uma propriedade com o caractere _ou - faz com que a regra CSS seja aplicada pelo Internet Explorer 6 e anteriores e ignorada pelos outros navegadores. O Internet Explorer 7 corrigiu este bug.
  • #8 outra forma é o javascript
  • #19 <header> - cabeçalho da página ou de uma seção (não confundir com a tag <head>); <section> - cada seção do conteúdo; <article> - um item do conteúdo dentro da página ou da seção; <footer> - o rodapé da página ou de uma seção; <nav> - o conjunto de links que formam a navegação, seja o menu principal do site ou links relacionados ao conteúdo da página; <aside> - conteúdo relacionado ao artigo (como arquivos e posts relacionados em um blog, por exemplo).