1 00:00:01,260 --> 00:00:13,500 ¿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. 2 00:00:14,320 --> 00:00:23,140 En inglés sus siglas son CSS, que es Coding Style Sheets, y bueno, vamos a ver cómo es la estructura. 3 00:00:23,140 --> 00:00:26,760 En primer lugar, ¿cómo la llamamos desde nuestro fichero HTML? 4 00:00:27,120 --> 00:00:34,439 Pues simplemente ponemos una etiqueta, la etiqueta link, en la cual decimos que lo que vamos a enlazar es una hoja de estilo 5 00:00:34,439 --> 00:00:41,920 y su referencia, su dirección, el nombre completo a ese fichero. 6 00:00:43,259 --> 00:00:45,719 Bien, ¿qué tenemos dentro de nuestra hoja de estilos? 7 00:00:45,859 --> 00:00:51,759 Pues tenemos características de esta página, características que queremos dar para ver la apariencia de esta página. 8 00:00:51,759 --> 00:00:58,179 Por ejemplo, aquí estamos diciendo que los párrafos, las etiquetas P, se van a ver en color rojo. 9 00:00:58,979 --> 00:01:07,439 Y efectivamente, cuando mostremos esta página, cuando mostremos este párrafo de aquí, lo vamos a ver en color rojo. 10 00:01:08,340 --> 00:01:13,980 Ya lo hemos visto de esta manera en vídeos anteriores, pero simplemente para tener una introducción a este tema. 11 00:01:13,980 --> 00:01:21,939 La sintaxis es muy simple, la mayor parte de ellas es simplemente etiquetas o clases o identificadores 12 00:01:21,939 --> 00:01:26,620 En los cuales dentro entre llaves se indican sus características, ¿de acuerdo? 13 00:01:26,780 --> 00:01:29,120 Ese es el formato básico 14 00:01:29,120 --> 00:01:34,719 Además puede haber varias sentencias y algunas de ellas comienzan con arroba 15 00:01:34,719 --> 00:01:38,799 Estas son las que se llaman reglas arroba o reglas normales 16 00:01:38,799 --> 00:01:43,500 Y entonces, por ejemplo, puedo importar otro CSS dentro del mío 17 00:01:43,500 --> 00:01:46,480 por ejemplo, que lo puedo hacer y esto acaba en punto y coma 18 00:01:46,480 --> 00:01:50,500 y los selectores pues como vemos funcionan de esta misma manera 19 00:01:50,500 --> 00:02:00,500 bien, dentro de cada etiqueta o de cada elemento al cual queremos darle unas características de visualización 20 00:02:00,500 --> 00:02:06,540 pues tenemos las propiedades que están aquí y los valores que van tomando 21 00:02:06,540 --> 00:02:10,740 separado por el carácter de los puntos y finalizados en punto y coma 22 00:02:10,740 --> 00:02:19,780 Y además, aunque todavía no aparezca por aquí, podemos introducir comentarios al estilo de las multilíneas de Java, por ejemplo. 23 00:02:19,960 --> 00:02:24,680 Es decir, con barra, asterisco y finalizados en asterisco, barra. 24 00:02:27,400 --> 00:02:34,860 Vamos a ver un ejemplo en el cual vamos a definir varios estilos. 25 00:02:35,080 --> 00:02:36,740 En este caso vamos a ver un estilo en cascada. 26 00:02:36,740 --> 00:02:43,300 primero, al body, al cuerpo, le ponemos un color blanco, el color del carácter blanco 27 00:02:43,300 --> 00:02:50,080 y por otro lado, a los párrafos, vamos a decirles que se van a poner el color de fondo 28 00:02:50,080 --> 00:02:53,219 en este color extraño, light coral 29 00:02:53,219 --> 00:02:57,159 pues este es el color en que nos quedaría, este es el formato en que daría 30 00:02:57,159 --> 00:03:02,120 por un lado se aplicaría el cuerpo, donde todos los caracteres están en formato en color blanco 31 00:03:02,120 --> 00:03:05,900 y por otro lado, a nuestro párrafo, pues en ese color 32 00:03:05,900 --> 00:03:11,120 cuando queremos una misma característica dársela a varias etiquetas o a varios elementos 33 00:03:11,120 --> 00:03:13,199 simplemente lo separamos entre comas 34 00:03:13,199 --> 00:03:16,460 en este caso tenemos un párrafo y una dirección 35 00:03:16,460 --> 00:03:20,259 y efectivamente ponemos color rojo a ambos 36 00:03:20,259 --> 00:03:26,240 no se pueden poner varios atributos o varias características separadas por coma 37 00:03:26,240 --> 00:03:31,199 si quisiéramos poner que el borde de arriba y el borde de abajo 38 00:03:31,199 --> 00:03:33,599 ambos son de una misma característica 39 00:03:33,599 --> 00:03:35,979 tendríamos que ponerlo en dos líneas 40 00:03:35,979 --> 00:03:37,819 para que muestre este resultado 41 00:03:37,819 --> 00:03:41,340 por otro lado, no se deberían repetir selectores 42 00:03:41,340 --> 00:03:44,039 primero P de color rojo y después de color azul 43 00:03:44,039 --> 00:03:46,860 o primero de color blanco y el fondo de color negro 44 00:03:46,860 --> 00:03:48,159 no deberíamos hacer esto 45 00:03:48,159 --> 00:03:49,840 pero esto va a ocurrir muy a menudo 46 00:03:49,840 --> 00:03:54,979 porque muchas veces vamos a enlazar dentro de nuestra página HTML 47 00:03:54,979 --> 00:03:58,939 a varios ficheros CSS, a varias hojas de estilo 48 00:03:58,939 --> 00:04:02,759 y entonces muchas veces vamos a tener definidos los mismos elementos en ambas 49 00:04:02,759 --> 00:04:05,580 y vamos a seleccionar una de ellas 50 00:04:05,580 --> 00:04:09,259 bueno, los comentarios como ya he dicho 51 00:04:09,259 --> 00:04:12,419 empiezan y acaban de esta manera 52 00:04:12,419 --> 00:04:16,500 y no hay un elemento básico, una hoja estándar 53 00:04:16,500 --> 00:04:19,899 entonces simplemente trabajaremos con ella 54 00:04:19,899 --> 00:04:26,279 podemos tener en un mismo documento un montón de hojas 55 00:04:26,279 --> 00:04:30,939 Incluso darles un nombre, un título a todas ellas 56 00:04:30,939 --> 00:04:35,519 E incluso alternativas, hojas alternativas 57 00:04:35,519 --> 00:04:42,560 En Firefox nosotros podríamos incluso elegir qué estilo de página vamos a utilizar 58 00:04:42,560 --> 00:04:47,899 Podríamos decir, sin estilo, qué estilo, o si hay varios, cuál de ellos vamos a utilizar 59 00:04:47,899 --> 00:04:51,339 Esto no existe en Google Chrome 60 00:04:51,339 --> 00:04:54,939 Por lo tanto no es una característica que pueda ser muy interesante 61 00:04:54,939 --> 00:04:59,259 Sí pueden ser interesantes otros elementos, pero justamente este no.