You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<caption><spanclass="caption-text">Norma de estilo</span><aclass="headerlink" href="#id6" title="Enlace permanente a esta tabla">¶</a></caption>
192
192
<thead>
193
193
<trclass="row-odd"><thclass="head"><p>p</p></th>
194
194
<thclass="head"><p>{</p></th>
@@ -387,7 +387,7 @@ <h2><span class="section-number">7.2.1. </span>Sentencias<a class="headerlink" h
387
387
</dl>
388
388
<dlid="css-pseudoelementos">
389
389
<dt><strong>Pseudoelementos</strong></dt><dd><p>Los <emclass="dfn">pseudoelementos</em> son entidades del documento <abbrtitle="HyperText Markup Language">HTML</abbr> que no se
390
-
representan con nodos elemento. Desde el nivel 3<aclass="footnote-reference brackets" href="#id3" id="id1" role="doc-noteref"><spanclass="fn-bracket">[</span>1<spanclass="fn-bracket">]</span></a>, se notan anteponiendo
390
+
representan con nodos elemento. Desde el nivel 3<aclass="footnote-reference brackets" href="#id4" id="id1" role="doc-noteref"><spanclass="fn-bracket">[</span>1<spanclass="fn-bracket">]</span></a>, se notan anteponiendo
391
391
dos veces dos puntos («::») al nombre del pseudoelemento. Algunos de los
<spanid="css-unidades"></span><h2><spanclass="section-number">7.2.4. </span>Unidades<aclass="headerlink" href="#unidades" title="Enlace permanente a este encabezado">¶</a></h2>
de una longitud en una unidad de medida, por lo que es muy recomendable saber
1000
+
qué unidades nos permite usar <abbrtitle="Cascading Style Sheets">CSS</abbr>. Podemos distinguir:</p>
1001
+
<ulclass="simple">
1002
+
<li><p>Longitudes absolutas.</p></li>
1003
+
<li><p>Longitudes relativas.</p></li>
1004
+
<li><p>Porcentajes.</p></li>
1005
+
</ul>
1006
+
<sectionid="longitudes-absolutas">
1007
+
<h3><spanclass="section-number">7.2.4.1. </span>Longitudes absolutas<aclass="headerlink" href="#longitudes-absolutas" title="Enlace permanente a este encabezado">¶</a></h3>
1008
+
<p>Son aquellas que utilizan ninguna referencia y, por tanto, siempre representan
<td><p>Es la unidad mínima en que se descompone una imagen.</p></td>
1022
+
</tr>
1023
+
<trclass="row-odd"><td><p>pt</p></td>
1024
+
<td><p>punto</p></td>
1025
+
<td><p>Equivale a <spanclass="math notranslate nohighlight">\(96/72\)</span> píxeles<aclass="footnote-reference brackets" href="#id5" id="id3" role="doc-noteref"><spanclass="fn-bracket">[</span>2<spanclass="fn-bracket">]</span></a>.</p></td>
1026
+
</tr>
1027
+
<trclass="row-even"><td><p>pc</p></td>
1028
+
<td><p>pica</p></td>
1029
+
<td><p>Equivale a 16 píxeles.</p></td>
1030
+
</tr>
1031
+
<trclass="row-odd"><td><p>Q</p></td>
1032
+
<td><p>cuarto de mm</p></td>
1033
+
<td><p>Es la cuarta parte de un mm.</p></td>
1034
+
</tr>
1035
+
<trclass="row-even"><td><p>mm</p></td>
1036
+
<td><p>milímetro</p></td>
1037
+
<td><p>Es la décima parte de un cm.</p></td>
1038
+
</tr>
1039
+
<trclass="row-odd"><td><p>cm</p></td>
1040
+
<td><p>centímetro</p></td>
1041
+
<td><p>Es la centésima parte del metro.</p></td>
1042
+
</tr>
1043
+
<trclass="row-even"><td><p>in</p></td>
1044
+
<td><p>pulgada</p></td>
1045
+
<td><p>Equivale a 96px o 2,54 cm.</p></td>
1046
+
</tr>
1047
+
</tbody>
1048
+
</table>
1049
+
<p>Por lo general, de estas medidas absolutas se usa <codeclass="docutils literal notranslate"><spanclass="pre">px</span></code> cuando definimos
1050
+
unidades para la pantalla, y <codeclass="docutils literal notranslate"><spanclass="pre">in</span></code>, <codeclass="docutils literal notranslate"><spanclass="pre">cm</span></code> o <codeclass="docutils literal notranslate"><spanclass="pre">mm</span></code> cuando definidos
1051
+
unidades para la versión impresa (p.e. unos márgenes de impresión).</p>
1052
+
</section>
1053
+
<sectionid="longitudes-relativas">
1054
+
<h3><spanclass="section-number">7.2.4.2. </span>Longitudes relativas<aclass="headerlink" href="#longitudes-relativas" title="Enlace permanente a este encabezado">¶</a></h3>
1055
+
<p>Son aquellas relativas a una referencia como el tamaño del dispositivo o el
1056
+
tamaño de la fuente. Por tanto, si modificamos el tamaño de la referencia,
<td><p>Equivale al ancho ocupado por la letra <em>M</em> mayúscula (la más ancha y de
1068
+
ahí su nombre) definida para el elemento. Por tanto, depende del valor de
1069
+
la propiedad <codeclass="docutils literal notranslate"><spanclass="pre">font-size</span></code>.</p></td>
1070
+
</tr>
1071
+
<trclass="row-odd"><td><p>rem</p></td>
1072
+
<td><p>Como la anterior, pero el valor de <codeclass="docutils literal notranslate"><spanclass="pre">font-size</span></code> que se usa es el del
1073
+
elemento raíz (o sea, <aclass="reference external" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html#technical_summary">html</a>), cuyo valor predeterminado es 16px.</p></td>
1074
+
</tr>
1075
+
<trclass="row-even"><td><p>ex</p></td>
1076
+
<td><p>Es la altura ocupada por la letra <em>x</em> minúscula definida para el elemento.
1077
+
En este caso, su valor depende tanto de <aclass="reference external" href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size">font-size</a> como de
1078
+
<aclass="reference external" href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-family">font-family</a>. Su valor aproximado, aunque variable, es 0.5em.</p></td>
1079
+
</tr>
1080
+
<trclass="row-odd"><td><p>rex</p></td>
1081
+
<td><p>Como el anterior, pero los valores que se toman como referencia son los
1082
+
del elemento <aclass="reference external" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html#technical_summary">html</a>.</p></td>
1083
+
</tr>
1084
+
<trclass="row-even"><td><p>ch</p></td>
1085
+
<td><p>Es el ancho del carácter <cite>0</cite> definido para el elemento.</p></td>
1086
+
</tr>
1087
+
<trclass="row-odd"><td><p>rch</p></td>
1088
+
<td><p>Como el anterior, pero se toma como referencia el elemento <aclass="reference external" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html#technical_summary">html</a>.</p></td>
1089
+
</tr>
1090
+
<trclass="row-even"><td><p>lh</p></td>
1091
+
<td><p>Equivale al valor de la propiedad <aclass="reference external" href="https://developer.mozilla.org/en-US/docs/Web/CSS/line-height">line-height</a> del elemento.</p></td>
1092
+
</tr>
1093
+
<trclass="row-odd"><td><p>rlh</p></td>
1094
+
<td><p>Como el anterior, pero se toma como referencia el elemento <aclass="reference external" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html#technical_summary">html</a>.</p></td>
1095
+
</tr>
1096
+
</tbody>
1097
+
</table>
1098
+
</section>
1099
+
<sectionid="porcentajes">
1100
+
<h3><spanclass="section-number">7.2.4.3. </span>Porcentajes<aclass="headerlink" href="#porcentajes" title="Enlace permanente a este encabezado">¶</a></h3>
1101
+
<p>Expresan un porcentaje sobre una determinada longitud.</p>
<td><p>Por lo general, expresa un porcentaje sobre una propiedad del elemento
1112
+
padre o del propio elemento.</p></td>
1113
+
</tr>
1114
+
<trclass="row-odd"><td><p>vw</p></td>
1115
+
<td><p>Expresa un porcentaje sobre el ancho del área de visualización que
1116
+
proporciona el navegador.</p></td>
1117
+
</tr>
1118
+
<trclass="row-even"><td><p>vh</p></td>
1119
+
<td><p>Expresa un porcentaje sobre la altura del área de visualización que
1120
+
proporciona el navegador.</p></td>
1121
+
</tr>
1122
+
<trclass="row-odd"><td><p>vmin</p></td>
1123
+
<td><p>Expresa un porcentaje sobre el mínimo entre la anchura y la altura del
1124
+
área de visualización que proporciona el navegador.</p></td>
1125
+
</tr>
1126
+
<trclass="row-even"><td><p>vmax</p></td>
1127
+
<td><p>Expresa un porcentaje sobre el máximo entre la anchura y la altura del
1128
+
área de visualización que proporciona el navegador.</p></td>
1129
+
</tr>
1130
+
</tbody>
1131
+
</table>
1132
+
<p>De todas estas unidades, la más anárquica es la de <em>porcentaje</em>, puesto que no
1133
+
está definido de forma general sobre qué longitud se calcula el porcentaje, sino
1134
+
que dependiendo de la propiedad <abbrtitle="Cascading Style Sheets">CSS</abbr> la longitud de referencia será una u otra.
1135
+
Por ejemplo, para <aclass="reference external" href="https://developer.mozilla.org/en-US/docs/Web/CSS/width">width</a> o <aclass="reference external" href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin">margin</a> se toma como
1136
+
referencia la anchura del elemento contenedor (padre). En cambio, para
1137
+
<aclass="reference external" href="https://developer.mozilla.org/en-US/docs/Web/CSS/line-height">line-height</a> se usa el tamaño de letra (<aclass="reference external" href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size">font-size</a>) del
1138
+
elemento mismo.</p>
1139
+
<divclass="admonition seealso">
1140
+
<pclass="admonition-title">Ver también</p>
1141
+
<p><aclass="reference external" href="https://jameshfisher.com/">Jim Fisher</a> facilita una <aclass="reference external" href="https://jameshfisher.com/2019/12/29/what-are-css-percentages/#square-wrapper">tabla de
1142
+
propiedades CSS y referentes cuando se usan porcentajes como valor</a></p>
1143
+
</div>
1144
+
</section>
1145
+
</section>
996
1146
<sectionid="ejercicios-propuestos">
997
-
<h2><spanclass="section-number">7.2.4. </span>Ejercicios propuestos<aclass="headerlink" href="#ejercicios-propuestos" title="Enlace permanente a este encabezado">¶</a></h2>
1147
+
<h2><spanclass="section-number">7.2.5. </span>Ejercicios propuestos<aclass="headerlink" href="#ejercicios-propuestos" title="Enlace permanente a este encabezado">¶</a></h2>
998
1148
<olclass="arabic">
999
1149
<li><p>Escriba el selector apropiado para las descripciones que se hacen a continuación:</p>
0 commit comments