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, 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; 
}

Índice del curso de HTML5

  1. Introducción
  2. Estructura de una página web
  3. Comentarios
  4. Encabezados y párrafos
  5. Enlaces e imágenes
  6. Listas
  7. Listas
  8. iframes
  9. Páginas de consulta
  10. Tablas
  11. Estilos en línea
  12. Unidades de medida
  13. Hacer una NewsLetter con HTML
  14. favicon
  15. Hojas de estilos
  16. Capas
  17. GIMP
  18. Selectores CSS
  19. Margin Collapse
  20. padding y width
  21. Ejercicios de maquetación vertical
  22. display:block, inline, inline-block
  23. img vs background
  24. Flex Box
  25. Hacer una newsletter responsive sin media queries
  26. Algunos tips
  27. Ejercicios
  28. Break! - gran día de repaso
  29. Ejercicio - background centrado
  30. Links de interés
  31. position
  32. Opacidades
  33. Popups con CSS
  34. Galería de fotos
  35. Navigation Bar
  36. Estilo important!
  37. Hacer páginas reales
  38. Grid Layout
  39. Selectores avanzados de CSS
  40. Página de error 404
  41. Insertar un buscador de google
  42. Dominio y alojamiento
  43. Ejercicio - Proyecto
  44. HTML5: definición y ejemplos
  45. HTML5 vs HTML4
  46. Content editable
  47. Soporte para textos asiáticos
  48. divs semánticos
  49. Video y audio
  50. svg
  51. wbr - Word Break
  52. Formularios
  53. Motores de navegación
  54. text-shadow
  55. border-radius, box-shadow
  56. border-image
  57. background-size
  58. Multiple Background
  59. Background transparency
  60. Gradientes
  61. Fuentes
  62. columns
  63. text-overflow
  64. Animaciones con CSS3
  65. Responsive design
icono de mandar un mail¡Contacta conmigo!
contacta conmigoPablo Monteserín

¡Hola! ¿En qué puedo ayudarte?