tipos para paginas lista hojas etiquetas estilos estilo ejemplos descargar codigos css

para - ¿Hay algún estándar de CSS que deba seguir al escribir mi primera hoja de estilo?



lista de codigos css (17)

Actualmente estoy trabajando en mi primer sitio web. No tengo idea de dónde comenzar en la página de CSS, o si hay algún estándar que deba seguir.

Agradecería cualquier enlace o consejo de primera mano.

Además de los excelentes recursos señalados en las otras respuestas, aquí hay algunos consejos para estructurar la manera en que trabajas en el CSS:

Haz el trabajo en el siguiente orden ...

  1. Diseña la estructura semántica de tu página en HTML. Asegúrate de que sea correcto sin ningún CSS.
    • Cree el diseño básico de la página en un CSS: columnas, encabezados, cuadros flotantes.
    • Añada tipografía: fuentes, tamaños y colores.
    • Agregue los elementos gráficos: imágenes de fondo, logotipos, etc.

Coloque un enlace en su página al validador CSS del W3C (si su sitio es visible desde Internet) y continúe pegándolo de vez en cuando.

Mantenga todos sus estilos fuera del HTML.

Es bueno tener IE6 / 7/8, FF2 / 3 y Chrome / Safari. Opera también sería agradable. Sigue cambiando el navegador en el que abres tu página mientras trabajas (a menos que estés investigando un problema particular del navegador :-)).

Agregue comentarios sobre lo que hace cada regla y por qué. Mantenga la versión de desarrollo de CSS activada y una vez que haya terminado, elimine los comentarios y los espacios en blanco y comprima varias reglas en una para la producción.

Actualización : Como mencionó Bobby Jack, me olvidé de mencionar las herramientas de depuración. Puede utilizar IE Developer Toolbar (para IE) o Firebug (para FF) o las herramientas de inspección integradas en Chrome para inspeccionar qué reglas se aplican a un elemento determinado o modificar el estilo de un elemento sobre la marcha.

Bueno, si este es su primer sitio web y está tratando de ir a la ruta de CSS, entonces debe leer sobre el diseño de CSS y el modelo de caja de CSS. Comprenda cómo usar elementos de bloque para hacer su diseño y manténgase alejado de las tablas para el diseño.

Otra cosa que recomiendo es usar FireFox para todo el desarrollo primario y hacer que su sitio funcione y ver cómo lo desea en FF. Luego, inicie IE y solucione cualquier problema que tenga el peculiar IE. Usted terminará con un sitio mucho más limpio y CSS mucho más limpio si lo hace de esta manera.

Eche un vistazo a CSS Systems para escribir CSS mantenibles por Natalie Downe de ClearLeft . Hay muchos conceptos geniales en su presentación (recomiendo descargar el PDF porque sus notas son bastante detalladas).

Creo que su presentación está dirigida a desarrolladores de CSS de tiempo completo más que a principiantes, pero incluso los principiantes podrían tomar mucho de ello.

Mi primer consejo sería usar siempre solo hojas de estilo externas; intente evitar los estilos en línea o de encabezado.

Usa clases e identificadores tanto como sea posible.

Apoyo la sugerencia de A List Apart

Aunque no es muy bonita, y algunas veces un poco vieja, la Ayuda HTML de WDG tiene algunas buenas referencias.

Quirksmode.org tiene una gran tabla de compatibilidad CSS.

No es exactamente el material para principiantes, pero A List Apart es un blog muy interesante sobre CSS y sus complejidades.

Encuentro las páginas de CSS de la escuela W3 excelentes para referencia.

Puede ahorrarse muchos dolores de cabeza al comprender la especificidad . Cuando establece una regla para algo, si hay una regla en conflicto, la especificidad decide qué regla gana .

Un resumen rápido (incompleto):

Una regla de todo el elemento (como p {color:green;} ) será superada por:
Una regla específica de clase (como p.sidenote {color: blue;} ), que será superada por:
Una regla específica de id (como p#final {color: red;} ), que será superada por:
Una declaración en línea (como <p style="color: orange;"> ), que será superada por:
Una regla importante (como p#final {color: inherit !important;} )

... todo lo cual puede ser superado por las reglas del usuario.

Las interacciones pueden ser complejas, pero hay reglas matemáticas subyacentes a ellas. Para un tratamiento más completo, vea el Capítulo 3 de "CSS: The Definitive Guide" de Eric Meyer.

Para recapitular: si estableces una regla y no parece afectar nada, es probable que tengas una regla conflictiva. Para entender por qué una regla supera a la otra, aprenda sobre la especificidad.

Resista la tentación de especificar en exceso nombres de clase o de identificación. Use selectores contextuales o descendientes. Esto le permite definir estilos fácilmente para las áreas de su página, pero ahorre en la cordura de tener que administrar y recordar miles de nombres. Por ejemplo:

<ul id="nav"> <li class="navItem"><span class="itemText">Nav Item</span></li> <li class="navItem"><span class="itemText">Nav Item</span></li> </ul> #nav { } #nav .navItem { } #nav .itemText { }

Esto es innecesariamente complejo, y se encontrará rápidamente quedándose sin buenas descripciones semánticas. Estarías mejor con algo como:

<ul id="nav"> <li><span>Nav Item</span></li> <li><span>Nav Item</span></li> </ul> #nav {} #nav li {} #nav li span {}

Si esta es tu primera vez, ¡buena suerte!

No estoy seguro de que, como principiante, necesite recursos exhaustivos o exhaustivos. Tome las cosas con calma y haga todo lo posible para mantener su código legible . Espaciado, espaciado, espaciado.

Use hojas de estilo externas (como se dijo antes) y por muy buena idea que suene ahora, no siga agregando nuevas hojas de estilo para diferentes secciones del sitio. Hará su vida mucho más fácil en el futuro.

Solo tengo que mencionar css Zen Garden como fuente de inspiración.

Ya has obtenido un buen conjunto de respuestas con respecto a tu pregunta, aquí es un punto que puede ser útil.

Use Firefox con la extensión Firebug. Si no tiene Firefox, le recomiendo que lo instale, incluso si es solo por esto. Firebug le permite seleccionar un elemento de la página y le muestra el CSS aplicado. Luego puede editar este css con el error de fuego sin ninguna recarga de página. Una vez que esté satisfecho con un estilo, puede copiar fácilmente las definiciones de firbug a su editor CSS.

Al menos para mí Firebug es una necesidad absoluta cuando se trabaja con estilos.

Un par de consejos para el CSS en sí. Al definir sus estilos, use los identificadores solo cuando el elemento en cuestión sea único. De esa forma tus estilos son reutilizables. Use definiciones jerárquicas, ej. #header .navigationElement a{color:red;} y #footer .navigationElement a{color:black;} esta forma puede mover su código html y el estilo correcto se aplica automáticamente.

Aprendí lo que necesito saber del Manual de Missing de Mc Farland (libro de Oreilly) y mirando una hoja de estilo de la aplicación de muestra de rieles . Eso funciona bastante bien, google "ejemplos / ejemplos de proyectos / aplicaciones / repositorios" para PHP, ASP.net, lo que sea que estés usando.

Un error que los principiantes hacen con bastante frecuencia:

CSS también es semántico. Intenta expresar conceptos, no formatos. Ejemplo de ejemplo:

Incorrecto:

div.red { color: red; }

Opuesto a:

Bueno:

div.error { color: red; }

CSS debe ser el compañero de formato para los conceptos que utiliza en su sitio web, por lo que deben reflejarse en él. Serás mucho más flexible de esta manera.

Si usa un script de reinicio, solucionará algunos de los caprichos entre diferentes navegadores. Hacer eso me ha hecho la vida más fácil.

He visto a algunas personas jurar simplemente usando

* { padding: 0; margin: 0; }

Pero también puedes usar implementaciones más completas, como la de la biblioteca YUI ... http://developer.yahoo.com/yui/reset/

Cuando se trata de probar los renders de su sitio, browsershots.org es bastante útil.

El complemento de Firefox de webdev es brillante: CTRL + MAYÚS + E le permite editar CSS y ver cambios sobre la marcha. Si presionas CTRL + F, también puedes pasar el mouse sobre un elemento para averiguar qué es.

Para agregar a los sitios que otras personas han mencionado, he encontrado http://css-discuss.incutio.com útil. Freenode #css también es útil.

Muchas personas tienen algunas sugerencias excelentes. Me gustaría señalar lo que dijo codeinthewhole.

Recomiendo usar una hoja de estilo reset.css :

*{margin:0;padding:0}iframe,a img,fieldset,form,table{border:0}h6,h5,h4,h3,h2,h1,caption,th,td{font-size:100%;font-weight:normal}dd,dt,li,dl,ol,ul{list-style:none}legend{color:#000}button,select,textarea,input{font:100% serif}table{border-collapse:collapse}caption,th,td{text-align:left}p, h1{margin:0;padding:0;bording:0}

Copie y pegue o simplemente guarde el que he vinculado.

Además, un error que utilicé en mis primeros días fue el uso excesivo de <div id=""> apposed to <div class=""> . Se supone que una id = "" solo se usa una vez (nunca tiene dos <div id="content"> ''s), mientras que puede tener miles de class = "" (como <div class="box"> ).

Y además, tener más de una identificación con el mismo nombre no es válido html