{"id":809,"date":"2022-04-29T19:11:20","date_gmt":"2022-04-29T22:11:20","guid":{"rendered":"https:\/\/liag.ft.unicamp.br\/act\/?p=809"},"modified":"2023-02-03T22:55:31","modified_gmt":"2023-02-04T01:55:31","slug":"desenvolvimento-web-2-0-aula-1","status":"publish","type":"post","link":"https:\/\/liag.ft.unicamp.br\/act\/2022\/04\/29\/desenvolvimento-web-2-0-aula-1\/","title":{"rendered":"Desenvolvimento Web 2.0 &#8211; Aula 1: Introdu\u00e7\u00e3o"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">O que \u00e9 CSS e para que serve?<\/h2>\n\n\n\n<p>O CSS (Cascading Style Sheets ou Folha de Estilo em Cascatas) \u00e9 um fragmento do c\u00f3digo HTML(ou documento separado) respons\u00e1vel por estilizar as p\u00e1ginas, ou seja, colocar uma cor, deixar a borda mais arredondada, mudar a fonte do texto, posicionar algum elemento mais para a esquerda ou para direita, existe uma infinidade de estilos que podemos construir com CSS.<\/p>\n\n\n\n<p><\/p>\n\n\n\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 1 - Desenvolvimento Web  2.0 - ACT Unicamp\" width=\"630\" height=\"354\" src=\"https:\/\/www.youtube.com\/embed\/naJl7d4MRgc?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\">Inscreva-se no <a href=\"https:\/\/www.youtube.com\/channel\/UCCYzDDWYhHEt9-NODBosjqg\" target=\"_blank\" rel=\"noreferrer noopener\">Canal do ACT!<\/a><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Sintaxe<\/h3>\n\n\n\n<p>Atributo style dentro de uma tag html(inline)<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"391\" height=\"73\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/06\/image-228.png\" alt=\"\" class=\"wp-image-1907\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/06\/image-228.png 391w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/06\/image-228-300x56.png 300w\" sizes=\"(max-width: 391px) 100vw, 391px\" \/><\/figure>\n\n\n\n<p>Tag &lt;style&gt;&lt;\/style&gt;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"233\" height=\"108\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/06\/image-229.png\" alt=\"\" class=\"wp-image-1908\" \/><\/figure>\n\n\n\n<p>Arquivo CSS separado<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"490\" height=\"66\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/06\/image-230.png\" alt=\"\" class=\"wp-image-1909\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/06\/image-230.png 490w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/06\/image-230-300x40.png 300w\" sizes=\"(max-width: 490px) 100vw, 490px\" \/><\/figure>\n\n\n\n<p>estilo.css:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"182\" height=\"97\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/06\/image-231.png\" alt=\"\" class=\"wp-image-1910\" \/><\/figure>\n\n\n\n<p><strong>Seletor <\/strong>\u00e9 a parte onde <strong>definimos <\/strong>quais elementos ser\u00e3o <strong>aplicados os estilos criados.<\/strong><\/p>\n\n\n\n<p><strong>\u25cf Sele\u00e7\u00e3o por elemento&nbsp;<\/strong><\/p>\n\n\n\n<p>Qual elemento HTML queremos aplicar a regra de estilo definida&nbsp;<\/p>\n\n\n\n<p>\u25cf <strong>Sele\u00e7\u00e3o por classe&nbsp;<\/strong><\/p>\n\n\n\n<p>Sele\u00e7\u00e3o de elementos por meio do nome da classe que foi definida como atributo e que tem&nbsp; como sintaxe o caractere . (ponto) seguido do nome da classe.&nbsp;<\/p>\n\n\n\n<p>\u25cf <strong>Sele\u00e7\u00e3o por ID&nbsp;<\/strong><\/p>\n\n\n\n<p>Consiste na sele\u00e7\u00e3o de elementos por meio do nome de um id que foi definido como atributo.<\/p>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Combinadores<\/h3>\n\n\n\n<p>Um <strong>elemento de combina\u00e7\u00e3o <\/strong>\u00e9 algo que explica a <strong>rela\u00e7\u00e3o entre os seletores<\/strong>.&nbsp; H\u00e1 quatro combinadores diferentes em CSS:&nbsp;&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Seletor descendente<\/strong> se trata de todos os elementos que t\u00eam a filia\u00e7\u00e3o a uma elemento especificado. Exemplo:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>div p {background-color: blue;}<\/code><\/pre>\n\n\n\n<div style=\"height:33px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Seletor filho <\/strong>corresponde a todos os elementos que s\u00e3o os filhos imediatos de um elemento especificado. Exemplo:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>div &gt; p {background-color: blue;}<\/code><\/pre>\n\n\n\n<div style=\"height:29px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Seletor irm\u00e3o adjacente<\/strong> seleciona os elementos que s\u00e3o os irm\u00e3o adjacentes de um elemento. Exemplo:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>div + p {background-color: blue;}<\/code><\/pre>\n\n\n\n<div style=\"height:31px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Seletor irm\u00e3o em geral <\/strong>seleciona os elementos que s\u00e3o imr\u00e3os (mesmo pai) de um elementos especificado. Exemplo:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>div ~ p {background-color: blue;}<\/code><\/pre>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">3 Bases do CSS<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Heran\u00e7a<\/h3>\n\n\n\n<p>Heran\u00e7a assim como na vida real \u00e9 algo que \u00e9 passado de pai para filho, na programa\u00e7\u00e3o, n\u00e3o \u00e9 diferente!<\/p>\n\n\n\n<p>Existem estilos, que ao serem atribu\u00eddos para um elemento, todos os seus elementos filhos, ou seja elementos que est\u00e3o dentro desse, recebem essa estiliza\u00e7\u00e3o automaticamente.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"314\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/04\/image-133-1024x314.png\" alt=\"\" class=\"wp-image-811\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/04\/image-133-1024x314.png 1024w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/04\/image-133-300x92.png 300w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/04\/image-133-768x235.png 768w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/04\/image-133.png 1113w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Especificidade<\/h3>\n\n\n\n<p>A especificidade \u00e9 a ordem de prioridade em que as propriedades definidas em CSS s\u00e3o utilizadas. Caso essa prioridade seja igual, vale a \u00faltima declara\u00e7\u00e3o no c\u00f3digo.<\/p>\n\n\n\n<p>Esta prioridade est\u00e1 na seguinte ordem, da menor para a maior:<\/p>\n\n\n\n<p>Seletores Universais -&gt; Classes seletoras -&gt; Seletores ID -&gt; Estilo Inline.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cascata<\/h3>\n\n\n\n<p>A cascata \u00e9 basicamente o algoritmo que o navegador decide qual estilo de CSS aplicar a cada elemento.<\/p>\n\n\n\n<p>Temos 4 n\u00edveis:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A Origem<\/li>\n\n\n\n<li>A import\u00e2ncia<\/li>\n\n\n\n<li>A Especificidade<\/li>\n\n\n\n<li>A Posi\u00e7\u00e3o<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Origem<\/h3>\n\n\n\n<p>Na camada de Origem, existem 3 principais estiliza\u00e7\u00f5es<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A feita pelo navegador que j\u00e1 vem com ele;<\/li>\n\n\n\n<li>A que o usu\u00e1rio define;<\/li>\n\n\n\n<li>A da p\u00e1gina web, que \u00e9 a que o programador define;<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Import\u00e2ncia <\/h3>\n\n\n\n<p>A Camada de import\u00e2ncia se refere basicamente a propriedade !important, que podemos passar para uma estiliza\u00e7\u00e3o dentro dos arquivos CSS, essa propriedade permite dizer que aquela estiliza\u00e7\u00e3o espec\u00edfica, \u00e9 mais importante que outra e ela ser\u00e1 priorizada<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"331\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/04\/image-134-1024x331.png\" alt=\"\" class=\"wp-image-812\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/04\/image-134-1024x331.png 1024w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/04\/image-134-300x97.png 300w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/04\/image-134-768x248.png 768w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/04\/image-134.png 1295w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Cascata | Especificidade<\/h3>\n\n\n\n<p>No terceiro n\u00edvel da cascata, temos a especificidade, onde \u00e9 levado em considera\u00e7\u00e3o a especificidade dos seletores e combinadores que foram explicadas e exemplificadas anteriormente, usando todo o que foi explicado, voc\u00ea consegue estilizar a maioria das p\u00e1ginas, sem necessitar do !important.\/t<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cascata | Posi\u00e7\u00e3o<\/h3>\n\n\n\n<p>E na \u00faltima camada, temos a posi\u00e7\u00e3o, basicamente nessa camada a posi\u00e7\u00e3o de declara\u00e7\u00e3o de cada estilo importa, estilos declarados posteriormente, sobrescrever os estilos j\u00e1 escritos, assim como a declara\u00e7\u00e3o de uma folha externa ap\u00f3s a outra sobrescreve a anterior!<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"353\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/04\/image-135-1024x353.png\" alt=\"\" class=\"wp-image-813\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/04\/image-135-1024x353.png 1024w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/04\/image-135-300x103.png 300w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/04\/image-135-768x265.png 768w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/04\/image-135.png 1433w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Exemplo de p\u00e1gina com CSS (home.html)<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"353\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/04\/image-136-1024x353.png\" alt=\"\" class=\"wp-image-814\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/04\/image-136-1024x353.png 1024w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/04\/image-136-300x103.png 300w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/04\/image-136-768x265.png 768w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/04\/image-136.png 1433w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Exemplo de p\u00e1gina com CSS (estilo.css)<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"403\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/04\/ExemploHTML-1024x403.png\" alt=\"\" class=\"wp-image-822\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/04\/ExemploHTML-1024x403.png 1024w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/04\/ExemploHTML-300x118.png 300w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/04\/ExemploHTML-768x302.png 768w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/04\/ExemploHTML.png 1030w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Resultado HTML + CSS<\/figcaption><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<div style=\"height:33px\" 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>Copie o c\u00f3digo do exemplo, salve os arquivos numa mesma pasta e mude as cores dos textos.<\/p>\n\n\n\n<p>Opcional: mude os valores das demais propriedades das tags dentro do arquivo \u201cestilo.css\u201d. Adicionar classes e IDs nas tags e utilizar seu seletores.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Obs.: o site <a href=\"http:\/\/www.w3schools.com\/css\" target=\"_blank\" rel=\"noreferrer noopener\">www.w3schools.com\/css<\/a> possui mais informa\u00e7\u00f5es sobre o uso de CSS<\/p>\n\n\n\n<p>Arquivo da aula 1: <a href=\"https:\/\/drive.google.com\/drive\/folders\/1qg1aTSfgUwh94Jepc4DMJIjuIOoI0iPM?usp=sharing\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/drive.google.com\/drive\/folders\/1qg1aTSfgUwh94Jepc4DMJIjuIOoI0iPM?usp=sharing<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>O que \u00e9 CSS e para que serve? O CSS (Cascading Style Sheets ou Folha de Estilo em Cascatas) \u00e9 um fragmento do c\u00f3digo HTML(ou documento separado) respons\u00e1vel por estilizar as p\u00e1ginas, ou seja, colocar uma cor, deixar a borda mais arredondada, mudar a fonte do texto, posicionar algum elemento mais para a esquerda ou [&hellip;]<\/p>\n","protected":false},"author":52,"featured_media":2931,"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-809","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\/809","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=809"}],"version-history":[{"count":14,"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/posts\/809\/revisions"}],"predecessor-version":[{"id":2932,"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/posts\/809\/revisions\/2932"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/media\/2931"}],"wp:attachment":[{"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/media?parent=809"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/categories?post=809"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/tags?post=809"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}