Skip to content

Latest commit

 

History

History

css2

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 

README.md

CSS parte 2

História, a Cascata e outros Seletores, Ferramentas e Ninjas 💨

Na última aula... (1/4)

Ferramentas de Produtividade

  • Boas ferramentas possuem: Destacamento de código fonte, indentação e autocompletar
  • Atalhos interessantes no VS Code/Atom/Sublime
    • Abertura de pasta inteira
    • Esqueleto básico de um arquivo HTML
    • Uso do tab ↔️ após uma tag para autocompletar
    • Atualização automática do navegador ao salvar

Na última aula... (2/4)

Codificação e DOCTYPE

  • Exemplo de Codificação de Texto Codificação do arquivo
    • Como um texto é armazenado em seu computador?
      • ASCII
      • UNICODE e UTF-8
  • Versão do HTML
    • DOCTYPE: 
      <!DOCTYPE html>  <!-- HTML 5 👍 -->

Na última aula... (3/4)

Sobre CSS

  • Seletores de classe: uso de .curiosidades para selecionar uma classe curiosidade (previamente definido na tag pelo atributo class )
  • Incluindo arquivos CSS: 
    <link rel="stylesheet" href="estilos.css">
    • Vantagem: Reaproveita o estilo para diversas páginas

Na última aula... (4/4)

Cores e gradientes

  1. Cores 
    /* nome */
black, blue, green, white,
purple, forestgreen,
cornflowerblue, etc.

/* notação rgb/a */
rgb(255, 129, 100)
rgba(255, 129, 100, 0.5)

/* notação hexadecimal */
#ffca38
#ffca38cc
  • Gradientes (degradês): 
    p {
  background-image: linear-gradient( 45deg, blue, #00FF00 );
}

Hoje veremos

  1. Ferramentas do Desenvolvedor
  2. Aprofundando em CSS
    • História
    • A cascata
    • Outros seletores
  3. Os Ninjas

Ferramentas do Desenvolvedor

Investigando erros e experimentando propriedades

  • Ferramenta do Google Chrome
  • Alterando/testando propriedades
  • Investigando erros
    1. 📣 "Criei uma regra e ela não funcionou"
    2. 📣 "Apliquei uma propriedade e ela não apareceu"
    3. 📣 "Coloquei uma imagem ou arquivo CSS e não apareceu"

Ferramenta do Desenvolvedor

Ferramenta do desenvolvedor do Chrome

O HTML visto como uma árvore

::: figure .figure-slides.clean.flex-align-center Uma árvore com os elementos HTML Uma árvore com os elementos HTML Uma árvore com os elementos HTML Uma árvore com os elementos HTML :::

Exemplo: Alterando/testando propriedades

Usando as ferramentas

  • Visualizando o código fonte da página:
    • Tecla de atalho no Chrome: Ctrl+U
    • Ou então:
      1. clicar com botão direito do Mouse na página
      2. selecionar "Exibir código fonte da página"
  • Ferramenta do desenvolvedor:
    • Tecla de atalho padrão: Ctrl+Shift+I ou F12
    • Ou então:
      1. clicar com botão direito do Mouse na página
      2. selecionar "Inspecionar"

Vejamos alguns exemplos de como as ferramentas podem ajudar...

Investigando - "Criei uma regra e ela não funcionou"

Investigando - "Nova propriedade não funcionou"

Investigando - "Arquivo não apareceu"

Aprofundando
em CSS

CSS: Folhas de Estilo
em Cascata

  • História
  • A cascata
  • Outros seletores

*[CSS]: Cascading Style-Sheets

História

1989 - 1993 ~ Tim Berners-Lee cria a WWW em CERN e a deixa aberta ao público geral

1994 ~ ::: figure .floating-portrait-container.push-right Foto de Håkon Wium Lie ::: Håkon Wium Lie propõe uma linguagem com a responsabilidade de alterar a aparência de páginas web chamada CSS

1996 ~ Juntamente com Bert Bos, Håkon publica a especificação do CSS1 1998 ~ Já gerenciado pela W3C, o CSS2 foi publicado

1998 - 2014 ~ Desenvolvimento da especificação do CSS3 (living standard)

2013 ~ Håkon tornou-se CTO na Opera Software

[CERN]: European Organization for Nuclear Research

A Cascata

  • CSS é a sigla para Cascading Style Sheets
  • Algumas propriedades são herdadas dos elementos ascendentes 
    body {
  color: #ff0000; /* mesmo que 'red' */
}
    • Todo o texto que estiver dentro de <body>...</body>, mesmo que dentro de parágrafos ou outros elementos, ficarão vermelhos (!)
      • ::: result .push-right margin-left: 1.5em;

        Título

        ::: 
        ⋮
<style>
  body {
    color: red;
  }
</style>
</head>
<body>
  <h1>Título</h1>
  ⋮

Exemplo da cascata

<iframe width="100%" height="300" src="//jsfiddle.net/fegemo/gqgacz36/embedded/result,html,css/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
  • Clique nas abas "HTML", "CSS" e "Result". Para editar o código, clique em "Edit in JSFiddle"

Algumas propriedades (ex: color) são herdadas pelos descendentes, outras não (ex: border)

Cascata: propriedades não-herdadas

  • Para as propriedades que não são herdadas por padrão (e.g., border), podemos forçar que sejam herdadas usando o valor inherit: 
    p {
  border: 1px solid red;
}
em {
  border: inherit;
}
    ::: result

    Este é um parágrafo (<em> em 'parágrafo')

    :::

Cascata: sobrescrita de propriedade

  • Também podemos sobrescrever a herança de uma propriedade: 
    body {
  font-weight: bold;
}
em {
  font-weight: normal;  /* ou, então, font-weight: initial */
}                       /* initial é o valor padrão para aquela tag */
    ::: result

    Este é um parágrafo (<em> em 'parágrafo')

    :::

Seletores

  • Regra CSS Até agora, já sabemos selecionar elementos de 03 formas:
    1. Pelo nome de sua tag: p { color: white; }
    2. Por (uma de) suas classes: .livro { color: red;}
    3. Por seu id: #manchete-principal { color: green; }
  • Contudo, a vida não para por aí...
    • Há 20+ tipos de seletores (dos quais já vimos 3)
    • Não é necessário decorar todos, apenas saber que existem para poder consultá-los (Google) depois ;)

Desafio #1

Colorir de laranja apenas os links dentro da lista não ordenada:

  • Poderíamos usar uma classe (.marca-de-sabao) nos links da lista
    • Mas há uma forma melhor!
    • É possível fazer isso sem alterar o HTML!

Seletores de Descendente e Filho direto

  • Formato: X Y (antecessor, espaço, elemento selecionado)
    • Exemplo: 
      ul a {
  text-decoration: none;
}
      • Descrição: seleciona todos hiperlinks a que têm um ul como antecedente (pai, avô, bisavô etc.)
  • Formato: X > Y (pai, sinal de maior, elemento selecionado)
    • Exemplo: 
      #menu-principal > ul {
  padding: 20px;
}
      • Descrição: seleciona todos os ul que têm #menu-principal como pai

Exemplo: Descendente vs Filho direto

  • <p>
  <strong>Ola! <a href="http://www.google.com">Este é meu link! </a></strong>
  <a href="http://www.terra.com.br">Esta é uma outra pagina</a>
</p>
<a href="http://google.com">Este é outro link</a>
  •  

Desafio #2

Colocar uma borda rosa apenas nas imagens .jpg:

  • Poderíamos usar uma classe (.formato-jpg) nessas imagens...
    • Mas há uma forma melhor!
    • É possível selecionar elementos de acordo com seus atributos! 
      img[src$=".jpg"] {
  border: 5px solid hotpink;
}

Seletores de Atributo

  • Podemos selecionar elementos HTML de acordo com seus atributos: 
    • a[href] {
  color: blue;  /* [a] */
}
a[href="http://google.com"] {
  color: blue;  /* [b] */
}
a[href^="http"] {
  color: blue;  /* [c] */
}
a[href$=".com"] {
  color: blue;  /* [d] */
}
a[href*="google"] {
  color: blue;  /* [e] */
}
    • Há 5 variações:
      • [a] existência do atributo: [atributo]
        • Neste caso, todo <a> que possua href
      • [b] valor inteiro: [atrib="valor"]
      • [c] começo do valor: [atrib^="inicio"]
      • [d] fim do valor: [atrib$="final"]
      • [e] trecho do valor: [atrib*="trecho"]
      • Repare que esses seletores podem ser usados com qualquer elemento: 
        img[alt] {
  border: 5px solid red;
}

Exemplos de seletores de atributos

a[href$=".br"] {
  background-image: linear-gradient(45deg, green, yellow);
}
img[alt*="ninja"] {
  border: 3px solid black;
}
a[href^="http"] {
  color: purple;
}
<img src="img/a.png" alt="esta é uma ovelha">
<img src="img/b.png" alt="este é um ninja">
<a href="http://www.terra.com.br">Um site brasuca<a>
<a href="http://www.cnn.com">Um site gringo<a>

:::result . margin: 1em auto; esta é uma ovelha este é um ninja Um site brasuca Um site gringo :::

Desafio #3

Tirar o sublinhado do hyperlink quando passar o mouse sobre ele:

  • A única forma de fazer é usando seletores de estado: 
    • a:hover {
  text-decoration: none;
}

Seletores de Estado

  • Podemos selecionar elementos HTML de acordo com seus atributos: 
    • a:link {
  color: blue;  /* [a] */
}
a:hover {
  color: cyan;  /* [b] */
}
a:active {
  color: gold;  /* [c] */
}
      ::: result Um link :::
    • Há pelo menos 3 estados:
      • [a] situação inicial :link
      • [b] mouse em cima: :hover
      • [c] começo do valor: :active
      • Repare que os seletores :hover e :active podem ser usados com outros elementos: 
        tr {
  background-color: white;
}
tr:hover {
  background-color: silver;
}

Desafio #4

Centralizar todas imagens exceto uma ou outra:

  • Isso poderia ser feito colocando classes/ids nos elementos
    • Mas há outra forma, com o seletor de negação: 
      img:not(#logo) {
  display: block;
  margin: 0 auto; /* vertical: 0, horizontal: auto */
}

Seletor: Negação

  • Formato: X:not(seletor)
  • Exemplo: 
    p:not(.destacado) {
  color: gray;
}
  • Descrição: seleciona todos os elementos que não passem pelo teste do seletor
    • Ou seja, no exemplo, seleciona todos os <p> que não possuam a classe .destacado

Outros seletores

::: did-you-know .push-right width: 400px; margin-left: 1em; A parte dos seletores "com dois pontos" (eg, :not(), :hover) é chamada de pseudoclasse. Veja todas aqui. :::

  • Seletores de posição dentro do pai:
    • X:first-child
    • X:last-child
    • X:nth-child(n)
  • Seletores de posição de um tipo:
    • X:first-of-type
    • X:last-of-type
    • X:nth-of-type(n)
  • Exemplo de nth-child: 
    • <table>
  <tr><td>Linha 1</td></tr>
  <tr><td>Linha 2</td></tr>
  <tr><td>Linha 3</td></tr>
  <tr><td>Linha 4</td></tr>
</table>
    • tr:nth-child(2n) {   /*par*/
  background: white;
}
tr:nth-child(2n+1) { /* ímpar */
  background: silver;
}
    • ::: result
      ALinha 1
      BLinha 2
      CLinha 3
      DLinha 4
      :::

Os Ninjas 💨

Conheça essa gente ligeira

  • Atividade de hoje
  • Atributos alt das imagens
  • Embutindo páginas com <iframe></iframe>

Atividade de Hoje

  1. Você deve estilizar as duas páginas web dos ninjas usando os conhecimentos que vimos nas aulas anteriores
  2. Lembre-se das boas práticas - use CSS em arquivo externo
  3. Você pode modificar o HTML das páginas para colocar class e id nos elementos para os quais essa alteração seja necessária
    • Mas considere usar os seletores mais apropriados
  4. Siga os passos descritos no arquivo README.md do exercício

Atributo alt da imagem

  • Descreve textualmente a imagem
  • É recomendável que todas as imagens utilizem esta propriedade
  • Útil quando:
    • ocorreu algum erro no endereço imagem;
    • conexões lentas;
    • utiliza-se um leitor de tela para navegar na página.
  • Deve descrever bem a imagem

Atributo alt da imagem - Exemplo

  • Exemplo (imagem com endereço errado): 
    <img alt="Imagem de uma ovelha pirata" src="imagem-inexistente.jpg">
    :::result Imagem de uma ovelha pirata :::

Elemento iframe

  • Usada para embutir outra página web dentro da atual
  • Exemplo: 
    <iframe src="https://fegemo.github.io/cefet-front-end-ajax/"></iframe>
    :::result <iframe src="https://fegemo.github.io/cefet-front-end-ajax/" width="100%"></iframe> ::: - Usos comuns: - Colocar um vídeo do Youtube na página - Colocar um mapa do Google Maps na página

Referências

  1. Capítulo 7 do livro
  2. Os 30 seletores CSS que você precisa memorizar (inglês)