O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

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

353 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
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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.

×