quinta-feira, 23 de maio de 2019

Listas

lista não-ordenada

<ul>
  <li>Primeiro item da lista</li>
  <li>
    Segundo item da lista:
    <ul>
      <li>Primeiro item da lista aninhada</li>
      <li>Segundo item da lista aninhada</li>
    </ul>
  </li>
  <li>Terceiro item da lista</li>
</ul>

lista ordenada.

<ol>
  <li>Primeiro item da lista</li>
  <li>Segundo item da lista</li>
  <li>Terceiro item da lista</li>
  <li>Quarto item da lista</li>
  <li>Quinto item da lista</li>
</ol>


lista de definição.

<dl>
  <dt>HTML</dt>
  <dd>
    HTML é a linguagem de marcação de textos utilizada
    para exibir textos como páginas na Internet.
  </dd>
  <dt>Navegador</dt>
  <dd>
    Navegador é o software que requisita um documento HTML
    através do protocolo HTTP e exibe seu conteúdo em uma
    janela.
  </dd>
</dl>


list-style-type no CSS:

  ul {
    /* alterar para circulo antes de cada <li> da lista não-ordenada */
    list-style-type: circle;
  }

  ol {
    /* alterar para uma sequência alfabética antes de cada <li> da lista ordenada */
    list-style-type: upper-alpha;
  }

Acceptable keyword values for list-style-type include:

  • disc
  • circle
  • square
  • decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • lower-greek
  • lower-latin
  • upper-latin
  • armenian
  • georgian
  • lower-alpha
  • upper-alpha
  • none

CSS






# = id
. = class

Exemplos:

#para {
  text-align: center;
  color: red;
}

.center {
  text-align: center;
  color: red;
}

Propriedades tipográficas e fontes

font-family: tipo de fonte

h1 { 
 font-family: serif; 

h2 { 
 font-family: sans-serif; 

p { 
  font-family: monospace; 
}

text-align: alinhamento do texto


p { 
  text-align: right; 
}

center,justify,left


É possível configurar também uma série de espaçamentos de texto com o CSS: 

p { 
  line-height: 3px; /* tamanho da altura de cada linha */  
  letter-spacing: 3px; /* tamanho do espaço entre cada letra */ 
  word-spacing: 5px; /* tamanho do espaço entre cada palavra */ 
  text-indent: 30px; /* tamanho da margem da primeira linha do texto */ 
}


Imagem de fundo:

h1 {
  background-image: url(link-da-imagem.jpg);
}


Bordas:




body { 
  border-color: red; 
  border-style: solid; 
  border-width: 1px; 
}

ou

body { 
  border: 1px solid red; 
}


Cores:

h1 { 
  color: red; 

h2 { 
  background-color: yellow; 
}

RGB:

h3 { 
  color: rgb(255, 200, 0); 
}

notação hexadecimal

h3 { 
  background-color: #f2eded; 
}

Espaçamento, margem e dimensões


Padding (Espaçamento)


  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
Se passados quatro valores, serão aplicados respectivamente a padding-toppadding-rightpadding-bottom e padding-left. Para facilitar a memorização dessa ordem, basta lembrar que os valores são aplicados em sentido horário.
p {
  padding: 10px 20px 15px 5px;
}

Margin (margem)

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
p {
  margin: 10px 20px 15px 5px;
}

Há ainda uma maneira de permitir que o navegador defina qual será a dimensão da propriedade padding ou margin conforme o espaço disponível na tela: definimos o valor auto para os espaçamentos que quisermos.
p {
  margin: 0 auto;
}


Dimensões

É possível determinar as dimensões de um elemento, por exemplo:
p {
  background-color: red;
  height: 300px;
  width: 300px;
}


HTML TAGS


Estrutura HTML:


<html>
   <head></head>
   <body></body>
</html>


Comentário:

<!--este é um comentário-->


Titulo:

<h1>Mirror Fashion</h1>


Exemplo:

Este é um texto <h1>

Este é um texto <h2>

Este é um texto <h3>

Este é um texto <h4>

Este é um texto <h5>
Este é um texto <h6>

Imagem:

<img src="img/produto1.png" alt="Foto do Fuzz Cardigan">

atributos:
src: link da imagem
alt: descrição da imagem (não é obrigatório)

Parágrafo:

<p>Este é um paragrafo..</p>

Marcações de enfase:

Negrito <strong>: strong
Itálico <em>: em
Diminuir texto <small>: small

Arquivo Externo:

<link rel="stylesheet" href="estilo.css">

Lista de atributos para arquivo externo:
https://www.w3schools.com/tags/att_link_rel.asp


tag de âncora <a>

<p> Visite o site da <a href="http://www.google.com.br">Google</a>. </p>



quinta-feira, 7 de abril de 2016

POPMUNDO - ÁRVORE DE HABILIDADES



ARTÍSTICO
Atuação
Básico de artes e design >★★★Entalhe
★★Arte do graffiti
Manufatura de chapéus(+1)
Costura básica >★★Manufatura de chapéus(+1)
Fotografia >★★Cinematografia
★★Análise de imagens
BOMBEIRO
Combate a incêndios
CIÊNCIA
Ciência básica >★★★Ciência avançada
★★Geologia
★★Química >★★★Química do tabaco(+2)
★★★Engenharia ambiental(+2)
★★★Bioquímica(+2)
★★Incendiar (+1)
★★Destilação
Produção de queijo(+1)
Didática básica >★★★Pedagogia avançada(+1)
Engenharia básica >★★★Engenharia avançada
★★★Engenharia ambiental(+2)
História antiga >★★Idiomas clássicos(+1)
Informática >★★★★★Segurança de rede
★★★★★Quebrando senhas
★★★★★Mineração de dados
★★★★★Decodificação de dados
Linguística >★★Idiomas clássicos(+1)
Psicologia básica >★★Hipnose avançada
CIÊNCIA PARANORMAL
Dispositivos paranormais de rastreamento
CRIMINAL
Arte do crime >★★★★★Fuga da prisão
★★★★★Mestre em bater carteira
★★★★★Técnicas de arrombamento >★★★★★Desvendar
Fechaduras>★★★★★Arrombar cofres
★★★Furto
★★Contrabando
★★Incendiar
Sobrevivendo nas ruas
Falcatrua(+1)
Exploração criminal
Furtividade básica
DIVERSO
Ferramentas pesadas
Truta Fu
ESPIRITUAL
Astrologia básica
Religião >★★Ritual de invocação
ESPORTES
BÁSICO DE ARTES MARCIAIS >★★★Aikido
★★★Luta com punhos(+1) >★★★Luta com punhos avançada(+1)
★★Kung Fu
★★Mestre em Jiu-jítsu
Sobrevivendo nas ruas
IOGA BÁSICO >★★★Mestre em Yoga
★★Sexo tântrico
Básico de esportes com raquete
Futebol
Surfar
Vôlei
ESTILO MUSICAL
Blues
Clássica
Country & Western
Eletrônica
Flamenco
Heavy Metal
Hip Hop
Jazz
Modern Rock
Musica Africana
Musica Latina >Manufatura de charutos
Pop
Punk Rock
Reggae
Rhythm & Blues
Rock >Festejar a noite toda(+1)
World Music
INSTRUMENTO MUSICAL
INSTRUMENTOS DE TECLAS >★★Piano
★★Acordeão
INSTRUMENTOS DE CORDA >★★Violão
★★Banjo
★★Baixo
★★Violino
★★Dobro
★★Violoncelo
★★Contrabaixo acústico
★★Dulcimer
★★Harpa
★★Alaúde
★★Bandolin
★★Ukulele
★★Cítara
★★Guitarra
★★Pau elétrico
INSTRUMENTOS DE PERCUSSÃO >★★Bateria
★★Tambor africano
★★Xilofone
INSTRUMENTOS DE SOPRO DE MADEIRA >★★Flauta
★★Gaita
★★Saxofone
★★Gaita de fole
★★Clarinete
★★Oboé
★★Flauta de pã
INSTRUMENTOS DE SOPRO DE METAL >★★Trompete
★★Tuba
★★Trombone
TÉCNICAS DE CANTO >★★Vocal principal
★★Segunda voz
★★Rap básico
BÁSICO DE INSTRUMENTOS ELETRÔNICOS >★★Técnicas avançadas de DJ
Didgeridoo
MANUFATURA
Culinária >★★★Panificação
★★★Mixologia
★★Química do tabaco(+2)
Agricultura(+2) >Produção de queijo(+1)
MEDICINA
Medicina >★★★Medicina profissional >★★Farmacologia avançada(+1)
★★★Farmacologia >★★★Farmacologia avançada(+1)
★★Bioquímica(+2)
★★★Medicina veterinária >Captura de animais(+1)
★★Análise de DNA(+1)
MUSICAL
Básico de Letras >★★★Poesia avançada
COMPOSIÇÃO DE MELODIAS>★★
Compondo para a plateia cantar junto
★★Compondo baladas
★★Compondo músicas fáceis de escutar
★★Compondo hinos
★★Compondo músicas para multidões
★★Compondo músicas para músicos
★★Compondo músicas simples
★★Improvisação musical
★★Produção de Discos
NATUREZA E RECURSOS
Botânica básica >★★★Botânica avançada >Bioquímica (+2)
★★★Química do tabaco (+2)
★★★Sobrevivência na selva
Captura de animais (+1)
Agricultura(+2) >Produção de queijo (+1)
Engenharia ambiental (+2)
Entomologia
Pescaria
NEGÓCIOS
Economia >★★Contabilidade >★★Falcatrua(+1)
Manipulação da mídia >★★★Manipulação extrema(+2)
★★Relações públicas (+1)
PALCO E PERFORMACE
PRESENÇA DE PALCO>★★Presença de Palco Profissional
★★Cuspir fogo
★★Consciência do público
★★Pular do palco
MAQUIAGEM >★★Disfarce
Básico de efeitos especiais >★★Técnicas de iluminação
★★Efeitos pirotécnicos avançados
Dança >★★Moonwalking
★★Dança erótica
★★Dançando break
★★Dança popular
★★Dança profissional
Desfile
Fashion
Modelo
POLICIAL
Básico sobre armas de fogo >★★Ações e táticas especiais(+1)
Direito básico
Investigação >★★
Reconhecimento de impressão digital
★★Análise de DNA (+1)
★★Análise de imagens(+1)
★★Ações e táticas especiais(+1)
★★Operações à paisana
SEXUAL
Sexo
SOCIAL
Adestramento de animais >Agricultura(+2) >Produção de queijo(+1)
Básico de ilusionismo>★★Ilusionismo de palco
Contar piadas>★★★Comédia profissional
Criação de filhos
Etiqueta>★★Etiqueta profissional
Hábito de beber apropriadamente>★★★Festejar a noite toda(+1)
Liderança básica
Manha das ruas >★★★Sobrevivendo nas ruas(+2) >★★Luta com punhos avançada(+1)
★★★Conhecimento das ruas (+1)
★★★Luta com punhos >★★★Luta com punhos avançada(+1)
Planejamento de festas
Política básica
Retórica >★★★Retórica profissional
★★★Manipulação extrema(+2)
★★Relações públicas(+1)★★Manipulação extrema(+2)
Pedagogia avançada(+1)
Sensualidade