La mejor manera de comenzar con estilos en CSS3 es ver simplemente como un medio de información de formato en pantalla. Debido a que la mayor parte de la información que vamos a trabajar con el texto es, es más fácil para empezar con el texto como base para la comprensión de estilos. Vamos a empezar con esta página básica HTML5 formato:

¿Un simple título
El texto es sencillo para ir con el título.

Por el momento, el título y el párrafo son bastante sencillo. El texto aparecerá en lo que sea por defecto de la fuente que ha elegido para su navegador. Por lo general, el texto es negro sobre un fondo blanco, a menos que usted ha elegido una combinación de colores diferente.

En este punto, usted puede comenzar a jugar con la página un poco para ver cómo dar formato de manera diferente. El siguiente procedimiento le ayuda a modificar la página básica para que se vea un poco más interesante. Se puede utilizar cualquier editor de texto que quieras, siempre y cuando no se le añade ningún formato. Sin embargo, el uso de un producto como Komodo Edit hará que la tarea considerablemente más fácil.

1. Crear un nuevo archivo de HTML5 con su editor de texto.

   Su editor no admita archivos HTML5. Cualquier archivo de texto hará. El uso de un tipo de archivo específico por lo general significa que el editor inserta una parte del código de forma automática, lo que le ahorrará tiempo escribiendo.

2. Escriba el código de la página HTML.

   Asegúrese de escribir el código exactamente como aparece anteriormente en esta sección.

3. Inserte el siguiente código inmediatamente después de la

   los

   El atributo type indica al navegador la

4. Dentro de las entradas, escriba el siguiente código.

   p {font-family:-font-size cursiva: a gran color: # 0000ff-background-color: # ffff00-}

   Esto parece complicado, pero en realidad no lo es. El p representa el

   etiqueta (párrafo). Todo en esta entrada afectará al

   etiquetas en el documento.

   Las llaves ({}) le dicen al navegador que todas las instrucciones de formato entre ellos se aplican a la

   etiquetas en el documento. Siempre incluya las llaves como parte de la definición de estilo.

   Dentro de las llaves, se ve atributo de nombre y valor pares. Por ejemplo, font-family es el nombre de un atributo CSS que define qué tipo de letra a utilizar. En este caso, el atributo especifica el tipo de letra cursiva por defecto para la plataforma y navegador. El uso de los nombres genéricos CSS asegura que su aplicación va a producir resultados genéricamente compatibles en todas las plataformas, usando cualquier navegador.

   El atributo font-size define un tamaño relativo. En este caso, gran especifica quieres hacer el tipo de letra grande en comparación con su tamaño predeterminado. Usted no está especificando un tamaño de fuente específica, lo que significa que cada plataforma y el navegador puede hacer que la fuente más grande de lo normal para ese entorno individual.

   El atributo de color especifica un valor rojo del verde azul de usar para el color de la fuente. El valor está precedida por una almohadilla (#) seguido de valores de color hexadecimales de 0 a FF. En este caso, la fuente será el azul brillante con el apoyo de la plataforma. Del mismo modo, el atributo background-color especifica el fondo para el texto, que será de color amarillo en este caso.

5. Guarde la página y cargarlo en su navegador.

   Usted ve los efectos del cambio de estilo, como se muestra en la Figura 1-2. Su página puede ser distinta de la que está en esta página porque su plataforma o navegador pueden utilizar diferentes valores para la familia de fuente o tamaño de fuente.

   

6. Escriba el siguiente código después de que el p style dentro de la

   h1 {font-family: "Times New Roman", Georgia, serif-font-size: 40px; text-align: Centro-text-decoration: underline-color: # ff0000-background-color: # 00ffff-}

   Este estilo afecta a la

   entradas de etiqueta y que tiene muchas de las entradas utilizadas para la

   estilo de etiqueta. Sin embargo, se dio cuenta de que esta vez el atributo font-family contiene tres entradas: El valor Times New Roman es el más específico, seguido de Georgia, seguido por los menos específico - serif. Cuando se trabaja con un valor que contiene espacios, debe incluir el valor entre comillas como se muestra.

   Utilizando el enfoque de tres entrada le da más control sobre el aspecto de la salida, pero aún así hace posible que los navegadores que no soportan una fuente específica para representar el contenido correctamente. Cuando el suministro de una fuente específica, asegúrese de que también proporciona fuentes menos específicos para los navegadores que no tienen acceso a su fuente especificada.

   El atributo font-size también es diferente. Esta vez el estilo utiliza un tamaño específico de 40 píxeles. A pesar de que un valor específico puede hacer que sea posible crear efectos especiales en pantalla, el uso de un valor específico que también crea problemas. Una entrada 40px funcionará bien en el escritorio o portátil, pero podría causar problemas con una tableta, y sin duda hará que el contenido imposible visualizar en un teléfono inteligente.

   Este estilo también incluye algunas entradas que cambian el aspecto del texto. El atributo text-align determina donde el texto se coloca en la pantalla, mientras que el atributo text-decoration determina todas las características especiales de la fuente. En este caso, la fuente se muestra centrada en pantalla con un subrayado.

7. Guarde la página y cargarlo en su navegador.

   Usted ve los efectos del cambio de estilo, como se muestra en la Figura 1-3. El título aparece en el texto en rojo sobre un fondo azul claro, y se muestra el párrafo en el texto azul sobre un fondo amarillo.