استایل عناصر جایگزین در CSS — آموزش CSS (بخش هفدهم)

1.box {
2  width: 200px;
3}
4
5img {
6
7}

1<div class="wrapper">
2  <div class="box"><img src="star.png" alt="star"></div>
3  <div class="box"><img src="balloons.jpg" alt="balloons"></div>
4</div>

1.box {
2  width: 200px;
3  height: 200px;
4}
5
6img {
7  height: 100%;
8  width: 100%;
9}
10
11.cover {
12  object-fit: cover;
13}
14
15.contain {
16  object-fit: contain;
17}

1<div class="wrapper">
2  <div class="box"><img src="balloons.jpg" alt="balloons" class="cover"></div>
3  <div class="box"><img src="balloons.jpg" alt="balloons" class="contain"></div>
4</div>

1.wrapper {
2  display: grid;
3  grid-template-columns: 1fr 1fr;
4  grid-template-rows: 200px 200px;
5  gap: 20px;
6}
7
8.wrapper > div {
9  background-color: rebeccapurple;
10  border-radius: .5em;
11}

1<div class="wrapper">
2  <img src="star.png" alt="star">
3  <div></div>
4  <div></div>
5  <div></div>
6</div>

1img {
2  width: 100%;
3  height: 100%;
4}

1input[type="text"],
2input[type="email"] {
3  border: 2px solid #000;
4  margin: 0 0 1em 0;
5  padding: 10px;
6  width: 100%;
7}
8
9input[type="submit"] {
10  border: 3px solid #333;
11  background-color: #999;
12  border-radius: 5px;
13  padding: 10px 2em;
14  font-weight: bold;
15  color: #fff;
16}
17
18input[type="submit"]:hover {
19  background-color: #333;
20}

1<form>
2  <div><label for="name">Name</label>
3  <input type="text" id="name"></div>
4  <div><label for="email">Email</label>
5  <input type="email" id="email"></div>
6
7  <div class="buttons"><input type="submit" value="Submit"></div>
8</form>

1button, 
2input, 
3select, 
4textarea { 
5  font-family : inherit; 
6  font-size : 100%; 
7}

1button, 
2input, 
3select, 
4textarea {  
5  box-sizing: border-box; 
6  padding: 0;
7  margin: 0; 
8}

1textarea {
2  overflow: auto;
3}

1button, 
2input, 
3select, 
4textarea { 
5  font-family: inherit; 
6  font-size: 100%; 
7  box-sizing: border-box; 
8  padding: 0; margin: 0; 
9} 
10
11textarea { 
12  overflow: auto; 
13}

1/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
2
3/* Document
4   ========================================================================== */
5
6/**
7 * 1. Correct the line height in all browsers.
8 * 2. Prevent adjustments of font size after orientation changes in iOS.
9 */
10
11html {
12  line-height: 1.15; /* 1 */
13  -webkit-text-size-adjust: 100%; /* 2 */
14}
15
16/* Sections
17   ========================================================================== */
18
19/**
20 * Remove the margin in all browsers.
21 */
22
23body {
24  margin: 0;
25}
26
27/**
28 * Render the `main` element consistently in IE.
29 */
30
31main {
32  display: block;
33}
34
35/**
36 * Correct the font size and margin on `h1` elements within `section` and
37 * `article` contexts in Chrome, Firefox, and Safari.
38 */
39
40h1 {
41  font-size: 2em;
42  margin: 0.67em 0;
43}
44
45/* Grouping content
46   ========================================================================== */
47
48/**
49 * 1. Add the correct box sizing in Firefox.
50 * 2. Show the overflow in Edge and IE.
51 */
52
53hr {
54  box-sizing: content-box; /* 1 */
55  height: 0; /* 1 */
56  overflow: visible; /* 2 */
57}
58
59/**
60 * 1. Correct the inheritance and scaling of font size in all browsers.
61 * 2. Correct the odd `em` font sizing in all browsers.
62 */
63
64pre {
65  font-family: monospace, monospace; /* 1 */
66  font-size: 1em; /* 2 */
67}
68
69/* Text-level semantics
70   ========================================================================== */
71
72/**
73 * Remove the gray background on active links in IE 10.
74 */
75
76a {
77  background-color: transparent;
78}
79
80/**
81 * 1. Remove the bottom border in Chrome 57-
82 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
83 */
84
85abbr[title] {
86  border-bottom: none; /* 1 */
87  text-decoration: underline; /* 2 */
88  text-decoration: underline dotted; /* 2 */
89}
90
91/**
92 * Add the correct font weight in Chrome, Edge, and Safari.
93 */
94
95b,
96strong {
97  font-weight: bolder;
98}
99
100/**
101 * 1. Correct the inheritance and scaling of font size in all browsers.
102 * 2. Correct the odd `em` font sizing in all browsers.
103 */
104
105code,
106kbd,
107samp {
108  font-family: monospace, monospace; /* 1 */
109  font-size: 1em; /* 2 */
110}
111
112/**
113 * Add the correct font size in all browsers.
114 */
115
116small {
117  font-size: 80%;
118}
119
120/**
121 * Prevent `sub` and `sup` elements from affecting the line height in
122 * all browsers.
123 */
124
125sub,
126sup {
127  font-size: 75%;
128  line-height: 0;
129  position: relative;
130  vertical-align: baseline;
131}
132
133sub {
134  bottom: -0.25em;
135}
136
137sup {
138  top: -0.5em;
139}
140
141/* Embedded content
142   ========================================================================== */
143
144/**
145 * Remove the border on images inside links in IE 10.
146 */
147
148img {
149  border-style: none;
150}
151
152/* Forms
153   ========================================================================== */
154
155/**
156 * 1. Change the font styles in all browsers.
157 * 2. Remove the margin in Firefox and Safari.
158 */
159
160button,
161input,
162optgroup,
163select,
164textarea {
165  font-family: inherit; /* 1 */
166  font-size: 100%; /* 1 */
167  line-height: 1.15; /* 1 */
168  margin: 0; /* 2 */
169}
170
171/**
172 * Show the overflow in IE.
173 * 1. Show the overflow in Edge.
174 */
175
176button,
177input { /* 1 */
178  overflow: visible;
179}
180
181/**
182 * Remove the inheritance of text transform in Edge, Firefox, and IE.
183 * 1. Remove the inheritance of text transform in Firefox.
184 */
185
186button,
187select { /* 1 */
188  text-transform: none;
189}
190
191/**
192 * Correct the inability to style clickable types in iOS and Safari.
193 */
194
195button,
196[type="button"],
197[type="reset"],
198[type="submit"] {
199  -webkit-appearance: button;
200}
201
202/**
203 * Remove the inner border and padding in Firefox.
204 */
205
206button::-moz-focus-inner,
207[type="button"]::-moz-focus-inner,
208[type="reset"]::-moz-focus-inner,
209[type="submit"]::-moz-focus-inner {
210  border-style: none;
211  padding: 0;
212}
213
214/**
215 * Restore the focus styles unset by the previous rule.
216 */
217
218button:-moz-focusring,
219[type="button"]:-moz-focusring,
220[type="reset"]:-moz-focusring,
221[type="submit"]:-moz-focusring {
222  outline: 1px dotted ButtonText;
223}
224
225/**
226 * Correct the padding in Firefox.
227 */
228
229fieldset {
230  padding: 0.35em 0.75em 0.625em;
231}
232
233/**
234 * 1. Correct the text wrapping in Edge and IE.
235 * 2. Correct the color inheritance from `fieldset` elements in IE.
236 * 3. Remove the padding so developers are not caught out when they zero out
237 *    `fieldset` elements in all browsers.
238 */
239
240legend {
241  box-sizing: border-box; /* 1 */
242  color: inherit; /* 2 */
243  display: table; /* 1 */
244  max-width: 100%; /* 1 */
245  padding: 0; /* 3 */
246  white-space: normal; /* 1 */
247}
248
249/**
250 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
251 */
252
253progress {
254  vertical-align: baseline;
255}
256
257/**
258 * Remove the default vertical scrollbar in IE 10+.
259 */
260
261textarea {
262  overflow: auto;
263}
264
265/**
266 * 1. Add the correct box sizing in IE 10.
267 * 2. Remove the padding in IE 10.
268 */
269
270[type="checkbox"],
271[type="radio"] {
272  box-sizing: border-box; /* 1 */
273  padding: 0; /* 2 */
274}
275
276/**
277 * Correct the cursor style of increment and decrement buttons in Chrome.
278 */
279
280[type="number"]::-webkit-inner-spin-button,
281[type="number"]::-webkit-outer-spin-button {
282  height: auto;
283}
284
285/**
286 * 1. Correct the odd appearance in Chrome and Safari.
287 * 2. Correct the outline style in Safari.
288 */
289
290[type="search"] {
291  -webkit-appearance: textfield; /* 1 */
292  outline-offset: -2px; /* 2 */
293}
294
295/**
296 * Remove the inner padding in Chrome and Safari on macOS.
297 */
298
299[type="search"]::-webkit-search-decoration {
300  -webkit-appearance: none;
301}
302
303/**
304 * 1. Correct the inability to style clickable types in iOS and Safari.
305 * 2. Change font properties to `inherit` in Safari.
306 */
307
308::-webkit-file-upload-button {
309  -webkit-appearance: button; /* 1 */
310  font: inherit; /* 2 */
311}
312
313/* Interactive
314   ========================================================================== */
315
316/*
317 * Add the correct display in Edge, IE 10+, and Firefox.
318 */
319
320details {
321  display: block;
322}
323
324/*
325 * Add the correct display in all browsers.
326 */
327
328summary {
329  display: list-item;
330}
331
332/* Misc
333   ========================================================================== */
334
335/**
336 * Add the correct display in IE 10+.
337 */
338
339template {
340  display: none;
341}
342
343/**
344 * Add the correct display in IE 10.
345 */
346
347[hidden] {
348  display: none;
349}