/* Paginas web HTML y hojas de estilo CSS */
/* Bartolome Sintes Marco */
/* https://www.mclibre.org */
/* */
/* CSS curso: HTML y CSS */
/* */
/* 5 de noviembre de 2021 */
/* */
/* CSS comun */
@font-face {
font-family: "Consolas";
src: url("fonts/consolas.woff");
}
html {
background-color: white;
font-family: sans-serif;
line-height: 130%;
text-align: justify;
}
section {
clear: both;
margin-top: 1em;
padding-top: 0;
border-top: solid 2px black;
}
section section {
border-top: solid 1px black;
}
footer {
margin-top: 2em;
}
h1 {
font-size: 200%;
line-height: 120%;
text-align: center;
}
h2 {
font-size: 120%;
}
h3 {
font-size: 110%;
}
h4 {
font-size: 105%;
font-weight: bold;
}
h2, h3, h4 {
clear: both;
}
pre, pre code {
margin-top: 0;
margin-bottom: 0;
font-family: "Consolas", monospace; /* Chrome user agent style sheet */
line-height: 120%;
white-space: pre-wrap;
}
hr {
clear: both;
}
hr.corta {
clear: both;
width: 50%;
}
p {
margin: 10px 0;
}
p.aviso {
margin: 10px;
padding: 10px;
border-left: 2px red solid;
color: red;
}
p.ultmod {
clear: both;
margin-top: 1px;
padding-top: 2px;
border-top: black 2px solid;
text-align: left;
}
p.licencia {
text-align: left;
}
p.separador {
height: 10px;
}
p.inline-con-borde {
display: inline-block;
margin: 5px;
padding: 5px;
border: black 1px solid;
}
.mcl-centrado {
text-align: center;
}
.mcl-svg-diagrama-temporal {
text-align: center;
}
.mcl-svg-figura {
text-align: center;
}
.derecha {
float: right;
margin-bottom: 5px;
margin-left: 10px;
}
.izquierda {
float: left;
margin-right: 10px;
margin-bottom: 5px;
}
img.vmedio {
vertical-align: middle;
}
a img {
border: none;
}
.soft-atajo-teclado {
font-family: monospace;
font-size: 120%;
font-weight: bold;
}
.soft-menu {
background-color: #d4d0c8;
font-family: serif;
}
.incompleto {
color: red;
}
.mcl-captura {
text-align: center;
}
.mcl-captura img, .mcl-captura svg {
width: auto;
max-width: 100%;
height: auto;
}
.mcl-captura img, .mcl-captura svg, .mcl-captura iframe {
padding: 5px;
border: black 2px dotted;
vertical-align: middle;
}
.codigo-resaltado {
margin: 0 1px;
padding: 0 1px;
outline: red 2px solid;
}
.codigo-resaltado-caja {
display: inline-block;
outline: red 2px solid;
}
.codigo-modificacion {
color: red;
font-weight: bold;
}
.no-justificado {
text-align: left;
}
.numero-circulo {
float: left;
margin-top: 10px;
margin-left: -60px;
font-size: 300%;
line-height: 1px;
}
math {
font-family: sans-serif;
font-size: 105%;
}
kbd {
font-family: monospace;
font-size: 120%;
font-weight: bold;
}
div.filaflex {
display: flex;
clear: both;
align-items: stretch;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
margin: 5px 0;
}
div.filaflex.cabecera {
margin-bottom: -5px;
padding-bottom: 0;
text-align: center;
}
div.filaflex.nogrow div:not([class="icono"]) {
flex-grow: 0;
width: auto;
}
div.filaflex.nogrow h2, div.filaflex.nogrow h3 {
margin: 0;
}
div.filaflex div:not([class="icono"]), div.filaflex iframe {
flex-grow: 1;
width: 100%;
}
div.filaflex div.nogrow {
flex-grow: 0;
width: auto;
}
div.filaflex div.columnaflex {
display: flex;
align-items: stretch;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
margin: 0;
padding: 0;
}
div.filaflex div.columnaflex div {
width: auto;
}
div.filaflex div.icono-navegadores {
flex-grow: 0;
width: 50px;
margin-top: 8px;
}
div.filaflex div.icono-navegadores-vacio {
flex-grow: 0;
width: 50px;
margin-top: 8px;
}
div.filaflex div.icono-ok {
flex-grow: 0;
width: 40px;
margin-top: 8px;
}
div.filaflex div.icono-xhtml-ok {
flex-grow: 0;
width: 120px;
margin-top: 8px;
}
div.filaflex div.icono-enlace {
flex-grow: 0;
width: 40px;
/* no tiene margin-top porque uso la clase en div.cabecera */
}
div.filaflex pre {
margin: 5px 0;
white-space: pre-wrap;
}
div.codigo, div[class^="resultado"], div[class^="enunciado"] {
clear: both;
margin: 5px 10px;
padding: 0 5px;
border: 2px black solid;
background-color: white;
color: black;
}
div.resultado-html-sin-borde {
border: none;
}
div.codigo {
font-family: "Consolas", monospace;
}
div.resultado-object {
padding: 0;
}
div.resultado-object object {
width: 100%;
}
iframe {
width: calc(100% - 25px);
margin: 5px 10px;
border: 2px black solid;
resize: both;
}
div.aviso-antiguo {
margin: 0 50px;
padding: 20px;
border: red 3px solid;
background-color: #ffbaba;
}
table {
text-align: left;
}
table.mcl-listado {
margin-top: 10px;
margin-bottom: 10px;
border-collapse: collapse;
}
table.mcl-listado tr {
border-bottom: black 1px solid;
}
table.mcl-listado tr.titulo {
border: none;
}
table.mcl-listado tr.titulo td {
padding-top: 20px;
font-weight: bolder;
}
table.mcl-listado tr.cabecera td {
border: none;
font-weight: bolder;
}
table.mcl-franjas thead tr, table.mcl-franjas tbody tr:nth-child(even) {
background-color: #eeeeee;
color: black;
}
table.mcl-centrado {
margin-right: auto;
margin-left: auto;
text-align: left;
}
td.mcl-centrado, th.mcl-centrado, tbody.mcl-centrado {
text-align: center;
}
table.tabla-con-borde {
border: #b2b2b2 1px solid;
}
table.tabla-con-borde td, table.tabla-con-borde th {
border: black 1px solid;
}
th {
text-align: center;
}
ol, ul {
margin-top: 3px;
margin-bottom: 6px;
padding-left: 1.5em;
}
ul ul {
padding-left: 1em;
}
li {
clear: both;
margin-top: 5px;
}
/* Para ejemplos de ejecucion de codigo */
div.mcl-diapo {
position: relative;
overflow: hidden;
flex-grow: 1;
height: 20em;
margin-bottom: 10px;
border: black 2px dotted;
line-height: 110%;
}
div.mcl-diapo > div {
position: relative;
width: 99%;
height: 98%;
padding: 5px;
}
div.mcl-diapo p.control {
position: absolute;
right: 0;
bottom: 0;
}
/* Enlaces a normas */
.con-aside {
float: left;
}
.enlace-norma {
float: right;
margin-left: 10px;
}
.enlace-norma > p {
float: left;
margin-left: 10px;
text-align: center;
}
.enlace-norma a {
text-decoration: none;
}
.enlace-norma + p {
clear: left;
}
/* Pantallas estrechas */
@media screen and (max-width: 768px) {
html {
margin-right: 5px;
margin-left: 40px;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 50px;
padding-left: 0.2em;
font-size: 80%;
text-align: left;
}
nav.portada {
position: static;
}
nav p {
margin: 5px 0 0;
font-size: 350%;
}
nav a {
color: black;
text-decoration: none;
}
nav div.toc {
display: none;
}
pre {
text-align: left;
white-space: pre-wrap;
}
div.filaflex {
display: block;
margin-bottom: 15px;
}
div.filaflex.cabecera {
display: none;
}
div.filaflex div:not([class="icono"]) {
width: auto;
}
div.filaflex div.icono-navegadores-vacio {
display: none;
}
div.mcl-diapo {
height: auto !important;
}
div.mcl-diapo p.control {
display: none;
}
p.oculta-small {
display: none;
}
}
/* Pantallas anchas */
@media screen and (min-width: 768px) {
html {
margin-right: 1em;
margin-left: 12em;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 14.5em;
padding-left: 0.2em;
font-size: 80%;
text-align: left;
}
nav h2 {
margin: 0;
padding: 1em 0 0;
font-size: 110%;
text-align: left;
}
nav h3 {
margin: 10px 0 0;
padding: 0;
font-size: 105%;
text-align: left;
}
nav p {
margin: 5px 0 0;
font-size: 350%;
}
nav a {
color: black;
text-decoration: none;
}
nav ul {
margin-top: 0;
padding-left: 1em;
}
nav ol {
margin-top: 0;
padding-left: 2em;
}
nav ul li, nav ol li {
margin: 0 0 0.1em 0.1em;
}
nav ul ul {
margin: 0;
padding-left: 0.5em;
}
nav ul ol {
margin: 0;
padding-left: 1em;
}
nav ul ul li, nav ol ol li {
margin: 0;
}
}
/* Impresora */
@media print {
html {
margin-top: 0;
margin-right: 0;
margin-left: 5px;
}
nav {
display: none;
}
div.icono-enlace {
display: none;
}
code {
font-size: 100% !important;
}
pre {
white-space: pre-wrap !important;
}
tbody {
break-inside: avoid-page;
}
tr {
break-inside: avoid-page;
}
.noprint {
display: none;
}
}
/* Lenguajes pendientes de incluir en prism.js */
/* code.language-configuracion { } */
/* code.language-shell { } */
/* code.language-sql { } */
/* Clases para fragmentos de codigo en texto */
/* Estilo para HTML imitando a Visual Studio Code con tema Light+ */
.html-eti {
color: #911f00;
fill: #911f00;
}
.html-atri {
color: #ff0000;
fill: #ff0000;
}
.html-atri-valor {
color: #0000ff;
fill: #0000ff;
}
/* Estilo para CSS imitando a Visual Studio Code con tema Light+ */
.css-sele {
color: #800000;
fill: #800000;
}
.css-prop {
color: #ff0000;
fill: #ff0000;
}
.css-feature {
color: #ff0000;
fill: #ff0000;
}
.css-valor {
color: #0451a5;
fill: #0451a5;
}
.css-numero {
color: #008000;
fill: #008000;
}
.css-unidad {
color: #008000;
fill: #008000;
}
.css-pseudo {
color: #800000;
fill: #800000;
}
.css-arroba {
color: #af00db;
fill: #af00db;
}
.css-funcion {
color: #4700ff;
fill: #4700ff;
}
/* Estilo para Python imitando a IDLE */
.idle-prompt {
color: #770000;
}
.idle-resp {
color: #0000ff;
}
.idle-rese {
color: #ff7700;
}
.idle-cade {
color: #00aa00;
}
.idle-erro {
color: #ff0000;
}
.idle-errbg {
background-color: #fc7674;
}
.idle-func {
color: #800080;
}
.idle-fundef {
color: #0000ff;
}
.idle-come {
color: #ff0000;
}
.idle-menu {
background-color: #d4d0c8;
font-family: serif;
}
.idle-otro {
color: black;
}
/* Estilo para XML imitando a XML Copy Editor*/
.xml-tag {
color: #0000ff;
}
/* any tag from "<" till ">" */
.xml-attr {
color: #fc0204;
}
/* tag's attribute */
.xml-pi {
color: #0000ff;
}
.xml-comment {
color: #808080;
}
/* comment */
.xsl-i {
color: #0000ff;
}
.xsl-atri {
color: #fc0204;
}
/* Estilo para PHP imitando a Eclipse for PHP developers */
.php-con {
font-weight: bold;
}
/* Constante */
.php-del {
font-weight: bold;
}
/* Delimitador de fragmento php */
.php-dir {
font-weight: bold;
}
/* Directiva de php.ini */
.php-fun {
font-weight: bold;
}
/* Funcion */
.php-ope {
font-weight: bold;
}
/* Operador */
.php-res {
color: #7f0055; ;
font-weight: bold;
}
/* Palabra reservada */
.php-var {
font-weight: bold;
} /* Variable */
/* CSS especifico apuntes HTML/CSS */