diff --git a/docs/varios.md b/docs/varios.md index fd01961..6d5f5fd 100644 --- a/docs/varios.md +++ b/docs/varios.md @@ -156,8 +156,9 @@ git push origin nueva-rama * **Instalacion** `apt-get install python-pip` +`pip list --outdated` -lista paquetes que se pueden actualizar `pip install mkdocs` -`pip install -U mkdocs` - actualizar mkdocs +`pip install --upgrade mkdocs` -actualizar mkdocs instalar mas temas diff --git a/www/404.html b/www/404.html index bbf9fe7..2fc3381 100644 --- a/www/404.html +++ b/www/404.html @@ -384,7 +384,7 @@

Contenidos

diff --git a/www/css/index.html b/www/css/index.html index e16f879..161f992 100644 --- a/www/css/index.html +++ b/www/css/index.html @@ -1504,7 +1504,7 @@

Contenidos

diff --git a/www/debian/index.html b/www/debian/index.html index 759e01b..52fdc50 100644 --- a/www/debian/index.html +++ b/www/debian/index.html @@ -2488,7 +2488,7 @@

Contenidos

diff --git a/www/expressjs/index.html b/www/expressjs/index.html index f206107..225607b 100644 --- a/www/expressjs/index.html +++ b/www/expressjs/index.html @@ -1489,7 +1489,7 @@

Contenidos

diff --git a/www/frontend/index.html b/www/frontend/index.html index f79ab36..cf6d55c 100644 --- a/www/frontend/index.html +++ b/www/frontend/index.html @@ -537,7 +537,7 @@

Contenidos

diff --git a/www/golang-bases-de-datos/index.html b/www/golang-bases-de-datos/index.html index 42a32a7..0090708 100644 --- a/www/golang-bases-de-datos/index.html +++ b/www/golang-bases-de-datos/index.html @@ -738,7 +738,7 @@

Contenidos

diff --git a/www/golang-para-web/index.html b/www/golang-para-web/index.html index 9ff662c..5bacf64 100644 --- a/www/golang-para-web/index.html +++ b/www/golang-para-web/index.html @@ -1556,7 +1556,7 @@

Contenidos

diff --git a/www/golang-snippets/index.html b/www/golang-snippets/index.html index 096f02b..d212e72 100644 --- a/www/golang-snippets/index.html +++ b/www/golang-snippets/index.html @@ -2464,7 +2464,7 @@

Contenidos

diff --git a/www/golang/index.html b/www/golang/index.html index d990db6..3cc2fbb 100644 --- a/www/golang/index.html +++ b/www/golang/index.html @@ -3125,7 +3125,7 @@

Contenidos

diff --git a/www/html/index.html b/www/html/index.html index df62533..c3777c3 100644 --- a/www/html/index.html +++ b/www/html/index.html @@ -1282,7 +1282,7 @@

Contenidos

diff --git a/www/index.html b/www/index.html index 0704f6a..0d52a4c 100644 --- a/www/index.html +++ b/www/index.html @@ -370,7 +370,7 @@

Quick search

diff --git a/www/javascript-apis/index.html b/www/javascript-apis/index.html index c243164..7e1ea4d 100644 --- a/www/javascript-apis/index.html +++ b/www/javascript-apis/index.html @@ -1622,7 +1622,7 @@

Contenidos

diff --git a/www/javascript-para-web/index.html b/www/javascript-para-web/index.html index 2f8a8ed..7e811e5 100644 --- a/www/javascript-para-web/index.html +++ b/www/javascript-para-web/index.html @@ -1736,7 +1736,7 @@

Contenidos

diff --git a/www/javascript-snippets/index.html b/www/javascript-snippets/index.html index 4755e88..1fcfc7e 100644 --- a/www/javascript-snippets/index.html +++ b/www/javascript-snippets/index.html @@ -1027,7 +1027,7 @@

Contenidos

diff --git a/www/javascript/index.html b/www/javascript/index.html index 2090f93..2e374c6 100644 --- a/www/javascript/index.html +++ b/www/javascript/index.html @@ -2287,7 +2287,7 @@

Contenidos

diff --git a/www/nodejs-bases-de-datos/index.html b/www/nodejs-bases-de-datos/index.html index a486110..cfc28dd 100644 --- a/www/nodejs-bases-de-datos/index.html +++ b/www/nodejs-bases-de-datos/index.html @@ -1561,7 +1561,7 @@

Contenidos

diff --git a/www/nodejs-snippets/index.html b/www/nodejs-snippets/index.html index 4ae23b1..9937b91 100644 --- a/www/nodejs-snippets/index.html +++ b/www/nodejs-snippets/index.html @@ -990,7 +990,7 @@

Contenidos

diff --git a/www/nodejs/index.html b/www/nodejs/index.html index 33d17d9..9151f14 100644 --- a/www/nodejs/index.html +++ b/www/nodejs/index.html @@ -660,7 +660,7 @@

Contenidos

diff --git a/www/reactjs/index.html b/www/reactjs/index.html index f252ea9..6440b46 100644 --- a/www/reactjs/index.html +++ b/www/reactjs/index.html @@ -1994,7 +1994,7 @@

Contenidos

diff --git a/www/search/search_index.json b/www/search/search_index.json index 529771e..bdcfea4 100644 --- a/www/search/search_index.json +++ b/www/search/search_index.json @@ -1 +1 @@ -{"config":{"indexing":"full","lang":["en"],"min_search_length":3,"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"","text":"Volver al inicio . Jolav \u00a9 2024 - Ver el c\u00f3digo en GitHub MENU","title":"Menu"},{"location":"#menu","text":"","title":"MENU"},{"location":"css/","text":"CSS SNIPPETS Alinear imagenes .imgV { vertical-align: middle; } .imgH { display: flex; margin: 0 auto; max-width: 100%; } Enlaces animados y sin subrayar a, a:visited { text-decoration: none; color: #375EAB; } a:hover { color: lightblue; } div:hover { transform: scale(1.2); } Desactivar enlace a.notYet { pointer-events: none; text-decoration: line-through; color: #404040; } hr gradual hr { margin: 10px 10% 10px 10%; border: 0; height: 1px; background: #333; background-image: linear-gradient(to right, #ccc, #888, #ccc); } Problema en Chrome con la lista de puntos ul { text-align: center; /* para evitar los puntos */ display: inline; /* poner los numeros en Chrome de listas ordenadas dentro del texto*/ list-style-position: inside; list-style-type: none; } Fijar pie al final de pantalla html { height: 100%; box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { position: relative; margin: 0 auto; /*padding-bottom: 6rem;*/ min-height: 97%; } .footer { position: absolute; right: 0; bottom: 0; left: 0; padding: 1rem; background-color: lightblue; text-align: center; } Tama\u00f1o fuente como navegador html { font-size:16px; } /* Fijando el css en 16px y usando em despues conseguiremos resultados consistentes en firefox y chrome */ body { font-size:0.90em; } CSS3 INTRODUCCION Enlaces a css Externo CSS Externo Si hay multiples hojas de estilo : uno para cada hoja de estilo En la hoja de estilo que se enlaza incluir @import url(\"estilo2.css);\" Interno - NO USAR CSS Interno Selectores Selectores CSS Selectores de atributos Cascada y herencia Cascada - Ultima Regla: la ultima regla aplicada es la que manda - !important a\u00f1adiendo esto despues de la regla asi toma prioridad color: blue !important; - Especificidad : prevalecera la regla del selector que sea mas especifico h3 es mas especifico que * p otro es mas especifico que p p#intro es mas especifico que p Herencia Casi todos los selectores anidados dentro de otros heredan las propiedades asignadas al selector exterior. Por ejemplo un color en body tambien se aplicara al texto de un parrafo. Hay excepciones evidentes como margin-top (un parrafo no tiene el mismo margen superior que el body del documento). Puedes forzar heredar valores de propiedades de los padres usando inherit como valor de la propiedad body { padding: 20px;} .pagina { padding: inherit;} COLOR color - h1 { color: DarkCyan;} /* color name */ h2 { color: #ee3e80;} /* hex code */ p { color: rgb(100,100,90);} /* rgb value */ background color - body { background-color: rgb(150,150,150); } h1 { background-color: DarkCyan; } h2 { background-color: ##ee3e80: } p { background-color: red; } opacity , rgba - p.one { background-color: rgb(0,0,0); opacity: 0.5;} p.two { background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.5);} TEXTO cursor - Controla el tipo de cursor del raton que se muestra auto|crosshair|default|pointer|move|text|wait|help|url(\"cursor.png\") a { cursor: move;} font-family - Familias : serif , sans-serif , cursive , fantasy y monospace font-family: Arial, Verdana, sans-serif font-size - Pixel: Por defecto en los navegadores el texto es de 16px Porcentaje : porcentaje sobre los 16px estandar, p.ej 75% es 12px em : unidad equivalente a la anchura de la m font-face - @font-face { font-family: 'PT Sans'; src: url('_public/fonts/PTSans.ttf') ; font-display: fallback; } @font-face { font-family: 'ChunkFiveRegular'; src: url('fonts/chunkfive.eot'); src: url('fonts/chunkfive.eot?#iefix') format('embedded-opentype'), url('fonts/chunkfive.woff') format('woff'), url('fonts/chunkfive.ttf') format('truetype'), url('fonts/chunkfive.svg#ChunkFiveRegular') format('svg');} font-weight - normal|bold font-style - normal|italic|oblique text-transform - uppercase : convierte el texto a mayusculas lowercase : convierte el texto a minusculas capitalize : pone mayusculas la primera letra de cada palabra h1 { text-transform: uppercase;} text-decoration - none : elimina cualquier decoracion del texto underline : subraya el texto overline : coloca una linea por encima del texto line-through : linea tachando el texto blink : hace que el texto brille y deje brillar a { text-decoration: none;} line-height - distancia entre lineas p { line-height: 1.4em; } letter-spacing , word-spacing - distancia entre letras, distancia entre palabras, por defecto es 0.25em h1, h2 { text-transform: uppercase; letter-spacing: 0.2em; } .credits { font-weight: bold; word-spacing: 1em; } text-align - left : el texto se alinea a la izquierda right : el texto se alinea a la derecha center : el texto se centra justify : Cada linea excepto la ultima ocupa toda la anchura disponible h1 { text-align: left; } vertical-align - Usada con elementos en linea como y es muy similar al atributo align de Valores : baseline , sub , super , top , text-top , middle , bottom , text-bottom #six-months { vertical-align: text-top;} #one-year { vertical-align: baseline;} #two-years { vertical-align: text-bottom;} text-indent - indenta el texto h2 { text-indent: 20px; } text-shadow - distancia a izda o dcha de la sombra distancia arriba o abajo de la sombra (opcional) cantidad de difuminado de la sombra color de la sombra p { text-shadow: 2px 2px 1px #222222} :first-letter , :first-line (pseudo-elementos) - Para especificar diferentes valores a la primera letra o primera linea del texto p.intro:first-letter { font-size: 200%;} p.intro:first-line { font-weight: bold;} :link , :visited (pseudo-clases) - Los navegadores muestran los enlaces en azul y subrayados por defecto y cambian el color cuando han sido visitados :link : para poner estilos a enlaces no visitados :visited : para poner estilos a enlaces visitados a:link { color: deeppink; text-decoration: none;} a:visited { color: black;} a:hover { color: deeppink; text-decoration: underline;} a:active { color: darkcyan;} :hover , :active , :focus (pseudo-clases) - :hover : se aplica cuando el raton esta encima (no funciona en tactiles) :active : se aplica cuando se pulsa algo :focus : se aplica cuando el elemento tiene el foco cajetinTexto { padding: 6px 12px 6px 12px; border: 1px solid #665544; color: #ffffff;} boton.submit:hover { background-color: #665544;} boton.submit:active { background-color: chocolate;} cajetinTexto.text { color: #cccccc;} cajetinTexto.text:focus { color: #665544;} BOXES Dimensiones width , height - Por defecto las cajas tienen el tama\u00f1o justo para contener a su elemento. Podemos establecer nosotros ese tama\u00f1o usando pixeles , o porcentajes relativos a la ventana del navegador o a la caja en que ya esta si esta dentro de otra caja, o ems div.box { height: 300px; width: 300px; background-color: #bbbbaa;} min-width , max-width - Minimo y maximo anchura que una caja de un elemento puede tener min-height , max-height - Minimo y maximo anchura que una caja de un elemento puede tener overflow - Indica como actuar si el contenido dentro de la caja es mayor que la caja. hidden : el contenido extra que no cabe sencillamente se esconde scroll : aparece un scroll para acceder a ese contenido extra p.one { overflow: hidden;} p.two { overflow: scroll;} Visibilidad display - Permite convertir un elemento en linea en un bloque o al reves. Tambien vale para esconder un elemento en la pagina inline : convierte un elemento de bloque en un elemento en linea block : convierte un elemento en linea en un elemento de bloque inline-block : permite a un elemento de bloque fluir como un elemento en linea pero manteniendo las caracteristicas de un elemento de bloque none : esconde el elemento de la pagina li { display: inline; margin-right: 10px;} li.coming-soon { display: none;} visibility - Permite esconder cajas pero deja un espacio donde se supone que esta hidden : esconde el elemento visible : muestra el elemento li.coming-soon { visibility: hidden;} box-shadow - distancia a izda o dcha de la sombra distancia arriba o abajo de la sombra (opcional) cantidad de difuminado del borde. Con cero la sombra es una linea solida Extension de la sombra, positiva hacia fuera, negativa hacia dentro p { box-shadow: 2px 2px 1px 5px #777777} Bordes border-padding-margin - border-width - espesor de la linea de borde thin|medium|thick . border-top-width , border-right-width , border-bottom-width border-left-width en orden de las agujas del reloj empezando por top p.one { border-width: 2px;} p.two { border-width: thick;} p.three { border-width: 1px 4px 12px 4px;} border-style - define el tipo de borde solid|dotted|dashed|double|groove|ridge|inset|outset|hidden/none . border-top-style ... - Puedes elegir bordes individuales p.one {border-style: dashed;} border-color - elegir color para el borde border-top-color ... - Tambien se puede elegir el color para cada borde p.one { border-color: #0088dd;} p.two { border-color: #bbbbaa blue orange #0088dd;} border-image - Permite usar imagenes como bordes de las cajas border-radius - border-top-right-radius - border-bottom-right-radius - border-bottom-left-radius - border-top-left-radius - p { border-radius: 5px, 10px, 5px, 10px; } p.one { border-radius: 80px 50px; } p.two { border-top-left-radius: 80px 50px;} Margenes margin - Espacio entre el borde y la caja. Lo normal en px aunque tambien se puede en ems o porcentajes. Si dos cajas se solapan usaremos el mayor de los dos margenes y el otro no Tambien individualmente para cada lado margin-top, margin-right ... p.example1 { margin: 10px 2px 10px 5px; p.example2 { margin: 10px;} padding - Espacio entre el borde y el contenido. Lo normal es en px pero se pueden usar ems o porcentajes (% de la ventana del navegador o de la caja donde este contenido el elemento). Existen tambien individualmente para cada lado padding-top, padding-right ... p.example1 { padding: 10px 2px 10px 5px; p.example2 { padding: 10px;} centrando contenido - Para centrar una caja en la pagina ( o centrarla dentro del elemento en el que esta Establecer una width para la caja (sino tomara toda la anchura de la pagina) Poner margin-left: auto y margin-rigth: auto p { width: 300px; padding: 50px; border: 20px solid #0088dd;} p.example { margin: 10px auto 10px auto; LISTAS list-style - Permite declaras las siguientes opciones type, imagen y position en cualquier orden. ul { list-style: inside circle; } list-style-type - Para poner el estilo al marcador de las listas - Listas ordenadas decimal|decimal-leading-zero|lower-alpha|upper-alpha|lower-roman|upper-roman - Listas desordenadas none|disc|circle|square ol { list-style-type: lower-roman;} list-style-imagen - Usar una imagen como marcador de listas. Se puede usar en