CSS - Parte una de los fundamentos del diseño del sitio

| by Michael J Medeiros | February 21, 2005
Cuando viene a diseñar un Web site, hay varias técnicas de programación modernas que pueden hacer la tarea del diseñador mucho más fácil. Una vez el contenido y el foco del Web site se decide, disposición deben convertirse en el foco del desarrollo. ¿Qué fuentes serán utilizadas para los varios acoplamientos y texto? ¿Qué color será utilizado para hacer ciertos acoplamientos más prominentes que otros? ¿Más importante, cómo el diseñador asegurará el Web site entero tiene un aspecto isométrico? Si está utilizado correctamente, el CSS puede lograr esas tareas, mientras que reduce timeframes andincreasing de la página-carga de la anchura de banda.

¿CUÁL ES CSS Y CÓMO PUEDEN ÉL SER UTILIZADOS?

El CSS es una abreviatura para la hoja de conexión en cascada del estilo. Puede consistir en varias líneas del texto para controlar aspecto contento dentro de un Web page, o las páginas múltiples dentro de un Web site. Hay dos maneras comunes que una hoja del estilo puede ser utilizada. Primero, puede ser agregado a, “cabeza,” de cada Web page individual. Una manera más eficiente de poner una hoja del estilo en ejecución, es up-load el archivo en un directorio en un Web site, y utiliza una etiqueta del incluido.

La fijación de la hoja del estilo dentro del jefe de cada página aumentará la cantidad de anchura de banda usada y afectará levemente la velocidad de la transferencia directa de páginas. Esto es dependiente en el tamaño de un sitio particular y el número de los estilos incluidos en el CSS. Si un cambiar-de-estilo se decide sobre en el futuro, cada Web page individual requerirá corregir, para afectar el Web site entero. Por ejemplo, si un diseñador deseara aplicar un tema del día de fiesta alrededor de Navidad, él o ella necesitaría corregir el CSS en cada página para el cambio a la toma afecta.

En cambio, un archivo del CSS se puede uploaded sobre un anfitrión. Una vez que uploaded, un diseñador pueda utilizar un simple incluya la etiqueta, para invitar la hoja del estilo. Este método-de-utilizar puede reducir la cantidad de anchura de banda usada y aumentar tiempos de la velocidad, pues algunos visitantes tendrán el CSS almacenado en sus computadoras que siguen la primera carga de la página. Además, realizará cambios del estilo mucho más fáciles como solamente un archivo necesita ser cambios para afectar todas las páginas relevantes dentro de un Web site dado.

DESARROLLAR UNA HOJA DEL ESTILO

Abrir cualquier editor de textos con una página en blanco. Excepto la página como, something.css”. Si era decidido para upload el archivo para el uso, éste será el archivo real uploaded. Además, un diseñador puede copiar y pegar de este archivo, si se va a ser incluido dentro del jefe de cada Web page.

Antes de comenzar a agregar etiquetas reales, considerar cómo los acoplamientos si apppear y las varias secciones del Web site o de los Web pages. Si una hoja del estilo llega a ser descuidada, hará el trabajo del diseñador difícil. Por lo tanto, comenzar simple y mantener el CSS limpio. La hoja del estilo debe comenzar con agrupar simple. Por ejemplo, todas las páginas pueden utilizar un jefe idéntico y un menú izquierdo. Si los estilos del texto van a ser diferentes, éste podría ser es primeros dos grupos simples, junto con acoplamiento ajusta a formato.

HYPERLINKS DE MANEJO CON EL CSS

Con nuestros primeros dos grupos podemos agregar cinco líneas a la hoja del estilo. Éstas son A (alfabetizada): ACOPLAMIENTO, A: LIBRACIÓN, A: VISITADO, .head, y .leftmenu. Con estas cinco líneas, podemos controlar el aspecto de acoplamientos, de acoplamientos visitados, del ratón-overs en acoplamientos, del jefe de todas las páginas, y del menú izquierdo.

Ahora vamos a agregar algunas variaciones básicas al texto. Después de, A: ACOPLAMIENTO y A: VISITADO,” entonces agregar un espacio, “{color: #004080}”. Notar que no se ha agregado ningunas cualidades de la fuente. Esto es porque vamos a utilizar diversas fuentes dentro de las otras etiquetas. La única cosa que es cambiada en el texto ligado es el color. Cambiar el color para reflejar el aspecto deseado. Observar, esto puede ser ajustado a la preferencia personal.

ADICIÓN DEL JEFE Y DEL TEXTO DEL MENÚ A LA HOJA DEL ESTILO

Una vez que se decidan los colores deseados del acoplamiento, las cualidades de la fuente se pueden asociar al jefe y al menú izquierdo. Después del .head y del .leftmenu, entonces agregar un espacio, “{fuente-familia: Arial, Helvetica, de sans serif; fuente-tamaño: 11pt; fuente-peso: normal; texto-transformar: capitalizar;}”. Para explicar, estamos especificando cualquier área del texto con el estilo de .head utilizaremos una fuente (fuente-familia), seamos un tamaño uniforme (fuente-tamaño), tenemos un peso uniforme (fuente-peso), y sin importar mecanografiar nos transformemos a los capitales (texto-transformar). Una versión modificada se debe agregar al menú izquierdo.

Aquí es cómo el CSS debe aparecer actualmente:

A: acoplamiento {color: #004080}
A: visitado {color: #004080}
A: libración {color: ff3300}
.head “{fuente-familia: Arial, Helvetica, de sans serif; fuente-tamaño: 11pt;
fuente-peso: normal; texto-transformar: capitalizar;}
.leftmenu “{fuente-familia: Arial, Helvetica, de sans serif; fuente-tamaño: 11pt; fuente-peso: normal; texto-transformar: capitalizar;}

PONER LA HOJA DEL ESTILO EN EJECUCIÓN

Si era decidido a último la hoja del estilo sobre cada página, agregar:

¡>< del " texto/css " del <STYLE TYPE=! -
A: acoplamiento {color: #004080}
A: visitado {color: #004080}
A: libración {color: ff3300}
.head {fuente-familia: Arial, Helvetica, de sans serif; fuente-tamaño: 11pt;
fuente-peso: normal; texto-transformar: capitalizar;}
.leftmenu {fuente-familia: Arial, Helvetica, de sans serif; fuente-tamaño: 11pt;
fuente-peso: normal; texto-transformar: capitalizar;}
--></STYLE>

- a cada página del sitio que utilizará la hoja del estilo. La hoja del estilo se debe colocar entre el <head> y las etiquetas de </head> del documento.

Si era decidido para upload la hoja y para invitar el archivo en cada página, agregar, “nombre de http://links.mjmls.com/ del href= del <LINK " del archivo” rel=stylesheet> de type=text/css”. De nuevo, esto se debe colocar entre el <head> y las etiquetas de </head>. Cambiar la localización del acoplamiento a donde la hoja del estilo está situada en el anfitrión del Web.

LLAMAR LA HOJA DEL ESTILO EN WEB PAGES

Hay una variedad de maneras de invitar las diversas cualidades del texto. Esto depende extensamente de la disposición del sitio. Si se diseña el sitio usando las tablas, podemos especificar simplemente el estilo para cada célula, más bien que cada palabra. Por ejemplo, el código de la tabla podía aparecer como:

width= <table” 100%” >
<tr>
Href=” http://links.mjmls.com” >Home</a></td> del ><a de la” CABEZA” del <td CLASS=
>Next link</td> de la” CABEZA” del <td CLASS= etc…
</tr>
</table>

Como un acoplamiento independiente, dentro del Web page dado, nosotros puede agregar la etiqueta de la clase al Hyperlink:

class=” cabeza” >Home</a> de” http://links.mjmls.com” del href= del <a

Para modificar un grupo entero de texto independiente, la etiqueta del CSS se podía agregar a la etiqueta del párrafo:

el párrafo entero del >The de la” cabeza” del class= del <p del texto es affected</p>

Podría ser sugerido que llamando estilo las etiquetas están experimentadas con, antes de modificar un Web site entero. Agregando el class=” cabeza” o el class=” leftmenu” a las varias etiquetas, un nuevo diseñador aprenderá cómo las etiquetas del estilo pueden trabajar, reducir el tamaño de un Web page, excepto anchura de banda, y proporcionar un aspecto uniforme a través de un Web site.

En la parte dos, demostraremos algunas otras cualidades que se podrían agregar a diversas etiquetas y CSS de la aplicación a las tablas.

Article Source: http://www.articleset.com



About the Author

Michael J Medeiros is an entrepreneur residing in New Jersey. He has a background in business and advertising and the found of Mjmls.com.

About Mjmls

Mjmls provides an open-source advertising solution for businesses and individuals to list items and services for sale through their Online Classifieds – http://www.mjmls.com/

To locate vehicles for sale or to advertise a vehicle, visit the Automobile Classifieds section of Mjmls at: http://www.mjmls.com/index.php?a=5&b=15 » Read more articles by Michael J Medeiros
You are welcome to publish or reprint this article free of charge, provided: