ESCRIBIR ECUACIONES MATEMÁTICAS Y QUÍMICAS EN LA WEB CON CSS
Doble flecha ♦
Fracciones ♦
Número de oxidación ♦
Vectores ♦
Límites e número másico ♦
Suma e integrales ♦
Radicales
La doble flecha de las ecuaciones en equilibrio
C + O2 → CO2
HTML Código:
<div class="eq-c">
C + O<sub>2</sub> <span class="dblarrow">→</span> CO<sub>2</sub></div>
CSS Código:
.dblarrow {
font-size: 125%;
top: -0.4ex;
margin: 0 2px;
}
.dblarrow:after {
content:"\2190";
position: absolute;
left: 0;
top: 0.5ex;
}
Cómo puedo hacer para meter fracciones en las páginas Web
2⁄11
HTML Código:
<sup>2</sup>⁄<sub>11</sub>
c(NaOH) =
n(NaOH)
V(NaOH)
= 1.2345 mol dm-3
HTML Código:
<div class="eq-c">
<i>c</i>(NaOH) = <div class="fraction">
<span class="fup"><i>n</i>(NaOH)</span>
<span class="bar">/</span>
<span class="fdn"><i>V</i>(NaOH)</span>
</div>
= 1.2345 mol dm<sup>-3</sup>
</div>
CSS Código:
.fraction {
display: inline-block;
vertical-align: middle;
margin: 0 0.2em 0.4ex;
text-align: center;
}
.fraction > span {
display: block;
padding-top: 0.15em;
}
.fraction span.fdn {border-top: thin solid black;}
.fraction span.bar {display: none;}
Escriba el número de oxidación de los elementos
O:
Te+4O-22
→←
H+16Te+6O-26 +
2e-
R:
Cr+62O-272- +
6e-
→←
2Cr+33+
HTML Código:
<div class="eq-c">
<b>O: </b> <span class="sy-r">Te<span class="oxbr">+4</span></span><span class="sy">O<span class="oxbr">-2</span></span><sub>2</sub>
<span class="rarrow">→<span class="larrow">←</span></span>
<span class="sy">H<span class="oxbr">+1</span></span><sub>6</sub><span class="sy-r">Te<span class="oxbr">+6</span></span><span class="sy">O<span class="oxbr">-2</span></span><sub>6</sub> +
<span class="sy-g">2e<sup>-</sup></span>
</div>
<div class="eq-c">
<b>R: </b> <span class="sy-b">Cr<span class="oxbr">+6</span></span><sub>2</sub><span class="sy">O<span class="oxbr">-2</span></span><sub>7</sub><sup>2-</sup> +
<span class="sy-g">6e<sup>-</sup></span>
<span class="rarrow">→<span class="larrow">←</span></span>
2<span class="sy-b">Cr<span class="oxbr">+3</span></span><sup>3+</sup>
</div>
CSS Código:
.sy,
.sy-r,
.sy-g,
.sy-b {
position: relative;
text-align: center;
}
.sy-r {color: #f00;}
.sy-g {color: #4f8c4f;}
.sy-b {color: #00f;}
.oxbr,
.oncapital,
.onsmall {
position: absolute;
top: -1em;
left: 0px;
width: 100%;
font-size: 70%;
text-align: center;
}
.onsmall {
top: -0.7em;
}
Vectores
A→ =
Δv→
Δ t
HTML Código:
<div class="eq-c">
<span class="sy"><i>A</i><span class="oncapital">→</span></span> =<div class="fraction">
<span class="fup">Δ<span class="sy"><i>v</i><span class="onsmall">→</span></span></span>
<span class="bar">/</span>
<span class="fdn">Δ <i>t</i></span>
</div>
</div>
CSS Código:
.sy {
position: relative;
text-align: center;
}
.oncapital, .onsmall {
position: absolute;
top: -1em;
left: 0px;
width: 100%;
font-size: 70%;
text-align: center;
}
.onsmall {
top: -0.7em;
}
Límites e número másico
a =
lim
Δ t→0
Δv
Δ t
146C →
147
N + ν–
HTML Código:
<div class="eq-c">
<i>a</i> =<div class="limes">
<span class="overup">lim</span>
<span class="overdn">Δ <i>t</i>→0</span>
<div class="fraction">
<span class="fup">Δ<i>v</i></span>
<span class="bar">/</span>
<span class="fdn">Δ <i>t</i></span>
</div>
</div>
<div class="eq-c">
<span class="limes"><span class="numup">14</span><span class="overdn">6</span></span>C → <span class="limes"><span class="numup">14</span><span class="overdn">7</span>
</span>N + <span class="sy">ν<span class="onsmall">–</span></span>
</div>
CSS Código:
.limes {
position: relative;
display: inline-block;
margin: 0 0.2em;
vertical-align: middle;
text-align: center;
}
.limes > span {
display: block;
margin:-0.5ex auto;
}
.limes span.numup,
.limes span.overdn {
font-size: 70%;
}
Suma e integrales
S =
5
∑
n=0
(x + 1)n
n
2π
∫
0
sinx dx = 0
HTML Código:
<div class="eq-c">
<i>S</i> = <span class="intsuma">
<span class="lim">5</span>
<span class="sum-frac">∑</span>
<span class="lim"><i>n</i>=0</span>
</span>
<div class="fraction">
<span class="fup">(<i>x</i> + 1)<sup><i>n</i></sup></span>
<span class="bar">/</span>
<span class="fdn"><i>n</i></span>
</div>
</div>
<div class="eq-c">
<span class="intsuma"><span class="lim-up">2π</span>
<span class="sum">∫</span>
<span class="lim">0</span>
</span>
sin<i>x</i> d<i>x</i> = 0
</div>
CSS Código:
.intsuma {
position: relative;
display: inline-block;
vertical-align: middle;
text-align: center;
}
.intsuma > span {
display: block;
font-size: 70%;
}
.intsuma .lim-up {
margin-bottom: -1.0ex;
}
.intsuma .lim {
margin-top: -0.5ex;
}
.intsuma .sum {
font-size: 1.5em;
font-weight: lighter;
}
.intsuma .sum-frac {
font-size: 1.5em;
font-weight: 100;
}
Radicales
3√81
y =
√x2 + 6
HTML Código:
<div class="eq-c">
<span class="radical"><span class="n-root">3</span>√</span><span class="radicand">81</span></div>
<div class="eq-c">
<i>y</i> = <span class="radical">√</span><span class="radicand"><i>x</i><sup>2</sup> + 6</span>
</div>
CSS Código:
.radical {
position: relative;
font-size: 1.6em;
vertical-align: middle;
}
.n-root {
position: absolute;
top: -0.333em;
left: 0.333em;
font-size: 45%;
}
.radicand {
padding: 0.25em 0.25em;
border-top: thin black solid;
}
Qué es lo que en caja de CSS
El modelo de caja CSS es esencialmente una caja que se envuelve alrededor de los elementos HTML, y se compone de: márgenes, bordes, el relleno y el contenido real.
W3C Link Checker
Bibliografía:
- "CSS3 Dropdown Menu." 23 Feb. Web Designer Wall. 2010. 27 May. 2011. <http://webdesignerwall.com/tutorials/css3-dropdown-menu>
- "CSS Tutorial." W3Schools. 22 May. 2011. <http://www.w3schools.com/css/default.asp>
- Steve White. "Math in HTML with CSS." 7 Jul. 2011. <http://www.zipcon.net/~swhite/docs/math/math.html>
- "A MathML for CSS Profile." 7 June 2011, W3C. 8 Jul. 2011. <http://www.w3.org/TR/WD-html40-970708>
- "Unicode Character 'RIGHTWARDS ARROW OVER LEFTWARDS ARROW' (U+21C4)." FileFormat.Info. 14 Jul. 2011. <http://www.fileformat.info/info/unicode/char/21c4/index.htm>
Citación de esta página:
Generalic, Eni. "Escribir ecuaciones matemáticas y químicas en la Web con CSS." EniG. Tabla periódica de los elementos. KTF-Split, 18 Jan. 2024. Web. {Fecha de acceso}. <https://www.periodni.com/es/ecuaciones_matematicas_y_quimicas_en_la_web.html>.
Copyright © 1998-2024 by Eni Generalic. Todos los derechos reservados. | Bibliografía | Disclaimer