Clase de CSS Parte 2

384 views
235 views

Published on

Clase de CSS Parte 2

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
384
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Clase de CSS Parte 2

  1. 1. Taller en clase CSS
  2. 2. Selectores  una regla de CSS está formada por una parte llamada "selector" y otra parte llamada "declaración". Selectores básicos: Se utiliza para seleccionar todos los elementos de la página. El selector universal se indica mediante un asterisco (*). * { margin: 0; padding: 0; } Margen Relleno
  3. 3. Selector de tipo o etiqueta Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector.  El siguiente ejemplo selecciona todos los párrafos de la página: p { ... } h1 { color: red; } h2 { color: blue; } p { color: black; }
  4. 4. h1 { color: #8A8E27; font-weight: normal; font-family:Arial, Helvetica, sans-serif; } h2 { color: #8A8E27; font-weight: normal; font-family:Arial, Helvetica, sans-serif; } h3 { color: #8A8E27; font-weight: normal; font-family:Arial, Helvetica, sans-serif; } h1, h2, h3 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; }
  5. 5. Selector descendente  Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento. p span { color: red; } h1 span { color: blue; } • Los elementos <span> que se encuentran dentro de un elemento <p> se muestran de color rojo. • Los elementos <span> que se encuentran dentro de un elemento <h1> se muestran de color azul. • El resto de elementos <span> de la página, se muestran con el color por defecto aplicado por el navegador.
  6. 6. Selector de clase .destacado { color: red; } <body> <p class="destacado">Estudiantes de la UTB...</p> <p>Universidad Tecnológica de Bolívar...</p> <p>Diseño web I...</p> </body>
  7. 7. Ejercicio .destacado { color: red; } .aviso { padding: 2.5em; border: 3px solid #98be10; background: #f6feda; } .error { color: #930; font-weight: bold; } h1 { color: red; } h2 { color: blue; } p { color: green;; }
  8. 8. <!doctype html> <html> <head> <title>Clase 2 de abril de 2014</title> <link rel="stylesheet" type="text/css" href="micss.css" media="screen" /> </head> <body> <h1>DisWeb I</h1><hr> <h2>Miercoles</h2><hr> <h3>UniversidadTecnologica de Bolivar</h3><hr> <p>Bienvenidos a la clase de DisWeb</p> <div> <p>Hoy estamos trabajando con CSS</p> </div><hr> </body> </html>
  9. 9. .destacado { color: red; } .aviso { padding: 2.5em; border: 3px solid #98be10; background: #f6feda; } .error { color: #930; font-weight: bold; } .menu { padding: 1.1em; border: 1px solid #FE2E2E; background: #DBA901; } h1 { color: red; } ctype html> <html> <head> <title>Clase 2 de abril de 2014</title> <link rel="stylesheet" type="text/css" href="micss.css" media="screen" /> </head> <body> <nav class="menu"> <button>Navegador</button> <button>Facebook</button> <button>Twitter</button> </nav> <h1>DisWeb I</h1><hr> <h2>Miercoles</h2><hr> <h3 class="aviso">UniversidadTecnologica de Bolivar</h3><hr> <p>Bienvenidos a la clase de DisWeb</p> <div> <p class="destacado">Hoy estamos trabajando con CSS</p> </div><hr> </body> </html>

×