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
|
---
title: '@import'
slug: Web/CSS/@import
translation_of: Web/CSS/@import
---
<p>{{CSSRef}}</p>
<h2 id="Resumen">Resumen</h2>
<p>La regla-at <a href="/en/CSS" title="/en/CSS">CSS</a> <code>@import</code> permite importar reglas desde otras hojas de estilo. Estas reglas deben preceder a todos los otros tipos de reglas, excepto a las reglas {{ cssxref("@charset") }}; como esto no es una <a href="/en/CSS/Syntax#nested_statements" title="/en/CSS/Syntax#nested_statements">declaración anidada</a>, no puede ser usado dentro de <a href="/en/CSS/At-rule#Conditional_Group_Rules" title="en/CSS/At-rule#Conditional_Group_Rules">grupos condicionales de reglas-at</a>.</p>
<p>Para que los agentes de usuario puedan evitar recuperar recursos para tipos de medios no soportados, los autores pueden especificar reglas dependientes del tipo de medio <code>@import</code>. Estas condiciones @import se especifican separando por una coma las <a href="/en/CSS/Media_queries" title="/en/CSS/Media_queries">consultas de medios (media query)</a> despues de la <em>url</em>. En la ausencia de cualquier consulta de medios (media query), la importación es incondicional. Especificando <code>all</code> para el medio tiene el mismo efecto.</p>
<h2 id="Syntax" name="Syntax">Sintaxis</h2>
<pre class="eval">@import <em>url</em>; <em>or</em>
@import <em>url</em> <em>list-of-media-queries</em>;
</pre>
<p>Dónde :</p>
<dl>
<dt style="margin: 0 40px;"><em>url</em></dt>
<dd style="margin: 0 40px;">es una <span style="background-color: rgb(250, 251, 252); font-family: consolas,monaco,andale mono,monospace; font-size: 1rem; line-height: 19px; white-space: pre;">{{cssxref("<string>")}} </span>o un {{cssxref("<uri>")}}</dd>
<dd style="margin: 0pt 40px;">Representa la ubicación del recurso a importar. La <em>url</em> puede ser absoluta o relativa.</dd>
<dt style="margin: 0 40px;"><em>list-of-media-queries</em></dt>
<dd style="margin: 0 40px;">Es una lista separada por comas de <a href="/en/CSS/Media_queries" title="/en/CSS/Media_queries">consultas de medios (media query)</a> que condicionan la aplicación de las reglas CSS definidas en el enlace <em>url</em>. Si el navegador no soporta cualquiera de estos <a href="/en/CSS/Media_queries" title="/en/CSS/Media_queries">consultas de medios (media query)</a>, ni siquiera cargará el recurso vinculado.</dd>
</dl>
<h2 id="Examples" name="Examples">Ejemplos</h2>
<pre class="eval">@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);
</pre>
<h2 id="Specifications" name="Specifications">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Media Queries', '#media0', '@import') }}</td>
<td>{{ Spec2('CSS3 Media Queries') }}</td>
<td>Extiende la sintaxis para soportar cualquier <a href="/en/CSS/Media_queries" title="/en/CSS/Media_queries">consultas de medios (media query)</a> y no sólo los <a href="/en/CSS/@media#Media_types" title="/en/CSS/@media#Media_types">tipos de medios</a> simples.</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'cascade.html#at-import', '@import') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>Añade soporte para <span style="background-color: rgb(250, 251, 252); font-family: consolas,monaco,andale mono,monospace; font-size: 1rem; line-height: 19px; white-space: pre;">{{cssxref("<string>")}}</span><br>
para denotar la <em>url</em> de una hoja de estilo,<br>
y es requerida para insertar la regla <code>@import</code> en el principio del documento CSS.</td>
</tr>
<tr>
<td>{{ SpecName('CSS1', '#the-cascade', '@import') }}</td>
<td>{{ Spec2('CSS1') }}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>5.5</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>5.5</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
</tr>
</tbody>
</table>
</div>
|
