Successfully reported this slideshow.
Your SlideShare is downloading. ×

Css: bases y buenas prácticas

Ad

.CSS { }
Bases y buenas prácticas

Ad

Las bases

Ad

Las bases. ¿Qué es el CSS?
Abreviatura de Cascading Style Sheets.
Lenguaje de hojas de estilos creado para controlar el as...

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Loading in …3
×

Check these out next

1 of 30 Ad
1 of 30 Ad

More Related Content

Css: bases y buenas prácticas

  1. 1. .CSS { } Bases y buenas prácticas
  2. 2. Las bases
  3. 3. Las bases. ¿Qué es el CSS? Abreviatura de Cascading Style Sheets. Lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos escritos en un lenguaje de marcado (por ejemplo HTML). CSS es la mejor forma de separar los contenidos y su presentación.
  4. 4. Las bases. Sintaxis El selector indica el elemento HTML al que queremos darle estilos.
  5. 5. Las bases. Sintaxis Cada declaración incluye el nombre de una propiedad CSS y un valor.
  6. 6. Las bases. Sintaxis Las declaraciones se separan con un punto y coma. ; ;
  7. 7. Las bases. Sintaxis Cada bloque de declaraciones está rodeado de llaves. { }
  8. 8. Las bases. Selectores básicos Selector universal: * { margin: 0; } Selector de tipo o etiqueta: h1 { font-size: 32px } Selector class: .destacado { color:red; } Selector ID: #container { padding: 10px; }
  9. 9. Las bases. Selectores básicos Selector descendente: p span { color: red; } ul li { font-size: 12px } Grupo de selectores: #contenedor section a li { font-size: 1.2em } nav ul li a { text-decoration:none; }
  10. 10. Las bases. Selectores avanzados Selectores de hijos. Elemento hijo directo de otro elemento. p > span { color: blue; } Selector adyacente. Elementos justo a continuación de otros elementos. h1 + h2 { color: red; } Selector de atributos. Elementos HTML por sus atributos y/o valores. a[href=“http://ejemplo.com”] { color: red; }
  11. 11. Las bases. Insertar el css Hay 3 formas de insertar estilos CSS: 1. Dentro del propio elemento HTML (no recomendado). <p style=“font-size:12px; color: #000000;”> Mi párrafo </p>
  12. 12. Las bases. Insertar el css Hay 3 formas de insertar estilos CSS: 2. Incluir CSS dentro del documento HTML. Se incluye dentro de las etiquetas head del documento HTML y solamente afecta a ese documento: <style> body { … } </style>
  13. 13. Las bases. Insertar el css Hay 3 formas de insertar estilos CSS: 3. Definir CSS en un archivo externo. Esta es la opción recomendada para usarse siempre. Se incluye una llamada al archivo externo en la etiqueta head: <link rel="stylesheet" type="text/css" href="th eme.css">
  14. 14. Reglas CSS. LA CASCADA Si hay dos reglas definiendo una misma propiedad de un mismo elemento, la regla que esté al final será la que se seguirá, por eso se le llama cascada.
  15. 15. Reglas CSS. ESPECIFICIDAD Cuanto más específico es un selector mayor fuerza tiene y es el que prevalece, aunque esté al final de ‘la cascada’. ● Menos específico: p { text-align: left;} ● Más específico: #content p {text-align: center;}
  16. 16. Reglas CSS. HERENCIA Cuando se establecen algunos valores de una propiedad CSS en un elemento, sus elementos descendientes heredan de forma automática el valor de esa propiedad.
  17. 17. Reglas CSS. HERENCIA Propiedades HEREDADAS: ● color ● font‐family ● font‐size ● font‐style ● font‐variant ● font‐weight ● font ● text‐align Propiedades NO HEREDADAS: ● background ● border ● display ● float ● width ● height ● top, right, bottom, left ● margin ● padding
  18. 18. Modelo de caja
  19. 19. Buenas prácticas
  20. 20. Buenas prácticas. Reset Nos permiten una puesta a cero de todos los navegadores para mostrar las propiedades CSS lo más homogéneo posible. Algunos ejemplos: ● HTML5 Doctor, ● Normalize.css ● Sanitize.css Se añaden como archivo externo y se agregan dentro del elemento head de HTML antes de incluir cualquier otro estilo.
  21. 21. Buenas prácticas. Organizar y comentar Organizar los elementos en el orden en que aparecen en nuestro HTML, hará que nuestras hojas de estilo sean más fáciles de manejar tanto en la fase de desarrollo, como en la de mantenimiento. Otra buena práctica es poner comentarios para cada grupo de CSS. Esto hará fácil su interpretación.
  22. 22. Buenas prácticas. No ser redundantes Es importante limpiar el código y eliminar estilos redundantes. Correcto: span, p { font-size: 12px; color: red; } Incorrecto: span { font-size: 12px; color: red; } p { font-size: 12px; color: red; }
  23. 23. Buenas prácticas. Unificar medidas Una forma de agilizar el código es compactar la codificación cuando se puede por ejemplo en los márgenes. Correcto: #contenedor { margin: 10px 8px 5px; } Incorrecto: #contenedor { margin-top: 10px; margin-right: 8px; margin-left: 8px; margin-bottom: 5px; }
  24. 24. Buenas prácticas. Usar hexodecimales De acuerdo a pruebas realizadas* el rendimiento de carga de los códigos hexadecimales es hasta un 70% mejor. Hexadecimales: #FFFFFF Colores predefinidos: blue RGB: rgb(255, 0, 0); *Pruebas realizadas por Sean Connon, Senior Web Developer en Alien Creations, Inc. RGBA: rgb(255, 0, 0, 0.7) HSL: rgb(120, 100%, 50%) HSLA: rgb(120, 100%, 50%, 0.6)
  25. 25. Buenas prácticas. No usar guiones bajos El uso de guiones bajos puede dar resultados erróneos en navegadores antiguos. Correcto: .col-left { margin: 0; padding: 0; } Incorrecto: .col_left { margin: 0; padding: 0; }
  26. 26. Buenas prácticas. Usar solo minúsculas CSS es sensible a mayúsculas y minúsculas. Para evitar duplicidades y errores, es una buena práctica usar solo minúsculas en el nombre de clases y ids. Correcto: .alert-box { margin: 0; padding: 0; } Incorrecto: .alert_BOX { margin: 0; padding: 0; }
  27. 27. Buenas prácticas. Preprocesadores CSS Herramienta que nos permite escribir pseudocódigo que se convertirá posteriormente en CSS. Este pseudocódigo puede estar conformado por: variables, funciones, mixins, etc. Esto nos ayuda a: 1. Trabajar de manera más ordenada y rápida. 2. Administrar y mantener fácilmente el código CSS.
  28. 28. Buenas prácticas. Preprocesadores Los preprocesadores más populares: ● Less ● Sass ● Stylus Para usar bien un preprocesador es importante antes saber bien cómo funciona CSS.
  29. 29. ¡Manos a la obra! Y para dominar el CSS lo mejor es la práctica.
  30. 30. Fernanda Walker Diseñadora UX/UI & Front-end fernandawalker.com .CSS { }

×