de en fr hr it es

ESCRIBIR ECUACIONES MATEMÁTICAS Y QUÍMICAS
EN LA WEB CON CSS

 

La doble flecha de las ecuaciones en equilibrio

CO2 →← C + O2
HTML Código: CSS Código:
<div class="eq-c">
CO<sub>2</sub> <span class="rarrow">&rarr;<span class="larrow">&larr;</span></span> C + O<sub>2</sub>
</div>
 
.rarrow {
	position: relative;
	font-size: 125%;
	font-family: serif;
	top: -0.5ex;
	margin: 0px 2px;
	}
.larrow {
	position: absolute;
	left: 0px;
	top: 0.8ex;
	}

 

Cómo puedo hacer para meter fracciones en las páginas Web

  HTML Código:
2⁄11 <sup>2</sup>&frasl;<sub>11</sub>
c(NaOH) =
n(NaOH) / V(NaOH)
= 1.2345 mol dm-3
HTML Código: CSS 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>
 
.fraction {
	display: inline-block;
	position: relative;
	vertical-align: middle; 
	letter-spacing: 0.01em;
	text-align: center;
	}
.fraction > span { 
	display: block; 
	padding: 0.2em; 
	}
.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: CSS 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">&rarr;<span class="larrow">&larr;</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">&rarr;<span class="larrow">&larr;</span></span>

2<span class="sy-b">Cr<span class="oxbr">+3</span></span><sup>3+</sup>
</div>
 
.sy, .sy-r, .sy-g, .sy-b {
	position: relative;
	padding-left: 1px;
	font-size: 110%;
	font-weight: 500;
	text-align: center;
	}
.sy-r {color: #f00;}
.sy-g {color: #4f8c4f;}
.sy-b {color: #00f;}
.oxbr {
	position: absolute;
	top: -1em;
	left: 0px;
	width: 100%;
	font-family: serif;
	font-size: 70%;
	text-align: center;
	}
.eq-l, .eq-c {
	position: relative;
	padding: 15px 50px;
	font-size: 11pt;
	font-weight: 500;
	}
.eq-l {text-align: left;}
.eq-c {text-align: center;}

 

Vectores

A→ =
Δv→ / Δ t
HTML Código: CSS Código:
<div class="eq-c">
<span class="sy"><i>A</i><span class="oncapital">&rarr;</span></span> =
<div class="fraction">
<span class="fup">&Delta;<span class="sy"><i>v</i><span class="onsmall">&rarr;</span></span></span>
<span class="bar">/</span>
<span class="fdn">&Delta; <i>t</i></span>
</div>
</div>
 
.sy {
	position: relative;
	padding-left: 1px;
	font-size: 11pt;
	font-weight: 500;
	text-align: center;
	}
.sy span.oncapital {
	position: absolute;
	top: -1em;
	left: 0.2em;
	font-size: 70%;
	}
.sy span.onsmall {
	position: absolute;
	top: -0.6em;
	left: 0.2em;
	font-size: 70%;
	}

 

Límites

a =
lim Δ t→0
Δv / Δ t
146C → 147 N + ν–
HTML Código: CSS Código:
<div class="eq-c">
<i>a</i> =
<div class="limes">
<span class="overup">lim</span>
<span class="overdn">&Delta; <i>t</i>&rarr;0</span>
<div class="fraction">
<span class="fup">&Delta;<i>v</i></span>
<span class="bar">/</span>
<span class="fdn">&Delta; <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 &rarr;
<span class="limes"><span class="numup">14</span><span class="overdn">7</span>
</span>N + <span class="sy">&nu;<span class="onsmall">&ndash;</span></span>
</div>
 
.limes {
	display: inline-block;
	position: relative;
	margin: 0 2px;
	vertical-align: middle; 
	text-align: center;
}
.limes > span { 
	display: block; 
}
.limes span.numup {
	font-size: 70%;
}
.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: CSS Código:
<div class="eq-c">
<i>S</i> =
<span class="intsuma">
<span class="lim">5</span>
<span class="sum-frac">&sum;</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&pi;</span>
<span class="sum">&int;</span>
<span class="lim">0</span>
</span>
sin<i>x</i> d<i>x</i> = 0
</div>
 
.intsuma {
	display: inline-block;
	position: relative;
	vertical-align: middle;
	text-align: center;
	margin-bottom: 0.5ex;
	}
.intsuma .lim, .intsuma .lim-up {
	display: block;
	font-size: 75%;
	text-align: center;
	}
.intsuma .lim-up {
	margin-bottom: 0;
	margin-left: 0.8ex;
	}
.intsuma .lim {margin-bottom: -0.6ex;}
.intsuma .sum {font-size: 1.2em;}
.intsuma .sum-frac {font-size: 2em;}

 

Radicales

3√81
y = √x2 + 6
HTML Código: CSS Código:
<div class="eq-c">
<span class="radical"><span class="n-root">3</span>&radic;</span><span class="radicand">81</span>
</div>


<div class="eq-c">
<i>y</i> =
<span class="radical">&radic;</span><span class="radicand"><i>x</i><sup>2</sup> + 6</span>
</div>
 
.n-root {
	position: relative;
	top: -1.3em;
	left: 1.9ex;
	font-size: 45%;
	}
.radical {
	font-size: 1.7em;
	vertical-align: middle;
	}
.radicand { 
	padding: 0.5ex;
	border-top: thin black solid;
	}

 

Qué es lo que en caja de CSS

CSS box: margins, borders, paddings

 

W3C Link Checker

W3C Link Checker

 

Bibliografía: