>> ALTAVOZ: Resulta que HTML no es el único lenguaje que puede utilizar en el interior
de una página web.
Puedes usar algo llamado CSS, o Hojas de Estilo en Cascada, también.
CSS permite especificar mucho más precisamente la estética de una Web
página, incluyendo el diseño y el tamaño y la colores y las fuentes y mucho más.
Por ejemplo, vamos a crear una página web aquí se llama css0 que representa un
tu página de inicio para, por ejemplo, John Harvard.
>> En esta página, vamos a tener de John Harvard nombrar, debajo de la cual será
un mensaje para sus visitantes, por debajo de que será un pie de página, con
decir, un poco de información del copyright.
Para ello, vamos a definir tres divisiones por la página usando una etiqueta
llamado div.
Abrir div soporte, John Harvard, cerca div soporte, otro div paréntesis abierto,
y ahora vamos a especificar algo como, bienvenido a mi página de inicio!
Y vamos a cerrar este div, también.
>> Y ahora una tercera y última div, los derechos de autor.
Sólo para ser de lujo, permítanme usar ahora un archivo HTML entidad, un símbolo que representa
un personaje que no podía de otro modo escriba en el teclado.
En particular, me voy a hacer signo, libra, 169, punto y coma.
Resulta que es el código numérico para el símbolo de derechos de autor.
Entonces vamos a especificar John Harvard aquí en la parte inferior.
Vamos a cerrar el div y guarde el archivo.
>> Ahora, ¿qué es esta etiqueta div?
La etiqueta div simplemente define una división de la página, que es esencialmente un
región rectangular.
Así que en este momento en el tiempo, tengo tres regiones rectangulares, uno en la parte superior
de la otra.
Así que por ahora, el efecto es casi tan aunque yo tenía tres párrafos.
Pero no vamos a ver absolutamente tanto espacio en blanco entre ellos.
>> Vamos a guardar el archivo, cambie su permisos y echar un vistazo por una
momento en Chrome.
Chmod a + r CSS0.html.
Ahora vamos a abrir Chrome y visita http://localhost.CSS0.html.
De hecho, esta es una página de inicio por John Harvard.
Ahora vamos a stylize un poco más con precisión utilizando un poco de CSS.
>> De vuelta en gedit, vamos a entrar en este primera etiqueta div y añadir un estilo
Atribuyo especificando que me gustaría un tamaño de la fuente de, por ejemplo, 36 píxeles o píxeles.
Y me gustaría que el peso de esta fuente ser audaces en lugar de la predeterminada,
lo cual es normal.
Por segundo div, vamos a especificar otro atributo de estilo que tiene un
tamaño de fuente de 24 píxeles, por lo un poco más pequeño.
Cerrar comillas, tras el punto y coma.
>> Por último, en esta tercera div, vamos a hacer estilo es igual al tamaño de presupuesto, la fuente, y
digamos 12 píxeles en esta ocasión.
Cerrar cotización después del punto y coma.
Nótese entonces que me parece que tienen especificado un poco de estilización para
cada uno de estos tres divs utilizando, resulta, CSS.
De hecho, la sintaxis que se ve en entre esas comillas es CSS,
CSS específicamente propiedades con valores.
Y por esa primera etiqueta, donde tuve dos de estas propiedades, tamaño de fuente y
peso de la fuente, simplemente me separé con punto y coma.
>> Ahora, sólo por el bien de estilo, me punto y coma también incluidos en
el final de cada línea.
Pero no son estrictamente necesarios, sobre todo cuando sólo tiene un
propiedad definida.
Ahora vamos a guardar el archivo y vuelva a cargar en Chrome, y ver lo que
el efecto neto es.
De vuelta en Chrome aquí, hagamos click en Recargar.
>> Ahora tenemos un poco más interesante tu página de inicio para John
Harvard, en el que la primera línea con su nombre, que se encuentra dentro de ese
primera div, es de 36 píxeles de alto y también negrita, en el que la segunda línea,
que es en ese segundo div, es decir 24 píxeles de alto, pero no en negrita.
Y por lo que la tercera línea en ese tercer div es de 12 píxeles de alto y también
No negrita.
Pero supongo que ahora me gustaría cambiar todo de este texto sobre
de tal manera que está centrada.
>> Yo podría alinear cada uno de los individuos divs como está centrada.
Pero más fácilmente, podría envolver los tres divs dentro de un cuarto, un div
div padre, por así decirlo, y especificar que que div y la totalidad de su
descendientes deberían estar centrar el texto alineado?
Vamos a echar un vistazo.
>> Dentro de gedit, vamos a volver a mi cuerpo y añadir un nuevo div encima de la tapa con
div, estilo es igual entre comillas Centro texto alinee, cerca
postular después del punto y coma.
Y ahora, vamos a seguir adelante y todo guión de aquellas líneas que hemos escrito antes.
Y por debajo de la tercera div, vamos a cerrar esta nueva div.
>> En otras palabras, debido a los tres divs originales ahora son hijos, por lo que
Hablo, por un nuevo div padre y no tengo especifiqué que me gustaría para alinear el
texto de ese div padre en el centro de la página, que la propiedad será
heredado por todos esos niños.
De hecho, vamos a guardar el archivo y echar un vistazo en un navegador.
Vamos Recargar en Chrome.
Y ahí lo tenemos, un aún mejor La página principal de John Harvard.