{"id":475,"date":"2020-07-02T19:19:47","date_gmt":"2020-07-02T22:19:47","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=475"},"modified":"2022-12-09T08:37:59","modified_gmt":"2022-12-09T11:37:59","slug":"tutorial-css-introducao","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/tutorial-css-introducao\/","title":{"rendered":"Tutorial CSS &#8211; Introdu\u00e7\u00e3o"},"content":{"rendered":"<p>CSS \u00e9 uma linguagem que descreve o estilo de um documento HTML.<\/p>\n<p>CSS descreve como os elementos HTML devem ser exibidos.<\/p>\n<p>Este tutorial ensinar\u00e1 CSS do b\u00e1sico ao avan\u00e7ado.<\/p>\n<p id=\"GBgWMXx\"><img decoding=\"async\" loading=\"lazy\" width=\"861\" height=\"496\" class=\"alignnone size-full wp-image-476 \" src=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/tutorial-css-introducao.jpg\" alt=\"\" srcset=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/tutorial-css-introducao.jpg 861w, https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/tutorial-css-introducao-300x173.jpg 300w, https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/tutorial-css-introducao-768x442.jpg 768w\" sizes=\"(max-width: 861px) 100vw, 861px\" \/><\/p>\n<p><strong>Veja alguns t\u00f3picos que ser\u00e3o exibidos ao decorrer do curso:<\/strong><\/p>\n<p>Introdu\u00e7\u00e3o ao CSS<br \/>\nSintaxe CSS<br \/>\nSeletores CSS<br \/>\nComo CSS<br \/>\nComent\u00e1rios CSS<br \/>\nCores CSS<br \/>\nFundos CSS<br \/>\nBordas CSS<br \/>\nMargens CSS<br \/>\nPreenchimento CSS<br \/>\nAltura \/ largura do CSS<br \/>\nModelo de caixa CSS<br \/>\nEsbo\u00e7o CSS<br \/>\nTexto CSS<br \/>\nFontes CSS<br \/>\n\u00cdcones CSS<br \/>\nLinks CSS<br \/>\nListas CSS<br \/>\nTabelas CSS<br \/>\nExibi\u00e7\u00e3o CSS<br \/>\nLargura m\u00e1xima do CSS<br \/>\nPosi\u00e7\u00e3o CSS<br \/>\nEstouro de CSS<br \/>\nCSS Float<br \/>\nBloco de CSS embutido<br \/>\nAlinhamento de CSS<br \/>\nCombinadores CSS<br \/>\nPseudo classe CSS<br \/>\nPseudoelemento CSS<br \/>\nOpacidade CSS<br \/>\nBarra de Navega\u00e7\u00e3o CSS<br \/>\nDropdowns de CSS<br \/>\nGaleria de imagens CSS<br \/>\nSprites de imagem CSS<br \/>\nSeletores de atributos CSS<br \/>\nFormul\u00e1rios CSS<br \/>\nContadores CSS<br \/>\nLayout do site CSS<br \/>\nUnidades CSS<br \/>\nEspecificidade CSS<\/p>\n<p>CSS Avan\u00e7ado<br \/>\nCantos arredondados CSS<br \/>\nImagens de borda CSS<br \/>\nFundos CSS<br \/>\nCores CSS<br \/>\nGradientes CSS<br \/>\nSombras CSS<br \/>\nEfeitos de texto CSS<br \/>\nFontes da Web CSS<br \/>\nTransforma\u00e7\u00f5es CSS 2D<br \/>\nTransforma\u00e7\u00f5es CSS 3D<br \/>\nTransi\u00e7\u00f5es CSS<br \/>\nAnima\u00e7\u00f5es CSS<br \/>\nDicas de ferramenta CSS<br \/>\nImagens em estilo CSS<br \/>\nAjuste de objeto CSS<br \/>\nBot\u00f5es CSS<br \/>\nPagina\u00e7\u00e3o CSS<br \/>\nCSS Multiple Columns<br \/>\nInterface de usu\u00e1rio CSS<br \/>\nVari\u00e1veis \u200b\u200bCSS<br \/>\nDimensionamento da caixa CSS<br \/>\nCSS Flexbox<br \/>\nConsultas de m\u00eddia CSS<br \/>\nExemplos de CSS MQ<\/p>\n<p>Responsivo CSS<br \/>\nIntrodu\u00e7\u00e3o ao RWD<br \/>\nRWD Viewport<br \/>\nVisualiza\u00e7\u00e3o da Grade RWD<br \/>\nConsultas de m\u00eddia RWD<br \/>\nImagens RWD<br \/>\nV\u00eddeos RWD<br \/>\nEstruturas RWD<br \/>\nModelos RWD<\/p>\n<p>Grade CSS<br \/>\nIntrodu\u00e7\u00e3o \u00e0 grade<br \/>\nGrid Container<br \/>\nItem de Grade<\/p>\n<p>Exemplos CSS<br \/>\nModelos CSS<br \/>\nExemplos CSS<br \/>\nCSS Quiz<br \/>\nExerc\u00edcios CSS<br \/>\nCertificado CSS<\/p>\n<p>Refer\u00eancias CSS<br \/>\nRefer\u00eancia CSS<br \/>\nSeletores CSS<br \/>\nFun\u00e7\u00f5es CSS<br \/>\nRefer\u00eancia CSS Aural<br \/>\nFontes seguras da Web CSS<br \/>\nCSS Animatable<br \/>\nUnidades CSS<br \/>\nConversor CSS PX-EM<br \/>\nCores CSS<br \/>\nValores de cores CSS<br \/>\nValores padr\u00e3o de CSS<br \/>\nSuporte ao navegador CSS<\/p>\n<p>&nbsp;<\/p>\n<div id=\"divcode\" style=\"display:none;z-index:200000001;padding:10px;border-radius:10px;background-color: #0054A1; position:fixed;top:100px;left: 50%;transform: translate(-50%, 0);\">\n  <font color=#fff>Ap\u00f3s clicar em Copy &#8663;<br>O c&oacute;digo fica pronto para testar ou colar onde quiser no  CTRL+V<\/font>\n  <form name=\"codigo\" id=\"codigo\"  method=\"post\" action=\"https:\/\/www.joemaster.com.br\/codigos\/gerar_codigo.php\" target=\"_blank\"><textarea name=\"testarcodigo\" id=\"testarcodigo\"  cols=\"30\" rows=\"30\" wrap=\"VIRTUAL\"><\/textarea><\/form><input type=\"button\" name=\"Submit\" value=\"Testar\" onClick=\"if(document.getElementById('testarcodigo').value ==''){alert('Copie o c\u00f3digo conforme descrito acima!');}else{document.getElementById('codigo').submit();setTimeout(function(){document.getElementById('testarcodigo').value='';document.getElementById('divcode').style.display='none'; }, 1000);}\" style=\"background-color:#FFCC05;border-radius:15px;padding:5px;width:100px;color:#000;\">\n  <input type=\"button\" name=\"Submit\" value=\"Fechar\" onClick=\"document.getElementById('testarcodigo').value='';document.getElementById('divcode').style.display='none';\" style=\"background-color:#FFCC05;border-radius:15px;padding:5px;width:100px;color:#000;\"><\/div>","protected":false},"excerpt":{"rendered":"<p>CSS \u00e9 uma linguagem que descreve o estilo de um documento HTML. CSS descreve como os elementos HTML devem ser exibidos. Este tutorial ensinar\u00e1 CSS do b\u00e1sico ao avan\u00e7ado. Veja alguns t\u00f3picos que ser\u00e3o exibidos ao decorrer do curso: Introdu\u00e7\u00e3o ao CSS Sintaxe CSS Seletores CSS Como CSS Coment\u00e1rios CSS Cores CSS Fundos CSS Bordas [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":74,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[118],"tags":[124,119,121,10,26,122,16,99,120,123,125],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.12 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tutorial CSS - Introdu\u00e7\u00e3o - JoeMaster<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.joemaster.com.br\/tutoriais\/tutorial-css-introducao\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorial CSS - Introdu\u00e7\u00e3o - JoeMaster\" \/>\n<meta property=\"og:description\" content=\"CSS \u00e9 uma linguagem que descreve o estilo de um documento HTML. CSS descreve como os elementos HTML devem ser exibidos. Este tutorial ensinar\u00e1 CSS do b\u00e1sico ao avan\u00e7ado. Veja alguns t\u00f3picos que ser\u00e3o exibidos ao decorrer do curso: Introdu\u00e7\u00e3o ao CSS Sintaxe CSS Seletores CSS Como CSS Coment\u00e1rios CSS Cores CSS Fundos CSS Bordas [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.joemaster.com.br\/tutoriais\/tutorial-css-introducao\/\" \/>\n<meta property=\"og:site_name\" content=\"JoeMaster\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-02T22:19:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-12-09T11:37:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/06\/img_5ef0e8127daaa.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"506\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"joemaster\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"joemaster\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/tutorial-css-introducao\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/tutorial-css-introducao\/\"},\"author\":{\"name\":\"joemaster\",\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/228e8f1dfe22da473e356f81c1033a9d\"},\"headline\":\"Tutorial CSS &#8211; Introdu\u00e7\u00e3o\",\"datePublished\":\"2020-07-02T22:19:47+00:00\",\"dateModified\":\"2022-12-09T11:37:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/tutorial-css-introducao\/\"},\"wordCount\":335,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/228e8f1dfe22da473e356f81c1033a9d\"},\"keywords\":[\"background\",\"cascata\",\"cores\",\"css\",\"estilo\",\"formata\u00e7\u00e3o\",\"html\",\"html5\",\"layout\",\"Style Sheets\",\"text\"],\"articleSection\":[\"curso css\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.joemaster.com.br\/tutoriais\/tutorial-css-introducao\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/tutorial-css-introducao\/\",\"url\":\"https:\/\/www.joemaster.com.br\/tutoriais\/tutorial-css-introducao\/\",\"name\":\"Tutorial CSS - Introdu\u00e7\u00e3o - JoeMaster\",\"isPartOf\":{\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/#website\"},\"datePublished\":\"2020-07-02T22:19:47+00:00\",\"dateModified\":\"2022-12-09T11:37:59+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/tutorial-css-introducao\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.joemaster.com.br\/tutoriais\/tutorial-css-introducao\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/tutorial-css-introducao\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/www.joemaster.com.br\/tutoriais\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorial CSS &#8211; Introdu\u00e7\u00e3o\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/#website\",\"url\":\"https:\/\/www.joemaster.com.br\/tutoriais\/\",\"name\":\"JoeMaster\",\"description\":\"Tutoriais de WEB e APLICATIVOS EM HTML5, PHP, JS, CSS\",\"publisher\":{\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/228e8f1dfe22da473e356f81c1033a9d\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.joemaster.com.br\/tutoriais\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/228e8f1dfe22da473e356f81c1033a9d\",\"name\":\"joemaster\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2022\/05\/joemaster.jpg\",\"contentUrl\":\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2022\/05\/joemaster.jpg\",\"width\":1461,\"height\":281,\"caption\":\"joemaster\"},\"logo\":{\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/image\/\"},\"sameAs\":[\"https:\/\/joemaster.com.br\/tutoriais\"],\"url\":\"https:\/\/www.joemaster.com.br\/tutoriais\/author\/joemaster\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tutorial CSS - Introdu\u00e7\u00e3o - JoeMaster","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.joemaster.com.br\/tutoriais\/tutorial-css-introducao\/","og_locale":"pt_BR","og_type":"article","og_title":"Tutorial CSS - Introdu\u00e7\u00e3o - JoeMaster","og_description":"CSS \u00e9 uma linguagem que descreve o estilo de um documento HTML. CSS descreve como os elementos HTML devem ser exibidos. Este tutorial ensinar\u00e1 CSS do b\u00e1sico ao avan\u00e7ado. Veja alguns t\u00f3picos que ser\u00e3o exibidos ao decorrer do curso: Introdu\u00e7\u00e3o ao CSS Sintaxe CSS Seletores CSS Como CSS Coment\u00e1rios CSS Cores CSS Fundos CSS Bordas [&hellip;]","og_url":"https:\/\/www.joemaster.com.br\/tutoriais\/tutorial-css-introducao\/","og_site_name":"JoeMaster","article_published_time":"2020-07-02T22:19:47+00:00","article_modified_time":"2022-12-09T11:37:59+00:00","og_image":[{"width":900,"height":506,"url":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/06\/img_5ef0e8127daaa.jpg","type":"image\/jpeg"}],"author":"joemaster","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"joemaster","Est. tempo de leitura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.joemaster.com.br\/tutoriais\/tutorial-css-introducao\/#article","isPartOf":{"@id":"https:\/\/www.joemaster.com.br\/tutoriais\/tutorial-css-introducao\/"},"author":{"name":"joemaster","@id":"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/228e8f1dfe22da473e356f81c1033a9d"},"headline":"Tutorial CSS &#8211; Introdu\u00e7\u00e3o","datePublished":"2020-07-02T22:19:47+00:00","dateModified":"2022-12-09T11:37:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.joemaster.com.br\/tutoriais\/tutorial-css-introducao\/"},"wordCount":335,"commentCount":0,"publisher":{"@id":"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/228e8f1dfe22da473e356f81c1033a9d"},"keywords":["background","cascata","cores","css","estilo","formata\u00e7\u00e3o","html","html5","layout","Style Sheets","text"],"articleSection":["curso css"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.joemaster.com.br\/tutoriais\/tutorial-css-introducao\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.joemaster.com.br\/tutoriais\/tutorial-css-introducao\/","url":"https:\/\/www.joemaster.com.br\/tutoriais\/tutorial-css-introducao\/","name":"Tutorial CSS - Introdu\u00e7\u00e3o - JoeMaster","isPartOf":{"@id":"https:\/\/www.joemaster.com.br\/tutoriais\/#website"},"datePublished":"2020-07-02T22:19:47+00:00","dateModified":"2022-12-09T11:37:59+00:00","breadcrumb":{"@id":"https:\/\/www.joemaster.com.br\/tutoriais\/tutorial-css-introducao\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.joemaster.com.br\/tutoriais\/tutorial-css-introducao\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.joemaster.com.br\/tutoriais\/tutorial-css-introducao\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.joemaster.com.br\/tutoriais\/"},{"@type":"ListItem","position":2,"name":"Tutorial CSS &#8211; Introdu\u00e7\u00e3o"}]},{"@type":"WebSite","@id":"https:\/\/www.joemaster.com.br\/tutoriais\/#website","url":"https:\/\/www.joemaster.com.br\/tutoriais\/","name":"JoeMaster","description":"Tutoriais de WEB e APLICATIVOS EM HTML5, PHP, JS, CSS","publisher":{"@id":"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/228e8f1dfe22da473e356f81c1033a9d"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.joemaster.com.br\/tutoriais\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-BR"},{"@type":["Person","Organization"],"@id":"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/228e8f1dfe22da473e356f81c1033a9d","name":"joemaster","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/image\/","url":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2022\/05\/joemaster.jpg","contentUrl":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2022\/05\/joemaster.jpg","width":1461,"height":281,"caption":"joemaster"},"logo":{"@id":"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/joemaster.com.br\/tutoriais"],"url":"https:\/\/www.joemaster.com.br\/tutoriais\/author\/joemaster\/"}]}},"_links":{"self":[{"href":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-json\/wp\/v2\/posts\/475"}],"collection":[{"href":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-json\/wp\/v2\/comments?post=475"}],"version-history":[{"count":1,"href":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-json\/wp\/v2\/posts\/475\/revisions"}],"predecessor-version":[{"id":1184,"href":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-json\/wp\/v2\/posts\/475\/revisions\/1184"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-json\/wp\/v2\/media\/74"}],"wp:attachment":[{"href":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-json\/wp\/v2\/media?parent=475"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-json\/wp\/v2\/categories?post=475"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-json\/wp\/v2\/tags?post=475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}