BLOQUE III - T8 APP WEB (CSS) Flashcards
¿Qué es CSS y qué significa?
Cascada Style sheet.
Es es un lenguaje que se usa para dar estilo y diseño a las páginas web.
¿Quién estandariza CSS?
La W3C
¿Qué es MIME y qué relación tiene con CSS?
MIME (Multipurpose Internet Mail Extensions) permite a los navegadores reconocer y procesar correctamente los archivos CSS.
El tipo de MIME para las hojas de CSS es text/class
¿Cuál es la última versión de CSS?
CSS3
Se caracteriza por:
* mediaquerys (reponsive form)
* Felxbox/grid
* multicoluimna
* animaciones
* efectos
¿Qué son MODULES en CSS3?
mejoran y especifican la propia versión. Por lo tanto no existirán futuras versiones.
¿Qué son los PREPROCESADORES CSS? ¿Qué relación tiene con el concepto DRY
Son herramientas que extienden CSS con funciones como bucles, anidamiento, Mixins o Extends, que luego se compilan a CSS estándar.
El concepto DRY (Don’t Repeat Yourself) es que permiten escribir código más reutilizable y organizado, evitando repeticiones innecesarias.
¿Cuáles son los 3 PREPROCESADORES de CSS?
- LESS
- SASS
- STYLUS
¿Para qué sirven…
* npm install -g less y
* lessC ?
npm install -g less instala Less, un preprocesador CSS, de forma global en tu sistema.
lessc → styles.less → styles.css usa el compilador de Less (lessc) para transformar el archivo styles.less en un archivo CSS estándar (styles.css), que los navegadores pueden entender.
¿Qué es un FRAMEWORK de CSS?
Es un conjunto de estilos predefinidos listos para usar.
Los más famosos son:
Bootstrap: El más popular, con un sistema de grid y muchos componentes UI.
Foundation: Similar a Bootstrap, pero más flexible y profesional.
- Bulma: Basado solo en clases, moderno y ligero, sin JavaScript.
Materialize: Basado en el diseño Material Design de Google, con componentes visuales atractivos.
E
¿Qué son los SELECTORES en CSS?
Son las palabras o símbolos que indican a qué elementos HTML se aplican los estilos.
¿De qué 3 maneras se aplican las reglas CSS?
- Externo
- Interno
- Local
¿Cómo se aplica el CSS externo?
CSS externo:
(< link rel=”stylesheet” href=”estilos.css”>)
📁Dónde: En un archivo .css separado.
🔧 Qué hace: Aplica estilos desde fuera del HTML.
✅ Ventajas: Reutilizable en varias páginas, más limpio.
🧠Ejemplo real: Se usa en casi todos los sitios web profesionales.
¿Cómo se aplica el CSS interno?
CSS interno
(< style> … < /style> en el < head>)
📁 Dónde: Dentro del HTML, en la etiqueta < style>.
🔧 Qué hace: Aplica estilos solo a esa página.
✅ Ventajas: Útil si necesitas algo rápido o específico para una sola página.
🚫Inconveniente: No es reutilizable entre páginas.
¿Cómo se aplica el CSS local?
CSS en la misma línea
(< p style=”…”>)
📁 Dónde: Directamente en la etiqueta HTML, dentro del atributo style. (En estae caso en el *párrafo)
🔧 Qué hace: Aplica estilos solo a ese elemento.
✅ Ventajas: Tiene la mayor prioridad.
🚫 Inconveniente: Es difícil de mantener y poco recomendable.
¿Qué son las @ at rules en CSS?
Son instrucciones especiales que empiezan con @ y controlan cómo se comporta el CSS.
Por ejemplo:
- @charset: define codificación del archivo CSS.
- @import: importa otro CSS.
- @media: aplica estilos según el tamaño de pantalla.
- @font-face: permite usar fuentes externas.
- @page: define estilo para impresión.
Selectores COMBINADORES
*Son los selectores que indican relaciones entre elementos (como “hijo”, “hermano”, “descendiente”, etc.). *
SELECTORES
# Selector Por id
. Selector Por class
***** Selector Todos los elementos
COMBINADORES
(espacio) Combinador Descendiente
> Combinador Hijo directo
+ Combinador Hermano siguiente
~ Combinador Hermanos siguientes (no directos)
Selectores BÁSICOS
etiqueta {…} → selecciona todos los elementos con esa etiqueta (p, h1, etc.).
#identificador {…} → selecciona el elemento con ese id.
.clase {…} → selecciona todos los elementos con esa clase.
etiqueta.clase {…} → solo los elementos de esa etiqueta con esa clase.
Selectores COMBINADOS
[COMA] etiqueta1, etiqueta2 {…} → aplica el estilo a ambas etiquetas (agrupamiento).
[ESPACIO] etiqueta1 etiqueta2 {…} → aplica a etiqueta2 dentro de etiqueta1 (descendientes).
[>] etiqueta1 > etiqueta2 {…} → aplica a etiqueta2 directamente dentro de etiqueta1 (hijos directos).
a + b → aplica a b solo si viene justo después de a.
a ~ b → aplica a todos los b que sean hermanos de a (no necesariamente directos).
Selectores por ATRIBUTO
- E[atr] → selecciona elementos E que tienen el atributo definido.
- [^] E[atr^=”algo”] → cuyo atributo empieza por “algo”.
- [$] E[atr$=”algo”] → cuyo atributo termina en “algo”.
- [ASTERISCO**] **E[atr=”algo”] → cuyo atributo contiene “algo”.
- [~] E[atr~=”val1”] → cuyo atributo contiene la palabra exacta “val1” entre espacios.
Define CLASES
Qué son: Las clases son un tipo de selector que permite agrupar varios elementos con un estilo común.
Sintaxis: Se definen con un punto (.) antes del nombre de la clase.
Ejemplo:
.tarjeta {
background-color: #f4f4f4;
padding: 10px;
}
Todos los elementos con la clase .tarjeta tendrán los mismos estilos
Define PSEUDO - CLASES
Qué son : Las pseudo-clases son estados especiales de un elemento que no se pueden definir directamente con un selector normal (por ejemplo, cuando el elemento está siendo hovered o enfocado).
Sintaxis: Se definen con dos puntos** (:)**
Ejemplo:
a:hover {
color: red;
}
Aquí, el enlace < a> cambiará de color a rojo cuando el usuario
PSEUDO CLASES IMPORTANTES
Aquí tienes las definiciones escuetas para cada pseudo-clase:
-
:active: Aplica cuando el elemento está siendo activado (por ejemplo, al hacer clic). -
:hover: Aplica cuando el elemento está siendo hoverizado (cuando el cursor pasa sobre él). -
:visited: Aplica a los enlaces que han sido visitados por el usuario. -
:invalid: Aplica a un campo de formulario con valor no válido. -
:empty: Aplica a un elemento sin hijos (ni texto ni otros elementos). -
:required: Aplica a los campos de formulario que son obligatorios. -
:first-child: Aplica al primer hijo de su padre. -
:nth-child(): Aplica al n-ésimo hijo de su padre (puede usar expresiones). -
:not(selector): Aplica a los elementos que no coinciden con el selector dado. -
:has(selector)(Level 4): Aplica si el elemento contiene el selector dado como descendiente (aún en desarrollo). -
:lang(): Aplica a los elementos cuyo atributolangcoincida con el valor dado. -
:root: Aplica al elemento raíz (generalmente<html>) y tiene más especificidad que la etiqueta<html>.
Cada una de estas pseudo-clases se usa para seleccionar elementos según su estado, estructura o atributos específicos.
Define PSEUDO - ELEMENTOS
Qué son: Los pseudo-elementos permiten aplicar estilos a partes específicas de un elemento
Sintaxis: Se definen con dos puntos (::)
Ejemplo:
p::before {
content: “👉 “;
}
Este estilo agrega un símbolo antes del contenido de cada párrafo **(< p
PSEUDO ELEMENTOS IMPORTANTES
::after: Inserta contenido después del contenido de un elemento.
::before: Inserta contenido antes del contenido de un elemento.
::first-line: Aplica estilos solo a la primera línea del contenido de un elemento.
::first-letter: Aplica estilos solo al primer carácter de un elemento.
