Fundamentos de estilos css3
Video: 5. 50 trucos con CSS - Creación de estilos adaptables y responsive [Fundamentos de CSS]
La mejor manera de comenzar con estilos en CSS 3 es para ver simplemente como un medio para dar formato a la información 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 comenzar con texto como base para la comprensión de estilos. Vamos a empezar con esta página básica HTML5 formato:
Una simple página A 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 cualquier fuente predeterminada que ha elegido para su navegador. Por lo general, el texto es negro sobre un fondo blanco, a menos que haya elegido una combinación de colores diferentes.
En este punto, se puede empezar a jugar con la página un poco para ver cómo formatear 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 desee, siempre y cuando no se le añade ningún tipo de formato. Sin embargo, el uso de un producto tal como Komodo Edit hará que la tarea mucho más fácil.
Crear un nuevo archivo HTML 5 con su editor de texto.
Video: Tutorial Fundamentos de CSS: Sintaxis del lenguaje CSS | video2brain
Su editor no sea compatible con los archivos de HTML5. Cualquier archivo de texto va a hacer. 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 de escritura.
Escriba el código de la página HTML.
Asegúrese de escribir el código, precisamente, tal como aparece anteriormente en esta sección.
Inserte el código siguiente inmediatamente después de la
etiqueta. Las entradas, escriba el código siguiente.
p {font-family: cursiva-font-size: a gran color: # 0000ff-background-color: # ffff00-}Esto se ve muy complicado, pero en realidad no lo es. El p representa el
tag (párrafo). Todo en esta entrada afectará a la
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 de pares. Por ejemplo, fuente-familia es el nombre de un atributo de CSS que define qué tipo de letra a utilizar. En este caso, el atributo especifica el tipo de letra cursiva predeterminado para la plataforma y el navegador. El uso de los nombres genéricos CSS asegura que su aplicación va a producir resultados de forma genérica en todas las plataformas compatibles, usando cualquier navegador.
El atributo de tamaño de fuente define un tamaño relativo. En este caso, gran especifica que desea hacer que la fuente grande en comparación con su tamaño predeterminado. No especifica 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 de rojo, verde y azul a utilizar 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 color 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.
Guardar 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 debido a que su plataforma o navegador pueden utilizar valores diferentes para la familia de fuente o tamaño de fuente.
Escriba el código siguiente después del estilo p dentro de la
h1 {font-family: "Times New Roman", Georgia, serif-font-size: 40px; text-align: center-text-decoration: underline-color: # ff0000-background-color: # 00ffff-}Este estilo afecta a la
entradas de las etiquetas 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 por Georgia, seguido por el menos específico - serif. Cuando se trabaja con un valor que contiene espacios, debe encerrar el valor entre comillas como se muestra.
Utilizando el enfoque de tres entrada que da más control sobre el aspecto de la salida, pero todavía 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 de tamaño de fuente es también 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, utilizando 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 que 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.
Guardar la página y cargarlo en su navegador.
Ves los efectos del cambio de estilo como se muestra en la Figura 1-3. El título aparece en color rojo sobre un fondo azul pálido, y el párrafo se muestra como texto de color azul sobre un fondo amarillo.
