T8 - (CSS) APP WEB Flashcards
(40 cards)
¿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?
¿Por qué se caracteriza?
CSS3
Se caracteriza por:
* mediaquerys (reponsive form)
* Flex box/grid
* multi columna
* animaciones
* efectos
¿Qué son MODULES en CSS3?
CSS Modules es una forma de escribir CSS en proyectos, que evita conflictos entre estilos. Cada clase se vuelve local al componente donde se define.
Por lo tanto no existirán futuras versiones.
¿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.
¿Qué son los PREPROCESADORES CSS? ¿Qué funciones trabajarán? ¿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.
¿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 este 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 COMO 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 en CSS
Para seleccionar elementos en función de su posición o relación con otros elementos (como hijos, hermanos, descendientes, etc.)
[,] 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”. -
[*]. E[atr*=”algo”] → cuyo atributo contiene “algo”. -
[~]E[atr~=”val1”] → cuyo atributo contiene la palabra exacta “val1” entre espacios.
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
Define CLASES en CSS y como se definen según su sintaxis.
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 y como se define su sintaxis
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 lo esté enfocando
PSEUDO CLASES IMPORTANTES en CSS
Cada una de estas pseudo-clases se usa para seleccionar elementos según su estado, estructura o atributos específicos.
-
: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>.
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.
