Modo de empleo de flotación a las formas de estilo de programación html5 y css3

Muchos de los problemas de diseño de página parecen requerir tablas. Algunos uso inteligente de la CSS3 flotador puede ayudar a los elementos con varias columnas sin la sobrecarga de tablas. Formas causan un dolor de cabeza en particular porque una forma a menudo implica etiquetas en una columna izquierda seguido de entrada elementos en la columna de la derecha.

Probablemente estaría tentado de poner una forma tal en una mesa. Adición de etiquetas de tabla hace que el HTML mucho más compleja y no es necesario. Es mucho mejor usar CSS para gestionar el diseño.

Puede flotar elementos para crear formas atractivas sin necesidad de tablas.

Video: Como Crear un Chat con HTML5, CSS3, PHP, MYSQL y AJAX

Como el diseño de la página se vuelve más complicado, que tiene más sentido pensar en el HTML y el CSS por separado. El HTML le dará un sentido de la intención general de la página, y el CSS puede ser modificada por separado. El uso de CSS externo es una extensión natural de esta filosofía. Comenzar mirando floatForm.html y concentrarse en la estructura HTML antes de preocuparse por el estilo:

floatForm.html

Si bien se mira a través de este código, tenga en cuenta varias cosas interesantes acerca de cómo está diseñada la página:

El CSS es externa. CSS se define en un documento externo. Esto hace que sea fácil cambiar el estilo y le ayuda a centrarse en el documento HTML de forma aislada.

  • El código HTML es mínima. El código es muy limpio. Incluye un formulario con un. El contiene etiquetas, elementos y a.

  • No hay una mesa. No hay necesidad de añadir una tabla como un esquema de organización artificial. Una tabla no se sumaría a la claridad de la página. Los elementos de modelo por sí mismas proporcionan suficiente estructura para permitir que todo el formato que necesita.

  • Las etiquetas son parte del diseño. Se puede utilizar el etiqueta elemento a lo largo de la forma, que le da un elemento que puede ser de estilo como desee.

  • Todo es seleccionable. Usted desea aplicar un estilo CSS para las etiquetas, a otra entrada elementos, y tercera estilo a la botón. Puede configurar el código HTML para que pueda utilizar los selectores CSS sin necesidad de ningún carné de identidad o clase atributos.

    Video: #1 Curso de Css3 y Flexbox completo 2017 - Qué es y para qué sirve los estilos en cascada nivel 3

  • Hay una botón. Puede utilizar una botón elemento en lugar de a propósito. De esta manera, se puede aplicar un estilo a toda la botón elementos y un estilo diferente al elemento.

  • El diseño de una página como esta por lo que su estructura interna proporciona todos los selectores que necesita es maravilloso. Esto mantiene la página muy limpio y fácil de leer. Aún así, no tenga miedo de agregar clases o ID si los necesita.

    A menudo es una buena idea buscar en su página con HTML puro antes de empezar a jugar un poco con CSS.

    Si usted tiene una página con estilos y desea ver cómo se verá sin las reglas de estilo, utilizar herramientas para desarrolladores de Chrome o Firebug. Puede desactivar temporalmente algunas o todas las reglas de estilo CSS para ver el contenido predeterminado por debajo. Esto a veces puede ser extremadamente útil.

    Artículos Relacionados