Moderador del foro: ZorG |
Foro uCoz » Ayuda a los webmasters » Soluciones personalizadas » CSS para los novatos |
CSS para los novatos |
Diferentes maneras de formatear CSS Existen muchas herramientas para formatear CSS y así tener más ordenado nuestro código. Pero podemos formatear el código CSS nosotros manualmente, y claro, para esto, hay infinidad de gustos. Os enseñaremos varias maneras de formatear códigos CSS, elige la que más te guste: Formateo multilínea Formateo multilínea con sangrías según la categoría y subcategoría Formateo en una sola línea Formateo en una sola línea con tabulación Formateo con mayoría en una sola línea Combo Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
25 reglas para hacer CSS accesibles o «25 Normas de accesibilidad relativas a las CSS». Este documento describe unas técnicas para la creación de hojas de estilo en cascada (CSS) accesibles. 1. Use un número mínimo de hojas de estilos[/b[ en su sitio. [b]2. Use hojas de estilo vinculadas en vez de estilos incrustados (directamente en las etiquetas) y evite hojas de estilo incrustadas (directamente en la página). 3. Si tiene más de una, use el mismo nombre de clase ("class") para el mismo concepto en todas las hojas de estilo. 4. Use la unidad "em" para fijar el tamaño de letra. 5. Utilice unidades de medida relativas y porcentajes. Utilice medidas absolutas de longitud sólo cuando las características físicas del medio de salida sean conocidas, por ejemplo con imágenes de mapa de bits. 6. Proporcione un equivalente textual para cualquier imagen o texto importantes generados por la hoja de estilo (por ejemplo, mediante las propiedades "background-image", "list-style", o "content"). CSS2 permite a los usuarios acceder a representaciones alternativas de los contenidos especificadas en valores de los atributos cuando se emplean juntos los siguientes: o selectores de atributos. 7. Asegúrese de que todo contenido importante aparezca dentro del objeto del documento. El texto generado por las hojas de estilo no forma parte del código fuente del documento y no estará disponible para las ayudas técnicas que acceden al Modelo de Objeto del Documento Nivel 1 ([DOM1]). CSS2 incluye diferentes mecanismos que permiten generar contenido desde la hoja de estilo: o Los seudo-elementos :before y :after y la propiedad "content". Cuando éstos se emplean conjuntamente, permiten la inserción de marcadores antes o después del contenido del elemento. 8. Especifique siempre un tipo de letra genérico por defecto. 9. Use las siguientes propiedades CSS2 para controlar la información de la fuente: "font", "font-family", "font-size", "font-size-adjust", "font-stretch", "font-style", "font-variant", y "font-weight", en lugar de los siguientes elementos y atributos de tipo de letra desaconsejados en HTML: FONT, BASEFONT, "face", y "size". 10. Si tiene que usar los elementos HTML para controlar la información sobre el tipo de letra, utilice BIG y SMALL, que no están desaconsejados. 11. Las siguientes propiedades CSS2 se pueden emplear para dar estilo al texto: o Mayúsculas/minúsculas: "text-transform" (para mayúsculas, minúsculas y primera letra mayúscula). 12. No use los elementos BLINK o MARQUEE. Estos elementos no aparecen en ninguna especificación W3C para HTML (es decir, son elementos no estándares) Si se emplea contenido parpadeante (por ejemplo, un titular que aparece y desaparece a intervalos regulares), proporcione un mecanismo para detener el parpadeo. Con CSS, "text-decoration: blink" producirá el efecto de parpadeo y además permitirá al usuario detener el efecto desactivando las hojas de estilo o redefiniendo la regla en una hoja de estilo de usuario. 13. Utilice hojas de estilo para dar estilo al texto, mejor que representar el texto con imágenes. Usar texto en lugar de imágenes significa que la información estará disponible para un mayor número de usuarios y permitirá a los usuarios redefinir los estilos del autor y cambiar los colores o los tamaños de letra más fácilmente. Si es necesario utilizar un mapa de bits para crear un efecto de texto (letra especial, transformación, sombras, etc.) el mapa de bits debe ser accesible. 14. Las siguientes propiedades CSS2 pueden ser usadas para controlar el formateo y posición del texto: o Sangría: "text-indent". No utilice BLOCKQUOTE o cualquier otro elemento estructural para hacer sangrías en el texto. 15. Use números en vez de nombres, para especificar colores. Use estas propiedades CSS para especificar colores: o "color", para el color de primer plano del texto. 16. Asegúrese de que los colores de primer plano y de fondo tienen buen contraste. Si especifica el color de primer plano, siempre debe especificar también el color de fondo (y viceversa). 17. Asegúrese de que la información no se transmite sólo a través del color. 18. Emplee UL para listas sin ordenar y OL para las ordenadas (por ejemplo, utilizar marcadores de forma apropiada) conjuntamente con CSS para proporcionar indicaciones contextuales. (1) 19. Hasta que CSS2 sea ampliamente utilizada por las aplicaciones de usuario o éstas permitan al usuario controlar la interpretación de las listas a través de otros medios, los autores deberían considerar el proporcionar pistas contextuales en las listas anidadas no numeradas. 20. Los contenidos deben ser maquetados, ubicados, colocados en capas y alineados mediante hojas de estilos (sobre todo mediante las propiedades CSS de float y colocación absoluta) y no mediante tablas: o Las propiedades "text-indent", "text-align", "word-spacing" y "font-stretch", permiten a los usuarios controlar el espaciado sin añadir espacios adicionales. Utilice 'text-align:center' en lugar del elemento desaconsejado CENTER. 21. Proporcione textos equivalentes para todas las imágenes, incluyendo las imágenes invisibles o transparentes. Si los diseñadores de contenido no pueden usar hojas de estilo y deben utilizar imágenes invisibles o transparentes (por ejemplo, con IMG) para diseñar con imágenes en las páginas, deberían especificar alt=“” para ellas. 22. Utilice las hojas de estilo para crear líneas y bordes. Las líneas y bordes pueden transmitir la noción de "separación" a los usuarios que pueden ver, pero este sentido no puede ser deducido fuera de un contexto visual. Utilice las propiedades CSS para especificar los estilos de los bordes: o "border", "border-width", "border-style", "border-color". 23. Asegúrese de que la presentación del contenido es comprensible cuando no se aplican hojas de estilos. Los autores deberían diseñar siempre documentos que tengan sentido sin hojas de estilo (por ejemplo, el documento debería escribirse en un orden "lógico") y entonces aplicar hojas de estilo para lograr efectos visuales. 24. Estudie la necesidad de utilizar propiedades auditivas de CSS2, las cuales proporcionan información para usuarios invidentes y usuarios de navegadores de voz de manera parecida al tipo de letra que proporciona información visual. Las siguientes propiedades forman parte de hojas de estilo en cascada de CSS2. o "volume" controla el volumen del texto hablado. 25. Cree distintas hojas de estilo para adaptar la presentación del documento a diferentes dispositivos de salida (Braille, sintetizadores de voz o dispositivos TTY, pantalla, móvil, etc.) mediante los "tipos de medios" de CSS2 (empleados con las reglas @media) Las reglas "@media" también pueden reducir los tiempos de descarga porque permiten a las aplicaciones de usuario ignorar reglas inapropiadas. Notas Ejemplo. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Maquetación CSS a tres columnas Si se puede maquetar a dos columnas, también se puede a tres o más columnas con algunos cambios. Código html de la maquetación La misma estructura del código anterior pero esta vez le agrego una columna, es posible agregar más columnas si quisieras hacer por ejemplo una lista de opciones o para galerías de imágenes. Hoja de estilos para la maquetación La hoja de estilos no ha variado mucho respecto a la del anterior tutorial La novedad es que las columnas 1,2,3 les he dado un float:left para que estén alineadas a la misma altura.Aquí puedes ver el ejemplo. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Técnicas de tipografía con CSS
Sobre tipografía y CSS: Cómo mejorar el aspecto visual y facilitar la lectura de los textos en las páginas web con la ayuda de CSS. Existen muchos tipos de webs, creadas para infinidad de propósitos, pero en muchos de los casos, el componente más importante es el texto. Unos pequeños cambios en las declaraciones de estilos para alterar la forma como se presenta el texto pueden ser cruciales para que el aspecto de una web pase de ordinario a atractivo, sobre todo, en las webs que se basan en contenido. Pero también es sumamente importante que un texto se pueda leer bien y se ha comprobado que ciertas características de los textos, que podemos definir con CSS, ayudan bastante a aumentar su legibilidad. CSS incluye diversos atributos de estilo que se pueden utilizar para crear textos más legibles y atractivos. En este artículo pretendemos comentarlos. Quizás no resultará muy novedoso para quien domine las CSS y esté acostumbrado a maquetar páginas basadas en texto, pero esperamos que las personas que empiezan a trabajar con las hojas de estilo puedan encontrar utilidad en esta serie de consejos y referencias. Cómo afectan los márgenes e interlineado a la velocidad de lectura y comprensión del texto En un estudio de usabilidad se comparan 4 textos formateados de la siguiente manera: Se comprobó entre varias personas que la comprensión del texto aumentaba cuando hay más margen y el espacio entre líneas también es mayor. Por lo que respecta a la velocidad de lectura se vió que aumentaba cuando los márgenes y el espacio de interlineado es menor. En la encuesta se dedujo que las personas prefieren leer textos que tengan espacio en blanco en márgenes y un mayor espacio entre líneas. Un interlineado y márgenes adecuados hacen más fácil leer el texto facilitan su comprensión, sin embargo, si nos pasamos en su uso estaríamos disminuyendo la velocidad con la que las personas pueden revisar nuestro contenido. Cómo aplicar márgenes e interlineado con CSS Podemos definir estos atributos, o bien para el cuerpo de la página, o bien para los contenedores en los que necesitemos escribir texto que deseamos que sea legible y atractivo. Así hemos definido un margen de 20 píxeles arriba, abajo, a la izquierda y a la derecha del cuerpo de la página. Además un espacio entre líneas de 1,5 veces el tamaño de la letra configurada por defecto. La fuente tendrá un tamaño un poco menor que la fuente configurada por defecto. En este caso hemos definido un una class de CSS definida para las etiquetas DIV donde tenemos un margen arriba y abajo de 10 píxeles y a los lados de 20 píxeles. Para el tamaño del texto y el espacio entre líneas hemos optado, por variar, por expresar los tamaños en píxeles. Otros atributos CSS para mejorar el aspecto estético de los textos Espacio entre letras Espacio entre palabras Transformar el texto entre mayúsculas y minúsculas Sangrado de la primera línea Decorar la primera letra o la primera línea de un párrafo Justificar el texto Utilizar distintas familias tipográficas Recurso interesante para ver distintas fuentes y estilos en funcionamiento Podemos alterar la fuente, el tamaño del texto, interlineado, espacio entre caracteres, colores, etc. para comparar distintos resultados visualmente. Luego puedes recibir el código CSS que te serviría para asignar ese estilo de fuente a los elementos de tu página web. Conclusión Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Razones para utilizar XHTML en lugar de Flash O si lo queréis de otro modo, ¿Por qué utilizar HTML/XHTML en lugar de flash? ¿Para qué me parece más aberrante utilizar el Flash? A todas estas pegas, quiero añadir funciones que no veo malas para el flash, e incluso, siendo objetivo, les veo cierto sentido crearlas en flash: Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Cómo ordenar tu código CSS He aquí una explicación cómo hacer más ordenado nuestro código CSS: hay que seguir estas pautas. 1) ¿Uno o varios ficheros? El código para dividirlo es este:
Quote @import "file1.css"; @import "file2.css"; @import "file3.css"; Más pautas en el resto de la entrada. 2) Tabla de contenidos Este es el código para poner una tabla de contenidos:
Quote /** * @style Standard Layout * @media screen * @version 1.0 * @author Franky * @copyright Franky’s pwn comp-a-ni * @licensor da customa * @layout in pixels: * | 788 | * | 10 | 768 | 10 | * | 10 | 27 | 741 | 10 | */ 3) Separar unos atributos de otros
Quote #content { height:200px; width:760px; margin:0 auto; background-color:red; color:#000; } Así el código CSS se encontrará mejor, nos dará menos quebraderos de cabeza. 4) Tabular el código
Quote #content { height: 200px; width: 760px; margin: 0 auto; background-color: red; color: #000; } Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
CSS: el enlace y la fuente Un enlace es un vínculo con el que enlazamos unas páginas con otras. El enlace en CSS tiene varias propiedades: A:link = Enlace normal (Sin pulsar ni mantener el cursor encima) Puedes definir estas propiedades en cualquier enlace que quieras para que el usuario pueda obtener mayor interactividad en tu sitio web. Font-family Un ejemplo: Font-style font-style: normal; (normal) Font-weight font-weight: bold; (bold = negrita). Podemos elegir los valores relativos: font-weight: bolder; (bolder = más gruesa). La propiedad font-weight puede tomar un valor de 100 a 900, no tiene porqué ser bold (negrita). Cabe destacar que de 100 a 500 el texto no se convierte en negrita, mientras que de 500 hasta 900 ya se aplica negrita al texto. Ejemplo: Text-decoration text-decoration: none = No se aplica ninguna decoración. También podemos combinar varios tipos de decoraciones, por ejemplo: Color El código usando un poco de todas estas propiedades podría quedar así, como ejemplo: Finalmente podemos ver un ejemplo final de todas las propiedades que hemos mostrado. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
¿Dónde colocar el código CSS? En esta entrada definiremos los distintos lugares donde colocar nuestro código CSS: En el mismo documento: Puede haber varias formas de colocarlo dentro del documento, sin necesidad de llamar a un archivo CSS externo: 1. Mediante la tag <style type=”text/css” media=”screen”>TU CÓDIGO</style> Un ejemplo: 2. Desde la etiqueta HTML, mediante la propiedad style: Desde un documento externo: Mediante la etiqueta <link>: O importándolo desde @import: Espero que la entrada sea útil para todos. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
5 útiles y sencillas propiedades CSS En esta entrada hablaré de 5 propiedades para CSS2 muy sencillas de utilizar, y que os sorprenderán de lo útiles que pueden llegar a ser. Estas propiedades son perfectamente compatible con la gran mayoría de los navegadores. Las propiedades que analizaré son clip, min-height, white-space, cursor y display. Allá vamos: 1. CSS Clip Esta propiedad es como una máscara, que te permitirá recortar un área del elemento. Puedes especificar la posición del elemento a absolute. Después, especifica los valores relativos top, right, bottom y left del elemento. Ejemplo de Image Clip position: relative; height: 130px; width: 200px; border: solid 1px #ccc; } Cambiar el tamaño y recortar imágenes En este ejemplo os enseñaré como cambiar el tamaño y recortar imágenes. Cogemos por ejemplo una imagen con formato rectángulo. Si deseamos escalarla al 50% para crear una galería de miniaturas en formato cuadrado, usaremos la propiedad width y height para cambiar el tamaño de las imágenes y recortarlas con la propiedad clip. Después, usaremos la propiedad left para mover 15 píxeles la imagen a la izquierda. 2. Min-height Aunque os he mostrado anteriormente el enlace para que funcione en IE, aquí os muestro el hack: 3. White-space La propiedad white-space nos ayuda a controlar los espacios en los elementos. Por ejemplo, si especificas white-space: nowrap, el texto se ubicará en la línea siguiente. 4. Cursor Puedes cambiar el tipo de cursor que deseas mostrar. Por ejemplo, cuando un botón esté desactivado, el cursor será cambiado al de defecto para indicar que no es un botón funcional. Así que la propiedad cursor es muy útil para desarrollar aplicaciones web. 5. Display inline/block Con la propiedad display: inline o display: block, podrás alinear 2 bloques de elementos en una sola línea, aunque sean distintos. las etiquetas <h1><div> y <p> son ejemplos de bloques de elementos. Ejemplos de etiquetas en línea son <span>, <em> y <strong>: Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Guía sobre los frameworks CSS ¿Qué es un framework CSS? ¿Cuando usar un framework CSS? Ventajas de usar un framework CSS Desventajas de usar un framework CSS Resumen Mirándolo desde otra perspectiva, para proyectos dinámicos y desarrollos en equipo es muy recomendable ya que así obtendremos un estándar de fácil adaptación por cualquier miembro del equipo. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Errores comunes al usar CSS Cuando empezamos a usar CSS, como todo en la vida, cometemos errores. Pero estos errores son beneficiosos, ya que, si reflexionamos preguntándonos el porqué los hemos cometido, estaremos aprendiendo. Si crees que tus errores no son comunes, mira estos errores con su respectiva solución que voy a mostrar a continuación y, a lo mejor, puedes que te lleves una sorpresa y que tu error aparezca allí: 1. No cerrar los corchetes Si abrimos una clase o id pero después nos olvidamos de cerrarla, el código siguiente no tendrá efecto. Para ello es necesario ser muy meticuloso y fijarse si hemos cerrado todos los corchetes en nuestra hoja de estilos. 2. No definir los atributos con la estructura correcta Es necesario cerrar los atributos con punto y coma. Si no lo hacemos así, el siguiente atributo no será leído. 3. Escribir mal el nombre del selector o clase Si enlazamos en el documento HTML a la id #header, pero después en el código HTML escribimos #haedr, estaremos cometiendo un grave error que tendrá como consecuencia la incapacidad de leer dicho selector. 4. Escribir incorrectamente el nombre de un atributo 5. Confundir el valor de los atributos 6. Caracteres y tildes del español en los selectores y las clases Estos son algunos errores que comete mucha gente que se inicia en el mundo de CSS, espero que os hayan servido para aprender. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Chuletas CSS para principiantes Nunca viene mal tener a mano una chuleta (guía) sobre las principales etiquetas en CSS. La lista es para principiantes, así que los usuarios medios y avanzados ya se la sabrán de memoria, pero que no se preocupen, haremos otras guías para ellos también. Color del texto color: green; Color de fondo background-color: black; background: white url("/images/bk.gif") repeat-x; Repetir fondo imagen verticalmente background: white url("/images/bk.gif") repeat-y; Eliminar subrayado de un enlace a { text-decoration:none; } Negrita font-weight: bold; Cursiva font-style: italic; text-decoration: underline; Todas en mayúsculas text-transform: uppercase; Capitalizar primera letra de cada palabra text-transform: capitalize; Añadir un margen margin-top: 5px; O usa un cuadrado: margin: 5px 10px 15px 20px; Espacio padding-top: 5px; Cuadrado padding: 5px 10px 5px 10px; Cuadrado largo (Si top, bottom y izquierda y derecha tienen el mismo valor): padding: 5px 10px; Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
CSS: buenas prácticas El objetivo primordial de CSS es definir un lenguaje estándar para diseñar interfaces para internet, sin importar el software o dispositivo que interprete los documentos. Pero esa promesa se puede caer a pedazos apenas nos enfrentamos a las “diferencias” en la implementación del estándar de cada navegador. Diseñas para Firefox y resulta que tu sitio se ve pésimo en algunas versiones de Internet Explorer. Lo que se suponía que era un ahorro de trabajo se transforma en un pozo sin fondo de correcciones y “hacks”. Es imposible dejar a todos los navegadores contentos -especialmente porque en versiones más antiguas el soporte de CSS es incompleto o inexistente- y como diseñadores para la web no debemos pretender que nuestros documentos se vean exactamente igual en todos los navegadores. Despues de todo, un documento web diseñado para ser accesible debe considerar que el usuario puede elegir distintos tamaños de fuentes, tipografías, dimensiones o contrastes. Normaliza primero Cuidado con el Width! Para IE5, el ancho final de esta caja es 200px; */ Para Firefox, Opera, Safari y otros el ancho final es No sólo eso. IE6 usa el motor de CSS de IE5 si el documento HTML no tiene DOCTYPE. Esto fue una solución “parche” de Microsoft para soportar mejor CSS en IE6 sin romper el diseño de sitios “antiguos” hechos para IE5 (la mayoría de los sitios antiguos no tienen DOCTYPE). ¿La solución? No especifiques width en combinación con márgenes y bordes en la misma caja. Lo común es tener una caja exterior que controla el ancho total del elemento, y manejar los márgenes y paddings en los elementos interiores: // CSS Por lo mismo, trata de manejar los anchos en unos pocos elementos contenedores. Los DIV’s y otros elementos son bloques; esto significa que, si no tienen un width especificado, ocuparán todo el espacio horizontal disponible (restando los bordes, márgenes y paddings). Aprovecha esa cualidad y minimiza el uso de WIDTH. Ojo con los atributos no soportados Solución: usa esos atributos con confianza para Firefox, Safari y Opera. Para IE 5 y 6 permítete usar un pequeño “hack”: Esto aprovecha dos particularidades de la implementación del DOM y CSS de IE. Primero, IE cree que hay un elemento sin nombre que contiene a todo el documento HTML. Por lo tanto el selector en cascada sólo es visible para IE. Segundo, si el contenido de la caja es más alto que el width, IE agrandará la caja los pixeles necesarios para acomodar la extensión del contenido, por lo que podemos usar el truco del asterisco para definir un height sólo para IE. En los otros navegadores el contenido sobresale de la caja si éste es más extenso que height. Para evitar eso fue diseñado min-height. No abuses de la cascada #mi-otro-div div p em a.link-especial {color:green;} Mientras más “profundo” o específico el selector, más peso tiene sobre otros selectores más generales, sin importar cual vaya antes o después en el código. Los selectores ultra-específicos son muy poderosos pero a veces muy difíciles de mantener. Trata de mantener tus selectores con el mínimo de especifidad necesaria y sólo aumenta la profundidad en casos puntuales. Nombra tus atributos de acuerdo a su contenido, no su diseño Si alguna vez decides modificar la hoja de estilos puedes terminar con un div id=”menu-derecha” que se encuentre a la izquierda o un link class=”link-rojo” de color amarillo. No muy fácil de entender. Tanto HTML como sus atributos fueron pensados para estructurar los documentos semánticamente, sin importar su diseño. Por esto es más sensato utilizar atributos que hablen del tipo de contenidos que contienen: ¿Dónde pongo las imágenes? Por supuesto hay más. Esta es una breve lista de las consideraciones que tengo presentes ante cualquier nuevo proyecto CSS. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Guia CSS de la propiedad Float y Clear para estructurar una web Al momento de diseñar nuestra pagina web, las propiedades más importante que debemos aprender para poder lograr casi todas las estructuras posibles son Float y Clear. Ambas se trabajan juntas, pues una sirve para complementar a la otra. Float Nos permitirá con facilidad paginas con 2 o más columnas, entre muchas otras cosas. Esta propiedad tiene 3 valores importantes: • Left: Flota el elemento a la Izquierda. Ahora veremos una serie de ejemplos. Primero debemos tener dos archivos, el HTML y el CSS: EL HTML sera así: Al archivo html lo podremos llamar como queramos, en él simplemente se encuentran 4 divs con un numero dentro y la clase Box asignada a ellos. Luego nuestro archivo CSS que deberá llamarse style.css y estar en la misma carpeta que el html. Como vemos le he dado ciertas propiedades como tamaño, color y un borde. Solo para reconocer mejor cada div. Con este código nuestros divs se verían así: Como vemos el primer div flota a la izquierda y luego los otros intentan lo mismo, quedando al lado en orden. Así mismo, si en vez de tener float:left lo cambiamos a float:right veríamos todo de la siguiente manera: Como vemos los objetos “cambiaron sentido” el primer div se fue a la derecha y así los demás se fueron poniendo a su lado en orden. Para que noten la utilidad y el cambio, veremos como sería sin la propiedad float. Como se puede ver los objetos no flotan por lo tanto simplemente van quedando uno abajo de otro. Con float podremos lograr paginas y diseños de varias columnas. Pero surge un problema, cuando el tamaño de la pantalla es menor a lo que ocupan nuestros objetos estos se irán corriendo para abajo de la siguiente manera: Este problema se puede solucionar encerrando a todos estos divs dentro de otro que tenga un tamaño igual o mayor al que ocupan todos los divs en linea. Por ejemplo para corregir este error en mi ejemplo deberíamos encerrarlos en un div con un width:808px; (Contando que cada uno mide 200px más 2px de borde y son 4) Pero puede ocurrir lo contrario, que queramos que se vea como en la imagen anterior pero al agrandar la resolución de pantalla nuestro diseño se deforme y se forme una linea como en la primera imagen. Para eso tenemos Clear. Clear Como vimos por cada objeto que contenga la propiedad float se irán agrupando a su lado uno tras otro sin interrupción al menos que el tamaño de su contenedor sea menor. Al colocarse clear a un objeto le decimos que actúe como si fuese el primero objeto en tener la propiedad float pero en la siguiente linea, y así el esquema anterior se rompe y comienza uno nuevo de ahí para abajo. Puede tener los siguientes valor: • Left: Se rompe el esquema de orden para los elementos con “Float:left” Por ejemplo si en nuestro HTML al tercer div le cambiamos su id a box2 y agregamos al css: Con esto, sin importar cuanto agrandemos la pantalla nuestra web se vería así. Con float y Clear podremos crear muchas formas de paginas, aquí algunos ejemplos. Espero que les sea de utilidad. Para cualquier duda, comenten. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Errores comunes al usar CSS En continuación de este post quiero ofrecer esto. Espero que sea interesante y útil para cada usuario que trabaje con CSS. Cuando empezamos a usar CSS, como todo en la vida, cometemos errores. Pero estos errores son beneficiosos, ya que, si reflexionamos preguntándonos el porqué los hemos cometido, estaremos aprendiendo. Si crees que tus errores no son comunes, mira estos errores con su respectiva solución que voy a mostrar a continuación y, a lo mejor, puedes que te lleves una sorpresa y que tu error aparezca allí: 1. No cerrar los corchetes Si abrimos una clase o id pero después nos olvidamos de cerrarla, el código siguiente no tendrá efecto. Para ello es necesario ser muy meticuloso y fijarse si hemos cerrado todos los corchetes en nuestra hoja de estilos. 2. No definir los atributos con la estructura correcta Es necesario cerrar los atributos con punto y coma. Si no lo hacemos así, el siguiente atributo no será leído. 3. Escribir mal el nombre del selector o clase Si enlazamos en el documento HTML a la id #header, pero después en el código HTML escribimos #haedr, estaremos cometiendo un grave error que tendrá como consecuencia la incapacidad de leer dicho selector. 4. Escribir incorrectamente el nombre de un atributo 5. Confundir el valor de los atributos 6. Caracteres y tildes del español en los selectores y las clases Estos son algunos errores que comete mucha gente que se inicia en el mundo de CSS, espero que les hayan servido para aprender. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
| |||