lapzdev.github.io/style.css at gh-pages · lapzdev/lapzdev.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
/**Una regla css consta de dos partes:
1) el selector
2) el bloque de declaraciones
atributo:valor*/
/* el @import url() es mala práctica porque es bloqueante a la hora que el navegador lee los documentos*/
@import url('otro-style.css');

html {
/*     scroll-behavior: smooth;;
 */
 scroll-behavior: smooth;
    font-size: 45px;
}
*,*::before,*::after{font-size: inherit;}
body {

    background-color:white;
    margin-left: 10px;
}

a {
    margin: 3px;
}
h2:target{color: #f00;}
.css-curso {color:#00f;}
/*  El estilo (style) en línea es el que predomina; le sigue el estilo interno, y el final es el externo  */
h1{color: red;
    border: 3px;
    border-color: red;
    border-style: solid;
}
#box{color: #f50;
    border: 3px;
    border-style: solid;
border-color: blue;
width: 200px;
height: 200px;
}
h2{color: #0f0;}
#texto{color: #00f;
    background-color: #0f0;
}
/* un ejemplo  con el texto 32.*/
.texto32{
    font-size: 32px;
    color: yellow;
}
#etiquetas-basicas{
    color: #0f5;
}
.bg-blue{background-color: blue;}
.otro{font-style: oblique;}
.hijos-directos>li{background-color: #0f0;}
.hijos-descendientes b{
background-color: #f00 ;
}
.hermanos-generales~li{
    background-color: #f00;
}
.hermanos-adyacentes+li{
        background-color: #f0f;

}
/* el comodín (*) aplicará el estilo si contiene el texto en cuestión en cualquier parte.*/
.selectores-atributos a[href*="jonmircha"]{
   color: orangered;
   text-decoration: none;
}
/* el comodín (^) aplicará el estilo si contiene el texto en cuestión al principio */

.selectores-atributos a[href^="https"]{
   color: steelblue;
}
/* el símbolo ($) aplicará el estilo si contiene el texto en cuestión al final */

.selectores-atributos a[href$="monios"]{
   background-color: #0f5;
}
/* el símbolo (~) aplicará el estilo si contiene el texto en cuestión en una lista separada por espacios*/
.selectores-atributos a[href~="cursos"]{
  background-color: #f00;
}
/* el símbolo (|) aplicará el estilo si contiene el texto en cuestión en una lista separada por espacios y que después del texto en cuestión venga un guión medio*/
.selectores-atributos a[class|="horas"]{
  font-style: italic;
}
.selectores-atributos a[class|="nueva"]{
  font-style: italic;
}