1
00:00:00,000 --> 00:00:00,300

2
00:00:00,300 --> 00:00:04,840
>> ALTAVOZ: ¿Así que en realidad no es la mejor
diseñar entremezclarse CSS con HTML.

3
00:00:04,840 --> 00:00:08,700
Más bien, lo mejor es factorizar su
CSS, ponerlo en algún lugar central, y

4
00:00:08,700 --> 00:00:11,430
de alguna manera aplicarlo a la
tags en su página web.

5
00:00:11,430 --> 00:00:15,290
Para lograr esto, podemos dejar de realidad
utilizando el atributo de estilo y en su lugar

6
00:00:15,290 --> 00:00:19,290
utilizar una etiqueta de estilo, que pertenece en el
jefe de una página web junto con, por

7
00:00:19,290 --> 00:00:20,700
ejemplo, su título.

8
00:00:20,700 --> 00:00:24,400
>> Vamos a darle una oportunidad y volver a poner en práctica
una página principal para John Harvard

9
00:00:24,400 --> 00:00:26,410
usando la etiqueta de estilo.

10
00:00:26,410 --> 00:00:28,930
Ya he recibido podamos empezar
aquí con tres divs para

11
00:00:28,930 --> 00:00:30,260
La página web de John Harvard.

12
00:00:30,260 --> 00:00:33,990
Pero primero vamos a ir ahora hasta esta primera
div y añadir un nuevo atributo,

13
00:00:33,990 --> 00:00:38,680
a saber, la identificación, y especificar que un único
identificador para este div particular,

14
00:00:38,680 --> 00:00:42,390
deberá ser, por ejemplo, entre comillas
"Top", un nombre arbitrario, pero

15
00:00:42,390 --> 00:00:45,840
descriptiva en que este es div
de hecho en la parte superior de mi página.

16
00:00:45,840 --> 00:00:48,920
>> Para la próxima div, vamos a darle un
ID diferente de, entre comillas

17
00:00:48,920 --> 00:00:54,080
"Medio", y vamos a dar el tercer div
un ID de comillas "de abajo". Nosotros

18
00:00:54,080 --> 00:00:57,740
Ahora tiene tres identificador único
a la que se puede aplicar un poco de CSS

19
00:00:57,740 --> 00:01:01,210
propiedades, pero primero, vamos a devolución
a la cabeza de esta página.

20
00:01:01,210 --> 00:01:04,760
Justo por encima del título aquí, voy a
seguir adelante y definir el estilo

21
00:01:04,760 --> 00:01:07,120
y cierre el estilo.

22
00:01:07,120 --> 00:01:10,340
>> En el interior de este momento, voy a definir
algunas propiedades de estilo CSS, a saber, la

23
00:01:10,340 --> 00:01:14,550
mismos que tenía anteriormente en Estilo
atributos, pero aquí van a estar

24
00:01:14,550 --> 00:01:16,320
definido centralmente.

25
00:01:16,320 --> 00:01:20,880
Para ello, voy a especificar la libra
símbolo seguido por la parte superior, con lo que

26
00:01:20,880 --> 00:01:24,710
especificando que el siguiente CSS
propiedades deben aplicarse a cualquier

27
00:01:24,710 --> 00:01:28,800
Elemento HTML tiene la única
identificador de la parte superior.

28
00:01:28,800 --> 00:01:32,240
Entonces voy a tener algunas abiertas y
llaves cerradas, y yo voy a

29
00:01:32,240 --> 00:01:39,170
especificar, por ejemplo, tamaño de la letra será de 36
píxeles, el peso de la fuente deberá ser audaz.

30
00:01:39,170 --> 00:01:41,810
>> Para mantener las cosas limpias, estoy poniendo cada
de estas propiedades ahora en su propia

31
00:01:41,810 --> 00:01:44,610
línea, pero eso es sólo una
convención estilística.

32
00:01:44,610 --> 00:01:47,830
Debajo de esto, ahora vamos a definir otro
selector, por así decirlo.

33
00:01:47,830 --> 00:01:52,680
Esta es para la etiqueta HTML que tiene
identificador único del medio.

34
00:01:52,680 --> 00:01:57,540
Y aquí, vamos a especificar un tamaño de fuente
de 24 píxeles, por debajo de la otra

35
00:01:57,540 --> 00:02:01,520
selector para la parte inferior, y en el interior
de eso, vamos a especificar un

36
00:02:01,520 --> 00:02:03,850
tamaño de fuente de 12 píxeles.

37
00:02:03,850 --> 00:02:09,350
>> Ahora vamos a guardar, cambiar los permisos
en, y cargar esta página en un navegador,

38
00:02:09,350 --> 00:02:14,230
chmod un plus r css-1.html.

39
00:02:14,230 --> 00:02:22,260
Vamos a abrir Chrome y visitar
http://localhost/css-1.html.

40
00:02:22,260 --> 00:02:22,960
No está mal.

41
00:02:22,960 --> 00:02:26,930
Exactamente como era mi intención, pero me gustaría
tomar las cosas un paso más allá y ahora

42
00:02:26,930 --> 00:02:29,050
texto del centro John Harvard.

43
00:02:29,050 --> 00:02:32,080
Ahora bien, para hacerlo, yo podría envolver la
página entera en un div como yo

44
00:02:32,080 --> 00:02:33,800
hizo un ejemplo anterior.

45
00:02:33,800 --> 00:02:37,820
O puedo ser más inteligente y darse cuenta de que
todos estos divs se encuentran dentro de

46
00:02:37,820 --> 00:02:42,420
el cuerpo de mi página, así que ¿por qué no se aplican
una o más propiedades de CSS para el cuerpo

47
00:02:42,420 --> 00:02:43,850
etiquetar a sí mismo?

48
00:02:43,850 --> 00:02:45,460
>> Para ello, vamos a hacer esto.

49
00:02:45,460 --> 00:02:47,650
Volvamos a gedit aquí.

50
00:02:47,650 --> 00:02:52,460
Vamos a retroceder hasta la etiqueta de estilo,
y vamos a especificar un selector sólo

51
00:02:52,460 --> 00:02:54,520
usando el nombre de esa etiqueta, Cuerpo.

52
00:02:54,520 --> 00:03:00,580
Debajo de eso, vamos a poner nuestras llaves
seguido por el centro de text-align.

53
00:03:00,580 --> 00:03:05,580
Ahora vamos a guardar la página y vuelve a cargar
dentro de ese navegador.

54
00:03:05,580 --> 00:03:08,090
Recargar en Chrome, y voila.

55
00:03:08,090 --> 00:03:11,000
Ahora tenemos la página de John Harvard
centrada ya que teníamos intención.

56
00:03:11,000 --> 00:03:12,619