SlideShare a Scribd company logo
1 of 30
Download to read offline
.CSS { }
Bases y buenas prácticas
Las bases
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.
Las bases. Sintaxis
El selector indica el elemento HTML al que queremos darle
estilos.
Las bases. Sintaxis
Cada declaración incluye el nombre de una propiedad
CSS y un valor.
Las bases. Sintaxis
Las declaraciones se separan con un punto y coma.
; ;
Las bases. Sintaxis
Cada bloque de declaraciones está rodeado de llaves.
{ }
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; }
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; }
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; }
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>
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>
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">
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.
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;}
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.
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
Modelo de caja
Buenas
prácticas
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.
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.
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;
}
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;
}
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)
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;
}
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;
}
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.
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.
¡Manos a la obra!
Y para dominar el CSS
lo mejor es la práctica.
Fernanda Walker
Diseñadora UX/UI & Front-end
fernandawalker.com
.CSS { }

More Related Content

What's hot

Investigacion 1.3 samanta
Investigacion 1.3 samantaInvestigacion 1.3 samanta
Investigacion 1.3 samantaCaro Duran
 
Que es CSS? Presentacion Basica para CSS
Que es CSS? Presentacion Basica para CSSQue es CSS? Presentacion Basica para CSS
Que es CSS? Presentacion Basica para CSSjosuew2013
 
Hojas de estilo css
Hojas de estilo cssHojas de estilo css
Hojas de estilo cssragalangue
 
Hojas de estilo css
Hojas de estilo cssHojas de estilo css
Hojas de estilo csssarabz
 
Hojas de estilo_css
Hojas de estilo_cssHojas de estilo_css
Hojas de estilo_csslamargari
 
Identificacion del lenguaje css
Identificacion del lenguaje cssIdentificacion del lenguaje css
Identificacion del lenguaje cssDiivenii Sykes
 
Identificacion del lenguaje css
Identificacion del lenguaje cssIdentificacion del lenguaje css
Identificacion del lenguaje cssSimoney Llamas
 
Hojas de estilo CSS (Cascade Style Sheets)
Hojas de estilo CSS (Cascade Style Sheets)Hojas de estilo CSS (Cascade Style Sheets)
Hojas de estilo CSS (Cascade Style Sheets)Juan Rodríguez
 
Hojas de estilo en cascada
Hojas de estilo en cascadaHojas de estilo en cascada
Hojas de estilo en cascadajazmin Vazquez
 
Introduccion historia css
Introduccion historia cssIntroduccion historia css
Introduccion historia cssJohn Orellana
 
Hojas de estilo CSS
Hojas de estilo CSSHojas de estilo CSS
Hojas de estilo CSSiConstruye
 
2. Introducción a las Hojas de estilo (CSS)
2. Introducción a las Hojas de estilo (CSS)2. Introducción a las Hojas de estilo (CSS)
2. Introducción a las Hojas de estilo (CSS)Aplicaciones Gráficas
 

What's hot (16)

Investigacion 1.3 samanta
Investigacion 1.3 samantaInvestigacion 1.3 samanta
Investigacion 1.3 samanta
 
Que es CSS? Presentacion Basica para CSS
Que es CSS? Presentacion Basica para CSSQue es CSS? Presentacion Basica para CSS
Que es CSS? Presentacion Basica para CSS
 
Hojas de estilo css
Hojas de estilo cssHojas de estilo css
Hojas de estilo css
 
Hojas de estilo css
Hojas de estilo cssHojas de estilo css
Hojas de estilo css
 
Hojas de estilo_css
Hojas de estilo_cssHojas de estilo_css
Hojas de estilo_css
 
Las hojas de estilo (css)
Las hojas de estilo (css)Las hojas de estilo (css)
Las hojas de estilo (css)
 
Identificación del lenguaje de css
Identificación del lenguaje de cssIdentificación del lenguaje de css
Identificación del lenguaje de css
 
Identificacion del lenguaje css
Identificacion del lenguaje cssIdentificacion del lenguaje css
Identificacion del lenguaje css
 
Identificacion del lenguaje css
Identificacion del lenguaje cssIdentificacion del lenguaje css
Identificacion del lenguaje css
 
Hojas de estilo CSS (Cascade Style Sheets)
Hojas de estilo CSS (Cascade Style Sheets)Hojas de estilo CSS (Cascade Style Sheets)
Hojas de estilo CSS (Cascade Style Sheets)
 
Hojas de estilo en cascada
Hojas de estilo en cascadaHojas de estilo en cascada
Hojas de estilo en cascada
 
Introduccion historia css
Introduccion historia cssIntroduccion historia css
Introduccion historia css
 
Hojas de estilo CSS
Hojas de estilo CSSHojas de estilo CSS
Hojas de estilo CSS
 
2. Introducción a las Hojas de estilo (CSS)
2. Introducción a las Hojas de estilo (CSS)2. Introducción a las Hojas de estilo (CSS)
2. Introducción a las Hojas de estilo (CSS)
 
Css1
Css1Css1
Css1
 
Presentación CSS
Presentación CSSPresentación CSS
Presentación CSS
 

Similar to Css: bases y buenas prácticas (20)

Semana 3 Maquetación CSS
Semana 3   Maquetación CSSSemana 3   Maquetación CSS
Semana 3 Maquetación CSS
 
Introducción a HTML - CSS - JS
Introducción a HTML - CSS - JS Introducción a HTML - CSS - JS
Introducción a HTML - CSS - JS
 
Css básico
Css básicoCss básico
Css básico
 
CSS
CSSCSS
CSS
 
Css posicionamiento de pag web presentacion de la semana
Css posicionamiento de pag web      presentacion de la semanaCss posicionamiento de pag web      presentacion de la semana
Css posicionamiento de pag web presentacion de la semana
 
Investigacion 1.3 samanta
Investigacion 1.3 samantaInvestigacion 1.3 samanta
Investigacion 1.3 samanta
 
Investigacion 1.3 samanta
Investigacion 1.3 samantaInvestigacion 1.3 samanta
Investigacion 1.3 samanta
 
Guia de css para principiantes
Guia de css para principiantesGuia de css para principiantes
Guia de css para principiantes
 
Curso FPE Diseño Web. Módulo 4. CSS
Curso FPE Diseño Web. Módulo 4. CSSCurso FPE Diseño Web. Módulo 4. CSS
Curso FPE Diseño Web. Módulo 4. CSS
 
Que es css
Que es cssQue es css
Que es css
 
Hojas de estilos css
Hojas de estilos cssHojas de estilos css
Hojas de estilos css
 
Curso HTML 5 & jQuery - Leccion 6
Curso HTML 5 & jQuery - Leccion 6Curso HTML 5 & jQuery - Leccion 6
Curso HTML 5 & jQuery - Leccion 6
 
Organigramas John Jayro
Organigramas John JayroOrganigramas John Jayro
Organigramas John Jayro
 
Taller de Css
Taller de CssTaller de Css
Taller de Css
 
Css1
Css1Css1
Css1
 
Introducción a HTML y CSS
Introducción a HTML y CSSIntroducción a HTML y CSS
Introducción a HTML y CSS
 
Esilo css
Esilo cssEsilo css
Esilo css
 
HTML y CSS
HTML y CSSHTML y CSS
HTML y CSS
 
Organización de contenido en dreamweaver
Organización de contenido en dreamweaverOrganización de contenido en dreamweaver
Organización de contenido en dreamweaver
 
CSS3
CSS3CSS3
CSS3
 

Recently uploaded

_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdfBetianaJuarez1
 
Herramientas que posibilitan la información y la investigación.pdf
Herramientas que posibilitan la información y la investigación.pdfHerramientas que posibilitan la información y la investigación.pdf
Herramientas que posibilitan la información y la investigación.pdfKarinaCambero3
 
Documentacion Electrónica en Actos Juridicos
Documentacion Electrónica en Actos JuridicosDocumentacion Electrónica en Actos Juridicos
Documentacion Electrónica en Actos JuridicosAlbanyMartinez7
 
Nomisam: Base de Datos para Gestión de Nómina
Nomisam: Base de Datos para Gestión de NóminaNomisam: Base de Datos para Gestión de Nómina
Nomisam: Base de Datos para Gestión de Nóminacuellosameidy
 
Actividades de computación para alumnos de preescolar
Actividades de computación para alumnos de preescolarActividades de computación para alumnos de preescolar
Actividades de computación para alumnos de preescolar24roberto21
 
Clasificación de Conjuntos de Datos Desequilibrados.pptx
Clasificación de Conjuntos de Datos Desequilibrados.pptxClasificación de Conjuntos de Datos Desequilibrados.pptx
Clasificación de Conjuntos de Datos Desequilibrados.pptxCarolina Bujaico
 
Análisis de los artefactos (nintendo NES)
Análisis de los artefactos (nintendo NES)Análisis de los artefactos (nintendo NES)
Análisis de los artefactos (nintendo NES)JuanStevenTrujilloCh
 
PROYECCIÓN DE VISTAS planos de vistas y mas
PROYECCIÓN DE VISTAS planos de vistas y masPROYECCIÓN DE VISTAS planos de vistas y mas
PROYECCIÓN DE VISTAS planos de vistas y maslida630411
 
David_Gallegos - tarea de la sesión 11.pptx
David_Gallegos - tarea de la sesión 11.pptxDavid_Gallegos - tarea de la sesión 11.pptx
David_Gallegos - tarea de la sesión 11.pptxDAVIDROBERTOGALLEGOS
 
Slideshare y Scribd - Noli Cubillan Gerencia
Slideshare y Scribd - Noli Cubillan GerenciaSlideshare y Scribd - Noli Cubillan Gerencia
Slideshare y Scribd - Noli Cubillan Gerenciacubillannoly
 
Trabajando con Formasy Smart art en power Point
Trabajando con Formasy Smart art en power PointTrabajando con Formasy Smart art en power Point
Trabajando con Formasy Smart art en power PointValerioIvanDePazLoja
 
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptxHugoGutierrez99
 
Red Dorsal Nacional de Fibra Óptica y Redes Regionales del Perú
Red Dorsal Nacional de Fibra Óptica y Redes Regionales del PerúRed Dorsal Nacional de Fibra Óptica y Redes Regionales del Perú
Red Dorsal Nacional de Fibra Óptica y Redes Regionales del PerúCEFERINO DELGADO FLORES
 
La electricidad y la electronica.10-7.pdf
La electricidad y la electronica.10-7.pdfLa electricidad y la electronica.10-7.pdf
La electricidad y la electronica.10-7.pdfcristianrb0324
 
ORIENTACIONES DE INFORMÁTICA-2024.pdf-guia
ORIENTACIONES DE INFORMÁTICA-2024.pdf-guiaORIENTACIONES DE INFORMÁTICA-2024.pdf-guia
ORIENTACIONES DE INFORMÁTICA-2024.pdf-guiaYeimys Ch
 
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptxModelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptxtjcesar1
 
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docxPLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docxhasbleidit
 
TALLER DE ANALISIS SOLUCION PART 2 (1)-1.docx
TALLER DE ANALISIS SOLUCION  PART 2 (1)-1.docxTALLER DE ANALISIS SOLUCION  PART 2 (1)-1.docx
TALLER DE ANALISIS SOLUCION PART 2 (1)-1.docxobandopaula444
 
Guía de Registro slideshare paso a paso 1
Guía de Registro slideshare paso a paso 1Guía de Registro slideshare paso a paso 1
Guía de Registro slideshare paso a paso 1ivanapaterninar
 

Recently uploaded (20)

_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
 
Herramientas que posibilitan la información y la investigación.pdf
Herramientas que posibilitan la información y la investigación.pdfHerramientas que posibilitan la información y la investigación.pdf
Herramientas que posibilitan la información y la investigación.pdf
 
Documentacion Electrónica en Actos Juridicos
Documentacion Electrónica en Actos JuridicosDocumentacion Electrónica en Actos Juridicos
Documentacion Electrónica en Actos Juridicos
 
Nomisam: Base de Datos para Gestión de Nómina
Nomisam: Base de Datos para Gestión de NóminaNomisam: Base de Datos para Gestión de Nómina
Nomisam: Base de Datos para Gestión de Nómina
 
Actividades de computación para alumnos de preescolar
Actividades de computación para alumnos de preescolarActividades de computación para alumnos de preescolar
Actividades de computación para alumnos de preescolar
 
Clasificación de Conjuntos de Datos Desequilibrados.pptx
Clasificación de Conjuntos de Datos Desequilibrados.pptxClasificación de Conjuntos de Datos Desequilibrados.pptx
Clasificación de Conjuntos de Datos Desequilibrados.pptx
 
Análisis de los artefactos (nintendo NES)
Análisis de los artefactos (nintendo NES)Análisis de los artefactos (nintendo NES)
Análisis de los artefactos (nintendo NES)
 
PROYECCIÓN DE VISTAS planos de vistas y mas
PROYECCIÓN DE VISTAS planos de vistas y masPROYECCIÓN DE VISTAS planos de vistas y mas
PROYECCIÓN DE VISTAS planos de vistas y mas
 
David_Gallegos - tarea de la sesión 11.pptx
David_Gallegos - tarea de la sesión 11.pptxDavid_Gallegos - tarea de la sesión 11.pptx
David_Gallegos - tarea de la sesión 11.pptx
 
Slideshare y Scribd - Noli Cubillan Gerencia
Slideshare y Scribd - Noli Cubillan GerenciaSlideshare y Scribd - Noli Cubillan Gerencia
Slideshare y Scribd - Noli Cubillan Gerencia
 
El camino a convertirse en Microsoft MVP
El camino a convertirse en Microsoft MVPEl camino a convertirse en Microsoft MVP
El camino a convertirse en Microsoft MVP
 
Trabajando con Formasy Smart art en power Point
Trabajando con Formasy Smart art en power PointTrabajando con Formasy Smart art en power Point
Trabajando con Formasy Smart art en power Point
 
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
 
Red Dorsal Nacional de Fibra Óptica y Redes Regionales del Perú
Red Dorsal Nacional de Fibra Óptica y Redes Regionales del PerúRed Dorsal Nacional de Fibra Óptica y Redes Regionales del Perú
Red Dorsal Nacional de Fibra Óptica y Redes Regionales del Perú
 
La electricidad y la electronica.10-7.pdf
La electricidad y la electronica.10-7.pdfLa electricidad y la electronica.10-7.pdf
La electricidad y la electronica.10-7.pdf
 
ORIENTACIONES DE INFORMÁTICA-2024.pdf-guia
ORIENTACIONES DE INFORMÁTICA-2024.pdf-guiaORIENTACIONES DE INFORMÁTICA-2024.pdf-guia
ORIENTACIONES DE INFORMÁTICA-2024.pdf-guia
 
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptxModelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
 
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docxPLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
 
TALLER DE ANALISIS SOLUCION PART 2 (1)-1.docx
TALLER DE ANALISIS SOLUCION  PART 2 (1)-1.docxTALLER DE ANALISIS SOLUCION  PART 2 (1)-1.docx
TALLER DE ANALISIS SOLUCION PART 2 (1)-1.docx
 
Guía de Registro slideshare paso a paso 1
Guía de Registro slideshare paso a paso 1Guía de Registro slideshare paso a paso 1
Guía de Registro slideshare paso a paso 1
 

Css: bases y buenas prácticas

  • 1. .CSS { } Bases y buenas prácticas
  • 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. Las bases. Sintaxis El selector indica el elemento HTML al que queremos darle estilos.
  • 5. Las bases. Sintaxis Cada declaración incluye el nombre de una propiedad CSS y un valor.
  • 6. Las bases. Sintaxis Las declaraciones se separan con un punto y coma. ; ;
  • 7. Las bases. Sintaxis Cada bloque de declaraciones está rodeado de llaves. { }
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. ¡Manos a la obra! Y para dominar el CSS lo mejor es la práctica.
  • 30. Fernanda Walker Diseñadora UX/UI & Front-end fernandawalker.com .CSS { }