diff --git a/004_primeras_paginas/README.md b/004_primeras_paginas/README.md index fa305fc..7c1dd31 100644 --- a/004_primeras_paginas/README.md +++ b/004_primeras_paginas/README.md @@ -292,9 +292,10 @@ p.test { color: magenta; }
-- Etiqueta `
` como agrupador y `` como parrafo. +- Etiqueta [fieldset](./html_css_parte3/contacto.html#L40) como agrupador y +[leyend](./html_css_parte3/contacto.html#L41) como parrafo. - Descripción de imagenes `alt="Descripción de imagen"`. -- Clase css *enviar* para input submit "Enviar Formulario" +- Clase css [enviar](./html_css_parte3/style.css#L123) para input submit "Enviar Formulario" [contacto](./html_css_parte3/contacto.html#L63). - [Propiedades](./html_css_parte3/style.css#L123): cursor (pointer), transition, transform (scale, rotate). @@ -325,6 +326,41 @@ utilizar [style.css](./html_css_parte4/style.css). - [Noto Music](https://fonts.google.com/noto/specimen/Noto+Music) -- [Mapa](./html_css_parte4/index.html#L52) incrustado (embedded) y [estilo](./html_css_parte4/style.css#L234). -- [Video](./html_css_parte4/index.html#L73) incrustado y [estilo](./html_css_parte4/style.css#L284). +- [Mapa](./html_css_parte4/index.html#L52) incrustado (embedded) y [estilo](./html_css_parte4/style.css#L237). +- [Video](./html_css_parte4/index.html#L73) incrustado y [estilo](./html_css_parte4/style.css#L287). + +#### Selectores avanzados CSS + +Aplicar estilo solo los hijos directos de `
`, ejemplos. + +```css +main > p{ + background: red; +} +``` + +Aplicar estilo solo parrafo que esté despues de una imagen ``. + +```css +img + p{ + background: yellow; +} +``` + +Aplicar estilo a todos los parrafos que estén despues de una imagen ``. + +```css +img ~ p{ + background: green; +} +``` + +Aplicar estilo a todos los parrafos que estén despues de una imagen a excepcion +de aquellos que tengan el id `mision`. + +```css +.principal p:not(#mision){ + background: cyan; +} +``` diff --git a/004_primeras_paginas/html_css_parte4/index.html b/004_primeras_paginas/html_css_parte4/index.html index 3ab80db..ae89aba 100644 --- a/004_primeras_paginas/html_css_parte4/index.html +++ b/004_primeras_paginas/html_css_parte4/index.html @@ -28,7 +28,7 @@ alt="barbería con dos sillas, fondo con dos espejos y muchos cuadros"/>
-

Sobre Barbería Alura

+

Sobre Barbería Alura

Utensilios de barbero

Ubicada en el corazón de la ciudad, la Barbería Alura trae diff --git a/004_primeras_paginas/html_css_parte4/style.css b/004_primeras_paginas/html_css_parte4/style.css index 7b0892b..99fc6f7 100644 --- a/004_primeras_paginas/html_css_parte4/style.css +++ b/004_primeras_paginas/html_css_parte4/style.css @@ -226,6 +226,9 @@ p:first-line { } .utiles { + /* Cálculos con css + width: calc(40% - 30px): + */ width: 120px; float: left; margin: 0 20px 20px 0;