clase:daw:diw:1eval:tema04
Diferencias
Muestra las diferencias entre dos versiones de la página.
| Ambos lados, revisión anteriorRevisión previaPróxima revisión | Revisión previa | ||
| clase:daw:diw:1eval:tema04 [2025/11/10 13:35] – [Variables CSS] Lorenzo | clase:daw:diw:1eval:tema04 [2026/10/23 23:04] (actual) – Reorganización del módulo: contenido movido a las páginas nuevas de clase:daw:diw claude | ||
|---|---|---|---|
| Línea 1: | Línea 1: | ||
| - | ====== 4. CSS ====== | ||
| - | |||
| - | |||
| - | |||
| - | ===== Añadir CSS en Angular ===== | ||
| - | Para añadir estilos CSS en Angular se usa el fichero de SASS que está en '' | ||
| - | |||
| - | |||
| - | Por otro lado si queremos añadir otros ficheros CSS o SASS deberemos añadirlos en el JSON de '' | ||
| - | |||
| - | Lo mismo se aplica a JavaScript que se añade en ''/ | ||
| - | |||
| - | |||
| - | ===== Usar Boostrap en Angular ===== | ||
| - | Por ejemplo para usar Bootstrap junto a su JavaScript se haría de la siguiente forma: | ||
| - | |||
| - | * Descarga bootstrap. PAra ello ver la última versión en '' | ||
| - | |||
| - | <sxh bash> | ||
| - | npm install bootstrap@v5.3.8 | ||
| - | </ | ||
| - | |||
| - | Eso descargará bootstrap en '' | ||
| - | |||
| - | |||
| - | Y ahora añadir el CSS y JavsScript en : | ||
| - | |||
| - | <sxh json; | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | ], | ||
| - | " | ||
| - | " | ||
| - | ] | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | |||
| - | |||
| - | ===== Usar Tailwind CSS a Angular ===== | ||
| - | Para usar [[https:// | ||
| - | |||
| - | Los pasos son: | ||
| - | |||
| - | * Descargar Tailwind y PostCSS | ||
| - | |||
| - | <sxh bash> | ||
| - | npm install tailwindcss @tailwindcss/ | ||
| - | </ | ||
| - | |||
| - | |||
| - | <note tip>Si da error la instalación añadir '' | ||
| - | |||
| - | * Añadir Tailwind a [[https:// | ||
| - | |||
| - | <sxh json; | ||
| - | { | ||
| - | " | ||
| - | " | ||
| - | } | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | * En la página de estilos SASS '' | ||
| - | |||
| - | <sxh sass; | ||
| - | @use " | ||
| - | </ | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | ===== Modelo de caja ===== | ||
| - | El modelo de java le dice al navegador si cuando indicamos el ancho, ese ancho incluye o no al padding y al borde. Por defecto no los incluye pero lo ideal es que el ancho si que incluya el padding y el borde, por eso hay que usar la propiedad " | ||
| - | |||
| - | |||
| - | * [[https:// | ||
| - | <sxh css> | ||
| - | .mi_caja { | ||
| - | width: 80px; | ||
| - | padding: 5px; | ||
| - | border: 5px solid red; | ||
| - | margin: 10px; | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | |||
| - | {{modelo_de_caja_css.png? | ||
| - | |||
| - | |||
| - | Como indicar correctamente el box-sizing: | ||
| - | <sxh css> | ||
| - | html { | ||
| - | box-sizing: border-box; | ||
| - | } | ||
| - | |||
| - | *, *:before, *:after { | ||
| - | box-sizing: inherit; | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | <note important> | ||
| - | Siempre deberíamos poner estas lineas en cualquier proyecto HTML+CSS | ||
| - | </ | ||
| - | |||
| - | Se puede ver un ejemplo en [[https:// | ||
| - | |||
| - | ===== display: inline, inline-block y block ===== | ||
| - | En la propiedad " | ||
| - | * '' | ||
| - | * '' | ||
| - | * '' | ||
| - | |||
| - | Se puede ver un ejemplo en [[https:// | ||
| - | |||
| - | Se suelen usar tanto con el tag '' | ||
| - | * Por defecto '' | ||
| - | * Pro defecto '' | ||
| - | |||
| - | <note important> | ||
| - | Si usamos '' | ||
| - | </ | ||
| - | |||
| - | Mas información: | ||
| - | * [[http:// | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | ===== display: | ||
| - | * " | ||
| - | * " | ||
| - | |||
| - | Un ejemplo se puede ver en : [[https:// | ||
| - | |||
| - | |||
| - | |||
| - | ===== ===== | ||
| - | Hace que un espacio con "& | ||
| - | |||
| - | Un ejemplo se puede ver en : [[https:// | ||
| - | |||
| - | |||
| - | ===== Reset CSS ===== | ||
| - | ¿Alguna vez has notado que, incluso con una página HTML sin una sola línea de CSS propia, los navegadores ya aplican ciertos estilos? | ||
| - | Esto no es un error, sino una característica: | ||
| - | |||
| - | Por ejemplo, es habitual ver que el elemento < | ||
| - | sino también márgenes. | ||
| - | |||
| - | Esto introduce un desafío clave para el desarrollo: la inconsistencia. | ||
| - | Los detalles exactos de estos estilos predeterminados a menudo varían ligeramente de un navegador a otro. | ||
| - | Una cantidad de padding o un tamaño de fuente en un elemento pueden no ser idénticos en Chrome y en Safari. | ||
| - | |||
| - | Esta falta de uniformidad inicial complica el proceso de garantizar un look and feel exactamente igual en todas las plataformas. | ||
| - | De ahí surge la necesidad de la técnica del Reset CSS para establecer un estilo común y consistente antes de aplicar nuestro diseño. | ||
| - | |||
| - | Algo que añadir siempre a nuestro Reset CSS sería: | ||
| - | |||
| - | <sxh css> | ||
| - | html { | ||
| - | box-sizing: border-box; | ||
| - | } | ||
| - | |||
| - | *, *:before, *:after { | ||
| - | box-sizing: inherit; | ||
| - | } | ||
| - | | ||
| - | body { | ||
| - | margin: 0; | ||
| - | padding: 0; | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | ¿Que ponemos en nuestro Reset CSS? Pues a lo largo del tiempo se han ido creando varios CSS que han ido quedando anticuados debido a los cambios en los navegadores. | ||
| - | Yo me he decantado por usar el que utilizar Tailwind CSS llamado {{ : | ||
| - | |||
| - | <sxh css> | ||
| - | *, | ||
| - | ::after, | ||
| - | ::before, | ||
| - | ::backdrop, | ||
| - | :: | ||
| - | box-sizing: border-box; | ||
| - | margin: 0; | ||
| - | padding: 0; | ||
| - | border: 0 solid; | ||
| - | } | ||
| - | |||
| - | html, | ||
| - | :host { | ||
| - | line-height: | ||
| - | -webkit-text-size-adjust: | ||
| - | tab-size: 4; | ||
| - | font-family: | ||
| - | --default-font-family, | ||
| - | ui-sans-serif, | ||
| - | system-ui, | ||
| - | sans-serif, | ||
| - | 'Apple Color Emoji', | ||
| - | 'Segoe UI Emoji', | ||
| - | 'Segoe UI Symbol', | ||
| - | 'Noto Color Emoji' | ||
| - | ); | ||
| - | font-feature-settings: | ||
| - | font-variation-settings: | ||
| - | -webkit-tap-highlight-color: | ||
| - | } | ||
| - | |||
| - | hr { | ||
| - | height: 0; | ||
| - | color: inherit; | ||
| - | border-top-width: | ||
| - | } | ||
| - | |||
| - | abbr: | ||
| - | -webkit-text-decoration: | ||
| - | text-decoration: | ||
| - | } | ||
| - | |||
| - | h1, | ||
| - | h2, | ||
| - | h3, | ||
| - | h4, | ||
| - | h5, | ||
| - | h6 { | ||
| - | font-size: inherit; | ||
| - | font-weight: | ||
| - | } | ||
| - | |||
| - | a { | ||
| - | color: inherit; | ||
| - | -webkit-text-decoration: | ||
| - | text-decoration: | ||
| - | } | ||
| - | |||
| - | b, | ||
| - | strong { | ||
| - | font-weight: | ||
| - | } | ||
| - | |||
| - | code, | ||
| - | kbd, | ||
| - | samp, | ||
| - | pre { | ||
| - | font-family: | ||
| - | --default-mono-font-family, | ||
| - | ui-monospace, | ||
| - | SFMono-Regular, | ||
| - | Menlo, | ||
| - | Monaco, | ||
| - | Consolas, | ||
| - | ' | ||
| - | ' | ||
| - | monospace | ||
| - | ); | ||
| - | font-feature-settings: | ||
| - | font-variation-settings: | ||
| - | font-size: 1em; | ||
| - | } | ||
| - | |||
| - | small { | ||
| - | font-size: 80%; | ||
| - | } | ||
| - | |||
| - | sub, | ||
| - | sup { | ||
| - | font-size: 75%; | ||
| - | line-height: | ||
| - | position: relative; | ||
| - | vertical-align: | ||
| - | } | ||
| - | sub { | ||
| - | bottom: -0.25em; | ||
| - | } | ||
| - | sup { | ||
| - | top: -0.5em; | ||
| - | } | ||
| - | |||
| - | table { | ||
| - | text-indent: | ||
| - | border-color: | ||
| - | border-collapse: | ||
| - | } | ||
| - | |||
| - | : | ||
| - | outline: auto; | ||
| - | } | ||
| - | |||
| - | progress { | ||
| - | vertical-align: | ||
| - | } | ||
| - | |||
| - | summary { | ||
| - | display: list-item; | ||
| - | } | ||
| - | |||
| - | ol, | ||
| - | ul, | ||
| - | menu { | ||
| - | list-style: none; | ||
| - | } | ||
| - | |||
| - | img, | ||
| - | svg, | ||
| - | video, | ||
| - | canvas, | ||
| - | audio, | ||
| - | iframe, | ||
| - | embed, | ||
| - | object { | ||
| - | display: block; | ||
| - | vertical-align: | ||
| - | } | ||
| - | |||
| - | img, | ||
| - | video { | ||
| - | max-width: 100%; | ||
| - | height: auto; | ||
| - | } | ||
| - | |||
| - | button, | ||
| - | input, | ||
| - | select, | ||
| - | optgroup, | ||
| - | textarea, | ||
| - | :: | ||
| - | font: inherit; | ||
| - | font-feature-settings: | ||
| - | font-variation-settings: | ||
| - | letter-spacing: | ||
| - | color: inherit; | ||
| - | border-radius: | ||
| - | background-color: | ||
| - | opacity: 1; | ||
| - | } | ||
| - | |||
| - | : | ||
| - | font-weight: | ||
| - | } | ||
| - | |||
| - | : | ||
| - | padding-inline-start: | ||
| - | } | ||
| - | |||
| - | :: | ||
| - | margin-inline-end: | ||
| - | } | ||
| - | |||
| - | :: | ||
| - | opacity: 1; | ||
| - | } | ||
| - | |||
| - | @supports (not (-webkit-appearance: | ||
| - | (contain-intrinsic-size: | ||
| - | :: | ||
| - | color: color-mix(in oklab, currentcolor 50%, transparent); | ||
| - | } | ||
| - | } | ||
| - | |||
| - | textarea { | ||
| - | resize: vertical; | ||
| - | } | ||
| - | |||
| - | :: | ||
| - | -webkit-appearance: | ||
| - | } | ||
| - | |||
| - | :: | ||
| - | min-height: 1lh; | ||
| - | text-align: inherit; | ||
| - | } | ||
| - | |||
| - | :: | ||
| - | display: inline-flex; | ||
| - | } | ||
| - | |||
| - | :: | ||
| - | padding: 0; | ||
| - | } | ||
| - | :: | ||
| - | :: | ||
| - | :: | ||
| - | :: | ||
| - | :: | ||
| - | :: | ||
| - | :: | ||
| - | :: | ||
| - | :: | ||
| - | padding-block: | ||
| - | } | ||
| - | |||
| - | :: | ||
| - | line-height: | ||
| - | } | ||
| - | |||
| - | : | ||
| - | box-shadow: none; | ||
| - | } | ||
| - | |||
| - | button, | ||
| - | input: | ||
| - | :: | ||
| - | appearance: button; | ||
| - | } | ||
| - | |||
| - | :: | ||
| - | :: | ||
| - | height: auto; | ||
| - | } | ||
| - | |||
| - | [hidden]: | ||
| - | display: none !important; | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | Mas información | ||
| - | * [[https:// | ||
| - | |||
| - | |||
| - | |||
| - | ===== Variables CSS ===== | ||
| - | Veamos el siguiente estilo de CSS que hemos hecho. | ||
| - | |||
| - | <sxh css> | ||
| - | .boton { | ||
| - | font-family: | ||
| - | font-size: 16px; | ||
| - | padding: 6px; | ||
| - | |||
| - | border-radius: | ||
| - | border-width: | ||
| - | border-style: | ||
| - | |||
| - | display: inline-block; | ||
| - | cursor: pointer; | ||
| - | text-decoration: | ||
| - | |||
| - | |||
| - | border-color: | ||
| - | background-color: | ||
| - | color: #ffffff; | ||
| - | } | ||
| - | |||
| - | </ | ||
| - | |||
| - | Desgraciadamente tiene muchos //números mágicos//, es decir números puestos directamente. Para evitar eso habría que usar variables CSS. | ||
| - | |||
| - | Veamos como funcionan. | ||
| - | |||
| - | |||
| - | |||
| - | <note tip> | ||
| - | A las variables del ponemos el prefijo '' | ||
| - | |||
| - | Y añadimos '' | ||
| - | |||
| - | * '' | ||
| - | * '' | ||
| - | |||
| - | |||
| - | </ | ||
| - | |||
| - | * Las variables de CSS se crean así: | ||
| - | |||
| - | <sxh css> | ||
| - | :root { | ||
| - | --mlt-sys-color-alternativo-5: | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | * Desde CSS se usan así. | ||
| - | |||
| - | <sxh css> | ||
| - | .boton { | ||
| - | background-color: | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | * Se puede definir un valor por defecto como segundo parámetro | ||
| - | |||
| - | <sxh css> | ||
| - | .boton { | ||
| - | background-color: | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | |||
| - | |||
| - | * Desde JavaScript se modifican así: | ||
| - | |||
| - | <sxh javascript> | ||
| - | let root = document.documentElement; | ||
| - | root.style.setProperty(' | ||
| - | </ | ||
| - | |||
| - | * Desde JavaScript se leen así: | ||
| - | |||
| - | <sxh javascript> | ||
| - | let root = document.documentElement; | ||
| - | let colorNormal=getComputedStyle(root).getPropertyValue(" | ||
| - | </ | ||
| - | |||
| - | |||
| - | ==== Creación de variables ==== | ||
| - | Al principio del curso vimos que debemos limitar nuestras opciones a usar serie de valores. Para limitar los valores deberemos usar variables y usar siempre usas variables | ||
| - | |||
| - | |||
| - | <sxh css> | ||
| - | :root { | ||
| - | --mlt-sys-color-principal-1: | ||
| - | --mlt-sys-color-principal-2: | ||
| - | --mlt-sys-color-principal-3: | ||
| - | --mlt-sys-color-principal-4: | ||
| - | --mlt-sys-color-principal-5: | ||
| - | --mlt-sys-color-principal-6: | ||
| - | --mlt-sys-color-principal-7: | ||
| - | --mlt-sys-color-principal-8: | ||
| - | --mlt-sys-color-principal-9: | ||
| - | |||
| - | |||
| - | |||
| - | --mlt-sys-color-alternativo-1: | ||
| - | --mlt-sys-color-alternativo-2: | ||
| - | --mlt-sys-color-alternativo-3: | ||
| - | --mlt-sys-color-alternativo-4: | ||
| - | --mlt-sys-color-alternativo-5: | ||
| - | --mlt-sys-color-alternativo-6: | ||
| - | --mlt-sys-color-alternativo-7: | ||
| - | --mlt-sys-color-alternativo-8: | ||
| - | --mlt-sys-color-alternativo-9: | ||
| - | |||
| - | |||
| - | |||
| - | --mlt-sys-color-rojo-1: | ||
| - | --mlt-sys-color-rojo-2: | ||
| - | --mlt-sys-color-rojo-3: | ||
| - | --mlt-sys-color-rojo-4: | ||
| - | --mlt-sys-color-rojo-5: | ||
| - | --mlt-sys-color-rojo-6: | ||
| - | --mlt-sys-color-rojo-7: | ||
| - | --mlt-sys-color-rojo-8: | ||
| - | --mlt-sys-color-rojo-9: | ||
| - | |||
| - | |||
| - | |||
| - | --mlt-sys-color-gris-1: | ||
| - | --mlt-sys-color-gris-2: | ||
| - | --mlt-sys-color-gris-3: | ||
| - | --mlt-sys-color-gris-4: | ||
| - | --mlt-sys-color-gris-5: | ||
| - | --mlt-sys-color-gris-6: | ||
| - | --mlt-sys-color-gris-7: | ||
| - | --mlt-sys-color-gris-8: | ||
| - | --mlt-sys-color-gris-9: | ||
| - | |||
| - | |||
| - | |||
| - | --mlt-sys-color-blanco-1: | ||
| - | --mlt-sys-color-blanco-2: | ||
| - | --mlt-sys-color-blanco-3: | ||
| - | --mlt-sys-color-blanco-4: | ||
| - | --mlt-sys-color-blanco-5: | ||
| - | --mlt-sys-color-blanco-6: | ||
| - | --mlt-sys-color-blanco-7: | ||
| - | --mlt-sys-color-blanco-8: | ||
| - | --mlt-sys-color-blanco-9: | ||
| - | |||
| - | |||
| - | |||
| - | --mlt-sys-color-amarillo-1: | ||
| - | --mlt-sys-color-amarillo-2: | ||
| - | --mlt-sys-color-amarillo-3: | ||
| - | --mlt-sys-color-amarillo-4: | ||
| - | --mlt-sys-color-amarillo-5: | ||
| - | --mlt-sys-color-amarillo-6: | ||
| - | --mlt-sys-color-amarillo-7: | ||
| - | --mlt-sys-color-amarillo-8: | ||
| - | --mlt-sys-color-amarillo-9: | ||
| - | |||
| - | |||
| - | |||
| - | --mlt-sys-font-sans-serif: | ||
| - | --mlt-sys-font-monospace: | ||
| - | --mlt-sys-font-serif: | ||
| - | --mlt-sys-font-default: | ||
| - | |||
| - | --mlt-sys-font-size-1: | ||
| - | --mlt-sys-font-size-2: | ||
| - | --mlt-sys-font-size-3: | ||
| - | --mlt-sys-font-size-4: | ||
| - | --mlt-sys-font-size-5: | ||
| - | --mlt-sys-font-size-6: | ||
| - | --mlt-sys-font-size-7: | ||
| - | --mlt-sys-font-size-8: | ||
| - | --mlt-sys-font-size-9: | ||
| - | --mlt-sys-font-size-10: | ||
| - | --mlt-sys-font-size-11: | ||
| - | |||
| - | --mlt-sys-margin-0: | ||
| - | --mlt-sys-margin-1: | ||
| - | --mlt-sys-margin-2: | ||
| - | --mlt-sys-margin-3: | ||
| - | --mlt-sys-margin-4: | ||
| - | --mlt-sys-margin-5: | ||
| - | --mlt-sys-margin-6: | ||
| - | --mlt-sys-margin-7: | ||
| - | --mlt-sys-margin-8: | ||
| - | --mlt-sys-margin-9: | ||
| - | --mlt-sys-margin-10: | ||
| - | |||
| - | --mlt-sys-padding-0: | ||
| - | --mlt-sys-padding-1: | ||
| - | --mlt-sys-padding-2: | ||
| - | --mlt-sys-padding-3: | ||
| - | --mlt-sys-padding-4: | ||
| - | --mlt-sys-padding-5: | ||
| - | --mlt-sys-padding-6: | ||
| - | --mlt-sys-padding-7: | ||
| - | --mlt-sys-padding-8: | ||
| - | --mlt-sys-padding-9: | ||
| - | --mlt-sys-padding-10: | ||
| - | |||
| - | --mlt-sys-border-radius-1: | ||
| - | --mlt-sys-border-radius-2: | ||
| - | --mlt-sys-border-radius-3: | ||
| - | --mlt-sys-border-radius-4: | ||
| - | |||
| - | --mlt-sys-width-0: | ||
| - | --mlt-sys-width-1: | ||
| - | --mlt-sys-width-2: | ||
| - | --mlt-sys-width-3: | ||
| - | --mlt-sys-width-4: | ||
| - | --mlt-sys-width-5: | ||
| - | --mlt-sys-width-6: | ||
| - | --mlt-sys-width-7: | ||
| - | --mlt-sys-width-8: | ||
| - | --mlt-sys-width-9: | ||
| - | --mlt-sys-width-10: | ||
| - | --mlt-sys-width-11: | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | Esa variables se usarán siempre en vez de poner directamente números | ||
| - | |||
| - | |||
| - | <sxh css> | ||
| - | .boton { | ||
| - | font-family: | ||
| - | font-size: var(--mlt-sys-font-size-4); | ||
| - | padding: var(--mlt-sys-padding-3) | ||
| - | |||
| - | border-radius: | ||
| - | border-width: | ||
| - | border-style: | ||
| - | |||
| - | display: inline-block; | ||
| - | cursor: pointer; | ||
| - | text-decoration: | ||
| - | |||
| - | |||
| - | border-color: | ||
| - | background-color: | ||
| - | color: var(--mlt-sys-color-blanco-9); | ||
| - | } | ||
| - | |||
| - | </ | ||
| - | |||
| - | |||
| - | |||
| - | < | ||
| - | El usar variable nos lleva a tener muchísimas variables en CSS lo que nos puede llevar a pensar si eso afectará al rendimiento. En el documento {{ : | ||
| - | </ | ||
| - | |||
| - | Algunas de las variables de colores en la página principal de google, ¿te suena de algo?: | ||
| - | |||
| - | {{: | ||
| - | |||
| - | |||
| - | Pero aun se tiene que mejorar la legibilidad del código . En vez de usar directamente las variables debemos abstraerlo: | ||
| - | |||
| - | |||
| - | |||
| - | <sxh css; highlight: [2, | ||
| - | .boton { | ||
| - | --boton-color-strong: | ||
| - | --boton-color-weak: | ||
| - | |||
| - | --boton-background-color: | ||
| - | --boton-border-color: | ||
| - | --boton-text-color: | ||
| - | |||
| - | --boton-font-family: | ||
| - | --boton-font-size: | ||
| - | |||
| - | --boton-padding: | ||
| - | --boton-width: | ||
| - | --boton-border-radius: | ||
| - | |||
| - | font-family: | ||
| - | font-size: var(--boton-font-size); | ||
| - | padding: var(--boton-padding); | ||
| - | |||
| - | border-radius: | ||
| - | border-width: | ||
| - | border-style: | ||
| - | |||
| - | display: inline-block; | ||
| - | cursor: pointer; | ||
| - | text-decoration: | ||
| - | |||
| - | |||
| - | border-color: | ||
| - | background-color: | ||
| - | color: var(--boton-text-color); | ||
| - | |||
| - | |||
| - | } | ||
| - | |||
| - | |||
| - | .boton--funcion-normal { | ||
| - | --boton-color-strong: | ||
| - | } | ||
| - | |||
| - | .boton--funcion-alternativa { | ||
| - | --boton-color-strong: | ||
| - | } | ||
| - | |||
| - | .boton--funcion-peligrosa { | ||
| - | --boton-color-strong: | ||
| - | } | ||
| - | |||
| - | .boton--importancia-primaria { | ||
| - | --boton-background-color: | ||
| - | --boton-border-color: | ||
| - | --boton-text-color: | ||
| - | } | ||
| - | .boton--importancia-secundaria { | ||
| - | --boton-background-color: | ||
| - | --boton-border-color: | ||
| - | --boton-text-color: | ||
| - | } | ||
| - | .boton--importancia-terciaria { | ||
| - | --boton-background-color: | ||
| - | --boton-border-color: | ||
| - | --boton-text-color: | ||
| - | } | ||
| - | |||
| - | |||
| - | |||
| - | </ | ||
| - | |||
| - | |||
| - | La variable '' | ||
| - | |||
| - | La variable '' | ||
| - | |||
| - | Por otro lado, las variables '' | ||
| - | Estas variables se van a modificar según la importancia del botón (primaria, secundaria y terciaria) | ||
| - | |||
| - | Es decir que dentro del componente creamos una serie de variables **publicas** que se puede modificar fácilmente por cualquiera y luego en las propiedades CSS se usan esas variable públicas. De esa forma cambiar el componente no afecta a la parte **pública** del componente. | ||
| - | |||
| - | |||
| - | |||
| - | ===== Utility Clases ===== | ||
| - | Hemos visto como crear las variables para dejar de usar números en nuestras clases CSS pero actualmente para personalizar un componentes se usas unas clases llamadas //Utility clases//. | ||
| - | |||
| - | Veamos un ejemplo | ||
| - | |||
| - | <sxh html> | ||
| - | <button boton> | ||
| - | </ | ||
| - | |||
| - | |||
| - | ¿Pero que pasa si queremos que un botón en concreto tenga un tamaño mayor? Deberemos añadir '' | ||
| - | |||
| - | |||
| - | <sxh html> | ||
| - | <button boton style=" | ||
| - | </ | ||
| - | |||
| - | |||
| - | El problema de usar ésto es doble: | ||
| - | * Es tedioso de escribir. | ||
| - | * NO permite valores responsivos. | ||
| - | |||
| - | Para evitar eso se han creado las //Utility clases//. | ||
| - | |||
| - | <sxh html> | ||
| - | <button boton class=" | ||
| - | </ | ||
| - | |||
| - | Estas clases tienen el código CSS que habíamos puesto en '' | ||
| - | |||
| - | <sxh css> | ||
| - | .g--font-size-5 { | ||
| - | font-size: | ||
| - | } | ||
| - | .g--padding-4 { | ||
| - | padding: | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | A estas clases // | ||
| - | Sin embargo su uso debe ser usado sin excesos. | ||
| - | |||
| - | El framework CSS [[https:// | ||
| - | |||
| - | Por otro lado [[https:// | ||
| - | [[https:// | ||
| - | |||
| - | Es uso de utility clases nos lleva a tener lo siguiente: | ||
| - | |||
| - | <sxh css> | ||
| - | |||
| - | .g--font-size-1 { | ||
| - | font-size: var(--mlt-sys-font-size-1) !important; | ||
| - | } | ||
| - | .g--font-size-2 { | ||
| - | font-size: var(--mlt-sys-font-size-2) !important; | ||
| - | } | ||
| - | .g--font-size-3 { | ||
| - | font-size: var(--mlt-sys-font-size-3) !important; | ||
| - | } | ||
| - | .g--font-size-4 { | ||
| - | font-size: var(--mlt-sys-font-size-4) !important; | ||
| - | } | ||
| - | .g--font-size-5 { | ||
| - | font-size: var(--mlt-sys-font-size-5) !important; | ||
| - | } | ||
| - | .g--font-size-6 { | ||
| - | font-size: var(--mlt-sys-font-size-6) !important; | ||
| - | } | ||
| - | .g--font-size-7 { | ||
| - | font-size: var(--mlt-sys-font-size-7) !important; | ||
| - | } | ||
| - | .g--font-size-8 { | ||
| - | font-size: var(--mlt-sys-font-size-8) !important; | ||
| - | } | ||
| - | .g--font-size-9 { | ||
| - | font-size: var(--mlt-sys-font-size-9) !important; | ||
| - | } | ||
| - | .g--font-size-10 { | ||
| - | font-size: var(--mlt-sys-font-size-10) !important; | ||
| - | } | ||
| - | .g--font-size-11 { | ||
| - | font-size: var(--mlt-sys-font-size-11) !important; | ||
| - | } | ||
| - | |||
| - | |||
| - | .g--margin-0 { | ||
| - | margin: var(--mlt-sys-margin-0) !important; | ||
| - | } | ||
| - | .g--margin-1 { | ||
| - | margin: var(--mlt-sys-margin-1) !important; | ||
| - | } | ||
| - | .g--margin-2 { | ||
| - | margin: var(--mlt-sys-margin-2) !important; | ||
| - | } | ||
| - | .g--margin-3 { | ||
| - | margin: var(--mlt-sys-margin-3) !important; | ||
| - | } | ||
| - | .g--margin-4 { | ||
| - | margin: var(--mlt-sys-margin-4) !important; | ||
| - | } | ||
| - | .g--margin-5 { | ||
| - | margin: var(--mlt-sys-margin-5) !important; | ||
| - | } | ||
| - | .g--margin-6 { | ||
| - | margin: var(--mlt-sys-margin-6) !important; | ||
| - | } | ||
| - | .g--margin-7 { | ||
| - | margin: var(--mlt-sys-margin-7) !important; | ||
| - | } | ||
| - | .g--margin-8 { | ||
| - | margin: var(--mlt-sys-margin-8) !important; | ||
| - | } | ||
| - | .g--margin-9 { | ||
| - | margin: var(--mlt-sys-margin-9) !important; | ||
| - | } | ||
| - | .g--margin-10 { | ||
| - | margin: var(--mlt-sys-margin-10) !important; | ||
| - | } | ||
| - | .g--margin-horizontal-0 { | ||
| - | margin-left: | ||
| - | margin-right: | ||
| - | } | ||
| - | .g--margin-vertical-0 { | ||
| - | margin-top: var(--mlt-sys-margin-0) !important; | ||
| - | margin-bottom: | ||
| - | } | ||
| - | .g--margin-horizontal-1 { | ||
| - | margin-left: | ||
| - | margin-right: | ||
| - | } | ||
| - | .g--margin-vertical-1 { | ||
| - | margin-top: var(--mlt-sys-margin-1) !important; | ||
| - | margin-bottom: | ||
| - | } | ||
| - | .g--margin-horizontal-2 { | ||
| - | margin-left: | ||
| - | margin-right: | ||
| - | } | ||
| - | .g--margin-vertical-2 { | ||
| - | margin-top: var(--mlt-sys-margin-2) !important; | ||
| - | margin-bottom: | ||
| - | } | ||
| - | .g--margin-horizontal-3 { | ||
| - | margin-left: | ||
| - | margin-right: | ||
| - | } | ||
| - | .g--margin-vertical-3 { | ||
| - | margin-top: var(--mlt-sys-margin-3) !important; | ||
| - | margin-bottom: | ||
| - | } | ||
| - | .g--margin-horizontal-4 { | ||
| - | margin-left: | ||
| - | margin-right: | ||
| - | } | ||
| - | .g--margin-vertical-4 { | ||
| - | margin-top: var(--mlt-sys-margin-4) !important; | ||
| - | margin-bottom: | ||
| - | } | ||
| - | .g--margin-horizontal-5 { | ||
| - | margin-left: | ||
| - | margin-right: | ||
| - | } | ||
| - | .g--margin-vertical-5 { | ||
| - | margin-top: var(--mlt-sys-margin-5) !important; | ||
| - | margin-bottom: | ||
| - | } | ||
| - | .g--margin-horizontal-6 { | ||
| - | margin-left: | ||
| - | margin-right: | ||
| - | } | ||
| - | .g--margin-vertical-6 { | ||
| - | margin-top: var(--mlt-sys-margin-6) !important; | ||
| - | margin-bottom: | ||
| - | } | ||
| - | .g--margin-horizontal-7 { | ||
| - | margin-left: | ||
| - | margin-right: | ||
| - | } | ||
| - | .g--margin-vertical-7 { | ||
| - | margin-top: var(--mlt-sys-margin-7) !important; | ||
| - | margin-bottom: | ||
| - | } | ||
| - | .g--margin-horizontal-8 { | ||
| - | margin-left: | ||
| - | margin-right: | ||
| - | } | ||
| - | .g--margin-vertical-8 { | ||
| - | margin-top: var(--mlt-sys-margin-8) !important; | ||
| - | margin-bottom: | ||
| - | } | ||
| - | .g--margin-horizontal-9 { | ||
| - | margin-left: | ||
| - | margin-right: | ||
| - | } | ||
| - | .g--margin-vertical-9 { | ||
| - | margin-top: var(--mlt-sys-margin-9) !important; | ||
| - | margin-bottom: | ||
| - | } | ||
| - | .g--margin-horizontal-10 { | ||
| - | margin-left: | ||
| - | margin-right: | ||
| - | } | ||
| - | .g--margin-vertical-10 { | ||
| - | margin-top: var(--mlt-sys-margin-10) !important; | ||
| - | margin-bottom: | ||
| - | } | ||
| - | .g--margin-top-0 { | ||
| - | margin-top: var(--mlt-sys-margin-0) !important; | ||
| - | } | ||
| - | .g--margin-bottom-0 { | ||
| - | margin-bottom: | ||
| - | } | ||
| - | .g--margin-right-0 { | ||
| - | margin-right: | ||
| - | } | ||
| - | .g--margin-left-0 { | ||
| - | margin-left: | ||
| - | } | ||
| - | .g--margin-top-1 { | ||
| - | margin-top: var(--mlt-sys-margin-1) !important; | ||
| - | } | ||
| - | .g--margin-bottom-1 { | ||
| - | margin-bottom: | ||
| - | } | ||
| - | .g--margin-right-1 { | ||
| - | margin-right: | ||
| - | } | ||
| - | .g--margin-left-1 { | ||
| - | margin-left: | ||
| - | } | ||
| - | .g--margin-top-2 { | ||
| - | margin-top: var(--mlt-sys-margin-2) !important; | ||
| - | } | ||
| - | .g--margin-bottom-2 { | ||
| - | margin-bottom: | ||
| - | } | ||
| - | .g--margin-right-2 { | ||
| - | margin-right: | ||
| - | } | ||
| - | .g--margin-left-2 { | ||
| - | margin-left: | ||
| - | } | ||
| - | .g--margin-top-3 { | ||
| - | margin-top: var(--mlt-sys-margin-3) !important; | ||
| - | } | ||
| - | .g--margin-bottom-3 { | ||
| - | margin-bottom: | ||
| - | } | ||
| - | .g--margin-right-3 { | ||
| - | margin-right: | ||
| - | } | ||
| - | .g--margin-left-3 { | ||
| - | margin-left: | ||
| - | } | ||
| - | .g--margin-top-4 { | ||
| - | margin-top: var(--mlt-sys-margin-4) !important; | ||
| - | } | ||
| - | .g--margin-bottom-4 { | ||
| - | margin-bottom: | ||
| - | } | ||
| - | .g--margin-right-4 { | ||
| - | margin-right: | ||
| - | } | ||
| - | .g--margin-left-4 { | ||
| - | margin-left: | ||
| - | } | ||
| - | .g--margin-top-5 { | ||
| - | margin-top: var(--mlt-sys-margin-5) !important; | ||
| - | } | ||
| - | .g--margin-bottom-5 { | ||
| - | margin-bottom: | ||
| - | } | ||
| - | .g--margin-right-5 { | ||
| - | margin-right: | ||
| - | } | ||
| - | .g--margin-left-5 { | ||
| - | margin-left: | ||
| - | } | ||
| - | .g--margin-top-6 { | ||
| - | margin-top: var(--mlt-sys-margin-6) !important; | ||
| - | } | ||
| - | .g--margin-bottom-6 { | ||
| - | margin-bottom: | ||
| - | } | ||
| - | .g--margin-right-6 { | ||
| - | margin-right: | ||
| - | } | ||
| - | .g--margin-left-6 { | ||
| - | margin-left: | ||
| - | } | ||
| - | .g--margin-top-7 { | ||
| - | margin-top: var(--mlt-sys-margin-7) !important; | ||
| - | } | ||
| - | .g--margin-bottom-7 { | ||
| - | margin-bottom: | ||
| - | } | ||
| - | .g--margin-right-7 { | ||
| - | margin-right: | ||
| - | } | ||
| - | .g--margin-left-7 { | ||
| - | margin-left: | ||
| - | } | ||
| - | .g--margin-top-8 { | ||
| - | margin-top: var(--mlt-sys-margin-8) !important; | ||
| - | } | ||
| - | .g--margin-bottom-8 { | ||
| - | margin-bottom: | ||
| - | } | ||
| - | .g--margin-right-8 { | ||
| - | margin-right: | ||
| - | } | ||
| - | .g--margin-left-8 { | ||
| - | margin-left: | ||
| - | } | ||
| - | .g--margin-top-9 { | ||
| - | margin-top: var(--mlt-sys-margin-9) !important; | ||
| - | } | ||
| - | .g--margin-bottom-9 { | ||
| - | margin-bottom: | ||
| - | } | ||
| - | .g--margin-right-9 { | ||
| - | margin-right: | ||
| - | } | ||
| - | .g--margin-left-9 { | ||
| - | margin-left: | ||
| - | } | ||
| - | .g--margin-top-10 { | ||
| - | margin-top: var(--mlt-sys-margin-10) !important; | ||
| - | } | ||
| - | .g--margin-bottom-10 { | ||
| - | margin-bottom: | ||
| - | } | ||
| - | .g--margin-right-10 { | ||
| - | margin-right: | ||
| - | } | ||
| - | .g--margin-left-10 { | ||
| - | margin-left: | ||
| - | } | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | .g--padding-0 { | ||
| - | padding: var(--mlt-sys-padding-1) !important; | ||
| - | } | ||
| - | .g--padding-1 { | ||
| - | padding: var(--mlt-sys-padding-2) !important; | ||
| - | } | ||
| - | .g--padding-2 { | ||
| - | padding: var(--mlt-sys-padding-3) !important; | ||
| - | } | ||
| - | .g--padding-3 { | ||
| - | padding: var(--mlt-sys-padding-4) !important; | ||
| - | } | ||
| - | .g--padding-4 { | ||
| - | padding: var(--mlt-sys-padding-5) !important; | ||
| - | } | ||
| - | .g--padding-5 { | ||
| - | padding: var(--mlt-sys-padding-6) !important; | ||
| - | } | ||
| - | .g--padding-6 { | ||
| - | padding: var(--mlt-sys-padding-7) !important; | ||
| - | } | ||
| - | .g--padding-7 { | ||
| - | padding: var(--mlt-sys-padding-8) !important; | ||
| - | } | ||
| - | .g--padding-8 { | ||
| - | padding: var(--mlt-sys-padding-9) !important; | ||
| - | } | ||
| - | .g--padding-9 { | ||
| - | padding: var(--mlt-sys-padding-10) !important; | ||
| - | } | ||
| - | .g--padding-10 { | ||
| - | padding: var(--mlt-sys-padding-11) !important; | ||
| - | } | ||
| - | .g--padding-horizontal-0 { | ||
| - | padding-left: | ||
| - | padding-right: | ||
| - | } | ||
| - | .g--padding-vertical-0 { | ||
| - | padding-top: | ||
| - | padding-bottom: | ||
| - | } | ||
| - | .g--padding-horizontal-1 { | ||
| - | padding-left: | ||
| - | padding-right: | ||
| - | } | ||
| - | .g--padding-vertical-1 { | ||
| - | padding-top: | ||
| - | padding-bottom: | ||
| - | } | ||
| - | .g--padding-horizontal-2 { | ||
| - | padding-left: | ||
| - | padding-right: | ||
| - | } | ||
| - | .g--padding-vertical-2 { | ||
| - | padding-top: | ||
| - | padding-bottom: | ||
| - | } | ||
| - | .g--padding-horizontal-3 { | ||
| - | padding-left: | ||
| - | padding-right: | ||
| - | } | ||
| - | .g--padding-vertical-3 { | ||
| - | padding-top: | ||
| - | padding-bottom: | ||
| - | } | ||
| - | .g--padding-horizontal-4 { | ||
| - | padding-left: | ||
| - | padding-right: | ||
| - | } | ||
| - | .g--padding-vertical-4 { | ||
| - | padding-top: | ||
| - | padding-bottom: | ||
| - | } | ||
| - | .g--padding-horizontal-5 { | ||
| - | padding-left: | ||
| - | padding-right: | ||
| - | } | ||
| - | .g--padding-vertical-5 { | ||
| - | padding-top: | ||
| - | padding-bottom: | ||
| - | } | ||
| - | .g--padding-horizontal-6 { | ||
| - | padding-left: | ||
| - | padding-right: | ||
| - | } | ||
| - | .g--padding-vertical-6 { | ||
| - | padding-top: | ||
| - | padding-bottom: | ||
| - | } | ||
| - | .g--padding-horizontal-7 { | ||
| - | padding-left: | ||
| - | padding-right: | ||
| - | } | ||
| - | .g--padding-vertical-7 { | ||
| - | padding-top: | ||
| - | padding-bottom: | ||
| - | } | ||
| - | .g--padding-horizontal-8 { | ||
| - | padding-left: | ||
| - | padding-right: | ||
| - | } | ||
| - | .g--padding-vertical-8 { | ||
| - | padding-top: | ||
| - | padding-bottom: | ||
| - | } | ||
| - | .g--padding-horizontal-9 { | ||
| - | padding-left: | ||
| - | padding-right: | ||
| - | } | ||
| - | .g--padding-vertical-9 { | ||
| - | padding-top: | ||
| - | padding-bottom: | ||
| - | } | ||
| - | .g--padding-horizontal-10 { | ||
| - | padding-left: | ||
| - | padding-right: | ||
| - | } | ||
| - | .g--padding-vertical-10 { | ||
| - | padding-top: | ||
| - | padding-bottom: | ||
| - | } | ||
| - | .g--padding-top--0 { | ||
| - | padding-top: | ||
| - | } | ||
| - | .g--padding-bottom-0 { | ||
| - | padding-bottom: | ||
| - | } | ||
| - | .g--padding-right-0 { | ||
| - | padding-right: | ||
| - | } | ||
| - | .g--padding-left-0 { | ||
| - | padding-left: | ||
| - | } | ||
| - | .g--padding-top--1 { | ||
| - | padding-top: | ||
| - | } | ||
| - | .g--padding-bottom-1 { | ||
| - | padding-bottom: | ||
| - | } | ||
| - | .g--padding-right-1 { | ||
| - | padding-right: | ||
| - | } | ||
| - | .g--padding-left-1 { | ||
| - | padding-left: | ||
| - | } | ||
| - | .g--padding-top--2 { | ||
| - | padding-top: | ||
| - | } | ||
| - | .g--padding-bottom-2 { | ||
| - | padding-bottom: | ||
| - | } | ||
| - | .g--padding-right-2 { | ||
| - | padding-right: | ||
| - | } | ||
| - | .g--padding-left-2 { | ||
| - | padding-left: | ||
| - | } | ||
| - | .g--padding-top--3 { | ||
| - | padding-top: | ||
| - | } | ||
| - | .g--padding-bottom-3 { | ||
| - | padding-bottom: | ||
| - | } | ||
| - | .g--padding-right-3 { | ||
| - | padding-right: | ||
| - | } | ||
| - | .g--padding-left-3 { | ||
| - | padding-left: | ||
| - | } | ||
| - | .g--padding-top--4 { | ||
| - | padding-top: | ||
| - | } | ||
| - | .g--padding-bottom-4 { | ||
| - | padding-bottom: | ||
| - | } | ||
| - | .g--padding-right-4 { | ||
| - | padding-right: | ||
| - | } | ||
| - | .g--padding-left-4 { | ||
| - | padding-left: | ||
| - | } | ||
| - | .g--padding-top--5 { | ||
| - | padding-top: | ||
| - | } | ||
| - | .g--padding-bottom-5 { | ||
| - | padding-bottom: | ||
| - | } | ||
| - | .g--padding-right-5 { | ||
| - | padding-right: | ||
| - | } | ||
| - | .g--padding-left-5 { | ||
| - | padding-left: | ||
| - | } | ||
| - | .g--padding-top--6 { | ||
| - | padding-top: | ||
| - | } | ||
| - | .g--padding-bottom-6 { | ||
| - | padding-bottom: | ||
| - | } | ||
| - | .g--padding-right-6 { | ||
| - | padding-right: | ||
| - | } | ||
| - | .g--padding-left-6 { | ||
| - | padding-left: | ||
| - | } | ||
| - | .g--padding-top--7 { | ||
| - | padding-top: | ||
| - | } | ||
| - | .g--padding-bottom-7 { | ||
| - | padding-bottom: | ||
| - | } | ||
| - | .g--padding-right-7 { | ||
| - | padding-right: | ||
| - | } | ||
| - | .g--padding-left-7 { | ||
| - | padding-left: | ||
| - | } | ||
| - | .g--padding-top--8 { | ||
| - | padding-top: | ||
| - | } | ||
| - | .g--padding-bottom-8 { | ||
| - | padding-bottom: | ||
| - | } | ||
| - | .g--padding-right-8 { | ||
| - | padding-right: | ||
| - | } | ||
| - | .g--padding-left-8 { | ||
| - | padding-left: | ||
| - | } | ||
| - | .g--padding-top--9 { | ||
| - | padding-top: | ||
| - | } | ||
| - | .g--padding-bottom-9 { | ||
| - | padding-bottom: | ||
| - | } | ||
| - | .g--padding-right-9 { | ||
| - | padding-right: | ||
| - | } | ||
| - | .g--padding-left-9 { | ||
| - | padding-left: | ||
| - | } | ||
| - | .g--padding-top--10 { | ||
| - | padding-top: | ||
| - | } | ||
| - | .g--padding-bottom-10 { | ||
| - | padding-bottom: | ||
| - | } | ||
| - | .g--padding-right-10 { | ||
| - | padding-right: | ||
| - | } | ||
| - | .g--padding-left-10 { | ||
| - | padding-left: | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | <note tip> | ||
| - | Y muchas más clases CSS faltarían aun. | ||
| - | </ | ||
| - | |||
clase/daw/diw/1eval/tema04.1762778132.txt.gz · Última modificación: por Lorenzo