Hay un montón de tutoriales de CSS están disponibles en Internet, pero pocos son los tutoriales útiles. En este tutorial se encuentra 5 pasos para escribir mejor código CSS para su proyecto de página web siguiente. Espero que disfruten de este tutorial.

1. ResetCss

Siempre debe usar restablecer Si puede Eric Meyer Perdí, la reposición YUI, o restablecer su propia costumbre, sólo tiene que utilizar algo.

El objetivo de restablecer una hoja de estilos es reducir navegador inconsistencias en cosas como la altura de línea predeterminada, los márgenes y tamaños de fuente de las partidas, y así sucesivamente - Eric Meyer

  el cuerpo del HTML, div, span, applet, objeto, H1, H2, H3, H4, H5, H6, iframe, 
  blockquote, pre, abbr, sigla, dirección, big, cite, code, del, dfn, em, 
  font, img, ins, kbd, q, s, samp, pequeñas, huelga, fuerte, sub, sup, tt, var, 
  fieldset dd, DL, DT, la forma, la etiqueta, la leyenda, el cuadro, el título, tbody, TFOOT, 
  thead, tr, th, td, input, select, textarea 

  ; padding : 0 ; } (Margin: 0; padding: 0;) 


  ; padding : 0 ; } * (Margin: 0; padding: 0;) 

2. CSS Taquigrafía

Uno de los mejores y más importante característica de la CSS es la capacidad de escribir código de una manera minimizada.

Código Incorrecto

  ( 
  margin-top: 10px; 
  margin-right: 7px; 
  margin-bottom: 10px; 
  margin-left: 7px; 

  padding-top: 10px; 
  padding-right: 7px; 
  padding-bottom: 10px; 
  padding-left: 7px; 

  font-size: 12px; 
  font-weight: bold; 
  ; font-family: Arial, Verdana, Tahoma, sans-serif; 
  ) 

Corregir Código

 : 10px 7px 10px 7px ; padding : 10px 7px 10px 7px ; font :bold 12px Arial, Verdana, Tahoma, sans-serif ; } (Margin: 10px 7px 10px 7px; padding: 10px 7px 10px 7px; font: bold 12px Arial, Verdana, Tahoma, sans-serif;) 

3. No usar tantas clases y las ID's

He notado que la mayoría de los principiantes agregar clases y la identificación de casi todos los elementos de la página, que no es required.There son algunos ejemplos a continuación de lo que me refiero.

Código Incorrecto

 class = "wrapper" > <p class = "heading" > <strong class = "subheading" > Welcome </strong> </p> <p class = "linka" > <a href = "#" class = "link" > Home </a> </p> <p class = "linkb" > <a href = "#" class = "link" > About </a> </p> <p class = "linkc" > <a href = "#" class = "link" > Services </a> </p> <p class = "linkd" > <a href = "#" class = "link" > Contact </a> </p> </div> <div id = "wrapper" class = "wrapper"> clase <p "heading" => clase <strong "subheading" => Bienvenidos </ strong> </> clase p <p "linka" => <a href = "#" class = "link"> Inicio </ a> </> clase p <p "linkb" => href <a = "#" class = "link"> Acerca de </ a> </ p> <p = "linkc"> href clase <a = "#" class = "link"> Servicios </ a> </> clase p <p "linkd" => href <a = "#" class = "link"> Contacto </ a> </ p> </ div> 

Aquí está el código correcto

Corregir Código

 > <h1> Welcome </h1> <ul> <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > About </a> </li> <li> <a href = "#" > Services </a> </li> <li> <a href = "#" > Contact </a> </li> </ul> </div> <div id = "wrapper"> <h1> Bienvenido </ h1> <ul> <li> href <a "#" => Inicio </ a> </ li> <li> href <a "#" => Acerca de </ a> </ li> <li> href <a "#" => Servicios </ a> </ li> <li> href <a "#" => Contacto </ a> </ li> < / ul> </ div> 

4. Organización a la que de estilos

Usted debe organizar su hoja de estilos para que sea fácil encontrar las cosas y elementos relacionados son juntos. Use comentarios de manera eficaz. Por ejemplo, está el ejemplo le dirá cómo organizar su hoja de estilo

  / * Reset * / 
   elements Margen de quitar y elementos de relleno 

  / Elementos básicos * * / 
  Definir el estilo de los elementos básicos: cuerpo, H1, H2, H3, H4, H6, ol, ul, dl, p, etc 

  / * Clases genéricas * / 
  Definir el estilo de las clases genéricas: las cosas simples, como eliminar el fondo,  
  flotante a los lados, etc  
  / * Diseño de base * / 

  / * Diseño de base * / 
  Definir el estilo de diseño básico: cabecera.  pie de página, barra lateral, etc 

  / * Cabecera * / 
  Definir el estilo de cabecera 

  / * Contenido * / 
  Definir el estilo para el área de contenido 

  / * Footer * / 
  Definir el estilo de pie de página 

  / * Etc * / 
  Continuar 

5. Usar Hojas de estilo condicional

Internet Explorer es el más buggy de todos los navegadores. Afortunadamente, usted puede usar comentarios condicionales para administrar la CSS que se sirve a IE. Si lo necesito tengo una hoja de estilo llamado ie6.css que los objetivos de las versiones anteriores de IE. Me permite gestionar CSS para los navegadores más antiguos de forma rápida y fácilmente.

Este es el ejemplo

  <!--[ if lte IE 6]> 
 
 
  href = "ie6.css" type = "text/css" media = "screen"  / > rel <link "stylesheet" href = = "ie6.css" type = "text/css" medios de comunicación = "screen" /> 
 
  -- > <! [Endif] -> 

Conclusión

Estos son sólo algunos de los consejos que me ayudan a escribir mejor código. Espero que el tutorial también le ayudará a escribir mejor y limpiar el código. Aplique estos consejos para sus proyectos en curso y el próximo, y seguramente apreciarán el esfuerzo.

Si usted piensa que tutorial puede ser más mejor, por favor comparta con nosotros. Coméntanos

Si usted desea recibir más inspiración de nosotros, por favor considera suscribirte a nuestro feed de RSS o por correo electrónico.

Filed under: Css, Tutoriales por admin