aboutsummaryrefslogtreecommitdiff
path: root/files/es/web/css/introducción/index.html
blob: 678ec25622aedf7d7297c7e763362a1ed8a9bfc2 (plain)
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
---
title: Introducción
slug: Web/CSS/Introducción
tags:
  - CSS
  - 'CSS:Introducción'
  - para_revisar
translation_of: Learn/CSS/First_steps
---
<h2 id="Presentación"><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Presentación</span></span></h2>

<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Este tutorial es una introducción a las hojas de estilo en cascada (Cascading Style Sheets o CSS).</span></span></p>

<p><span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Además, te guía a través de las características básicas de CSS con ejemplos prácticos que puedes probar por ti mismo en tu propio equipo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Está dividido en dos partes.</span></span></p>

<ul>
 <li><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La parte I ilustra las características estándar de CSS que funcionan en los navegadores Mozilla y también en la mayoría de los navegadores modernos.</span></span></li>
</ul>

<ul>
 <li><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La parte II contiene algunos ejemplos de características especiales que funcionan en Mozilla, pero no necesariamente en otros entornos.</span></span></li>
</ul>

<p><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">El tutorial se basa en la <a class="external" href="http://www.w3.org/TR/CSS21/" title="http://www.w3.org/TR/CSS21/">Especificación CSS 2.1</a> .</span></span></p>

<h3 id="¿Quién_debe_usar_este_tutorial"><span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">¿Quién debe usar este tutorial?</span></span></h3>

<p><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Este tutorial es sobre todo para los principiantes en CSS, pero también lo puedes usar si tienes alguna experiencia en CSS.</span></span></p>

<p><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si eres principiante en CSS, usa la parte I de este tutorial para entender CSS y aprender a usarlo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">A continuación, utiliza la parte II para comprender el ámbito de aplicación de CSS en Mozilla.</span></span></p>

<p><span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si sabes algo de CSS, puede omitir las partes de la guía de aprendizaje que ya conoces y sólo utilizar las partes que te interesen.</span></span></p>

<p><span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si tienes experiencia en CSS, pero no en Mozilla, puedes saltar a la parte II.</span></span></p>

<h3 id="¿Qué_se_necesita_antes_de_empezar"><span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">¿Qué se necesita antes de empezar?</span></span></h3>

<p><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para aprovechar al máximo este tutorial, necesitas un editor para archivos de texto y un navegador Mozilla (Firefox o Mozilla Suite).</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">También debes saber cómo utilizarlos de forma básica.</span></span></p>

<p><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si no deseas editar los archivos, entonces puedes leer el tutorial y ver las fotos, pero es una forma menos eficaz de aprender.</span></span></p>

<p><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Algunas partes del tutorial, que son opcionales, requieren otro software de Mozilla.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si no quieres descargar otros software de Mozilla, entonces puedes saltártelas.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El otro software de Mozilla al que hace referencia este tutorial incluye:</span></span></p>

<ul>
 <li><a href="/en/DOM_Inspector" title="en/Dom inspector"><span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Inspector DOM</span></span></a></li>
</ul>

<p><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><strong>Nota:</strong> CSS ofrece distintas maneras de trabajar con el color, por lo que las partes de este tutorial dependen de él.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Sólo puedes utilizar estas partes del tutorial fácilmente si dispones de una pantalla en color y de visión del color normal.</span></span></p>

<h3 id="Cómo_utilizar_este_tutorial"><span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Cómo utilizar este tutorial</span></span></h3>

<p><span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para utilizar este tutorial, lee las páginas con atención y en orden.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si se te pasa una página, tal vez te resulte difícil de entender las páginas siguientes.</span></span></p>

<p><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En cada página, utiliza la sección de <em>Información</em> para entender cómo funciona CSS.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Usa la sección <em>Acción</em> para tratar de usar CSS en tu propio equipo.</span></span></p>

<p><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para controlar que has comprendido los contenidos, acepta el reto al final de cada página.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Las soluciones a los retos están enlazadas debajo de los retos, por lo que no es necesario verlos si no quieres.</span></span></p>

<p><span class="goog-gtc-unit" id="goog-gtc-unit-33"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para entender CSS en mayor profundidad, lee la información que se encuentra en las cajas con el título <em>Más detalles.</em></span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Utiliza los enlaces que hay para encontrar información de referencia acerca de CSS.</span></span></p>

<h2 id="Parte_I_del_tutorial"><span class="goog-gtc-unit" id="goog-gtc-unit-35"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Parte I del tutorial </span></span></h2>

<p><span class="goog-gtc-unit" id="goog-gtc-unit-36"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Una guía paso a paso básica para CSS.</span></span></p>

<ol>
 <li><strong><a href="/es/docs/Web/CSS/Como_iniciar/Que_es_CSS" title="es/docs/Web/CSS/Como iniciar/Que es CSS"><span class="goog-gtc-unit" id="goog-gtc-unit-37"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Qué es CSS</span></span></a></strong></li>
 <li><strong><a href="/es/docs/Web/CSS/Como_iniciar/Por_que_usar_CSS" title="es/docs/Web/CSS/Como iniciar/Por que usar CSS"><span class="goog-gtc-unit" id="goog-gtc-unit-38"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Por qué usar CSS</span></span></a></strong></li>
 <li><strong><a href="/en/CSS/Getting_Started/How_CSS_works" title="en/CSS/Getting Started/How CSS works"><span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Cómo funciona CSS</span></span></a></strong></li>
 <li><strong><a href="/en/CSS/Getting_Started/Cascading_and_inheritance" title="en/CSS/Getting Started/Cascading and inheritance"><span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Cascada y herencia</span></span></a></strong></li>
 <li><strong><a href="/en/CSS/Getting_Started/Selectors" title="en/CSS/Getting Started/Selectors"><span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Selectores</span></span></a></strong></li>
 <li><strong><a href="/en/CSS/Getting_Started/Readable_CSS" title="en/CSS/Getting Started/Readable CSS"><span class="goog-gtc-unit" id="goog-gtc-unit-42"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">CSS legibles </span></span></a></strong></li>
 <li><strong><a href="/en/CSS/Getting_Started/Text_styles" title="en/CSS/Getting Started/Text styles"><span class="goog-gtc-unit" id="goog-gtc-unit-43"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Estilos de texto</span></span></a></strong></li>
 <li><strong><a href="/en/CSS/Getting_Started/Color" title="en/CSS/Getting_Started/Color">Color</a></strong></li>
 <li><strong><a href="/en/CSS/Getting_Started/Content" title="en/CSS/Getting Started/Content"><span class="goog-gtc-unit" id="goog-gtc-unit-45"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-99 goog-gtc-translatable" dir="ltr">Contenido</span></span></a></strong></li>
 <li><strong><a href="/en/CSS/Getting_Started/Lists" title="en/CSS/Getting Started/Lists"><span class="goog-gtc-unit" id="goog-gtc-unit-46"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Listas</span></span></a></strong></li>
 <li><strong><a href="/en/CSS/Getting_Started/Boxes" title="en/CSS/Getting Started/Boxes"><span class="goog-gtc-unit" id="goog-gtc-unit-47"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Cajas</span></span></a></strong></li>
 <li><strong><a href="/en/CSS/Getting_Started/Layout" title="en/CSS/Getting Started/Layout"><span class="goog-gtc-unit" id="goog-gtc-unit-48"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Diseño</span></span></a></strong></li>
 <li><strong><a href="/en/CSS/Getting_Started/Tables" title="en/CSS/Getting Started/Tables"><span class="goog-gtc-unit" id="goog-gtc-unit-49"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Tablas</span></span></a></strong></li>
 <li><strong><a href="/es/docs/Web/CSS/Introducción/Media" title="es/docs/Web/CSS/Introducción/Media"><span class="goog-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Multimedia</span></span></a></strong></li>
</ol>

<h2 id="Parte_II_del_tutorial"><span class="goog-gtc-unit" id="goog-gtc-unit-51"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Parte II del tutorial</span></span></h2>

<p><span class="goog-gtc-unit" id="goog-gtc-unit-52"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Ejemplos que muestran el ámbito de aplicación de CSS en Mozilla.</span></span></p>

<ol>
 <li><strong><a href="/en/CSS/Getting_Started/JavaScript" title="en/CSS/Getting Started/JavaScript"><span class="goog-gtc-unit" id="goog-gtc-unit-53"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">JavaScript</span></span></a></strong></li>
 <li><strong><a href="/en/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting Started/XBL bindings"><span class="goog-gtc-unit" id="goog-gtc-unit-54"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Enlaces XBL</span></span></a></strong></li>
 <li><strong><a href="/en/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting Started/XUL user interfaces"><span class="goog-gtc-unit" id="goog-gtc-unit-55"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Interfaces de usuario XUL</span></span></a></strong></li>
 <li><strong><a href="/en/CSS/Getting_Started/SVG_graphics" title="en/CSS/Getting Started/SVG graphics"><span class="goog-gtc-unit" id="goog-gtc-unit-56"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Gráficos SVG</span></span></a></strong></li>
 <li><strong><a href="/en/CSS/Getting_Started/XML_data" title="en/CSS/Getting Started/XML data"><span class="goog-gtc-unit" id="goog-gtc-unit-57"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Datos XML</span></span></a></strong></li>
</ol>

<p>{{ languages( { "en": "en/CSS/Getting_Started", "de": "de/CSS/Einführung", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}</p>