Índice del curso de HTML5

  1. Introducción
  2. Estructura de una página web
  3. Comentarios
  4. Encabezados y párrafos
  5. Imágenes
  6. Enlaces
  7. Video y audio
  8. Listas
  9. Ejercicio resumen de fundamentos de HTML
  10. iframes
  11. Páginas de consulta
  12. Tablas
  13. Estilos en línea
  14. Unidades de medida
  15. Capas
  16. Hacer una NewsLetter con HTML
  17. favicon
  18. Hojas de estilos
  19. Selectores CSS
  20. Algunos estilos de CSS3
    1. Motores de navegación
    2. text-shadow
    3. border-radius, box-shadow
    4. border-image
    5. Ejercicio - background centrado
    6. background-size
    7. Multiple Background & size
    8. background con rgba
    9. Gradientes
    10. Fuentes
    11. columns
    12. Animaciones con transition
    13. text-overflow
    14. transform
  21. GIMP
  22. display:block, inline, inline-block
  23. Margin Collapse
  24. padding y width
  25. Ejercicios de maquetación vertical
  26. Hacer una newsletter responsive sin media queries
  27. img vs background
  28. Flexbox
  29. Algunos tips
    1. Pintar el color de fondo de una línea
    2. Incrustar una imagen
    3. Sangría francesa (hanging intent)
    4. Capitalizar una letra
    5. Eliminar el borde (outline) del elemento activo
    6. contenteditable
    7. Soporte para textos asiáticos
    8. wbr - Word Break
  30. Ejercicios de HTML
  31. Break! - gran día de repaso
  32. Links de interés
  33. position
  34. Opacidades
  35. Popups con CSS
  36. Ejercicio - Galería de fotos
  37. Navigation Bar
  38. !important
  39. Páginas reales
  40. Grid Layout
  41. Selectores avanzados de CSS
  42. HTML5: definición y ejemplos
  43. HTML5 vs HTML4
  44. divs semánticos
  45. svg
  46. Formularios
  47. Animaciones con CSS3
  48. Responsive design
  49. Más ejercicios de html
  50. Página de error 404
  51. Insertar el buscador de google
  52. Dominio y alojamiento
  53. Ejercicio - Proyecto
  54. Ejercicio - Clientes y proveedores

Selectores CSS

  • Selector universal:

    (Aplicar a TODOS los elementos de la página un margen cero)

    <div></div><p></p>			→ 	*{ margin: 0;padding:0 }
  • Selector de etiqueta

    (Aplicar a TODOS los div un fondo rojo y un borde sólido de 2px y color negro)

    <div></div><div></div>			→ 	div { background: red; border: 2px solid black;}
  • Selector de clase

    (Aplicar a todos los elementos con una clase verde una fuente de color verde)

    <div class="verde"></div>		→	.verde { color: green; }
  • Selector de ID

    Iguales que los anteriores pero para elementos marcados con el atributo id. Este se utiliza para marcar un elemento único.

    (Aplicar al elemento slider un color de fondo azul)
    <div id="slider"></div>			→ 	#slider { background: blue; }

Ejercicios de etiquetas y selectores

Ejercicio chistes

border: 1px solid black;

Cómo añadir un borde a un efecto hover sin que se sume al grosor

a{
text-decoration: none;
	font-size: 3em;
	border-bottom:1px solid transparent;
}
a:hover{
	border-bottom: 1px solid black
}
Ver ejemplo

Ejercicio citas

Tener en cuenta que los párrafos están alineados usando márgenes.

Estilos necesarios para resolver este ejercicio:

border-radius: 20px 0 0 20px;

Ejercicio Comic Sans

A partir del código html de la página suministrada, introducir el código css necesario para que se visualice como se indica en el enlace.

Notas:

  • No cambiar la tipografías.
  • Para cambiar el interlineado usaremos el estilo line-height
  • Para los bordes de los textos, usaremos los estilos border-top y border-bottom
  • Para alinear el texto a la derecha, usaremos text-align:right
  • Todo el contenido estará dentro de una capa con width:1024px y margin:auto

Selector descendente

El siguiente selector se aplica a todos los párrafos que se encuentren dentro de un span un color igual a 10px:

p span { color: red; }

Selector combinado

El siguiente selector se aplica a todos los párrafos con clase amplio que estén dentro de otro de un div con clase verde, un margen de 40px:

div.verde p.amplio { margin: 40px; }

class vs id

Las clases y los identificadores son como los nombres comunes y los propios. Una clase se puede reutilizar para diversos elementos pero uno con id tiene que ser único (class="montes", id="Everest"). No puede haber más que un solo elemento con una determinada id en la misma página, de lo contrario el intérprete del navegador dará resultados imprevisibles.

¿Cómo escribir menos código?

Cómo no hacerlo#content { 
	margin-top: 10px;
	margin-right: 12px;
	margin-bottom: 0;
	margin-left: 15px;
	background-color: #000;
	background-repeat: no-repeat; 
}
Cómo hacerlo#content{
	margin: 10px 12px 0 15px;
	background: #000 no-repeat; 
}
icono de mandar un mail¡Contacta conmigo!
Pablo Monteserín
contacta conmigoPablo Monteserín

Para dudas técnicas sobre los ejercicios de mis cursos es necesario estar suscrito.