diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/pt-pt/web/css/index.html | |
parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip |
initial commit
Diffstat (limited to 'files/pt-pt/web/css/index.html')
-rw-r--r-- | files/pt-pt/web/css/index.html | 105 |
1 files changed, 105 insertions, 0 deletions
diff --git a/files/pt-pt/web/css/index.html b/files/pt-pt/web/css/index.html new file mode 100644 index 0000000000..9f7a65ea5f --- /dev/null +++ b/files/pt-pt/web/css/index.html @@ -0,0 +1,105 @@ +--- +title: 'CSS: Folhas de Estilo em Cascata' +slug: Web/CSS +tags: + - Apresentação + - CSS + - Desenho + - Design + - Disposição + - Estilos + - Folhas de Estilo em Cascata + - Folhas de estilo + - Landing + - Referencia + - 'l10n:prioridade' +translation_of: Web/CSS +--- +<div>{{CSSRef}}</div> + +<p class="summary"><span class="seoSummary"><strong>Folhas de Estilo em Cascata (CSS - Cascading Style Sheets</strong>) é uma linguagem de <a href="/pt-PT/docs/Web/API/Folha_de_estilo">folha de estilo</a> utilizada para descrever a apresentação de um documento escrito em <a href="/pt-PT/docs/Web/HTML" title="HyperText Markup Language">HTML</a> or <a href="/pt-PT/docs/Introducao_a_XML">XML</a> (incluindo dialetos de XML, tais como <a href="/pt-PT/docs/Web/SVG">SVG</a>, <a href="/pt-PT/docs/Web/MathML">MathML</a> ou </span> {{Glossary("XHTML", "", 1)}})<span class="seoSummary">. CSS descreve como os elementos deverão ser renderizados no ecrã, no papel, na fala, ou em outra média.</span></p> + +<p>CSS é uma das principais linguagens da Web aberta e está estandardizada nos navegadores de acordo com a <a class="external" href="http://w3.org/Style/CSS/#specs">especificação W3C</a>. Desenvolvida em níveis, CSS1 está agora obsoleta, CSS2.1 é a recomendação, e <a href="/pt-PT/docs/Web/CSS/CSS3" title="CSS3">CSS3</a>, agora divida em pequenos módulos, está a progredir a caminho da estandardização</p> + +<section id="sect1"> +<ul class="card-grid"> + <li><span>Introdução a CSS</span> + + <p>Se é novo no desenvolvimento Web, certifique-se que lê o nosso artigo de <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/CSS_basico">CSS - Essencial</a> para saber o que é CSS e como utilizar.</p> + </li> + <li><span>Tutoriais de CSS</span> + <p>A nossa <a href="/pt-PT/docs/Learn/CSS">área de aprendizagem de CSS</a> contém uma grande quantidade de tutoriais para levá-lo do nível de principiante até à proficiência, abrangendo todos os conteúdos essenciais.</p> + </li> + <li><span>Referência de CSS</span> + <p>A nossa <a href="/pt-PT/docs/Web/CSS/Refer%C3%AAncia_CSS">referência exaustiva de CSS </a>para os programadores da Web que descreve cada propriedade e conceito de CSS.</p> + </li> +</ul> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Tutoriais">Tutoriais</h2> + +<p>A nossa <a href="/pt-PT/docs/Learn/CSS">Área de Aprendizagem de CSS </a>apresenta múltiplos módulos que ensinam CSS desde o início — não é necessário conhecimento prévio.</p> + +<dl> + <dt><a href="/pt-PT/docs/Learn/CSS/Introduction_to_CSS">Introdução ao CSS</a></dt> + <dd>Este módulo permite-lhe começar com os básicos de como o CSS funciona, incluindo selectores e propriedades, escrever regras CSS, aplicar CSS a HTML, como especificar comprimento, cor e outras unidades em CSS, cascata e herança, modelos básicos de caixa e depuração de CSS.</dd> + <dt><a href="/pt-PT/docs/Learn/CSS/Estilo_de_texto">Estilizar texto</a></dt> + <dd>Aqui aprendemos os fundamentos do estilo do texto, incluindo a definição da fonte, negrito e itálico, espaçamento entre linhas e letras, e sombras e outras características do texto. Nós terminamos o módulo, aplicando fontes personalizadas à sua página, e estilizando listas e links.</dd> + <dt><a href="/pt-PT/docs/Learn/CSS/Estilo_de_caixas">Estilizar caixas</a></dt> + <dd>A seguir, focamos em estilizar caixas, um dos passos fundamentais para a criação de uma página web. Neste módulo, recapitulamos o modelo da caixa e depois aprendemos a controlar a disposição das caixas, definindo preenchimentos, bordas e margens, cores de fundo personalizadas, imagens e outras características, bem como características mais avancadas como sombras e filtros nas caixas.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">Disposição de CSS (<em>layout</em>)</a></dt> + <dd>Até agora, já analisámos os fundamentos do CSS, como estilizar os textos, e como estilizar e manipular as caixas que o seu conteúdo contém. Agora é altura de ver como colocar as suas caixas no lugar certo em relação ao <em>{{Glossary("layout viewport", "viewport")}}</em>, e umas às outras. Cobrimos os pré-requisitos necessários para que possa agora mergulhar profundamente no layout do CSS, observando diferentes configurações de visualização, métodos tradicionais de layout envolvendo <em>float </em>e posicionamento, e novas ferramentas de posicionamento como o <em>flexbox</em>.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Tools" id="Referência">Referência</h2> + +<ul> + <li><a href="https://developer.mozilla.org/pt-PT/docs/Web/CSS/Refer%C3%AAncia_CSS">CSS - Referência</a>: This exhaustive reference for seasoned Web developers describes every property and concept of CSS.</li> + <li>CSS key concepts: + <ul> + <li>The <a href="/en-US/docs/Web/CSS/Syntax">syntax and forms of the language</a></li> + <li><a href="/en-US/docs/Web/CSS/Specificity">Specificity</a>, <a href="/en-US/docs/Web/CSS/Inheritance">inheritance</a> and <a href="/en-US/docs/Web/CSS/Cascade">the Cascade</a></li> + <li><a href="/en-US/docs/Web/CSS/box_model">Box model</a> and <a href="/en-US/docs/Web/CSS/margin_collapsing">margin collapse</a></li> + <li>The <a href="/en-US/docs/Web/CSS/All_About_The_Containing_Block">containing block</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context" title="The stacking context">Stacking</a> and <a href="/en-US/docs/Web/CSS/block_formatting_context" title="block formatting context">block-formatting</a> contexts</li> + <li><a href="/en-US/docs/Web/CSS/initial_value">Initial</a>, <a href="/en-US/docs/Web/CSS/computed_value">computed</a>, <a href="/en-US/docs/Web/CSS/used_value">used</a>, and <a href="/en-US/docs/Web/CSS/actual_value">actual</a> values</li> + <li><a href="/en-US/docs/Web/CSS/Shorthand_properties">CSS shorthand properties</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible Box Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/Media_Queries">Media queries</a></li> + </ul> + </li> +</ul> + +<h2 class="Tools" id="Cookbook">Cookbook</h2> + +<p>The <a href="/en-US/docs/Web/CSS/Layout_cookbook">CSS layout cookbook</a> aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.</p> + +<h2 class="Tools" id="Ferramentas_para_o_desenvolvimento_de_CSS">Ferramentas para o desenvolvimento de CSS</h2> + +<ul> + <li>You can use the <a class="external" href="https://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a> to check if your CSS is valid. This is an invaluable debugging tool.</li> + <li><a href="/en-US/docs/Tools">Firefox Developer Tools</a> lets you view and edit a page's live CSS via the <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a> and <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a> tools.</li> + <li>The <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer extension</a> for Firefox lets you track and edit live CSS on watched sites.</li> + <li>The Web community has created various other <a href="/en-US/docs/Web/CSS/Tools">miscellaneous CSS tools</a> for you to use.</li> +</ul> + +<h2 id="Erros_de_metadados">Erros de metadados</h2> + +<ul> + <li>Firefox: {{bug(1323667)}}</li> +</ul> +</div> +</div> +</section> + +<h2 id="Consultar_também">Consultar também:</h2> + +<ul> + <li><a href="/en-US/docs/Web/Demos_of_open_web_technologies#CSS">CSS demos</a>: Get a creative boost by exploring examples of the latest CSS technologies in action.</li> + <li>Web languages to which CSS is often applied: <a href="/en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/SVG">SVG</a>, <a href="/en-US/docs/XHTML">XHTML</a>, and <a href="/en-US/docs/XML">XML</a>.</li> + <li>Mozilla technologies that make extensive use of CSS: <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a>, <a href="/en-US/Firefox">Firefox</a>, and <a href="/en-US/docs/Mozilla/Thunderbird">Thunderbird</a> <a href="/en-US/docs/Extensions">extensions</a> and <a href="/en-US/Add-ons/Themes">themes</a>.</li> +</ul> |