1
0

HTML5 y CSS3 pt. 4: Avanzando en CSS 04

Selectores avanzados css.
Cálculos con css y medidas proporcionales.
This commit is contained in:
devfzn 2023-04-13 15:52:25 -04:00
parent e28f979870
commit 17d1a78e5f
Signed by: devfzn
GPG Key ID: E070ECF4A754FDB1
3 changed files with 44 additions and 5 deletions

View File

@ -292,9 +292,10 @@ p.test { color: magenta; }
</details></br>
- Etiqueta `<fieldset>` como agrupador y `<legend>` 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)
</details>
- [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 `<main>`, ejemplos.
```css
main > p{
background: red;
}
```
Aplicar estilo solo parrafo que esté despues de una imagen `<img>`.
```css
img + p{
background: yellow;
}
```
Aplicar estilo a todos los parrafos que estén despues de una imagen `<img>`.
```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;
}
```

View File

@ -28,7 +28,7 @@
alt="barbería con dos sillas, fondo con dos espejos y muchos cuadros"/>
<main>
<section class="principal">
<h2 class="titulo-principal">Sobre Barbería Alura</h1>
<h2 class="titulo-principal">Sobre Barbería Alura</h2>
<img class="utiles" src="./imagenes/utiles.jpg" alt="Utensilios de barbero"/>
<p>Ubicada en el corazón de la ciudad, la <strong>Barbería Alura</strong> trae

View File

@ -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;