Restaurant-Menu/styles.css at master · CyberFroppy/Restaurant-Menu · 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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
body{
    /*Sans serif sirve para quitar las decoraciones*/
    font-family: Verdana, sans-serif;
    font-size: 13px;
    color: #4F545F;
    margin: 0px;    /*se puede omitir px solamente en el 0 y funciona*/
    padding: 10px;
}
/*Modelo de caja, tiene 3 propiedades.
padding, espacio entre el contorno del elemento.
margin, espacio que separa un elemento de otro
border,

-Todos tienen estas propiedades.

**padding/margin**
padding: 20px;                  20 en general
padding: 20px 10px;             20 hacia arriba y abajo y 10 a los lados
padding: 10px 20px 5px 15px;    Arriba, derecha, abajo, izquierda.
padding-right: 15px;            directamente
*/

h1{
    background-color: #55B3C5;
    margin: 0px;
    padding: 20px;
    color: white;
}

fieldset{
    margin: 20px;
    padding: 20px;
    /*si es el mismo color, se puede usar solo 3 letras
    borde, tipo y color pero puede ser en cualquier orden */
    border: 2px dashed #ddd;
}
legend{
    font-size: 16px;
    font-weight: 900;
}
/* Encuentra todos los fieldset del documento, el > representa elementos hijos inmediatos y los demas que sean divs.
   Si quiero que encuentre todos los filedset y luego todos los elementos hiijos y los hijos de ellos solamente se
   agrega un espacio.  */

fieldset > span{
    color: #6278B0;
    padding: 20px 40px;
    /*se puede cambiar a in line, in-line-block, none*/
    display: block;
    /* propiedades del background, background-range, background-repeat, background position, background-color*/
    background: url(./chikfila.jpg)no-repeat center center #CCE4F8;
    background-size: 200px 50px;
    border: 1px solid #6278B0;
    margin-bottom: 10px;
}
/*Para formar una clase para los input*/
.formElement{
    padding: 5px 10px;
    width: 300px;

}
/* para que sea mas especifica*/
select[name=rate]{
    font-size: 14px;
    width: 250px;
}
#submitButton,#resetButton{
    padding: 10px 20px;
    font-size: 16px;
    border 0;
    color: white;
    border-radius: 5px;
    text-align: center;
}
#submitButton{
    background-color: #56E56F;
}

#resetButton{
    background-color: #D9534F;
}
.clickable:hover{
    cursor: pointer;
    opacity: 0.6;
}
#submitButton:hover{
    background-color: black;
}
/*NOTA: prioridad de #id luego .class y al final elemento*/
/*Si se tienen muchos divs, con una clase que la tienen otros elementos que no son div se utiliza div.class
se puede tener varias clases ejemplo: div.class1.class2  */

table{
    border: 1px solid #EEE;
    margin: 15px auto;
    border-collapse: collapse;
}
td{
    color: #999;
}
tr{
    background-color: #F4F4F4;
}
th,td{
    color: #999;
    border: 1px solid #EEE;
    padding: 15px 25px;
}
th{
    color: white;
    background-color: #55B3C5;
    text-transform: uppercase;
}
td:hover{
    color: #555;
}
/*Float, nos ayuda a alienar elementos lado con lado pero pudiera
ocurrir que los elementos quieran ocupar el mismo espacio y por eso hay otra propiedad.
*/
/*Ejemplo*/
ul{
    background-color: #CCC;
    list-style: none;
    overflow: hidden;
}
li{
    float: left;
    padding: 20px;
}
li > a {
    text-decoration: none;
    color: #4F545F;
}
li:hover, li>a:hover{
    cursor: pointer;
    color: white;
    background-color: #999;
}