Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

CSS Introducción - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 28 de diciembre de 2020 por Amadeo M.

54 visualizaciones

Más información Transcripción

Descargar la transcripción

¿Qué es una hoja de estilo? Bueno, pues una hoja de estilo es un fichero que va marcando las características que va a tener una página HTML, ya vimos que también se puede aplicar a un XML. 00:00:01
En inglés sus siglas son CSS, que es Coding Style Sheets, y bueno, vamos a ver cómo es la estructura. 00:00:14
En primer lugar, ¿cómo la llamamos desde nuestro fichero HTML? 00:00:23
Pues simplemente ponemos una etiqueta, la etiqueta link, en la cual decimos que lo que vamos a enlazar es una hoja de estilo 00:00:27
y su referencia, su dirección, el nombre completo a ese fichero. 00:00:34
Bien, ¿qué tenemos dentro de nuestra hoja de estilos? 00:00:43
Pues tenemos características de esta página, características que queremos dar para ver la apariencia de esta página. 00:00:45
Por ejemplo, aquí estamos diciendo que los párrafos, las etiquetas P, se van a ver en color rojo. 00:00:51
Y efectivamente, cuando mostremos esta página, cuando mostremos este párrafo de aquí, lo vamos a ver en color rojo. 00:00:58
Ya lo hemos visto de esta manera en vídeos anteriores, pero simplemente para tener una introducción a este tema. 00:01:08
La sintaxis es muy simple, la mayor parte de ellas es simplemente etiquetas o clases o identificadores 00:01:13
En los cuales dentro entre llaves se indican sus características, ¿de acuerdo? 00:01:21
Ese es el formato básico 00:01:26
Además puede haber varias sentencias y algunas de ellas comienzan con arroba 00:01:29
Estas son las que se llaman reglas arroba o reglas normales 00:01:34
Y entonces, por ejemplo, puedo importar otro CSS dentro del mío 00:01:38
por ejemplo, que lo puedo hacer y esto acaba en punto y coma 00:01:43
y los selectores pues como vemos funcionan de esta misma manera 00:01:46
bien, dentro de cada etiqueta o de cada elemento al cual queremos darle unas características de visualización 00:01:50
pues tenemos las propiedades que están aquí y los valores que van tomando 00:02:00
separado por el carácter de los puntos y finalizados en punto y coma 00:02:06
Y además, aunque todavía no aparezca por aquí, podemos introducir comentarios al estilo de las multilíneas de Java, por ejemplo. 00:02:10
Es decir, con barra, asterisco y finalizados en asterisco, barra. 00:02:19
Vamos a ver un ejemplo en el cual vamos a definir varios estilos. 00:02:27
En este caso vamos a ver un estilo en cascada. 00:02:35
primero, al body, al cuerpo, le ponemos un color blanco, el color del carácter blanco 00:02:36
y por otro lado, a los párrafos, vamos a decirles que se van a poner el color de fondo 00:02:43
en este color extraño, light coral 00:02:50
pues este es el color en que nos quedaría, este es el formato en que daría 00:02:53
por un lado se aplicaría el cuerpo, donde todos los caracteres están en formato en color blanco 00:02:57
y por otro lado, a nuestro párrafo, pues en ese color 00:03:02
cuando queremos una misma característica dársela a varias etiquetas o a varios elementos 00:03:05
simplemente lo separamos entre comas 00:03:11
en este caso tenemos un párrafo y una dirección 00:03:13
y efectivamente ponemos color rojo a ambos 00:03:16
no se pueden poner varios atributos o varias características separadas por coma 00:03:20
si quisiéramos poner que el borde de arriba y el borde de abajo 00:03:26
ambos son de una misma característica 00:03:31
tendríamos que ponerlo en dos líneas 00:03:33
para que muestre este resultado 00:03:35
por otro lado, no se deberían repetir selectores 00:03:37
primero P de color rojo y después de color azul 00:03:41
o primero de color blanco y el fondo de color negro 00:03:44
no deberíamos hacer esto 00:03:46
pero esto va a ocurrir muy a menudo 00:03:48
porque muchas veces vamos a enlazar dentro de nuestra página HTML 00:03:49
a varios ficheros CSS, a varias hojas de estilo 00:03:54
y entonces muchas veces vamos a tener definidos los mismos elementos en ambas 00:03:58
y vamos a seleccionar una de ellas 00:04:02
bueno, los comentarios como ya he dicho 00:04:05
empiezan y acaban de esta manera 00:04:09
y no hay un elemento básico, una hoja estándar 00:04:12
entonces simplemente trabajaremos con ella 00:04:16
podemos tener en un mismo documento un montón de hojas 00:04:19
Incluso darles un nombre, un título a todas ellas 00:04:26
E incluso alternativas, hojas alternativas 00:04:30
En Firefox nosotros podríamos incluso elegir qué estilo de página vamos a utilizar 00:04:35
Podríamos decir, sin estilo, qué estilo, o si hay varios, cuál de ellos vamos a utilizar 00:04:42
Esto no existe en Google Chrome 00:04:47
Por lo tanto no es una característica que pueda ser muy interesante 00:04:51
Sí pueden ser interesantes otros elementos, pero justamente este no. 00:04:54
Idioma/s:
es
Autor/es:
Amadeo Mora
Subido por:
Amadeo M.
Licencia:
Dominio público
Visualizaciones:
54
Fecha:
28 de diciembre de 2020 - 19:59
Visibilidad:
Público
Centro:
IES CLARA DEL REY
Duración:
05′
Relación de aspecto:
1.78:1
Resolución:
1364x768 píxeles
Tamaño:
30.96 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid