path: root/files/pt-br/web/html/element/style/index.html

---
title: <style>
slug: Web/HTML/Element/style
translation_of: Web/HTML/Element/style
---
<h2 id="Resumo">Resumo</h2>

<p><span id="ouHighlight__0_2TO0_0">O</span><span id="noHighlight_0.1750939046200588"> </span><strong><span id="ouHighlight__9_15TO7_13">elemento HTML &lt;style&gt;</span></strong><span id="noHighlight_0.8079549119676314"> </span><span id="ouHighlight__25_32TO23_28">contém</span><span id="noHighlight_0.0421581815387565"> </span><span id="ouHighlight__40_50TO30_40">informações</span><span id="noHighlight_0.25522005222047533"> de </span><span id="ouHighlight__34_38TO45_50">estilo</span><span id="noHighlight_0.8209890781977366"> </span><span id="ouHighlight__52_54TO52_55">para</span><span id="noHighlight_0.5883082522572468"> </span><span id="ouHighlight__56_56TO57_58">um</span><span id="noHighlight_0.2588224459451632"> </span><span id="ouHighlight__58_65TO60_68">documento</span><span id="noHighlight_0.7118265581909791"> </span><span id="ouHighlight__68_69TO70_71">ou</span><span id="noHighlight_0.8287466668843697"> </span><span id="ouHighlight__71_71TO73_75">uma</span><span id="noHighlight_0.39376658311892987"> </span><span id="ouHighlight__73_76TO77_81">parte</span><span id="noHighlight_0.8630187689455433"> </span><span id="ouHighlight__78_79TO83_84">do</span><span id="noHighlight_0.40389604768470954"> </span><span id="ouHighlight__81_88TO86_94">documento</span><span id="noHighlight_0.9271558521836898">.</span> <span id="ouHighlight__0_2TO0_1">As</span><span id="noHighlight_0.01947156645811987"> </span><span id="ouHighlight__19_29TO3_13">informações</span><span id="noHighlight_0.6308358281341976"> de </span><span id="ouHighlight__13_17TO18_23">estilo</span><span id="noHighlight_0.7819626952353096"> </span><span id="ouHighlight__4_11TO25_34">específico</span><span id="noHighlight_0.037122023106831326"> </span><span id="ouHighlight__31_32TO36_40">estão</span><span id="noHighlight_0.5142985590356746"> </span><span id="ouHighlight__34_42TO42_49">contidas</span><span id="noHighlight_0.711229095635556"> </span><span id="ouHighlight__44_52TO51_56">dentro</span><span id="noHighlight_0.24112451117868316"> </span><span id="ouHighlight__54_57TO58_62">deste</span><span id="noHighlight_0.9213975894944808"> </span><span id="ouHighlight__59_65TO64_71">elemento</span><span id="noHighlight_0.8329735359180445">,</span><span id="noHighlight_0.8298143863599811"> </span><span id="ouHighlight__68_74TO74_83">geralmente</span><span id="noHighlight_0.5711213807667961"> </span><span id="ouHighlight__76_77TO85_86">no</span> <a href="/en-US/docs/Web/CSS">CSS</a>.</p>

<ul class="htmlelt">
 <li><dfn><a href="/en-US/docs/HTML/Content_categories">Content categories</a></dfn><a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content">Metadata content</a>, e se o atributo <code>scoped</code> é apresentado: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content </a>.</li>
 <li><dfn>Conteúdo Permitido</dfn> Style information matching the language of the <code>type</code> attribute.</li>
 <li><dfn>Omissão de Tag</dfn> {{no_tag_omission}}</li>
 <li><dfn>Permitted parent elements</dfn>Qualquer elemento que aceite Metadata content.</li>
 <li><dfn>Interface DOM</dfn> {{domxref("HTMLStyleElement")}}</li>
</ul>

<h2 id="Atributos">Atributos</h2>

<p>Este elemento inclui os <a href="/en-US/docs/Web/HTML/Global_attributes">atributos</a> globais.</p>

<dl>
 <dt>type</dt>
 <dd>
 <div><span id="ouHighlight__0_3TO0_3">Este</span><span id="noHighlight_0.8579400349648248"> </span><span id="ouHighlight__5_13TO5_12">atributo</span><span id="noHighlight_0.3854254651380227"> </span><span id="ouHighlight__15_21TO14_19">define</span><span id="noHighlight_0.8348115153365787"> </span><span id="ouHighlight__23_25TO21_21">a</span><span id="noHighlight_0.92536449251985"> </span><span id="ouHighlight__27_33TO23_31">linguagem</span><span id="noHighlight_0.01298276536212839"> de </span><span id="ouHighlight__35_42TO36_41">estilo</span><span id="noHighlight_0.9223154847604207"> </span><span id="ouHighlight__44_45TO43_46">como</span><span id="noHighlight_0.736163559561333"> </span><span id="ouHighlight__47_47TO48_49">um</span><span id="noHighlight_0.03862268120438256"> </span><span id="ouHighlight__54_57TO51_54">tipo</span><span id="noHighlight_0.2511141024635852"> </span><span id="ouHighlight__49_52TO56_59">MIME</span><span id="noHighlight_0.6782484431487542"> </span><span id="ouHighlight__59_66TO61_68">(charset</span><span id="noHighlight_0.18358757155083355"> </span><span id="ouHighlight__75_77TO70_72">não</span><span id="noHighlight_0.44979933507841085"> </span><span id="ouHighlight__68_73TO74_77">deve</span><span id="noHighlight_0.5007642888524966"> </span><span id="ouHighlight__79_80TO79_81">ser</span><span id="noHighlight_0.8485105216576607"> </span><span id="ouHighlight__82_92TO83_96">especificado).</span><span id="noHighlight_0.46671142603855187"> </span><span id="ouHighlight__94_103TO98_108">' text/css'</span><span id="noHighlight_0.5699288045943831"> </span><span id="ouHighlight__105_114TO110_116">presume s</span><span id="ouHighlight__116_117TO118_119">e</span><span id="noHighlight_0.7459826865051293"> </span><span id="ouHighlight__119_122TO121_124">este</span><span id="noHighlight_0.9196365633086188"> </span><span id="ouHighlight__124_132TO126_133">atributo</span><span id="noHighlight_0.0331245971064732"> </span><span id="ouHighlight__134_135TO135_141">estiver</span><span id="noHighlight_0.28761738927837327"> </span><span id="ouHighlight__137_142TO143_149">ausente</span><span id="noHighlight_0.7309063458164579">.</span></div>
 </dd>
 <dt>media</dt>
 <dd><span id="ouHighlight__0_4TO0_3">Qual</span><span id="noHighlight_0.9487001642029698"> </span><span id="ouHighlight__6_10TO5_9">mídia</span><span id="noHighlight_0.5818721598559546"> </span><span id="ouHighlight__12_17TO11_14">deve</span><span id="noHighlight_0.8216010413042378"> aplicar-</span><span id="ouHighlight__19_23TO24_25">se</span><span id="noHighlight_0.9684099649594098"> </span><span id="ouHighlight__25_26TO27_27">a</span><span id="noHighlight_0.6453849418761239"> </span><span id="ouHighlight__28_31TO29_32">este</span><span id="noHighlight_0.8646761478920065"> </span><span id="ouHighlight__33_37TO34_39">estilo</span><span id="noHighlight_0.21618152360947235">.</span><span id="noHighlight_0.6502822773321322"> </span><span id="ouHighlight__40_45TO42_45">Deve</span><span id="noHighlight_0.8517521288787646"> </span><span id="ouHighlight__47_48TO47_49">ser</span><span id="noHighlight_0.3429259151906706"> </span><span id="ouHighlight__50_50TO51_53">uma</span><span id="noHighlight_0.21714643269449368"> </span><span id="ouHighlight__58_62TO55_62">consulta</span><span id="noHighlight_0.4634673334346823"> de </span><span id="ouHighlight__52_56TO67_71">mídia</span><span id="noHighlight_0.22857637058931268">,</span><span id="noHighlight_0.694132699274177"> </span><span id="ouHighlight__65_67TO74_81">consulte</span> <a href="http://dev.w3.org/csswg/css3-mediaqueries">http://dev.w3.org/csswg/css3-mediaqueries</a>.</dd>
 <dt>scoped</dt>
 <dd>Se este atributo está presente, <span id="ouHighlight__0_3TO0_4">então</span><span id="noHighlight_0.7072472779279142"> </span><span id="ouHighlight__5_7TO6_6">o</span><span id="noHighlight_0.15338123492911987"> </span><span id="ouHighlight__9_13TO8_13">estilo</span><span id="noHighlight_0.41845648486720943"> aplica-</span><span id="ouHighlight__15_21TO22_23">se</span><span id="noHighlight_0.950417667445752"> </span><span id="ouHighlight__23_26TO25_30">apenas</span><span id="noHighlight_0.9144995569837693"> </span><span id="ouHighlight__28_29TO32_33">ao</span><span id="noHighlight_0.38786747032526664"> </span><span id="ouHighlight__31_33TO35_37">seu</span><span id="noHighlight_0.058590795139071616"> </span><span id="ouHighlight__42_48TO39_46">elemento</span><span id="noHighlight_0.9818376239477247"> </span><span id="ouHighlight__35_40TO48_50">pai</span><span id="noHighlight_0.554258042353067">. </span>Se está ausente, o estilo aplica-se ao documento inteiro.</dd>
 <dt>title</dt>
 <dd>
 <div><span id="ouHighlight__0_8TO0_9">Especifica</span><span id="noHighlight_0.42987463148670984"> os </span><span id="ouHighlight__34_37TO14_22">conjuntos</span><span id="noHighlight_0.8221645677949255"> de </span><span id="ouHighlight__28_32TO27_32">folhas</span><span id="noHighlight_0.43137767689811523"> de </span><span id="ouHighlight__22_26TO37_42">estilo</span><span id="noHighlight_0.05923721990289876"> </span><span id="ouHighlight__10_20TO44_54">alternativa</span><span id="noHighlight_0.13072207195995622">.</span></div>
 </dd>
 <dt>disabled</dt>
 <dd>
 <div><span id="ouHighlight__0_1TO0_1">Se</span><span id="noHighlight_0.600441022166897"> </span><span id="ouHighlight__3_5TO3_10">definido</span><span id="noHighlight_0.13139955085373511">,</span><span id="noHighlight_0.8717514828663568"> </span><span id="ouHighlight__8_15TO13_20">desativa</span><span id="noHighlight_0.6238364008051305"> </span><span id="ouHighlight__17_21TO22_22">(</span><span id="ouHighlight__23_25TO23_25">não</span><span id="noHighlight_0.14891134719059346"> </span><span id="ouHighlight__27_32TO27_36">se aplica)</span><span id="noHighlight_0.6376602974642449"> à</span><span id="ouHighlight__34_36TO38_39">s</span><span id="noHighlight_0.7171441911265772"> </span><span id="ouHighlight__44_48TO41_46">regras</span><span id="noHighlight_0.9674741518492469"> de </span><span id="ouHighlight__38_42TO51_56">estilo</span><span id="noHighlight_0.6808438926767122"> </span><span id="ouHighlight__50_51TO58_61">para</span><span id="noHighlight_0.36424926955213305"> </span><span id="ouHighlight__53_55TO63_63">a</span><span id="noHighlight_0.896825854484904"> </span><span id="ouHighlight__57_90TO65_98">{{domxref("document","Document")}}</span><span id="noHighlight_0.43693055041022915"> </span><span id="ouHighlight__92_95TO100_102">que</span><span id="noHighlight_0.39862222385832574"> </span><span id="ouHighlight__97_99TO104_106">são</span><span id="noHighlight_0.28020993616401263"> </span><span id="ouHighlight__101_109TO108_120">especificadas</span><span id="noHighlight_0.903019508942388"> </span><span id="ouHighlight__111_116TO122_123">no</span><span id="noHighlight_0.8716870288974083"> </span><span id="ouHighlight__118_128TO125_132">elemento</span><span id="noHighlight_0.07707647090584646">.</span></div>
 </dd>
</dl>

<h2 id="Exemplos">Exemplos</h2>

<h3 id="Uma_folha_de_estilo_simples">Uma folha de estilo simples</h3>

<pre class="brush:html">&lt;style type="text/css"&gt;
body {
  color:red;
}
&lt;/style&gt;
</pre>

<h3 id="Uma_folha_de_estilos_com_escopo">Uma folha de estilos com escopo</h3>

<pre class="brush:html;highlight:7">&lt;article&gt;
  &lt;div&gt;The scoped attribute allows for you to include style elements mid-document.
   Inside rules only apply to the parent element.&lt;/div&gt;
  &lt;p&gt;This text should be black. If it is red your browser does not support the scoped attribute.&lt;/p&gt;
  &lt;section&gt;
    &lt;style scoped&gt;
      p { color: red; }
    &lt;/style&gt;
    &lt;p&gt;This should be red.&lt;/p&gt;
  &lt;/section&gt;
&lt;/article&gt;
</pre>

<h4 id="Amostra">Amostra</h4>

<div>{{ EmbedLiveSample('A_scoped_stylesheet', '100%', '200') }}</div>

<div> </div>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{ SpecName('HTML WHATWG', 'document-metadata.html#the-style-element', 'style') }}</td>
   <td>{{ Spec2('HTML WHATWG') }}</td>
   <td>No change from {{ SpecName('HTML5 W3C') }}.</td>
  </tr>
  <tr>
   <td>{{ SpecName('HTML5 W3C', 'document-metadata.html#the-style-element', 'style') }}</td>
   <td>{{ Spec2('HTML5 W3C') }}</td>
   <td>Added the <code>scoped</code> attribute</td>
  </tr>
  <tr>
   <td>{{ SpecName('HTML4.01', 'present/styles.html#h-14.2.3', 'style') }}</td>
   <td>{{ Spec2('HTML4.01') }}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Recurso</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop(1.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><font face="Consolas">escopo</font></td>
   <td>20 <span style="color: #4d4e53;">[1]</span></td>
   <td>{{CompatGeckoDesktop(21.0)}}<a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=508725">[2]</a></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Recurso</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop(1.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><font face="Consolas">escopo</font></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile(25.0)}}<a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=508725">[2]</a></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Suportado no Chrome +20 à 34 permitindo que o "<strong>Enable &lt;style scoped&gt;</strong>" ou "<strong>experimental WebKit features</strong>" bandeira em chrome://flags. <a href="https://groups.google.com/a/chromium.org/forum/#!searchin/blink-dev/scoped/blink-dev/R1x18ZLS5qQ/Bjuh_cENhlQJ">Removido em Chrome 35+ devido</a> à complexidade de código.<br>
 [2] Gecko 20 e implementar mais tarde: pseudo-classes de escopo, mas o layout de preferência.css. pseudo-escopo.habilitado deve ser definido como verdadeiro. <span id="ouHighlight__128_131TO151_154">Este</span><span id="noHighlight_0.15467017134631428"> </span><span id="ouHighlight__133_134TO156_156">é</span><span id="noHighlight_0.19032478155667737"> </span><span id="ouHighlight__136_139TO158_163">apenas</span><span id="noHighlight_0.4481609875438388"> </span><span id="ouHighlight__141_143TO165_165">o</span><span id="noHighlight_0.2856676670965124"> </span><span id="ouHighlight__145_148TO167_170">caso</span><span id="noHighlight_0.3503742666548186"> </span><span id="ouHighlight__150_151TO172_174">por</span><span id="noHighlight_0.5176009057037444"> </span><span id="ouHighlight__153_159TO176_181">padrão</span><span id="noHighlight_0.41189447914399674"> </span><span id="ouHighlight__161_162TO183_184">em</span><span id="noHighlight_0.4570854011972225"> </span><span id="ouHighlight__164_170TO186_200">todas</span><span id="noHighlight_0.2404120565835543"> </span><span id="ouHighlight__188_195TO204_210">versões</span><span id="noHighlight_0.26344014792456754"> de </span><span id="ouHighlight__183_186TO215_219">teste</span><span id="noHighlight_0.862371668935014"> de </span><span id="ouHighlight__176_181TO224_229">Aurora e Nightly</span><span id="noHighlight_0.3727967329118698">.</span></p>

<p> </p>

<h2 id="Veja_também">Veja também:</h2>

<ul>
 <li>O elemento {{HTMLElement("link")}} que permite usar folhas de estilo externas.</li>
</ul>

<p>{{HTMLRef}}</p>