Activa JavaScript para disfrutar de los vídeos de la Mediateca.
CSS - Introducción a CSS - Contenido educativo
Ajuste de pantallaEl ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:
Bueno, pues vamos a empezar con la introducción a hojas de estilo, o a CSS, que es el lenguaje que se utiliza para programar a estas hojas de estilo,
00:00:00
que serán las que al final sirvan para dar un diseño artístico, un diseño estético a nuestros sitios web.
00:00:12
En primer lugar vamos a explicar qué es CSS, pues CSS viene del acrónimo de Cascading Style Sheet, que es una hoja de estilo encascada.
00:00:21
Este ahora mismo es el lenguaje estándar que sirve para aplicar estilos y para poder proporcionar una apariencia estética a las páginas web.
00:00:30
Ya veremos cómo se hace todo esto a través de los diferentes elementos que existen también en CSS.
00:00:42
Se llama encascada porque se puede utilizar patrones de herencia.
00:00:50
Es decir, nosotros, igual que vimos en HTML, que teníamos, por ejemplo, las etiquetas de los encabezados, H1, H2, H3, pues nosotros podemos ir definiendo diferentes etiquetas o diferentes identificadores, ¿vale?
00:00:55
Recordad cuando hacíamos enlaces de tipo ancla, que utilizábamos el elemento, el atributo id, pues nosotros podemos definir lo que son diferentes estilos para cada uno de esos id.
00:01:09
Incluso podemos crear patrones de herencia, ¿vale? Donde se compartan algunos estilos y otros se separan, ¿vale?
00:01:23
Y su mayor ventaja es que permite separar la presentación, es decir, la parte estética de la parte del contenido, es decir, que por un lado nosotros tendremos nuestros archivos de hojas de estilo y por otro lado tendremos nuestros archivos de HTML que será donde esté el contenido de la web, ¿vale?
00:01:31
De la misma forma, nosotros con hojas de estilo seremos capaces de dar diferentes diseños dependiendo de la plataforma. Es decir, podemos dar un diseño si se visualiza la web desde un ordenador y otro diseño si se visualiza desde un dispositivo móvil dependiendo de la resolución del dispositivo, etc.
00:01:50
etc. ¿Más ventajas que proporciona utilizar hojas de estilo? Pues que nosotros, como vimos
00:02:10
por ejemplo en algunos de los ejercicios que hemos hecho o en algunos de los diseños que
00:02:19
ya hemos trabajado, un sitio web habitualmente está compuesto de varias páginas web. Pues
00:02:25
nosotros podemos modificar el estilo de todas las páginas a la vez utilizando hojas de
00:02:31
estilo. Esto da una ventaja a su vez muy importante, es que te permite controlar ese estilo o esa
00:02:38
estética de una forma más precisa. ¿Por qué? En primer lugar porque te evita que
00:02:47
tú la misma etiqueta, por ejemplo H1, que la quieras con la letra en rojo, el tipo de
00:02:51
fuente X y con un tamaño de 22 píxeles, pues que no la tengas que estar definiendo
00:02:57
en cada página, sino que la definas solo una vez y ya te valga para todo. Lo que también
00:03:04
se traduce en que los sitios web carguen de una forma más rápida. Es decir, aumentamos
00:03:09
la velocidad de carga porque solo carga una vez ese patrón estético, esa definición
00:03:15
estética. Y lo que decía antes, la posibilidad de definir la apariencia web en función de
00:03:22
los medios, dispositivos móviles, ordenadores, teléfonos, etc. Luego tenemos que saber cómo
00:03:29
funciona CSS. CSS es un poquito más diferente o un poquito diferente respecto de HTML, porque
00:03:40
en HTML encontramos normalmente elementos dentro de otros elementos, por ejemplo dentro
00:03:50
la etiqueta body y luego nos encontramos la etiqueta header o la etiqueta section o la
00:03:57
etiqueta article. Sin embargo, en CSS siempre vamos a tener la misma estructura o la misma
00:04:01
sintaxis, que va a ser el selector, que va a ser lo que defina qué elemento es el que
00:04:07
queremos modificar. Luego vamos a tener la declaración y dentro de esa declaración
00:04:13
vamos a tener dos campos. Uno va a ser la propiedad, es decir, la altura, la anchura,
00:04:19
del color y luego el valor que le queremos dar a esa propiedad. Pues si es anchura, pues
00:04:25
yo quiero que ocupe el 100% de la pantalla. Aquí pondría width y aquí 100%. ¿Qué
00:04:30
es el color? Pues yo quiero el color rojo. Aquí pondría color y aquí pondría, por
00:04:35
ejemplo, red. ¿Vale? Mi color rojo, etcétera, etcétera. ¿Vale? ¿Qué pasa? Que nos encontraremos
00:04:38
muchas veces en los que vamos a poner muchísimas declaraciones para un único selector. ¿Vale?
00:04:45
Pues porque queramos modificar el tamaño de la letra, el tipo de letra, el color, el color de fondo, la anchura, la altura, yo qué sé, la alineación, un montón de cosas, ¿vale?
00:04:51
Entonces, utilizando esta forma de sintaxis nos iríamos a un documento que se iría mucho a lo largo del eje X, ¿vale?
00:05:05
Lo cual se hace después muy difícil en caso de que haya errores o que queramos modificar algo.
00:05:14
Por lo tanto, vamos siempre a mantener esta sintaxis, ¿vale?
00:05:19
Es decir, vamos a escribir hacia abajo, ¿vale?
00:05:23
Fijaros, y esto es un detalle importante, ¿vale?
00:05:26
Que todas las propiedades y valores que pongamos, todas las declaraciones, lo que veíamos aquí como el concepto de declaración,
00:05:28
tienen que tener punto y coma menos la última, ¿vale?
00:05:35
Importante, ¿ok?
00:05:39
Como digo, esto es más sencillo también, facilita detectar y corregir errores
00:05:40
¿Por qué? Porque vemos cada propiedad en una línea
00:05:45
Y por último os dejo aquí un enlace donde podéis encontrar mucha más información acerca de hojas de estilo
00:05:48
Y bueno, con esto vamos a empezar ya a trabajar en hojas de estilo
00:05:58
- Autor/es:
- Fernando Martínez Martí
- Subido por:
- Fernando M.
- Licencia:
- Reconocimiento - No comercial - Compartir igual
- Visualizaciones:
- 229
- Fecha:
- 12 de enero de 2021 - 18:56
- Visibilidad:
- Público
- Centro:
- IES EL BURGO - IGNACIO ECHEVERRÍA
- Duración:
- 06′ 04″
- Relación de aspecto:
- 1.78:1
- Resolución:
- 1366x768 píxeles
- Tamaño:
- 104.88 MBytes
