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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
|
---
title: Conteúdo
slug: Web/CSS/Como_começar/Conteúdo
tags:
- 'CSS:Como_começar'
translation_of: Learn/CSS/Howto/Generated_content
---
<p>{{ PreviousNext("CSS:Como começar:Cor", "CSS:Como começar:Listas") }}</p>
<p>Esta página descreve algumas maneiras que você pode usar no CSS para adicionar conteúdo quando um documento é exibido.</p>
<p>Você modifica sua folha de estilo para adicionar conteúdo de texto e uma imagem.</p>
<h2 id="Informa.C3.A7.C3.A3o:_Conte.C3.BAdo" name="Informa.C3.A7.C3.A3o:_Conte.C3.BAdo">Informação: Conteúdo</h2>
<p>Uma das vantagens importantes das CSS é que ele o ajuda a separar o estilo do documento do seu conteúdo. Mas há situações onde faz sentido especificar certo conteúdo como parte de sua folha de estilo, não como parte do seu documento.</p>
<p>O conteúdo especificado em uma folha de estilo pode consistir em texto ou imagens. Você especifica o conteúdo em sua folha de estilo quando o conteúdo tem uma ligação próxima à estrutura do documento.</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
<caption>Mais detalhes</caption>
<tbody>
<tr>
<td>Especificar o conteúdo em uma folha de estilo pode causar complicações. Por exemplo, você pode ter versões diferentes da língua do seu documento que compartilham uma folha de estilo. Se parte da folha de estilo tem que ser traduzida, isto mostra que você precisa por estas partes da folha de estilo em arquivos separados e arrumá-los para então ligá-los com a versão apropriada da língua do seu documento.
<p>Estas complicações não surgem se o conteúdo que você especificou consistir em símbolos ou imagens que se aplicam em todas as línguas e culturas.</p>
<p><br>
O conteúdo especificado em uma folha de estilo não se tornará parte do DOM.</p>
</td>
</tr>
</tbody>
</table>
<h3 id="Conte.C3.BAdo_do_texto" name="Conte.C3.BAdo_do_texto">Conteúdo do texto</h3>
<p>CSS pode inserir um texto antes ou depois de um elemento. Para especificar isto, faça uma regra e adicione <code>:before</code> ou <code>:after</code> ao seletor. Na declaração, especifique a propriedade <code>content</code> com o conteúdo do texto como seu valor.</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
<caption>Exemplo</caption>
<tbody>
<tr>
<td>Esta regra adiciona o texto <span style="font-weight: bold; color: navy;">Referência:</span> antes de todo elemento com a classe <code>ref</code>:
<div style="width: 30em;">
<pre class="eval">
.ref:before {
font-weight: bold;
color: navy;
content: "Referência: ";
}
</pre>
</div>
</td>
</tr>
</tbody>
</table>
<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
<caption>Mais detalhes</caption>
<tbody>
<tr>
<td>O caractere de configuração de uma folha de estilo é por padrão o UTF-8, mas isto pode ser especificado na ligação, na própria folha de estilo ou por outras maneiras. Para detalhes, veja <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q23">4.4 CSS style sheet representation</a> na CSS Specification.
<p>Caracteres individuais podem às vezes ser especificados por um mecanismo de escape que use o contra barra (\) com o caráter de escape. Por exemplo, \265B é um símbolo do xadrez para a rainha preta ♛. Para detalhes, veja <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q24">Referring to characters not represented in a character encoding</a> e também <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q6">Characters and case</a> em CSS Specification.</p>
</td>
</tr>
</tbody>
</table>
<h3 id="Conte.C3.BAdo_da_imagem" name="Conte.C3.BAdo_da_imagem">Conteúdo da imagem</h3>
<p>Para adicionar uma imagem antes ou depois de um elemento, você pode especificar a URL de um arquivo de imagem no valor da propriedade <code>content</code>.</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
<caption>Exemplo</caption>
<tbody>
<tr>
<td>Esta regra adiciona um espaço e um ícone depois de cada ligação da classe <code>glossary</code>:
<div style="width: 45em;">
<pre class="eval">
a.glossary:after {content: " " url("../images/glossary-icon.gif");}
</pre>
</div>
</td>
</tr>
</tbody>
</table>
<p><br>
Para adicionar uma imagem ao fundo de um elemento, especifique a URL de um arquivo de imagem no valor da propriedade <code>background</code>. Isto é uma propriedade que especifica a cor do fundo, a imagem, como a imagem repete, e alguns outros detalhes.</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
<caption>Exemplo</caption>
<tbody>
<tr>
<td>Esta regra configura o fundo de um elemento específico, usando uma URL para especificar um arquivo de imagem.
<p>O seletor especifica o id do elemento. O valor <code>no-repeat</code> faz a imagem aparecer apenas uma vez:</p>
<div style="width: 50em;">
<pre class="eval">
#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;}
</pre>
</div>
</td>
</tr>
</tbody>
</table>
<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
<caption>Mais detalhes</caption>
<tbody>
<tr>
<td>Para informações sobre propriedades individuais que afetam o fundo, e sobre outras opções que você pode especificar para as imagens de fundo, veja <a class="external" href="http://www.w3.org/TR/CSS21/colors.html#q2">The background</a> na CSS Specification.</td>
</tr>
</tbody>
</table>
<h2 id="A.C3.A7.C3.A3o:_Adicionando_uma_imagem_de_fundo" name="A.C3.A7.C3.A3o:_Adicionando_uma_imagem_de_fundo">Ação: Adicionando uma imagem de fundo</h2>
<p>Esta imagem é um quadrado branco com uma linha azul em baixo. Baixe o arquivo desta imagem no mesmo diretório do seu arquivo CSS:</p>
<table style="border: 2px solid #ccc;">
<tbody>
<tr>
<td><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/2528/=Blue-rule.png"></td>
</tr>
</tbody>
</table>
<p>(Por exemplo, clique com o botão direito sobre isto para abrir o menu de contexto, então escolha Salvar Imagem Como... e especifique o diretório que você está usando para este tutorial.)</p>
<p>Edite o seu arquivo CSS e adicione esta regra ao corpo, configurando a imagem de fundo para a página inteira.</p>
<div style="width: 40em;">
<pre class="eval">background: url("Blue-rule.png");
</pre>
</div>
<p>O valor <code>repeat</code> é o padrão, então isto não precisa ser especificado. A imagem é repetida horizontal e verticalmente, dando a aparência parecida com a de um papel de escrita com linhas:</p>
<div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;">
<p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="/@api/deki/files/2527/=Blue-rule-ground.png"></p>
<div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;">
<div style="font-style: italic; width: 24em;">
<p><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</p>
</div>
<div style="font-style: normal; padding-top: 2px; height: 8em;">
<p><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</p>
</div>
</div>
</div>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
<caption>Desafio</caption>
<tbody>
<tr>
<td>Baixe esta imagem:
<table style="border: 2px solid #ccc;">
<tbody>
<tr>
<td><img alt="Image:Yellow-pin.png" class="internal" src="/@api/deki/files/2557/=Yellow-pin.png"></td>
</tr>
</tbody>
</table>
<p>Adicione uma regra à sua folha de estilo então isto mostrará a imagem no começo de cada linha:</p>
<div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;">
<p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="/@api/deki/files/2527/=Blue-rule-ground.png"></p>
<div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;">
<div style="font-style: italic; width: 24em; padding-top: 8px;"><img alt="image:Yellow-pin.png" class="internal" src="/@api/deki/files/2557/=Yellow-pin.png"> <strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</div>
<div style="font-style: normal; padding-top: 12px; height: 8em;"><img alt="image:Yellow-pin.png" class="internal" src="/@api/deki/files/2557/=Yellow-pin.png"> <strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3>
<p>Uma maneira comum de adicionar conteúdo à folha de estilo é marcar os itens em listas. Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Conte%C3%BAdo" title="Talk:pt/CSS/Como_começar/Conteúdo">Discussão</a>.</p>
<p>A próxima página descreve como especificar o estilo para elementos de listas: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Listas" title="pt/CSS/Como_começar/Listas">Listas</a></strong></p>
<p>{{ PreviousNext("CSS:Como começar:Cor", "CSS:Como começar:Listas") }}</p>
|
