Los diseñadores web profesionales suelen escribir complejo código CSS de la memoria. CSS, acrónimo de Cascading Style Sheets, consiste en declaraciones que determinan la forma en que los elementos de las páginas web se ven. Kompozer, una herramienta de desarrollo Web, permite a cualquiera crear páginas web profesionales sin necesidad de escribir código HTML. El programa incluso tiene un editor de hoja de estilos CSS incorporado que construye clases CSS automáticamente. Todo lo que tienes que hacer es elegir el elemento que desee estilo, y utilizar el ratón para seleccionar los atributos de estilo deseados.

Instrucciones

Crear documento HTML

1

Lanzamiento de Kompozer, haga clic en "Archivo" y "Crear" para crear un nuevo documento. Kompozer crea un nuevo documento HTML y lo muestra en el panel de edición.

2

Pegue el siguiente código en la sección del cuerpo del documento:

<Input id = tipo "Text1" = clase "texto" = "textboxClass" />

Esto crea un cuadro de texto que hace referencia a una clase CSS llamado "textboxClass."

3

Haga clic en la pestaña "Vista previa" para ver una vista previa de la página. Tenga en cuenta que el cuadro de texto no tiene estilo.

4

Presione "F11" y escriba un nombre para el documento HTML en el cuadro de texto "Título". Haga clic en "Aceptar", luego haga clic en "Guardar". Se abre la ventana de hojas de estilo CSS.

5

Haga clic en el botón de opción que dice "estilo aplicado a todos los elementos de la clase." Busque la flecha desplegable en la parte inferior de la ventana y haga clic en ".textboxClass."

Establecer atributos de estilo

6

Haga clic en "Crear regla de estilo" para abrir un panel Regla estilo. Haga clic en ".textboxClass" para seleccionarlo. Este nombre de clase - con un punto al principio - es el mismo nombre de la clase que las referencias del cuadro de texto en la sección anterior. Nombres de clases CSS comienzan con períodos a pesar de que ningún período aparece en la propia definición de código HTML. Haga clic en la pestaña "Texto" para mostrar los atributos que se pueden establecer para cambiar la apariencia del texto en el cuadro de texto.

7

Escriba "1.2em" en el cuadro de texto Tamaño de fuente y haga clic en la casilla de "Color" para abrir una ventana de diálogo de color que contiene colores. Haga clic en uno de los colores, a continuación, haga clic en "Aceptar".

8

Haga clic en la pestaña "fondo" para ver la configuración que le permiten establecer propiedades de fondo de la caja de texto. Haga clic en el cuadro de "Color" y, a continuación, haga clic en el color que desea utilizar como color de fondo del cuadro de texto.

9

Haga clic en "Aceptar", luego haga clic en la pestaña "Fronteras" para mostrar la configuración de frontera. Haga clic en la casilla de verificación "los cuatro lados Uso Estilo Same Fronteriza" para colocar una marca de verificación allí, a continuación, escriba "2px" - sin las comillas - en el cuadro de texto Ancho. Haga clic en el botón "Color" y elija un color como se describe en el paso 3.

10

Haga clic en "Aceptar". La ventana de hojas de estilo CSS se cierra. Tenga en cuenta que el cuadro de texto ahora tiene los atributos visuales que definió en la ventana de hojas de estilo CSS.

Consejos y advertencias

• Experimente con las otras pestañas en la ventana de hojas de estilo CSS. Estas pestañas le ayudan a establecer cualquier propiedad CSS. Para ver el código CSS generado por Kompozer, haga clic en el botón "Fuente" en el fondo de Kompozer y localizar la sección "cabeza" del documento, con la clase CSS llamado ".textboxClass" que contiene todos los atributos y valores que ha seleccionado.