1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
|
---
title: CSS - Referência
slug: Web/CSS/Reference
tags:
- CSS
- Referencia
- Resumo
- Sinopse
- l10n:priority
translation_of: Web/CSS/Reference
original_slug: Web/CSS/Referência_CSS
---
<div>{{CSSRef}}</div>
<p class="summary">Utilize esta <strong>referência de CSS </strong>para explorar<strong> </strong>um <a href="/pt-PT/docs/Web/CSS/Referência_CSS#Índex_de_palavra-chave">índex alfabético</a> de todas as propriedades de <a href="/pt-PT/docs/Web/CSS">CSS</a> padrão, <a href="/pt-PT/docs/Web/CSS/Pseudoclasses">pseudoclasses, </a><a href="/pt-PT/docs/Web/CSS/Pseudoelementos">pseudoelementos</a>, <a href="/pt-PT/docs/Web/CSS/CSS_Tipos">tipos de dados</a>, e <a href="/pt-PT/docs/Web/CSS/At-rule">regras "at"</a>. Também pode explorar uma lista de todos os <a href="/pt-PT/docs/Web/CSS/Refer%C3%AAncia_CSS">seletores de CSS organizados pelo tipo</a> e uma lista de <a href="/pt-PT/docs/Web/CSS/Refer%C3%AAncia_CSS$edit#Concepts">conceitos de CSS chave</a>. Também incluido nesta breve <a href="/pt-PT/docs/Web/CSS/Refer%C3%AAncia_CSS$edit#DOM-CSS_CSSOM">referência de DOM-CSS / CSSOM</a>.</p>
<h2 id="Sintaxe_Básica">Sintaxe Básica</h2>
<h3 id="Estilo_padrão_de_sintaxe">Estilo padrão de sintaxe</h3>
<pre class="syntaxbox notranslate"><strong><var>selectorlist</var> {
<var>property</var>: <var>value</var>;</strong>
<var>[more property:value; pairs]</var>
<strong>}</strong>
... where <var>selectorlist</var> is: <var>selector[:pseudo-class] [::pseudo-element] [, more selectorlists]</var>
See <a href="#Selectors"><em>selector</em></a>, <a href="#pcls"><em>pseudo-class</em></a>, <em><a href="#pelm">pseudo-element</a></em> lists below.
</pre>
<h4 id="Exemplos_de_regra_de_estilo">Exemplos de regra de estilo</h4>
<pre class="brush: css notranslate">strong {
color: red;
}
div.menu-bar li:hover > ul {
display: block;
}
</pre>
<p>For a beginner-level introduction to the syntax of CSS selectors, please see <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">this tutorial</a>. Be aware that any <a href="/en-US/docs/Web/CSS/syntax">CSS syntax</a> error in a rule definition invalidates the entire rule. Invalid rules are ignored by the browser. Note that CSS rule definitions are entirely (ASCII) <a href="https://www.w3.org/TR/css-syntax-3/#intro">text-based</a>, whereas DOM-CSS / CSSOM (the rule management system) is <a href="https://www.w3.org/TR/cssom/#introduction">object-based</a>.</p>
<h3 id="Sintaxe_de_regra_At">Sintaxe de regra "At"</h3>
<p>As the structure of at-rules varies widely, please see <a href="/en-US/docs/Web/CSS/At-rule">At-rule</a> to find the syntax of the specific one you want.</p>
<h2 id="Índex_de_palavra-chave">Índex de palavra-chave</h2>
<div class="blockIndicator note">
<p><strong>Nota:</strong> Os nomes das propriadades neste índex <strong>não</strong> incluem os <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference">nomes de JavaScript </a>onde eles diferem com nomes padrão de CSS.</p>
</div>
<div>{{CSS_Ref}}</div>
<h2 id="Seletors"><a href="/en-US/docs/Web/CSS/CSS_Selectors">Seletors</a></h2>
<div class="hidden">
<div class="blockIndicator todo">
<p><strong>TODO:</strong> Consider using the <code><a href="https://github.com/mdn/kumascript/blob/master/macros/page.ejs">\{{Page}}</a></code> macro for this section.</p>
</div>
</div>
<h3 id="Seletores_básicos"><a href="/en-US/docs/Web/CSS/CSS_Selectors#Basic_selectors">Seletores básicos</a></h3>
<ul>
<li><a href="/en-US/docs/Web/CSS/Type_selectors">Type selector</a> <code>elementname</code></li>
<li><a href="/en-US/docs/Web/CSS/Class_selectors">Class selector</a> <code>.classname</code></li>
<li><a href="/en-US/docs/Web/CSS/ID_selectors">ID selector</a> <code>#idname</code></li>
<li><a href="/en-US/docs/Web/CSS/Universal_selectors">Universal selector</a> <code>*</code>, <code>ns|*</code>, <code>*|*</code>, <code>|*</code></li>
<li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selector</a> <code>[attr=value]</code></li>
</ul>
<h3 id="Combinadores"><a href="/en-US/docs/Web/CSS/CSS_Selectors#Combinators">Combinadores</a></h3>
<ul>
<li><a href="/en-US/docs/Web/CSS/Adjacent_sibling_selectors">Adjacent sibling combinator</a> <code>A + B</code></li>
<li><a href="/en-US/docs/Web/CSS/General_sibling_selectors">General sibling combinator</a> <code>A ~ B</code></li>
<li><a href="/en-US/docs/Web/CSS/Child_selectors">Child combinator</a> <code>A > B</code></li>
<li><a href="/en-US/docs/Web/CSS/Descendant_selectors">Descendant combinator</a> <code>A B</code></li>
<li><a href="/en-US/docs/Web/CSS/Column_combinator">Column combinator</a> <code>A || B</code> {{Experimental_Inline}}</li>
</ul>
<h3 id="Pseudoclasses"><a href="/pt-PT/docs/Web/CSS/Pseudoclasses">Pseudoclasses</a></h3>
<div class="index">
<ul>
<li class="hidden">{{Page("/en-US/docs/Web/CSS/Pseudo-classes", "index")}}</li>
</ul>
</div>
<h3 id="Pseudoelementos"><a href="/pt-PT/docs/Web/CSS/Pseudoelementos">Pseudoelementos</a></h3>
<div class="index">
<ul>
<li class="hidden">{{Page("/en-US/docs/Web/CSS/Pseudo-elements", "index")}}</li>
</ul>
</div>
<div class="blockIndicator note">
<p><strong>Consulte também:</strong> uma <a href="https://www.w3.org/TR/selectors/#selectors">lista de seletores</a> completa na especificação de Seletores Nível 3.</p>
</div>
<h2 id="Conceitos">Conceitos</h2>
<h3 id="Sintaxe_e_semântica">Sintaxe e semântica</h3>
<ul>
<li><a href="/en-US/docs/Web/CSS/Syntax">CSS syntax</a></li>
<li><a href="/en-US/docs/Web/CSS/At-rule">At-rules</a></li>
<li><a href="/en-US/docs/Web/CSS/Cascade">Cascade</a></li>
<li><a href="/en-US/docs/Web/CSS/Comments">Comments</a></li>
<li><a href="/en-US/docs/Glossary/Descriptor_(CSS)">Descriptor</a></li>
<li><a href="/en-US/docs/Web/CSS/inheritance">Inheritance</a></li>
<li><a href="/en-US/docs/Web/CSS/Shorthand_properties">Shorthand properties</a></li>
<li><a href="/en-US/docs/Web/CSS/Specificity">Specificity</a></li>
<li><a href="/en-US/docs/Web/CSS/Value_definition_syntax">Value definition syntax</a></li>
</ul>
<h3 id="Valores">Valores</h3>
<ul>
<li><a href="/en-US/docs/Web/CSS/actual_value">Actual value</a></li>
<li><a href="/en-US/docs/Web/CSS/computed_value">Computed value</a></li>
<li><a href="/en-US/docs/Web/CSS/initial_value">Initial value</a></li>
<li><a href="/en-US/docs/Web/CSS/resolved_value">Resolved value</a></li>
<li><a href="/en-US/docs/Web/CSS/specified_value">Specified value</a></li>
<li><a href="/en-US/docs/Web/CSS/used_value">Used value</a></li>
</ul>
<h3 id="Layout">Layout</h3>
<ul>
<li><a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">Block formatting context</a></li>
<li><a href="/en-US/docs/Web/CSS/box_model">Box model</a></li>
<li><a href="/en-US/docs/Web/CSS/All_About_The_Containing_Block">Containing block</a></li>
<li><a href="/en-US/docs/Web/CSS/Layout_mode">Layout mode</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Margin collapsing</a></li>
<li><a href="/en-US/docs/Web/CSS/Replaced_element">Replaced elements</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Stacking context</a></li>
<li><a href="/en-US/docs/Web/Guide/CSS/Visual_formatting_model">Visual formatting model</a></li>
</ul>
<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2>
<h3 id="Major_object_types">Major object types</h3>
<ul>
<li>document.<a href="/en-US/docs/Web/API/Document/styleSheets">styleSheets</a></li>
<li>styleSheets[i].<a href="/en-US/docs/Web/API/CSSRuleList">cssRules</a></li>
<li>cssRules[i].<a href="/en-US/docs/Web/API/CSSRule/cssText">cssText</a> (selector & style)</li>
<li>cssRules[i].<a href="/en-US/docs/Web/API/CSSStyleRule/selectorText">selectorText</a></li>
<li>elem.<a href="/en-US/docs/Web/API/HTMLElement/style">style</a></li>
<li>elem.style.<a href="/en-US/docs/Web/API/CSSStyleDeclaration/cssText">cssText</a> (just style)</li>
<li>elem.<a href="/en-US/docs/Web/API/Element/className">className</a></li>
<li>elem.<a href="/en-US/docs/Web/API/Element/classList">classList</a></li>
</ul>
<h3 id="Métodos_importantes">Métodos importantes</h3>
<ul>
<li>{{domxref("CSSStyleSheet.insertRule")}}</li>
<li>{{domxref("CSSStyleSheet.deleteRule")}}</li>
</ul>
<h2 id="Consultar_também">Consultar também:</h2>
<ul>
<li><a href="/en-US/docs/Web/CSS/Mozilla_Extensions">Mozilla CSS extensions</a> (prefixed with <code>-moz</code>)</li>
<li><a href="/en-US/docs/Web/CSS/Webkit_Extensions">WebKit CSS extensions</a> (mostly prefixed with <code>-webkit</code>)</li>
<li><a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">Microsoft CSS extensions</a> (prefixed with <code>-ms</code>)</li>
</ul>
|
