HTML 4.1 - Aula 11
Canal Effeccinco
Revisão da Aula Anterior
 Na ultima aula nós aprendemos:
 O que é CSS
 Como colocar diretamente na sua página html.
 C...
Conteúdo dessa Aula
 Na ultima aula nós vimos por cima o que o CSS é capaz de fazer, nessa aula nós vamos nos voltar a
ap...
Famílias de fontes
 Existem 5 tipos de famílias de fontes no CSS, e cada uma dessas famílias compartilham algo em
comum, ...
Famíla com Serifa
 A família com Serifa, são aqueles tipos de letra que possuem uma pontinha no
final da Palavra, as pess...
Família sem Serifa
 São fontes reconhecidas por serem maiores legíveis para telas de computadores, e sans-serfi significa...
Família Monoespaçadas
 São fontes com espaçamento contínuo entre as letras, parecem serem
escritas em uma máquina de escr...
Família Cursiva
 São fontes que parecem serem escritas a mãos, geralmente usamos elas para
algum título, para deixa-lo di...
Família Fantasia
 São fontes mais decorativas, geralmente não é utilizada na Web, raramente
vai se ver esse tipo de fonte...
Colocando uma fonte na sua página
 Nós já vimos como colocar uma fonte na sua página na aula anterior, mas vamos dar uma ...
Tamanho da Fonte:
Para você alterar o tamanho da fonte no CSS, nós temos o seguinte comando:
Font-size: 12px;
Isso Define ...
Tamanho da fonte com porcentagem
 Além da definição do tamanho da fonte em pixels nós podemos definir o tamanho da fonte
...
Tamanho das fontes
 Além desses tipos nós podemos especificar o tamanho das fontes de outra
forma:
 Xx-small
 x-small
...
Colocando Negrito
 Para colocar o negrito nós temos um comando específico no CSS, que permite
que você controle bem isso ...
Colocando estilo na sua fonte
 Você pode adicionar itálico nas suas palavras usando o comando
 Font-style: italic;
 Par...
Cor da fonte
 Nós podemos também alterar a cor da fonte, nós usamos o seguinte comando:
 Color: green;
 Informamos o co...
Cores no CSS
 Nós podemos usar o RGB(Red, Green, Blue – Vermelho, verde, azul) que é um
padrão que mistura essas cores pa...
Cores no CSS
 Ainda para finalizar nós temos o padrão Hexadecimal que é um dos padrões
mais utilizados pelos webdesigners...
Quer saber mais sobre html?
 Quer ver na prática como funciona esse conteúdo , assista a essa vídeo aula no
youtube:
 ht...
Referências
 Livro: Use a Cabeça HTML, CSS e XHTML, 2º
Edição, Editora Alta Books, Elisabeth Freeman &
Eric Freeman. Capí...
Próximos SlideShares
Carregando em…5
×

Html aula 11 - CSS, Fonte, tamanho da fonte, Negrito, Itálico, Obliquo, Cor

372 visualizações

Publicada em

Curso sobre HTML - Aula 11, Nessa aula nós vamos nos aprofundar no CSS, especificamente na parte de Fonte, vamos aprender as 5 famílias de fontes, como colocar essas fontes na sua página html, qual é o melhor tipo de fonte para sua página, como colocar negrito, alterar o estilo da sua página com Itálico e Oblíquo no CSS, colocar cor no seu texto, aprenderemos como usar outros padrões de cores como o RGB e o Hexadecimal para deixar sua página da web ainda melhor e ser o melhor Webdesign possível.

Publicada em: Internet
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
372
No SlideShare
0
A partir de incorporações
0
Número de incorporações
6
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Html aula 11 - CSS, Fonte, tamanho da fonte, Negrito, Itálico, Obliquo, Cor

  1. 1. HTML 4.1 - Aula 11 Canal Effeccinco
  2. 2. Revisão da Aula Anterior  Na ultima aula nós aprendemos:  O que é CSS  Como colocar diretamente na sua página html.  Como separar o CSS para melhor manutenção.  Aprendemos a colocar com CSS o Plano de fundo, borda, Mudar a cor do texto, mudar a fonte do texto e colocar sublinhado.  Aprendemos o que é Herança no CSS.  Aprendemos a criar uma classe.  E aprendemos como validar seu CSS no site da W3C.
  3. 3. Conteúdo dessa Aula  Na ultima aula nós vimos por cima o que o CSS é capaz de fazer, nessa aula nós vamos nos voltar a aprender sobre as fontes e algumas configurações que podemos fazer nas nossas fontes, vamos aprender aonde devemos tomar cuidado com as nossas fontes.  Vocês sabiam que as fontes são separadas em famílias? Isso mesmo cada estilo tem sua família, e apenas algumas fontes são instaladas nos computadores em comum, por isso é altamente importante você saber mais sobre as fontes pois, vamos supor que você coloque uma fonte na sua página que não vai rodar na maioria dos computadores, por isso é interessante saber qual fonte escolher.  Vamos entender quais e como são essas famílias de fonte:
  4. 4. Famílias de fontes  Existem 5 tipos de famílias de fontes no CSS, e cada uma dessas famílias compartilham algo em comum, vamos conhecer cada uma delas:  Sem Serifa  Com Serifa  Monoespaçadas  Cursivas  Fantasias
  5. 5. Famíla com Serifa  A família com Serifa, são aqueles tipos de letra que possuem uma pontinha no final da Palavra, as pessoas sempre associam a esse tipo de letra, aquelas letras que são colocadas em Jornais, a mais conhecida delas é: Times New Roman  Observe como ela tem várias pontinhas.
  6. 6. Família sem Serifa  São fontes reconhecidas por serem maiores legíveis para telas de computadores, e sans-serfi significa sem Serifa, veja um exemplo de fonte sem serifa Arial Black  Viu essas fontes cansam menor o olho, por isso são as melhores para computadores.
  7. 7. Família Monoespaçadas  São fontes com espaçamento contínuo entre as letras, parecem serem escritas em uma máquina de escrever, são usadas para mostrar exemplos de códigos veja um exemplo:  Courrier  Viu como tem um espaçamento entre as palavras
  8. 8. Família Cursiva  São fontes que parecem serem escritas a mãos, geralmente usamos elas para algum título, para deixa-lo diferente, veja um exemplo: Comic Sans  Veja como as formas se parecem com a nossa escrita.
  9. 9. Família Fantasia  São fontes mais decorativas, geralmente não é utilizada na Web, raramente vai se ver esse tipo de fonte, ela é mais utilizada em cartões onde se pode brincar com esse tipo de letra, veja um exemplo: Impact  Viu essas são as diferenças das 5 famílias.
  10. 10. Colocando uma fonte na sua página  Nós já vimos como colocar uma fonte na sua página na aula anterior, mas vamos dar uma revisada, vamos supor que queremos colocar uma fonte nos parágrafos:  P{  font-Family: Verdana, Geneva, Arial, sans-serif;  }  É muito simples é só você colocar o comando font-Family e especificar o tipo de letra, nesse exemplo nos declaramos a fonte como Verdana, mas nós sempre podemos colocar outros tipos de letra por que se não tiver o primeiro tipo instalado no computador do usuário, ela tenta rodar a próxima e assim vai até colocar a padrão que existe em todos os computadores que é a sans-serif, lembre quando você for colocar vários tipos de letras coloque tipos da mesma família como colocamos acima, todas são da família sans serif.
  11. 11. Tamanho da Fonte: Para você alterar o tamanho da fonte no CSS, nós temos o seguinte comando: Font-size: 12px; Isso Define que sua fonte vai ter 12 pixels de tamanho, o ideal é que antes de você alterar o tamanho da fonte você faça um planejamento da fonte, pode ser em um papel por exemplo, você dizer assim que todos os títulos das suas páginas agora vão receber o tamanho de 22 pixels, que o texto vai ter 14 pixels de tamanho e que sub títulos vão receber o tamanho de 18 pixels, dessa forma você pode criar classes e ir somente aplicando ao seu CSS, deixando todas as suas páginas com um padrão para que o leitor se acostume com ele.
  12. 12. Tamanho da fonte com porcentagem  Além da definição do tamanho da fonte em pixels nós podemos definir o tamanho da fonte em porcentagem, e como isso funciona, ela vai comparar com o tamanho da fonte da marcação pai, então vamos supor que você tenha uma fonte de 10 no body, e você aplica 100% do tamanho no titulo H1, isso significa que sua fonte no H1 vai ter 20 de tamanho.  Font-size: 100%;  Além desse marcador nos temos o em, que significa vezes, então você pode definir o tamanho da sua letra de acordo com a tag pai para que ela aumente em vezes por exemplo:  Font-size: 1.2em;  Ela vai aumentar 1.2 vezes o tamanho da sua letra, no caso de ser 10 o tamanho original então receberia o tamanho de 12;
  13. 13. Tamanho das fontes  Além desses tipos nós podemos especificar o tamanho das fontes de outra forma:  Xx-small  x-small  Small  Medium  Large  X-large  Xx-Large
  14. 14. Colocando Negrito  Para colocar o negrito nós temos um comando específico no CSS, que permite que você controle bem isso e a intensidade que deseja, esse comando é:  Font-weight: bold; - deixa com negrito  Font-weight: normal; –deixa sem negrito  Assim dessa forma você pode controlar melhor seu negrito nas palavras.
  15. 15. Colocando estilo na sua fonte  Você pode adicionar itálico nas suas palavras usando o comando  Font-style: italic;  Para colocar um estilo oblíquo também é muito simples:  Font-style: oblique;  Essas duas formas são bem próximas e não importa o que você use, escolha uma e siga em frente.
  16. 16. Cor da fonte  Nós podemos também alterar a cor da fonte, nós usamos o seguinte comando:  Color: green;  Informamos o comando color e depois colocamos a cor, porém escrevendo dessa forma fica muito limitado, pois nós só temos 17 cores para colocar no html, vejamos quais são elas:  Aqua, black, blue, fuchsia, gray, green, lime, maroom, navy, olive, Orange, purple, red, silver, teal, White, yellow;  Então além dessas cores simples nós podemos colocar cores, diferentes, com outros padrões veja:
  17. 17. Cores no CSS  Nós podemos usar o RGB(Red, Green, Blue – Vermelho, verde, azul) que é um padrão que mistura essas cores para formar novas cores, para isso você colocar assim:  Color: rgb(80%, 40%, 0%);  Color: rgb(200,200,0);  As porcentagens que informamos é a porcentagem de cada uma das cores, geralmente o rgb é usado por programas de manipulação de fotos como photoshop por exemplo, mas podemos pegar o rgb e usar também no html com o CSS;
  18. 18. Cores no CSS  Ainda para finalizar nós temos o padrão Hexadecimal que é um dos padrões mais utilizados pelos webdesigners, para definir nós usamos assim:  Color: #cc6600;  Esse código equivale ao RGB cada par de sequencia equivale a uma cor que vai ser misturada para formar a cor que nós desejamos, existem diversos sites na internet já com os códigos para que os webdesigners o usem, isso facilita muito.
  19. 19. Quer saber mais sobre html?  Quer ver na prática como funciona esse conteúdo , assista a essa vídeo aula no youtube:  https://www.youtube.com/watch?v=eJI7x94eN2g  Quer aulas sobre HTML, veja nosso Canal no Youtube, nos assista, curta e compartilhe:  https://www.youtube.com/channel/UC7FWW7I5ZW5T9V7dQnEtD7A/feed  Acesse o nosso Blog, e confira matérias mais completas.  www.effeccinco.wix.com/effeccinco
  20. 20. Referências  Livro: Use a Cabeça HTML, CSS e XHTML, 2º Edição, Editora Alta Books, Elisabeth Freeman & Eric Freeman. Capítulo 1 – Comece a entender o HTML.  SHARMA, Vivek. SHARMA, Rajiv. Desenvolvendo Sites de e-Commerce. São Paulo: Makron Books, 2001, 598 p.

×