-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path11_CSS.css
270 lines (200 loc) · 9.46 KB
/
11_CSS.css
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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
/*
Resumen:
● Bases del CSS y atributo class.
● CSS externo, interno y en línea.
● Selectores básicos (id, clase, etiqueta, universal).
● Especificidad, Herencia, Cascada y Orden de las reglas en CSS.
CSS
Es un lenguaje de diseño que nos permite darle estilos a los
componentes de un documento en función de una jerarquía. Se ocupa
de la estética, el aspecto.
CSS es una sigla que proviene de Cascading StyleSheets (Hojas de Estilo
en Cascada, en español). La palabra cascada hace referencia a una
propiedad muy importante de CSS, y es la forma en que se comporta
cuando entran en conflicto dos o más reglas de estilo.
Cuando diseñamos un sitio web profesional, con un equipo de trabajo,
mantener los estilos separados de la estructura y contenido (HTML)
facilita la división de tareas entre los desarrolladores */
/*
¿Cómo incorporamos CSS?
CSS en Línea:
Dentro del atributo style=”” incorporamos los estilos que se van a
aplicar en una etiqueta. Esto es una opción no recomendable.
Por ej.: <p style="color: white; background-color: violet">Esto es un párrafo
Utilizando el atributo style dentro de una etiqueta le proporcionamos estilo
a la misma. Se pueden utilizar a la vez varias parejas de "propiedad: valor;".
CSS Interno:
Incluimos la etiqueta <style> dentro del <head> en nuestro
documento. Opción menos recomendable. Por ej.:
<head>
<style>
h1{
color:white;
background-color: red;
<!--Todas las etiquetas <h1> tendrán color de fuente blanco
y un fondo de color rojo.-->
</style>
</head>
CSS Externo:
En el head del documento HTML tenemos que incluir una referencia al
archivo .css dentro del elemento <link> por medio de la relación "stylesheet" y
el atributo href. Es la forma más recomendada. La referencia al archivo externo
debe incluir la ruta completa, el nombre del archivo y su extensión si se encuentra
en alguna subcarpeta dentro del proyecto. En caso de que el archivo de estilos
se encuentre en la misma carpeta que el documento HTML, únicamente se debe incluir
el nombre del archivo y su extensión. Recordemos que es aconsejable mantener estos
archivos (CSS y HTML) en carpetas separadas. Por ejemplo:
<head>
<link rel="stylesheet" href="css/estilos.css" o href="estilos.css">
</head>
*/
/*
Estructura
Selector: Indica el elemento al que le vamos a aplicar una regla de estilo.
Propiedad y Valor: Especifican qué característica voy a afectar de un elemento,
qué valor tomará el mismo.
Bloque de declaración: Lo que está entre corchetes indica los estilos que le daremos
al selector. Ej.:
*/
h1{
color: blue;
font-size: 24 px;
}
/*
Los estilos se heredan de una etiqueta a otra. Si tenemos declarado en el <body>
unos estilos, en muchos casos, estas declaraciones también afectarán a etiquetas
que estén dentro de este.
*/
/*
Selectores
Indican el elemento al que se debe aplicar el estilo. La declaración indica "qué hay que
hacer" y el selector indica "a quién hay que aplicarlo". Hay cuatro selectores básicos:
● selector universal: Selecciona todos los elementos de HTML.
● selector de etiqueta o tipo: Se utiliza para seleccionar una etiqueta específica.
● selector de clase: Se utiliza agregando el atributo class a los elementos que queramos
aplicarles estilos en html.
● selector de identificador (id): Similar a .class pero solo se aplica a una etiqueta
con un id específico.
Selector universal (*)
Se indica con un * (asterisco) y aplica el estilo a todos los elementos contenidos en el
documento HTML. Por ej.:
*/
*{
margin: 10 px; /*establece el margen para los cuatro lados, si coloco el valor 0 auto; puedo centrar el elemento de manera horizontal.*/
padding: 5 px; /*padding establece el espacio de relleno.*/
background-color: lightgreen; /*cambia el color de relleno.*/
font-family: Verdana; /*cambia el tipo de letra.*/
}
/*
Selector de etiqueta o elemento (<tag>)
Este selector afecta a una etiqueta específica. Esto nos permite ser más precisos a la
hora de aplicar estilos a elementos particulares. Por ejemplo, a todas las etiquetas
<h1> o <p> del documento. Por ej.:
*/
h1 {
color: lightblue;
background-color: blue;
}
p {
color: black;
font-style: italic;
font-size: 130 %;
}
/*
Selector de clase (.class_selector)
Se aplica con un punto (.) seguido del nombre que le asignemos al selector. Dentro
del documento HTML se lo referencia dentro de la etiqueta o el container usando el atributo class,
con la siguiente estructura: class=“nombredelselector”. Por ejemplo:
*/
.subtitulos {
margin-left: 50 px;
color: yellowgreen;
background-color: olivedrab;
}
/* En HTML: <h3 class="subtitulos">Selectores de clase</h3> */
/*
Selector de id (#selector)
Se coloca con un numeral (#) en CSS y en el documento HTML se hace
referencia al selector con id=“nombredelselector”, dentro de la etiqueta a la
cual se aplica:
*/
#texto {
color: white;
background-color: violet;
text-align: center;
margin-left: 100 px;
}
/* <div id="texto"> Selector de id aplicado a una etiqueta div </div> */
/*
Div y Span (contenedores de información)
div (división): Es un elemento en bloque. Sirve para crear secciones o
agrupar contenidos. Sus etiquetas son <div> y </div> (ambas
obligatorias). Crea una caja, que puede contener texto y/u otras
etiquetas, que se separa de la caja anterior con un salto a la línea
siguiente.
span (abarcar): Es un elemento en línea. Sirve para aplicar estilo al
texto o agrupar elementos uno a continuación del otro. Sus etiquetas
son <span> y </span> (ambas obligatorias). Crea una caja que puede
contener texto y/u otras etiquetas que se adapten al ancho del
contenedor.
Ejemplos:
<!--Elementos en bloque-->
<div style="color:darkgreen">Un texto con div</div>
<div style="background-color:lightblue">Otro contenedor distinto</div>
<!-- Elementos en línea-->
<span style="color:red">Un texto en span </span>
<span style="color:blue">En la misma línea otro texto en span</span>
Nota: Se puede hacer que un span se comporte como un div si en CSS le agrego
display:block. Y además, con la propiedad display: inline-block puedo apilar span's
dentro de un contenedor de manera horizontal. +info: https://www.w3schools.com/css/css_inline-block.asp
¿Cómo centrar un div?
<section>
<h1>Centrado!<\h1>
<\section>
Dado un contenedor con un h1, primero centrar el contenido de manera
vertical, después centrar el elemento de manera vertical.
section{
align-content: center;
}
h1{
margin: 0 auto;
}
Atributos globales
Estos atributos pueden utilizarse con todos los elementos HTML:
● style="estilo CSS": Especifica un estilo CSS conforme al elemento.
+info: https://www.w3schools.com/tags/att_global_style.asp
● class="texto": Especifica uno o más nombres de clases para un elemento
(haciendo referencia a una clase en una hoja de estilo).
+info: https://www.w3schools.com/tags/att_global_class.asp
● id="texto": Especifica un id único por cada página.
+info: https://www.w3schools.com/tags/att_global_id.asp
● title="texto": Especifica información extra sobre un elemento (Tooltip Text).
● hidden: Evita que el elemento y sus descendientes se muestran en el
navegador. Cualquier control de formulario o de script dentro de la sección
hidden será ejecutado, aunque no se muestra al usuario.
Especificidad
La especificidad es el mecanismo mediante el cual los navegadores deciden qué
valores de una propiedad CSS son más relevantes para un elemento. Esto influye en la
manera en que los estilos son aplicados. La especificidad está basada en las reglas de
coincidencia que están compuestas por diferentes tipos de selectores CSS.
La especificidad sólo se aplica cuando el mismo elemento es objetivo de múltiples
declaraciones. Según las reglas de CSS, en caso de que un elemento sea objeto de
una declaración directa, está siempre tendrá preferencia sobre las reglas heredadas
de su ancestro.
La especificidad hace referencia a la relevancia que tiene un estilo sobre un elemento
de la página al cual le están afectando varios estilos de CSS al mismo tiempo. Es decir,
hace referencia al grado de importancia de un estilo sobre otro cuando múltiples estilos
se les aplican a un mismo elemento.
La siguiente tabla muestra los niveles de especificidad, desde los más específicos a
los más generales:
Estilo Ejemplo Nivel (peso)
!important cualquier-selector { color: #FF0000!important; } 1, 0, 0, 0, 0
inline o directo <p style=“color:#FF0000;”>Lorem Ipsum</p> 0, 1, 0, 0, 0
ID #parrafo { color: #FF0000; } 0, 0, 1, 0, 0
Clases, atributos y .parrafo { color: #FF0000; } 0, 0, 0, 1, 0
pseudoclases
Etiquetas y p { color: #FF0000; } 0, 0, 0, 0, 1
pseudoelementos
IMPORTANTE: Cuando varias declaraciones tienen igual especificidad, se aplicará al elemento la
última declaración encontrada en el CSS.
*/