diff options
Diffstat (limited to 'files/pt-br/learn/css/howto')
| -rw-r--r-- | files/pt-br/learn/css/howto/css_perguntas_frequentes/index.html | 245 | ||||
| -rw-r--r-- | files/pt-br/learn/css/howto/index.html | 92 |
2 files changed, 337 insertions, 0 deletions
diff --git a/files/pt-br/learn/css/howto/css_perguntas_frequentes/index.html b/files/pt-br/learn/css/howto/css_perguntas_frequentes/index.html new file mode 100644 index 0000000000..f3febd4637 --- /dev/null +++ b/files/pt-br/learn/css/howto/css_perguntas_frequentes/index.html @@ -0,0 +1,245 @@ +--- +title: CSS - Perguntas frequentes +slug: Learn/CSS/Howto/CSS_Perguntas_Frequentes +tags: + - CSS + - Exemplo + - FAQ + - Guía + - Perguntas + - Perguntas Frequentes + - Web +translation_of: Learn/CSS/Howto/CSS_FAQ +--- +<h2 id="Por_que_meu_CSS_que_é_válido_não_é_renderizado_corretamente">Por que meu CSS, que é válido, não é renderizado corretamente?</h2> + +<p>Navegadores usam a declaração de <code>DOCTYPE</code> para decidir se devem exibir o documento usando um modo compatível com os padrões da web ou com padrões de navegadores antigos. Usar corretamente a declaração de um <code>DOCTYPE</code> moderno no início do seu documento HTML melhorará a forma como o navegador trata os padrões utilizados no documento.</p> + +<p>Navegadores modernos possuem dois principais modos de renderização:</p> + +<ul> + <li><em>Modo de peculiaridades (Quirks Mode)</em>: Também chamado de modo retrocompatível, permite que páginas antigas sejam renderizadas como seus autores pretendiam, seguindo regras de renderização não-padronizadas geralmente encontradas em navegadores antigos. Documentos com uma declaração <code>DOCTYPE</code> incompleta, incorreta, que não tenham uma declaração <code>DOCTYPE</code> ou não tenham uma declaração comumente utilizada antes de 2001 serão renderizados deste modo.</li> + <li><em>Modo de padrões (Standards Mode)</em>: Neste modo o navegador tenta seguir os padrões W3C estritamente, ignorando peculiaridades encontradas em documentos designados a navegadores antigos. Espera-se que novas páginas HTML sejam desenvolvidas para navegadores que seguem os padrões da W3C, e como resultado disso, páginas com uma declaração de <code>DOCTYPE</code> moderna serão renderizadas deste modo.</li> +</ul> + +<p>Navegadores baseados na engine Gecko possuem um terceiro modo de renderização; <em><a href="/en-US/docs/Gecko's_"Almost_Standards"_Mode" title="Gecko's_"Almost_Standards"_Mode">Modo de "quase padrões" (Almost Standards Mode</a>)</em>, que renderiza as páginas seguindo regras do <em>Modo de padrões</em>, porém considerando algumas poucas peculiaridades encontradas em páginas para navegadores antigos.</p> + +<p>Esta é uma lista das declarações de <code>DOCTYPE</code> mais usadas e que acionarão o modo de padrões ou de "quase padrões":</p> + +<pre><!DOCTYPE html> <code>/* Este é o doctype HTML5. Levando em consideração que + navegadores modernos possuem um parser de HTML5, o + uso desta declaração é recomendada */</code> + +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" +"http://www.w3.org/TR/html4/loose.dtd"> + +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" +"http://www.w3.org/TR/html4/strict.dtd"> + +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> + +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +</pre> + +<p>Sempre que possível, use a declaração de <code>DOCTYPE</code> HTML5.</p> + +<h2 id="My_CSS_is_valid.2C_but_not_correctly_rendered" name="My_CSS_is_valid.2C_but_not_correctly_rendered">Por que meu CSS, que é válido, não é renderizado?</h2> + +<p>Abaixo temos algumas das possíveis causas:</p> + +<ul> + <li>O caminho para o arquivo CSS está incorreto.</li> + <li>Para ser aplicado, uma folha de estilos CSS deve ser servido ao navegador com o tipo MIME <code>text/css. </code>Caso o servidor não sirva a folha de estilos com este tipo, as regras CSS não serão interpretadas e aplicadas aos elementos no documento.</li> +</ul> + +<h2 id="Difference_between_id_and_class" name="Difference_between_id_and_class">Qual a diferença entre <code>id</code> e <code>class</code>?</h2> + +<p>Elementos HTML podem ter um atributo <code>id</code> e/ou um atributo <code>class. </code>O atributo <code>id</code> designa um nome ao elemento ao qual este é aplicado, e para que a marcação seja válida, deverá haver no documento apenas um elemento com o nome designado (Por exemplo: Caso você designe o nome <em>janela</em> a um elemento, nenhum outro elemento poderá ter o nome <em>janela</em><font face="consolas, Liberation Mono, courier, monospace">)</font>.</p> + +<p>O atributo <code>class</code> designa um ou vários nomes de classes as quais um elemento pertence. Diferentemente do valor designado no atributo <code>id</code>, os nomes designados em <code>class</code> podem ser reutilizados em outros elementos no documento. De qualquer forma, CSS permite que você aplique estilos tanto para uma <code>id</code> particular quanto para <code>classes</code>.</p> + +<p>Algumas dicas de quando usar <code>id</code> e quando usar <code>class:</code></p> + +<ul> + <li>Utilize classes para estilizar elementos quando você pretender atribuir as mesmas regras de estilização a diversos elementos num documento. Mesmo que você tenha apenas um elemento no momento, utilize classes para sua estilização caso você pretenda reutilizar as mesmas regras em elementos criados futuramente.</li> + <li>Utilize ids quando você precisar restringir regras de estilização a um determinado bloco ou elemento. Como ids não devem sepetidas num documento, as regras de estilo designadas a uma <code>id</code> serão aplicadas apenas àquele elemento.</li> +</ul> + +<p>Geralmente é recomendável que se utilize classes sempre que possível, utilizando ids apenas quando absolutamente necessário para usos específicos (como conectar um <code>label</code> a um elemento de formulário, ou para estilizar elementos que necessicam ser semanticamente únicos). Abaixo estão descritas algumas vantagens em utilizar classes como forma principal de estilização:</p> + +<ul> + <li>Usar classes torna seu código extensível — Mesmo que você tenha apenas um elemento a ser estilizado agora, você pode querer adicionar as mesmas regras a outros elementos futuramente.</li> + <li>Classes permitem que você estilize diversos elementos. Sendo assim, classes podem ajudar a desenvolver folhas de estilo menores; mais enchutas, já que regras podem ser facilmente reutilizadas entre elementos. Isso não só ajuda na manutenção da folha de estilo, como também agiliza a renderização de páginas, principalmente em conexões lentas.</li> + <li>Seletores de classes tem menor <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity">especificidade</a> do que seletores de id, o que torna as regras de estilização mais fáceis de serem sobrepostas.</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Veja <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">Seletores</a> para mais informações.</p> +</div> + +<h2 id="Restoring_the_default_property_value" name="Restoring_the_default_property_value">Como eu redefino o valor padrão de uma propriedade?</h2> + +<p>Inicialmente CSS não propiciava a diretiva "default" e a única forma de redefinir o valor padrão de uma propriedade era expliciatamente redeclarando aquela propriedade. Por exemplo:</p> + +<pre class="brush: css">/* A cor padrão do cabeçalho é preta */ +h1 { color: red; } +h1 { color: black; }</pre> + +<p>Isso mudou com CSS 2; a diretiva <a href="/es/CSS/initial" title="initial">initial</a> agora é um valor válido para uma propriedade CSS. Ela redefine tal propriedade para seu valor padrão, o qual é definido nas especificações CSS para tal propriedade.</p> + +<pre class="brush: css">/* A cor padrão do cabeçalho é preta */ +h1 { color: red; } +h1 { color: initial; }</pre> + +<h2 id="Derived_styles" name="Derived_styles">Como eu derivo um estilo de outro?</h2> + +<p>CSS não exatamente permite que um estilo seja definido com os termos de outro. (Veja <a href="http://archivist.incutio.com/viewlist/css-discuss/2685">as notas de Eric Meyer sobre a posição do grupo de trabalho a respeito do assunto</a>). Entretanto, é possível atingir o mesmo efeito designando diversas classes a um elemento, e <a href="/en-US/docs/Web/CSS/Using_CSS_variables">Variáveis CSS </a>agora providenciam uma forma de definir informações sobre um estilo em um lugar e reutilizar estas informações em diversos outros lugares.</p> + +<h2 id="Assigning_multiple_classes" name="Assigning_multiple_classes">Como eu aplico diversas classes a um elemento?</h2> + +<p>Elementos HTML podem ter diversas classes designadas a si, com as classes sendo listadas no atributo <code>class</code>, tendo um espaço em branco separando cada uma.</p> + +<pre class="brush: html"><style type="text/css"> + .news { background: black; color: white; } + .today { font-weight: bold; } +</style> + +<div class="news today"> +... content of today's news ... +</div> +</pre> + +<p>Caso a mesma propriedade seja declara em mais de uma regra, o conflito é resolvido primeiro pela ordem de especificidade e depois através da ordem das declarações CSS, com o último valor definido da propriedade sendo considerado. A ordem em que o nome das classes aparece no atributo <code>class</code> é irrelevante.</p> + +<h2 id="Style_rules_that_don.27t_work" name="Style_rules_that_don.27t_work">Por que minhas regras de estilização não funcionam corretamente?</h2> + +<p>Regras de estilização, mesmo que sejam semanticamente corretas, podem não ser aplicadas em determinadas situações. Você pode utilizar o visualizador de regras CSS do <a href="/en-US/docs/DOM_Inspector" title="DOM_Inspector">Inspetor de DOM</a> para resolver problemas deste tipo, mas as ocasiões mais frequentes onde regras de estilização são ignoradas estão listadas abaixo.</p> + +<h3 id="HTML_elements_hierarchy" name="HTML_elements_hierarchy">Hierarquia dos elementos HTML</h3> + +<p>A forma como estilos CSS são aplicados a elementos HTML depende também da hierarquia dos elementos HTML. É importante lembrar que a regra aplicada a um descendente sobrepõe a regra do pai, independente de qualquer especificidade ou prioridade das regras CSS.</p> + +<pre class="brush: html"><style type="text/css"> + .news { color: black; } + .corpName { font-weight: bold; color: red; } +</style> + +<!-- O texto do item news é preto, mas o nome da corporação é vermelho e em negrito --> +<div class="news"> + (Reuters) <span class="corpName">General Electric</span> (GE.NYS) announced on Thursday... +</div> +</pre> + +<p>No caso de hierarquias HTML complexas, se uma regra parece ser ignorada, verifique se o elemento está dentro de outro elemento com um estilo diferente.</p> + +<h3 id="Explicitly_re-defined_style_rule" name="Explicitly_re-defined_style_rule">Regra de estilização explicitamente redefinida</h3> + +<p>Em folhas de estilo CSS, a ordem <strong><u>é</u></strong> importante. Se você definir uma propriedade e logo depois redefinir a mesma propriedade, a última regra definida será considerada.</p> + +<pre class="brush: html"><style> + #stockTicker { font-weight: bold; } + .stockSymbol { color: red; } + /* outras regras */ + /* outras regras */ + /* outras regras */ + .stockSymbol { font-weight: normal; } +</style> + +<!-- Boa parte do texto está em negrito, exceto "GE", que é vermelho e não está em negrito --> +<div id="stockTicker"> + NYS: <span class="stockSymbol">GE</span> +1.0 ... +</div> +</pre> + +<p>Para evitar que este tipo de problema, tente definir regras apenas uma vez para um determinado seletor e agrupe as regras para aquele seletor.</p> + +<h3 id="Use_of_a_shorthand_property" name="Use_of_a_shorthand_property">Uso de uma propriedade reduzida</h3> + +<p>Utilizar propriedades reduzidas para definir regra de estilização é interessante pois permite definir diversas propriedade de uma regra em uma sintaxe compacta e que permite otimizar o tamanho da folha de estilos. Utilizar propriedades reduzidas para definir apenas uma propriedade é permitido, mas deve ser lembrado que atributos da propriedade não definidos são redefinidos para seu valor padrão. Ou seja, isso pode acabar sobrepondo regras anteriormente definidas implicitamente..</p> + +<pre class="brush: html"><style> + #stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; } + .stockSymbol { font: 14px Arial; color: red; } +</style> + +<div id="stockTicker"> + NYS: <span class="stockSymbol">GE</span> +1.0 ... +</div> +</pre> + +<p>No exemplo anterior o problema ocorre em regras pertencentes a diferentes elementos. Mas também poderia acontecer para o mesmo elemento, pois a ordem das regras <strong><u>é</u></strong> importante.</p> + +<pre class="brush: css">#stockTicker { + font-weight: bold; + font: 12px Verdana; /* font-weight agora está definido como "normal" */ +} +</pre> + +<h3 id="Use_of_the_.2A_selector" name="Use_of_the_.2A_selector">Uso do seletor <code>*</code></h3> + +<p>O seletor curinga <code>*</code> faz referência a qualquer elemento, e deve ser usado com cuidado.</p> + +<pre class="brush: html"><style> + body * { font-weight: normal; } + #stockTicker { font: 12px Verdana; } + .corpName { font-weight: bold; } + .stockUp { color: red; } +</style> + +<div id="section"> + NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ... +</div> +</pre> + +<p>No exemplo acima, o seletor * aplica a regra para todos os elementos dentro de <code>body</code>, em qualquer nível hierarquico, incluindo a classe <code>.stockUp</code>. Sendo assim a regra <code>font-weight: bold;</code> aplicada à classe <code>.corpName</code> é sobreposta por <code>font-weight: normal;</code> aplicada a todos os elementos dentro de <code>body</code>.</p> + +<p>O uso do seletor * também deve ser minimizado por ser um seletor lento, especialmente quando não utilizado como o primeiro elemento de um seletor. Este seletor deve ser evitado o máximo possível.</p> + +<h3 id="Specificity_in_CSS" name="Specificity_in_CSS">Especificidade em CSS</h3> + +<p>Quando multiplas regras são aplicadas a um elemento, a regra a ser renderizada depende de sua <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity" title="Specificity">especificidade</a>. O estilo <em>inline</em> (regras de estilo definidas no atributo <code>style</code> de um elemento HTML) tem a mais alta especificidade e irá sobrepor qualquer seletor. Seletores de ID tem a segunda mais alta especificidade, com seletores de classes vindo logo após e, eventualmente, seletores de elementos (tags). Tendo isso em mente, a cor do texto da {{htmlelement("div")}} abaixo terá a cor vermelha.</p> + +<pre class="brush: html"><style> + div { color: black; } + #orange { color: orange; } + .green { color: green; } +</style> + +<div id="orange" class="green" style="color: red;">Isso é vermelho</div> +</pre> + +<p>As regras se tornam mais complicadas quando o seletor tem diversas partes. Informações mais detalhadas sobre como a especificidade de seletores é calculada podem ser encontradas nas <a href="http://www.w3.org/TR/CSS21/cascade.html#specificity">Especificações CSS 2.1, capítulo 6.4.3</a>.</p> + +<h2 id="What_do_the_-moz-.2A_properties_do.3F" name="What_do_the_-moz-.2A_properties_do.3F">O que as propriedades -moz-*, -ms-*, -webkit-*, -o-* e -khtml-* fazem?</h2> + +<p>Estas propriedades, chamadas <em>propriedades prefixadas</em>, são extenções ao padrão CSS. Elas permitem o uso de recursos experimentais e fora dos padrões em navegadores sem poluir o namespace convencional, prevenindo que incompatibilidades entre implementações experimentais e fora dos padrões surjam quando os padrões CSS forem expandidos.</p> + +<p>Apesar do vasto uso na web, o uso de propriedades prefixadas não é recomendado em ambiente de produção. O uso indiscriminado de funcionalidades experimentais ou não-padrão pode causar problemas de compatibilidade futuros (como uma funcionalidade experimental mudando de nome, ou tendo o mesmo nome de uma outro funcionalidade que no passado tinha uma finalidade completamente diferente) e não renderizar páginas de forma correta em diferentes navegadores. Outro problema muito comum encontrado pelo uso indiscriminado de propriedades prefixadas é a declaração de regras que acabam se tornando exclusivas para determinadas engines, quebrando a renderização em outros navegadores, mesmo estes navegadores dando suporte à propriedade padrão não-prefixada (Por exemplo, apenas a propriedade <code>-webkit-border-radius</code> sendo usada em uma regra ao invés de <code>border-radius</code>, que é suportada por todos os navegadores, inclusive os baseados em webkit).</p> + +<p>Para amenizar os problemas de incompatibilidade gerados pelo uso de propriedades prefixadas (principalmente <code>-webkit-</code>), foi estabelecido o <a href="https://compat.spec.whatwg.org/">Compatibility Living Standard</a>, o qual sugere um conjunto de propriedades <code>-webkit-</code> que navegadores (mesmo não utilizando a engine webkit) devem suportar. Outra medida que vem sendo tomada por desenvolvedores de navegadores é abandonar o suporte a propriedades prefixadas em versões estáveis dos navegadores, mantendo suporte a tais propriedades apenas em<em>Nightly Builds </em>e similares, desencorajando o uso em ambiente de produção.</p> + +<p>Caso você precise usar propriedades prefixadas em seu trabalho, você deve declarar primeiramente as propriedades prefixadas e, por último, declarar a versão padrão não-prefixada da propriedade anteriormente declara, garantindo que o navegador utilize a versão especificada nos padrões assim que suportado. Por exemplo:</p> + +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="property token">-ms-transform</span><span class="punctuation token">:</span> <span class="function token">rotate</span><span class="punctuation token">(</span><span class="number token">90</span>deg<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="property token">-webkit-transform</span><span class="punctuation token">:</span> <span class="function token">rotate</span><span class="punctuation token">(</span><span class="number token">90</span>deg<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="property token">transform</span><span class="punctuation token">:</span> <span class="function token">rotate</span><span class="punctuation token">(</span><span class="number token">90</span>deg<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<div class="note"> +<p><strong>Nota</strong>: Para mais informações em como lhe dar com propriedades prefixadas, veja <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#Handling_CSS_prefixes">Lidando com problemas comuns em HTML e CSS — Lidando com prefixos CSS</a> do nosso módulo <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Teste Cross-browsing</a>.</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: Veja a página <a href="/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions" title="CSS Reference/Mozilla Extensions">Extenções CSS Mozilla</a> para mais informações sobre propriedades CSS prefixadas da Mozilla.</p> +</div> + +<h2 id="Como_z-index_está_relacionado_a_posicionamento">Como <code>z-index</code> está relacionado a posicionamento?</h2> + +<p>A propriedade <code>z-index</code> especifica a ordem dos elementos da pilha.</p> + +<p>Um elemento com z-index/ordem na pilha maior sempre será renderizado à frente de um elemento com um z-index/ordem de pilha menor. <code>z-index</code> funcionará apenas em elementos que tenham uma posição especificada (Ou seja, só funcionará caso o elemento tenha <code>position:absolute</code>, <code>position:relative</code> ou <code>position:fixed</code>).</p> + +<div class="note"> +<p><strong>Nota</strong>: Para mais informações, veja nosso artigo de aprendizado sobre <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Posicionamento</a>, e em particular a seção <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning#Introducing_z-index">Introduzindo z-index</a>.</p> +</div> diff --git a/files/pt-br/learn/css/howto/index.html b/files/pt-br/learn/css/howto/index.html new file mode 100644 index 0000000000..01e5fe9373 --- /dev/null +++ b/files/pt-br/learn/css/howto/index.html @@ -0,0 +1,92 @@ +--- +title: Use CSS to solve common problems +slug: Learn/CSS/Howto +tags: + - Beginner + - CSS + - Learn + - NeedsTranslation + - TopicStub +translation_of: Learn/CSS/Howto +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">The following links point to solutions to common everyday problems you'll need to solve with CSS.</p> + +<h2 id="Common_use_cases">Common use cases</h2> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Basics">Basics</h3> + +<ul> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">How to apply CSS to HTML</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Syntax#White_space">How to use whitespace in CSS</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Syntax#Comments">How to write comments in CSS</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Simple_selectors">How to select elements via element name, class or ID</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">How to select elements via attribute name and content</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes">How to use pseudo-classes</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-elements">How to use pseudo-elements</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Multiple_selectors_on_one_rule">How to apply multiple selectors to the same rule</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">How to specify colors in CSS</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS">How to debug CSS in the browser</a></li> +</ul> + +<h3 id="CSS_and_text">CSS and text</h3> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">How to style text</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">How to customize a list of elements</a></li> + <li><a href="/en-US/Learn/CSS/Styling_text/Styling_links">How to style links</a></li> + <li><a href="/en-US/Learn/CSS/Styling_text/Fundamentals#Text_drop_shadows">How to add shadows to text</a></li> +</ul> +</div> + +<div class="column-half"> +<h3 id="Boxes_and_layouts">Boxes and layouts</h3> + +<ul> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties">How to size CSS boxes</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Overflow">How to control overflowing content</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip">How to control the part of a CSS box that the background is drawn under</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">How do I define inline, block, and inline-block?</a></li> + <li><a href="/en-US/docs/Learn/CSS/Howto/create_fancy_boxes">How to create fancy boxes</a> (also see the <a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a> module, generally).</li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip">How to use <code>background-clip</code> to control how much of the box your background image covers</a>.</li> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">How to change the box model completely using <code>box-sizing</code></a></li> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Backgrounds">How to control backgrounds</a></li> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Borders">How to control borders</a></li> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Styling_tables">How to style an HTML table</a></li> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows">How to add shadows to boxes</a></li> +</ul> +</div> +</div> + +<h2 id="Uncommon_or_advanced_techniques">Uncommon or advanced techniques</h2> + +<p>Beyond the basics, CSS is allows very advanced design techniques. These articles help you tackle the hardest use cases you may face.</p> + +<h3 id="General">General</h3> + +<ul> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity">How to calculate specificity of a CSS selector</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Controlling_inheritance">How to control inheritance in CSS</a></li> +</ul> + +<h3 id="Advanced_effects">Advanced effects</h3> + +<ul> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters">How to use filters in CSS</a></li> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes">How to use blend modes in CSS</a></li> +</ul> + +<h3 id="Layout">Layout</h3> + +<ul> + <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">Using CSS flexible boxes</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts" title="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts">Using CSS multi-column layouts</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_started/Content">Using CSS generated content</a></li> +</ul> + +<h2 id="See_also">See also</h2> + +<p><a href="/en-US/docs/Learn/CSS/Howto/CSS_FAQ">CSS FAQ</a> — A collection of smaller bits of information, covering a variety of topics from debugging to selector usage.</p> |