{"id":1384,"date":"2022-05-22T01:59:47","date_gmt":"2022-05-22T04:59:47","guid":{"rendered":"https:\/\/liag.ft.unicamp.br\/act\/?p=1384"},"modified":"2023-02-03T22:52:58","modified_gmt":"2023-02-04T01:52:58","slug":"desenvolvimento-web-2-0-aula-4-fontes-e-cores","status":"publish","type":"post","link":"https:\/\/liag.ft.unicamp.br\/act\/2022\/05\/22\/desenvolvimento-web-2-0-aula-4-fontes-e-cores\/","title":{"rendered":"Desenvolvimento Web 2.0 &#8211; Aula 4: Fontes e Cores"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Aula 4 - Desenvolvimento Web  2.0 - ACT Unicamp\" width=\"630\" height=\"354\" src=\"https:\/\/www.youtube.com\/embed\/pfhP09pZAis?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\"><sub>Inscreva-se no <a href=\"https:\/\/www.youtube.com\/channel\/UCCYzDDWYhHEt9-NODBosjqg\" target=\"_blank\" rel=\"noreferrer noopener\">canal!<\/a><\/sub><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Fontes<\/h2>\n\n\n\n<p>Fontes s\u00e3o um componente muito importante da estiliza\u00e7\u00e3o de um website<\/p>\n\n\n\n<p><strong>Font-family<\/strong> =&gt; propriedade que define a fonte do texto, ela pode receber varias fontes para caso alguma n\u00e3o esteja dispon\u00edvel sempre tenha alguma para substituir. <\/p>\n\n\n\n<p>\u25cfFont-family: &lt;fonte&gt;, &lt;fonte&gt;, &lt;fonte gen\u00e9rica&gt; <\/p>\n\n\n\n<p>\u25cfFont-family: impact; <\/p>\n\n\n\n<p>\u25cfFont-family: \u201cCantarell Light\u201d; (fontes com espa\u00e7os no nome devem ficar entre aspas)<\/p>\n\n\n\n<p>Para&nbsp; que os nossos textos sempre sigam um estilo de fonte parecido com a nossa primeira escolha existem as fontes gen\u00e9ricas que sempre estar\u00e3o dispon\u00edveis, em css temos 5:<\/p>\n\n\n\n<p>\u25cffont-family: serif; <\/p>\n\n\n\n<p>\u25cffont-family: sans-serif; <\/p>\n\n\n\n<p>\u25cffont-family: monospace;<\/p>\n\n\n\n<p> \u25cffont-family: cursive; <\/p>\n\n\n\n<p>\u25cffont-family: fantasy;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Estilos de fontes<\/h2>\n\n\n\n<p>Os estilos de fonte s\u00e3o:<\/p>\n\n\n\n<p>\u25cffont-style =&gt; propriedade que altera o estilo da fonte.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Font-styles: normal; (sem estilo)<\/li>\n\n\n\n<li>Font-style: italic; (it\u00e1lico)<\/li>\n\n\n\n<li>font-style: oblique; (obl\u00edquo, fonte normal mas inclinada)<\/li>\n<\/ul>\n\n\n\n<p>\u25cffont-weight =&gt; propriedade que define se a fonte \u00e9 est\u00e1 em negrito ou n\u00e3o.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>font-weight: normal;<\/li>\n\n\n\n<li>font-weight: bold; (negrito)<\/li>\n<\/ul>\n\n\n\n<p>\u25cfFont-variant =&gt; propriedade que define se a fonte deve ser exibida em \u201csmall caps\u201d.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>font-variant: normal;<\/li>\n\n\n\n<li>FONT-VARIANT: SMALL-CAPS; (TUDO EM MAI\u00daSCULO MAS MENOR)<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Cores<\/h2>\n\n\n\n<p>Cores s\u00e3o um aspecto fundamental de qualquer tipo de design, obviamente o CSS tamb\u00e9m vai ter m\u00e9todos para customiz\u00e1-las.<\/p>\n\n\n\n<p>CSS suporta os seguintes formatos de cores: <\/p>\n\n\n\n<p>\u25cfHexadecimal<\/p>\n\n\n\n<p>\u25cfRGB or RGBA <\/p>\n\n\n\n<p>\u25cfHSL or HSLA <\/p>\n\n\n\n<p>\u25cfNome da cor<\/p>\n\n\n\n<p>Cores podem ser definidas em diversas propriedades alguns exemplos s\u00e3o:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>#caixa {\n\tcolor: white; \/\/cor do texto\n\tbackground-color: #992ac9; \/\/cor do fundo\n\tborder-color: rgba(216, 27, 27, 1); \/\/cor da borda\n}\n\n&lt;div id=\u201dcaixa\u201d&gt;Ol\u00e1 Mundo!&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<div style=\"height:16px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"596\" height=\"242\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-320.png\" alt=\"\" class=\"wp-image-1385\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-320.png 596w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-320-300x122.png 300w\" sizes=\"(max-width: 596px) 100vw, 596px\" \/><\/figure>\n<\/div>\n\n\n<div style=\"height:21px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Exerc\u00edcio<\/h2>\n\n\n\n<p>Usar os conceitos de cores e fontes abordados na aula para formatar a p\u00e1gina \u201cexercicio.html\u201d para que tenha cores.<\/p>\n\n\n\n<p>Dica: use o site <a href=\"http:\/\/www.w3schools.com\/css\">www.w3schools.com\/css<\/a> para te ajudar<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">exerc\u00edcio.html<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"709\" height=\"608\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-321.png\" alt=\"\" class=\"wp-image-1386\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-321.png 709w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-321-300x257.png 300w\" sizes=\"(max-width: 709px) 100vw, 709px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-medium-font-size\">Arquivos da aula:<\/p>\n\n\n\n<p> <a href=\"https:\/\/drive.google.com\/drive\/folders\/1RVRQ9yerRmfH9eHuctRvsQYm99npwvI1?usp=sharing\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/drive.google.com\/drive\/folders\/1RVRQ9yerRmfH9eHuctRvsQYm99npwvI1?usp=sharing<\/a><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Fontes Fontes s\u00e3o um componente muito importante da estiliza\u00e7\u00e3o de um website Font-family =&gt; propriedade que define a fonte do texto, ela pode receber varias fontes para caso alguma n\u00e3o esteja dispon\u00edvel sempre tenha alguma para substituir. \u25cfFont-family: &lt;fonte&gt;, &lt;fonte&gt;, &lt;fonte gen\u00e9rica&gt; \u25cfFont-family: impact; \u25cfFont-family: \u201cCantarell Light\u201d; (fontes com espa\u00e7os no nome devem ficar entre [&hellip;]<\/p>\n","protected":false},"author":52,"featured_media":2925,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[1],"tags":[],"class_list":["post-1384","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sem-categoria"],"wps_subtitle":"","_links":{"self":[{"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/posts\/1384","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/users\/52"}],"replies":[{"embeddable":true,"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/comments?post=1384"}],"version-history":[{"count":5,"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/posts\/1384\/revisions"}],"predecessor-version":[{"id":2926,"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/posts\/1384\/revisions\/2926"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/media\/2925"}],"wp:attachment":[{"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/media?parent=1384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/categories?post=1384"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/tags?post=1384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}