Continuación de la sección anterior

En lugar de tener que escribir todo el CSS para esta plantilla, echa un vistazo en la carpeta extra_files/css que venía con este curso. (Si no has Tengo los archivos extra aún, la ubicación de la descarga está aquí, bajo el título Web Diseño - Nuevo Curso : Descargue el Archivos extra necesarios para este curso (No necesitas las descargas para el curso antiguo.)

Localiza el archivo llamado (etiqueta_13) un_col_estilo.css . Cópialo en tu propia carpeta de CSS. Luego, en la sección HEAD de tu HTML, inserta la siguiente línea:

TIPO DE HOJA DE ESTILO ="text/css" HREF="../css/one_col_style.css">

Este es, por supuesto, un enlace a la hoja de estilo que vamos a usar.

Una vez que haya insertado el enlace, guarde su trabajo y vea los resultados en su navegador. La página HTML simple debería transformarse en esto: (Los colores que tenemos elegidas son simplemente para que puedas ver las diferentes secciones - ¡son un poco chillonas!)

Estilizar un diseño de una columna

Si sigue siendo una página HTML simple, asegúrese de que su referencia HREF es correcta en el código LINK de arriba. ¿Copió nuestro archivo en el lugar correcto?

Ahora iremos a través del CSS y veremos cómo funciona. Así que abre el código CSS y echarle un vistazo.

Lo primero que hay que examinar es esto:

encabezado, pie de página, sección, navegación, artículo {

mostrar: bloquear;

}

Estamos estableciendo una regla que se aplicará a los cinco elementos en nuestro código HTML. Fíjate en cómo los cinco elementos están separados por comas. Puedes hacer este tipo de cosas para otros selectores CSS también. Por ejemplo, si quisieras reiniciar el CSS a los valores por defecto del navegador, puedes hacer esto:

cuerpo, h1, h2, h3, p, ul, li, {

border:0;
margin:0;
acolchado:0;

}

La razón por la que querrías reiniciar de esta manera es porque diferentes navegadores tienen diferentes valores por defecto. Entonces establecerías tus propios valores que anulan los predeterminados. Para obtener más información, realiza una búsqueda en Google de "restablecer hoja de estilo".

Pero en nuestro código, sólo nos aseguramos de que los navegadores más antiguos se ocupen de los más nuevos elementos HTML5 correctamente.

A continuación, en nuestro código CSS, establecimos algunas reglas generales para todo lo que está entre el dos etiquetas para el cuerpo:

CUERPO {

margen: 0 auto;
ancho: 940px;
fuente-familia: Arial, Helvética, sans-serif;
tamaño de la fuente: 13px;

}

La primera línea trata de los márgenes, poniéndolos a cero, Observa el auto parte, sin embargo. Lo que esto hace es centrar todo en la página.

Ejercicio
Borra el auto de tu código CSS en el selector BODY. Guarda y actualiza la página en tu navegador. Vuelve a poner el auto cuando termines.

Estamos haciendo otras tres cosas para la etiqueta BODY: establecer un ancho de 940 píxeles, estableciendo la familia de fuentes, y estableciendo el tamaño de la fuente. Juega con estos valores y ver qué pasa.

Tamaño fijo versus tamaño líquido

Hemos especificado un tamaño fijo de 940 píxeles en nuestro código. Hay un problema con esto, sin embargo. Suponga que quiere que su sitio sea visto no sólo en un monitor conectado a un ordenador pero también a un teléfono móvil. El tamaño fijo significa que ser demasiado amplio en el teléfono. La alternativa es el tamaño de los fluidos.

Con el tamaño de los fluidos, los valores no están en píxeles sino en porcentajes. Por ejemplo, en lugar de especificar un valor de 940 píxeles, podríamos haber escrito algo como el 80%. Si tienes como objetivo más de una plataforma, entonces ve por los porcentajes para sus valores, especialmente para los anchos (aunque las alturas pueden permanecer en píxeles).

En la próxima lección, veremos el estilo de las etiquetas HTML5.

| Estilo de etiquetas HTML 5;