-
Notifications
You must be signed in to change notification settings - Fork 0
/
index10.html
166 lines (156 loc) · 14.4 KB
/
index10.html
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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 6</title>
<link rel="icon" href="/img/bellota.ico" type="image/x-icon">
<link rel="stylesheet" href="/css/main10.css">
</head>
<body>
<header>
<nav>
<a href="http://www.google.com" target="_blank">Google</a>
<a href="/index.html">HTML</a>
<a href="/indexCSS.html">Inicio</a>
<a href="/index5.html">Clase 1</a>
<a href="/index6.html">Clase 2</a>
<a href="/index7.html">Clase 3</a>
<a href="/index8.html">Clase 4</a>
<a href="/index9.html">Clase 5</a>
<a href="/index10.html">Clase 6</a>
<a href="/index11.html">Clase 7</a>
<a href="/index12.html">Clase 8</a>
</nav>
<h1 id="subir">Clase 6 de CSS</h1>
<a href="/txt/Clase 10. CSS 6.pdf" download="">Descargar pdf de la clase</a>
<hr>
</header>
<main>
<div><p> <span id="titulo">CSS Grid</span> <a href="https://www.w3schools.com/css/css_grid.asp" target="_blank">mas info aca</a><br>
El módulo de diseño de CSS Grid ofrece un sistema de diseño basado en cuadrículas, con filas y columnas, lo que facilita el diseño de páginas web sin tener que usar flotadores y posicionamiento. <br>
<b>Se puede complementar con flexbox.</b> <br><br>
<span id="titulo">Propiedades:</span><br><br>
<b>*column-gap:</b> Especifica el espacio entre las columnas. <a href="https://www.w3schools.com/cssref/css3_pr_column-gap.asp"target="_blank">+info</a><br>
<b>*gap:</b> Propiedad abreviada. Espacio entre filas y entre columnas. <a href="https://www.w3schools.com/cssref/css3_pr_gap.asp"target="_blank">+info</a><br>
<b>*grid:</b> Es lo mismo que grid-template (Ej: 150px / auto auto auto;). Propiedad abreviada. Filas y columnas, de la cuadrícula, áreas de la cuadrícula, filas y
columnas automáticas y propiedades de flujo automático de cuadrícula. <a href="https://www.w3schools.com/cssref/pr_grid.asp"target="_blank">+info</a><br><br>
<b>*grid-auto-columns:</b> Especifica un tamaño de columna predeterminado. <a href="https://www.w3schools.com/cssref/pr_grid-area.asp"target="_blank">+info</a><br>
<b>*grid-auto-flow:</b> Determina cómo se insertan los elementos en la cuadrícula. <a href="https://www.w3schools.com/cssref/pr_grid-auto-flow.asp"target="_blank">+info</a><br>
<b>*grid-auto-rows:</b> Especifica un tamaño de fila predeterminado. <a href="https://www.w3schools.com/cssref/pr_grid-auto-rows.asp"target="_blank">+info</a><br><br>
<b>*grid-area:</b> Especifica un nombre para el elemento de la cuadrícula. Es una propiedad abreviada
para grid-row-start, grid-column-start, grid-row-end y grid-column-end. <a href="https://www.w3schools.com/cssref/pr_grid-area.asp"target="_blank">+info</a><br><br>
<b>*grid-column:</b> PUEDO PONER DONDE COMIENZA Y DONDE TERMINA O, DONDE COMIENZA Y HASTA DONDE SE EXPANDE CON SPAN. Una propiedad abreviada para las propiedades grid-column-start y grid-column-end.
Ej: grid-column: 1 / span 4 (desde la linea 1 se expande hasta la 4). <a href="https://www.w3schools.com/cssref/pr_grid-column.asp"target="_blank">+info</a><br>
<b>***grid-column-end:</b> Especifica dónde termina el elemento de la cuadrícula. <a href="https://www.w3schools.com/cssref/pr_grid-column-end.asp"target="_blank">+info</a><br>
<b>***grid-column-start:</b> Especifica dónde comienza el elemento de la cuadrícula. <a href="https://www.w3schools.com/cssref/pr_grid-column-start.asp"target="_blank">+info</a><br><br>
<b>*grid-gap:</b> PUEDO PONER DONDE COMIENZA Y DONDE TERMINA O, DONDE COMIENZA Y HASTA DONDE SE EXPANDE CON SPAN. Una propiedad abreviada para las propiedades grid-row-gap y grid-column-gap. Ej: grid-column: 1 / span 4 (desde la linea 1 se expande hasta la 4). <a href="https://www.w3schools.com/cssref/pr_grid-column-start.asp"target="_blank">+info</a><br>
<b>***grid-row-gap:</b> Especifica el tamaño del espacio entre filas. <a href="https://www.w3schools.com/cssref/pr_grid-row-gap.asp"target="_blank">+info</a><br>
<b>***grid-column-gap:</b> Especifica el tamaño del espacio entre columnas. <a href="https://www.w3schools.com/cssref/pr_grid-column-gap.asp"target="_blank">+info</a><br><br>
<b>*grid-row:</b> Una propiedad abreviada para las propiedades grid-row-start y grid-row-end. <a href="https://www.w3schools.com/cssref/pr_grid-row.asp"target="_blank">+info</a><br>
<b>***grid-row-end:</b> Especifica dónde termina el elemento de la cuadrícula. <a href="https://www.w3schools.com/cssref/pr_grid-row-end.asp"target="_blank">+info</a><br>
<b>***grid-row-start:</b> Especifica dónde comienza el elemento de la cuadrícula. <a href="https://www.w3schools.com/cssref/pr_grid-row-start.asp"target="_blank">+info</a><br><br>
<b>*grid-row-gap:</b> Especifica el tamaño del espacio entre filas. <a href="https://www.w3schools.com/cssref/pr_grid-row-gap.asp"target="_blank">+info</a><br><br>
<b>*grid-template:</b> Es lo mismo que GRID (Ej: 150px / auto auto auto;). Una propiedad abreviada para las propiedades de las filas de plantilla de cuadrícula, columnas de plantilla de cuadrícula y áreas de cuadrícula. <a href="https://www.w3schools.com/cssref/pr_grid-template.asp"target="_blank">+info</a><br>
<b>***grid-template-areas:</b> Especifica cómo mostrar columnas y filas, utilizando elementos de cuadrícula
con nombre. <a href="https://www.w3schools.com/cssref/pr_grid-template-areas.asp"target="_blank">+info</a><br><br>
<b style="font-size: 25px; color: blue;">***grid-template-columns:</b> Define el número de columnas (y el ancho) de la cuadrícula. Se colocan los valores separados por espacios, y cada uno define el ancho de la columna respectiva. Se pueden establecer anchos en px, unidades relativas o %, aunque es recomendable utilizar la medida <b>fr</b>. <br><br>
--Unidad fracción restante (fr): <br>
La unidad especial de Grid <b>fr (fraction)</b> representa una fracción de espacio restante en el grid. <br>
Ej: <br>
grid-template-columns: 0.5fr 2fr 1fr; <br><br>
--La expresión repeat(): <br>
Se puede utilizar la expresión <b>repeat()</b> para indicar repetición de valores, indicando el número de veces que se repiten y el tamaño en cuestión. <br>
La expresión a utilizar es la siguiente: <br>
repeat([núm de veces], [valor o valores]): <br>
Ej: grid-template-columns: <span style="color: red;">repeat</span>(<span style="color: rgb(239, 136, 17);">3, 1fr</span>); <br><br>
/*Medida automática:*/ <br>
grid-template-columns: auto auto auto;<br><br>
<span style="color: rgb(43, 142, 240);">Dato:</span> Si una cuadrícula de 4 columnas tiene más de 4 elementos, se agrega automáticamente una nueva fila para colocar los elementos extra. <br>
<a href="https://www.w3schools.com/cssref/pr_grid-template-columns.asp"target="_blank">+info</a><br><br>
<b>***grid-template-rows:</b> Define la altura de cada fila. <a href="https://www.w3schools.com/cssref/pr_grid-template-rows.asp"target="_blank">+info</a><br>
El valor es una lista separada por espacios, donde cada valor define el alto de la fila respectiva. <br>
Ej: <br>
grid-template-rows: <span style="color: rgb(239, 136, 17);">80px 200px</span>;<br><br>
<b>***row-gap:</b> Especifica el espacio entre las filas de la cuadrícula. <a href="https://www.w3schools.com/cssref/css3_pr_row-gap.asp"target="_blank">+info</a><br>
</p></div>
<div><p>
<span id="titulo">Grid Container</span> es nuestro elemento “padre”, donde se asigna un {display:grid;} y nos permitirá colocar otras propiedades para manipular nuestro diseño. <br>
Display puede ser seteada en <b>grid(cuadrícula)</b> o <b>inline-grid(cuadrícula en línea)</b>.<br>
Los contenedores de cuadrícula consisten en elementos de cuadrícula, colocados dentro de columnas y filas.<br>
</p> </div>
<div> <p>
<span id="titulo">Grid Item</span> son los hijos directos de nuestro container. Estos los manejaremos a nuestra voluntad, nuestras filas y columnas que moveremos a nuestro gusto. <br>
Se pueden referenciar por fila o por columna, aunque no es la única forma. <br>
</p></div>
<div><p>
<span id="titulo">Grid Gaps</span>: Es el espacio entre los ítems. Se pueden ajustar los tamaños de gap con las
siguientes propiedades: <br>
<a href="https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_grid-column-gap" target="_blank">grid-column-gap;</a> ej: 50px. para ajustar el espacio entre las columnas.<br>
<a href="https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_grid-row-gap" target="_blank">grid-row-gap;</a> ej: auto. para ajustar el espacio entre las filas.<br>
<a href="https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_grid-gap2" target="_blank">grid-gap;</a> ej: 50px 24px o 10px y aplica a los dos lo mismo. da directamente el tamaño a las columnas y a las filas<br>
</p></div>
<div><p>
<span id="titulo">Grid Line</span> son las líneas divisorias horizontales y verticales. Para colocar un grid-ítem en un contenedor se referencian los números de línea. Ejemplos: <br>
--Pone un grid item en la línea de la columna 1, que finaliza en la línea de la columna 3: <a href="https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_lines" target="_blank">ver ejemplo aca</a> <br>
.item{ <br>
grid-column-start: 1; <br>
grid-column-end: 3; <br>
} <br>
--Pone un grid item en la línea de la fila 1, que finaliza en la línea de la fila 3:
<a href="https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_lines2" target="_blank">ver ejemplo aca</a><br>
.item{ <br>
grid-row-start: 1; <br>
grid-row-end: 3; <br>
} <br>
</p></div>
<div><p>
<span id="titulo">Grid Track</span> es el espacio entre dos líneas adyacentes. Filas y columnas.
</p></div>
<div><p>
<span id="titulo">Grid Cell</span> nuestras celdas serán el espacio entre dos filas adyacentes y 2 columnas adyacentes.
</p></div>
<div><p>
<span id="titulo">Grid Area</span> espacio rodeado por 4 grid lines. Especifica el tamaño y la ubicación de un elemento de cuadrícula en el diseño, y es una propiedad abreviada para las siguientes propiedades: grid-row-start, grid-column-start, grid-row-end y grid-column-end. <br>
También se puede utilizar para asignar un nombre a un elemento de la cuadrícula. Y se puede hacer referencia a los elementos de cuadrícula con nombre mediante la propiedad grid-template-areas del contenedor de cuadrícula. <a href="https://www.w3schools.com/cssref/pr_grid-area.asp" target="_blank">+ info</a><br>
</p></div>
<div><p>
<span id="titulo">COMPARTE PROPIEDADES CON FLEX:</span><br>
<b>*justify-content:</b> Se utiliza para alinear toda la cuadrícula dentro del contenedor. El ancho total de la cuadrícula debe ser menor que el ancho del contenedor para que la propiedad tenga efecto: <br>
-space-evenly <br>
-space-around <br>
-space-between <br>
-end <br>
-start <br>
-center <br>
<b>*align-content:</b> Se usa para alinear verticalmente toda la cuadrícula dentro del contenedor. La altura total de la cuadrícula debe ser menor que la altura del contenedor para que tenga efecto. <br>
-space-evenly <br>
-space-around <br>
-space-between <br>
-end <br>
-start <br>
-center
</p></div>
<div> <p>
<span id="titulo">Anotaciones de clase:</span><br>
Si declaro el nombre de la grid area ya puedo nombrarla en vez de poner cuanto quiero que mida una celda en general. Ej: <a href="https://medium.com/sue%C3%B1os-graficos/css-grid-la-mejor-opci%C3%B3n-para-crear-dise%C3%B1os-web-b1b7b8735566" target="_blank">aca</a> o <a href="https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_layout_named" target="_blank">aca</a>
</p></div>
<div><p>
<span id="titulo">mas info:</span><br>
<a href="https://lenguajecss.com/css/maquetacion-y-colocacion/grid-css/" target="_blank">https://lenguajecss.com/css/maquetacion-y-colocacion/grid-css/</a> <br>
<a href="https://www.w3schools.com/css/css_grid.asp" target="_blank">https://www.w3schools.com/css/css_grid.asp</a> <br>
<a href="https://www.w3schools.com/css/css_grid_container.asp" target="_blank">https://www.w3schools.com/css/css_grid_container.asp</a> <br>
<a href="https://www.w3schools.com/css/css_grid_item.asp" target="_blank">https://www.w3schools.com/css/css_grid_item.asp</a> <br>
<a href="https://www.w3schools.com/cssref/pr_grid-area.asp" target="_blank">https://www.w3schools.com/cssref/pr_grid-area.asp</a> <br>
<a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout" target="_blank">Principios básicos del diseño con Grid</a> <br>
<a href="https://www.youtube.com/watch?v=n1Lnar9mTF8" target="_blank">CSS Grid desde cero</a> <br>
<a href="https://www.youtube.com/watch?v=9w3gy2dYN_E&t=1s" target="_blank">CSS GRID Página Web Responsive</a> <br>
<a href="https://www.mozilla.org/es-ES/firefox/developer/" target="_blank">Firefox Browser Developer Edition</a> <br>
</p></div>
</main>
<footer>
<a href="#subir">Subir</a>
</footer>
</body>
</html>