در این مطلب، ویدئو Python Webdev #4 – CSS با زیرنویس فارسی را برای دانلود قرار داده ام. شما میتوانید با پرداخت 15 هزار تومان ، این ویدیو به علاوه تمامی فیلم های سایت را دانلود کنید.اکثر فیلم های سایت به زبان انگلیسی می باشند. این ویدئو دارای زیرنویس فارسی ترجمه شده توسط هوش مصنوعی می باشد که میتوانید نمونه ای از آن را در قسمت پایانی این مطلب مشاهده کنید.
مدت زمان فیلم: 00:31:13
تصاویر این ویدئو:
قسمتی از زیرنویس این فیلم:
00:00:00,080 –> 00:00:01,439
بسیار خوب، بنابراین در این ویدیو من قصد
2
00:00:01,439 –> 00:00:03,280
دارم اصول
3
00:00:03,280 –> 00:00:07,200
css را با uh flask و python بررسی کنم،
4
00:00:07,200 –> 00:00:09,840
بنابراین اگر نمی دانید از css برای
5
00:00:09,840 –> 00:00:11,519
سبک سازی صفحات وب استفاده
6
00:00:11,519 –> 00:00:14,719
می شود، html
7
00:00:14,719 –> 00:00:16,640
اساس طرح بندی را تشکیل می دهد و سپس css همه چیز را به
8
00:00:16,640 –> 00:00:17,920
نظر می رساند. خیلی خوب است
9
00:00:17,920 –> 00:00:20,960
، من در ویدیوی قبلی
10
00:00:20,960 –> 00:00:24,240
یک طرح بندی اولیه html برای
11
00:00:24,240 –> 00:00:24,640
چیزهایمان ایجاد کردم،
12
00:00:24,640 –> 00:00:26,080
بنابراین اکنون می خواهیم آن را سبک سازی کنیم و
13
00:00:26,080 –> 00:00:27,840
زیبا به نظر برسد، بنابراین
14
00:00:27,840 –> 00:00:31,679
این چیزی است که ما در حال حاضر داریم. اوه، همین الان
15
00:00:31,679 –> 00:00:34,559
به اینجا می روم این همان چیزی است که یک صفحه به
16
00:00:34,559 –> 00:00:35,520
نظر می رسد مثل اینکه
17
00:00:35,520 –> 00:00:37,680
من در کانال یک هستم، در واقع
18
00:00:37,680 –> 00:00:38,559
صفحه اصلی نیست،
19
00:00:38,559 –> 00:00:40,079
بنابراین یک آدرس اینترنتی متفاوت است، اما بله، بنابراین این
20
00:00:40,079 –> 00:00:41,440
چیزی است که تا کنون دریافت کردهام، میخواهم این را زیبا جلوه دهم
21
00:00:41,440 –> 00:00:42,160
،
22
00:00:42,160 –> 00:00:45,200
بنابراین اولین چیزی که باید بدانید این است که css
23
00:00:45,200 –> 00:00:46,879
به طور معمول از
24
00:00:46,879 –> 00:00:49,360
فایل خود را معمولاً نمیخواهید
25
00:00:49,360 –> 00:00:51,199
در html
26
00:00:51,199 –> 00:00:52,719
که برای مشتری ارسال میکنید جاسازی کنید.
27
00:00:52,719 –> 00:00:54,559
28
00:00:54,559 –> 00:00:55,840
29
00:00:55,840 –> 00:00:57,760
30
00:00:57,760 –> 00:01:00,239
31
00:01:00,239 –> 00:01:01,920
32
00:01:01,920 –> 00:01:04,000
آن فایل دیگر را کش کنید تا
33
00:01:04,000 –> 00:01:05,438
مجبور به بارگیری نباشید هر بار آن دادهها
34
00:01:05,438 –> 00:01:06,159
35
00:01:06,159 –> 00:01:08,320
را برای آن فایل ایجاد میکنم
36
00:01:08,320 –> 00:01:09,840
به نام پوشه استاتیک که
37
00:01:09,840 –> 00:01:12,080
شامل تمام فایلهایی است
38
00:01:12,080 –> 00:01:14,320
که کلاینت میتواند فوراً
39
00:01:14,320 –> 00:01:16,240
بدون نیاز به طی کردن یک مسیر خاص
40
00:01:16,240 –> 00:01:16,880
41
00:01:16,880 –> 00:01:20,000
در فلاسک درخواست کند، بنابراین من میخواهم ایجاد کنم.
42
00:01:20,000 –> 00:01:22,799
فایل استاتیک و در آن من میخواهم
43
00:01:22,799 –> 00:01:23,200
44
00:01:23,200 –> 00:01:25,920
نقطه اصلی خود را ایجاد کنم که
45
00:01:25,920 –> 00:01:27,360
css خواهد بود،
46
00:01:27,360 –> 00:01:28,560
همه چیزهایی را که میتوانید در
47
00:01:28,560 –> 00:01:30,000
صورت تمایل به چندین فایل تقسیم کنید، طراحی میکند، اما در مورد من
48
00:01:30,000 –> 00:01:31,119
فقط از یکی استفاده میکنم.
49
00:01:31,119 –> 00:01:35,759
فایل بنابراین این پوشه استاتیک از داخل فلاسک قابل دسترسی است
50
00:01:35,759 –> 00:01:37,759
51
00:01:37,759 –> 00:01:40,240
و این تنها فایلی است که مانند آن است،
52
00:01:40,240 –> 00:01:41,600
بنابراین من در واقع می خواهم
53
00:01:41,600 –> 00:01:43,920
abc را دقیقاً در اینجا قرار دهم تا سرور را
54
00:01:43,920 –> 00:01:44,799
مجدداً راه اندازی
55
00:01:44,799 –> 00:01:49,159
کنم اگر رفرش کنم می توانم می توانم به static
56
00:01:49,159 –> 00:01:52,159
main.css بروم.
57
00:01:52,159 –> 00:01:53,680
58
00:01:53,680 –> 00:01:56,719
59
00:01:56,719 –> 00:02:01,000
من این را به main.css برمیگردانم و آن را خالی ذخیره میکنم، اما اگر متوجه شدید که به main.css ثابت میروم
60
00:02:01,000 –> 00:02:04,240
، در واقع نمیتوانم به main.pi دسترسی داشته
61
00:02:04,240 –> 00:02:09,038
باشم، بنابراین فقط آن پوشه
62
00:02:09,038 –> 00:02:10,800
و هر چیزی که داخل آن است است. از آن چیزی که در
63
00:02:10,800 –> 00:02:12,560
دسترس عموم است، همه چیز دیگر
64
00:02:12,560 –> 00:02:13,040
65
00:02:13,040 –> 00:02:14,560
شما نیستید میتواند نام پوشهای را
66
00:02:14,560 –> 00:02:16,400
که فلاسکها استفاده میکند و انواع
67
00:02:16,400 –> 00:02:18,239
تنظیمات دیگر و آدرس اینترنتی که
68
00:02:18,239 –> 00:02:18,959
به آن پیوند
69
00:02:18,959 –> 00:02:22,640
مییابد تغییر دهد، بهعنوان مثال، میتوانید
70
00:02:22,640 –> 00:02:26,319
آن را با فایلهای main.css پیوند دهید و
71
00:02:26,319 –> 00:02:27,760
72
00:02:27,760 –> 00:02:30,160
اگر تنظیم کنید، آنها به پوشه ثابت میروند. برای
73
00:02:30,160 –> 00:02:31,360
پیکربندی مانند آن
74
00:02:31,360 –> 00:02:32,959
که گزینه ای در داخل فلاسک است، می
75
00:02:32,959 –> 00:02:34,959
توانید آن را جستجو کنید فقط
76
00:02:34,959 –> 00:02:36,800
در پوشه استاتیک flask set جستجو کنید و
77
00:02:36,800 –> 00:02:38,480
انواع پیکربندی را برای آن پیدا خواهید کرد
78
00:02:38,480 –> 00:02:40,480
اما flask یک پیکربندی پیش فرض دارد
79
00:02:40,480 –> 00:02:41,840
و این همان چیزی است که من در اینجا از آن استفاده می کنم
80
00:02:41,840 –> 00:02:44,319
. شما static را انجام میدهید و
81
00:02:44,319 –> 00:02:45,440
به پوشه استاتیک میرود،
82
00:02:45,440 –> 00:02:46,640
بنابراین من در واقع فعلاً این را
83
00:02:46,640 –> 00:02:48,879
خالی میگذارم و چند بهروزرسانی
84
00:02:48,879 –> 00:02:51,599
برای فایل html خود ایجاد میکنم، بنابراین اولین و
85
00:02:51,599 –> 00:02:52,560
مهمترین مورد
86
00:02:52,560 –> 00:02:56,640
این است که در واقع فقط css را
87
00:02:56,640 –> 00:02:59,599
به فایل html خود پیوند دهیم. که کلاینت
88
00:02:59,599 –> 00:03:02,239
می داند که وقتی این html را می بیند css را بارگیری کند،
89
00:03:02,239 –> 00:03:05,599
بنابراین از تگ پیوند برای این
90
00:03:05,599 –> 00:03:09,280
rel برابر با stylesheet
91
00:03:09,280 –> 00:03:11,519
href استفاده کنید و این مسیر
92
00:03:11,519 –> 00:03:12,640
93
00:03:12,640 –> 00:03:14,720
فایل خواهد بود، بنابراین من می خواهم اسلش استاتیک
94
00:03:14,720 –> 00:03:16,800
main.css را انجام دهم. درست مثل اسلش لایک
95
00:03:16,800 –> 00:03:18,319
96
00:03:18,319 –> 00:03:21,599
من معتقدم که در هر سایتی
97
00:03:21,599 –> 00:03:23,200
که در آن هستید به ریشه می رود،
98
00:03:23,200 –> 00:03:26,239
بنابراین اگر در اینجا متوجه شدید من فقط یک
99
00:03:26,239 –> 00:03:28,239
URL خام در اینجا دارم که فقط اسلش است، بنابراین
100
00:03:28,239 –> 00:03:29,840
101
00:03:29,840 –> 00:03:31,040
در مورد من هر وب سایتی را که در آن هستید ریشه می دهد. این
102
00:03:31,040 –> 00:03:33,280
لوکال هاست خواهد بود، از آنجا که شما فقط به main.css استاتیک می روید و آن را می گیرید،
103
00:03:33,280 –> 00:03:36,000
بنابراین به عنوان یک نمونه
104
00:03:36,000 –> 00:03:37,519
، من یک
105
00:03:37,519 –> 00:03:41,040
هک بسیار ابتدایی css را در اینجا انجام می دهم،
106
00:03:41,040 –> 00:03:43,840
رنگ پس زمینه قرمز،
107
00:03:43,840 –> 00:03:46,640
چشمان شما را آبی
108
00:03:46,640 –> 00:03:48,239
می کنم، بنابراین من باید این کار را انجام دهم. سرور را راه اندازی مجدد کنید زیرا
109
00:03:48,239 –> 00:03:49,840
فایل html را تغییر دادم و
110
00:03:49,840 –> 00:03:52,400
برای هر بار بوت یک بار بارگذاری می شود، بنابراین می خواهم
111
00:03:52,400 –> 00:03:54,159
برگردم تا ببینم آیا می توانم
112
00:03:54,159 –> 00:03:54,560
113
00:03:54,560 –> 00:03:57,840
اینجا کانال اول را پیدا کنم، بنابراین ctrl shift r را انجام دادم
114
00:03:57,840 –> 00:04:00,159
که مرورگر شما را مجبور می کند دوباره درخواست
115
00:04:00,159 –> 00:04:00,879
کند. از
116
00:04:00,879 –> 00:04:04,560
میان فایل های ذخیره شده در این مورد، css
117
00:04:04,560 –> 00:04:06,080
و این فقط یک ابزار مفید در طول
118
00:04:06,080 –> 00:04:08,879
توسعه است، همچنین ترفندهایی وجود دارد
119
00:04:08,879 –> 00:04:12,640
که مرورگر را مجبور می کند آن را هر بار بارگذاری مجدد کند
120
00:04:12,640 –> 00:04:13,920
و مواردی از این قبیل، اما من وارد این موضوع نمی
121
00:04:13,920 –> 00:04:16,238
شوم فقط فعلاً
122
00:04:16,238 –> 00:04:17,519
به طور معمول خود را بدانید مرورگر آن فایل را کش میکند
123
00:04:17,519 –> 00:04:21,040
و اگر میخواهید آن را بهروزرسانی کنید،
124
00:04:21,040 –> 00:04:24,080
اگر ctrl کنم سبز میشود
125
00:04:24,080 –> 00:04:27,199
r همچنان قرمز خواهد
126
00:04:27,199 –> 00:04:28,639
بود همانطور
127
00:04:28,639 –> 00:04:29,840
که احتمالاً در بالا سمت چپ می بینید و
128
00:04:29,840 –> 00:04:31,919
تازه می شود اگر ctrl shift r را
129
00:04:31,919 –> 00:04:33,840
فشار دهید به سبز تغییر می کند،
130
00:04:33,840 –> 00:04:35,600
بنابراین بله، این فقط یک ترفند مهم
131
00:04:35,600 –> 00:04:37,440
برای به روز رسانی کامل مرورگر شما است، من
132
00:04:37,440 –> 00:04:38,080
معتقدم
133
00:04:38,080 –> 00:04:40,560
که در فایرفاکس کار می کند. chrome و brave من
134
00:04:40,560 –> 00:04:42,000
در مورد موارد دیگر اطلاعی ندارم،
135
00:04:42,000 –> 00:04:46,240
فکر می کنم جهانی است، بنابراین بله، این
136
00:04:46,240 –> 00:04:49,680
قانون اساسی css است، بنابراین یکی از پایه
137
00:04:49,680 –> 00:04:50,720
های css
138
00:04:50,720 –> 00:04:54,160
این است که بتوان نحوه نمایش
139
00:04:54,160 –> 00:04:57,600
تگ های html را تغییر داد، بنابراین در این
140
00:04:57,600 –> 00:04:59,520
مورد می گویم برای برچسب بدنه
141
00:04:59,520 –> 00:05:01,600
همه چیز در این پرانتزهای رنگی که من میخواهم
142
00:05:01,600 –> 00:05:03,759
اعمال شود، بنابراین اینها مانند قوانین خاصی هستند
143
00:05:03,759 –> 00:05:05,520
و یک قانون معمولاً نام
144
00:05:05,520 –> 00:05:07,120
کولون قانون است
145
00:05:07,120 –> 00:05:08,880
و سپس مقادیر مرتبط با
146
00:05:08,880 –> 00:05:10,479
قانون میتواند یک مقدار باشد
147
00:05:10,479 –> 00:05:13,199
مانند سبز یا میتواند مضرب باشد
148
00:05:13,199 –> 00:05:14,320
که من بعداً به شما نشان خواهم داد و سپس
149
00:05:14,320 –> 00:05:16,320
نقطه ویرگول را انجام میدهید
150
00:05:16,320 –> 00:05:19,360
، چیزهایی مانند نقطهها نیز وجود دارد
151
00:05:19,360 –> 00:05:21,919
که برای انتخاب کلاسها استفاده میشوند و من معتقدم
152
00:05:21,919 –> 00:05:25,440
که علامت پوند برای انتخاب شناسهها، من
153
00:05:25,440 –> 00:05:26,960
از شناسهها استفاده نخواهم کرد،
154
00:05:26,960 –> 00:05:30,000
زیرا اوه، همانطور که گفتم از آن استفاده میکنم.
155
00:05:30,000 –> 00:05:31,840
ویدیوی قبلی من از کلاس ها استفاده خواهم کرد
156
00:05:31,840 –> 00:05:35,120
برای شناسایی
157
00:05:35,120 –> 00:05:36,639
css خیلی خوب است، بنابراین چند تغییر دیگر وجود دارد
158
00:05:36,639 –> 00:05:38,320
که میخواهم اینجا ایجاد کنم،
159
00:05:38,320 –> 00:05:40,800
بنابراین ابتدا ما را با یک
160
00:05:40,800 –> 00:05:42,080
فونت گوگل وصل
161
00:05:42,080 –> 00:05:43,759
میکنم، بنابراین در واقع فقط میخواهم این را کپی
162
00:05:43,759 –> 00:05:46,560
کنم زیرا میخواهم همه چیز زیبا به نظر برسد
163
00:05:46,560 –> 00:05:49,360
. فونتهای سیستمی که هر مرورگری
164
00:05:49,360 –> 00:05:51,199
به آن دسترسی خواهد داشت
165
00:05:51,199 –> 00:05:53,919
um من فکر میکنم ariel یکی از آنهاست، اما
166
00:05:53,919 –> 00:05:54,720
167
00:05:54,720 –> 00:05:56,960
معمولاً مردم با فونتهای خودشان پیوند میدهند،
168
00:05:56,960 –> 00:05:58,400
169
00:05:58,400 –> 00:06:00,880
بنابراین اگر به فونتهای گوگل و موارد دیگر بروید
170
00:06:00,880 –> 00:06:02,400
و فونتی را انتخاب
171
00:06:02,400 –> 00:06:05,199
کنید، html و css را به شما نشان میدهد.
172
00:06:05,199 –> 00:06:06,000
برای استفاده از آن باید اضافه کنید
173
00:06:06,000 –> 00:06:08,479
، بنابراین فونت های گوگل منبع خوبی است، بنابراین کار
174
00:06:08,479 –> 00:06:09,919
دیگری که می خواهم انجام دهم این است که
175
00:06:09,919 –> 00:06:10,960
176
00:06:10,960 –> 00:06:13,039
این مشخصات را برای عرض و ارتفاع حذف می
177
00:06:13,039 –> 00:06:14,560
کنم و در واقع می خواهم آن را در
178
00:06:14,560 –> 00:06:16,080
179
00:06:16,080 –> 00:06:20,080
css تعریف کنم. میخواهم یک
180
00:06:20,080 –> 00:06:23,840
صفحه div بالای صفحه اضافه کنم، همه این
181
00:06:23,840 –> 00:06:24,800
موارد را در آن قرار میدهم
182
00:06:24,800 –> 00:06:27,280
و div را اسلش میکنم و سپس
183
00:06:27,280 –> 00:06:29,440
میخواهم همه چیز
184
00:06:29,440 –> 00:06:32,560
را در یک محتوای کلاس گروهبندی کنم و
185
00:06:32,560 –> 00:06:36,479
تورفتگی ایجاد کنم که div را ببندم اکنون میخواهم
186
00:06:36,479 –> 00:06:42,319
یک کلاس div برابر با نام کانال
187
00:06:42,319 –> 00:06:45,600
من باشد. من فقط آن را کانال یک
188
00:06:45,600 –> 00:06:47,039
189
00:06:47,039 –> 00:06:49,440
مینامم آن خط جدید را حذف کنید و من دوباره این کار را انجام میدهم
190
00:06:49,440 –> 00:06:52,000
191
00:06:53,199 –> 00:06:55,280
با آن کانال 2 تماس بگیرید. بنابراین میخواهم
192
00:06:55,280 –> 00:06:56,400
یک پیام هم اضافه
193
00:06:56,400 –> 00:06:59,280
کنم پیام کلاس برابر است I’m going to
194
00:06:59,280 –> 00:07:00,319
do the fluffy
195
00:07:00,319 –> 00:07:03,759
potato hello world
196
00:07:03,759 –> 00:07:07,360
این یک پیام است
197
00:07:07,360 –> 00:07:10,000
بسته div
198
00:07:10,800 –> 00:07:14,400
دومی را اضافه کنید و من آن را
199
00:07:14,400 –> 00:07:16,160
پیام دیگری مینامم که
200
00:07:16,160 –> 00:07:17,360
تمام شد
201
00:07:17,360 –> 00:07:18,960
، صفحه وب را مجدداً راهاندازی میکنم و به شما نشان
202
00:07:18,960 –> 00:07:20,160
203
00:07:20,160 –> 00:07:23,199
میدهم که چگونه به نظر میرسد اکنون ctrl shift r را انجام میدهم در واقع
204
00:07:23,199 –> 00:07:25,280
باید این را حذف کنم css چون
205
00:07:25,280 –> 00:07:27,440
منزجر کننده به نظر می رسد
206
00:07:27,440 –> 00:07:29,919
ctrl shift r و می بینید که این تصویر
207
00:07:29,919 –> 00:07:30,800
دوباره واقعاً بزرگ است
208
00:07:30,800 –> 00:07:33,520
زیرا من محدودیت های اندازه را
209
00:07:33,520 –> 00:07:33,919
بر روی آن حذف کردم
210
00:07:33,919 –> 00:07:35,440
بنابراین می خواهم اندازه این
211
00:07:35,440 –> 00:07:37,280
تصویر را در css تنظیم کنم و در یک لحظه به آن می
212
00:07:37,280 –> 00:07:37,759
رسم
213
00:07:37,759 –> 00:07:39,520
بنابراین می توانید ببینید که این تصویر
214
00:07:39,520 –> 00:07:41,440
وجود دارد، یک عنوان وجود دارد، در
215
00:07:41,440 –> 00:07:43,120
آنجا دو کانال ما وجود دارد، دو
216
00:07:43,120 –> 00:07:44,800
پیام ما جعبه متن
217
00:07:44,800 –> 00:07:47,520
و دکمه ارسال ما است، بنابراین حالا بیایید
218
00:07:47,520 –> 00:07:48,319
این تصویر را زیبا
219
00:07:48,319 –> 00:07:50,080
کنیم تا همه در فایل css
220
00:07:50,080 –> 00:07:51,680
باشد، بنابراین اولین چیزی که من من
221
00:07:51,680 –> 00:07:52,080
قصد دارم این کار را انجام دهم
222
00:07:52,080 –> 00:07:54,800
و من می خواهم
223
00:07:54,800 –> 00:07:55,919
خانواده فونت را
224
00:07:55,919 –> 00:07:57,759
به فونت google تغییر دهم من انتخاب کردم که
225
00:07:57,759 –> 00:07:59,919
فقط ربات است
226
00:07:59,919 –> 00:08:03,120
و می خواهم از نوع sans serif استفاده کنم
227
00:08:03,120 –> 00:08:06,400
نسخه Uh آن Uh
228
00:08:06,400 –> 00:08:09,680
حاشیه 0 پیکسل
229
00:08:09,680 –> 00:08:13,360
رنگ پس زمینه دو دو
230
00:08:13,360 –> 00:08:16,879
دو شش سه شش که فقط
231
00:08:16,879 –> 00:08:18,960
یک مقدار هگز است اگر می خواهید بدانید چگونه
232
00:08:18,960 –> 00:08:20,560
این انواع را بخوانید مقادیر متن به عنوان
233
00:08:20,560 –> 00:08:22,000
رنگ که من تا
234
00:08:22,000 –> 00:08:23,280
همین اواخر
235
00:08:23,280 –> 00:08:24,800
متوجه این موضوع نمیشدم، مطمئنم که اکثر مردم
236
00:08:24,800 –> 00:08:27,120
سریعتر از من متوجه این موضوع شدهاند، اما
237
00:08:27,120 –> 00:08:30,160
این فقط rgb است بهعنوان هگز،
238
00:08:30,160 –> 00:08:33,599
آبی قرمز سبز است، شما آن را به هگزا تبدیل میکنید
239
00:08:33,599 –> 00:08:34,640
و به
240
00:08:34,640 –> 00:08:39,200
uh میرود. 256. خوب 255 صفر تا 255.
241
00:08:39,200 –> 00:08:42,719
امم، اما این 22 نیست، هگز 22 است
242
00:08:42,719 –> 00:08:43,839
که یک عدد متفاوت است،
243
00:08:43,839 –> 00:08:47,680
من فکر می کنم که 2 ضربدر 16 به علاوه 2 است،
244
00:08:47,680 –> 00:08:51,040
بنابراین 34 یا چیزی شبیه به آن، به هر حال
245
00:08:51,040 –> 00:08:54,680
من همچنین می خواهم رنگ را در
246
00:08:54,680 –> 00:08:57,839
fffffff انجام دهم تا هگز بیشتر باشد. f
247
00:08:57,839 –> 00:08:59,440
بالاترین مقدار در هگز است بنابراین این در
248
00:08:59,440 –> 00:09:01,600
واقع به 256 256 می رسد
249
00:09:01,600 –> 00:09:05,120
متأسفم 255 255 255 که اگر می دانید
250
00:09:05,120 –> 00:09:09,279
rgb سفید است
251
00:09:09,279 –> 00:09:11,680
پس این چیزی است که اکنون دارم برای
252
00:09:11,680 –> 00:09:13,120
نشان دادن مواردی که باید
253
00:09:13,120 –> 00:09:15,600
زرد شود
254
00:09:15,760 –> 00:09:17,279
در واقع من نمی دانم فراموش کردم که
255
00:09:17,279 –> 00:09:19,839
واقعاً نیازی به راه اندازی مجدد سرور
256
00:09:19,839 –> 00:09:24,080
ندارید زیرا اینطور است به صورت پویا بارگذاری شده است،
257
00:09:24,080 –> 00:09:25,920
من فقط باید کنترل r را در css انجام دهم
258
00:09:25,920 –> 00:09:28,000
زیرا اوه این از پوشه استاتیک بارگیری می شود
259
00:09:28,000 –> 00:09:29,519
و
260
00:09:29,519 –> 00:09:31,200
از وب سایت به عنوان چیزی
261
00:09:31,200 –> 00:09:33,040
که توسط وب سایت ذخیره شده است ارائه نمی شود،
262
00:09:33,040 –> 00:09:35,040
بنابراین بله فقط به یاد داشته باشید که کنترل
263
00:09:35,040 –> 00:09:36,560
r را انجام دهید و ما آن را بهروزرسانی
264
00:09:36,560 –> 00:09:38,240
میکنیم، بنابراین ما قبلاً چیزی داریم که
265
00:09:38,240 –> 00:09:39,920
با فونت و همه چیز کمی بهتر به نظر میرسد،
266
00:09:39,920 –> 00:09:40,720
267
00:09:40,720 –> 00:09:44,080
بنابراین حالا بیایید هدر
268
00:09:44,080 –> 00:09:45,680
را با عنوان و تصویر و موارد دیگر سازماندهی کنیم،
269
00:09:45,680 –> 00:09:50,240
بنابراین من میخواهم بالای صفحه نقطهای را انجام دهم که
270
00:09:50,240 –> 00:09:54,240
div ما است. برای نام وب سایت
271
00:09:54,240 –> 00:09:56,320
و تصویر، بنابراین من می خواهم
272
00:09:56,320 –> 00:09:58,880
رنگ پس زمینه را
273
00:09:58,880 –> 00:10:02,079
به f3447 انجام دهم که کمی رنگ تیره
274
00:10:02,079 –> 00:10:02,560
275
00:10:02,560 –> 00:10:06,640
برای px است و سپس
276
00:10:06,640 –> 00:10:10,399
box shadow را انجام می دهم این فقط یک
277
00:10:10,399 –> 00:10:11,279
سایه
278
00:10:11,279 –> 00:10:16,079
3px 0px است. 3px 12px
279
00:10:16,079 –> 00:10:19,920
0px uh rgba صفر صفر صفر
280
00:10:19,920 –> 00:10:24,320
صفر نقطه پنج، بنابراین ما
281
00:10:24,320 –> 00:10:25,760
اینها را اندازه گیری هایی داریم که
282
00:10:25,760 –> 00:10:27,440
در آخرین ویدیو در مورد آنها صحبت کردم،
283
00:10:27,440 –> 00:10:29,440
بنابراین چندین نوع
284
00:10:29,440 –> 00:10:30,880
اندازه گیری در css
285
00:10:30,880 –> 00:10:33,200
وجود دارد، بنابراین پیکسل ها وجود دارد، همچنین کارهایی
286
00:10:33,200 –> 00:10:35,360
مانند اینچ سانتی متر انجام می شود
287
00:10:35,360 –> 00:10:38,079
و آنها فیزیکی هستند هر
288
00:10:38,079 –> 00:10:39,600
اینچ بر حسب سانتیمتر
289
00:10:39,600 –> 00:10:43,600
ام و همچنین وجود دارد مانند em vw
290
00:10:43,600 –> 00:10:46,880
درصد um
291
00:10:46,880 –> 00:10:48,720
من تقریباً مطمئن هستم که استفاده از پیکسل ها
292
00:10:48,720 –> 00:10:50,320
عمل بدی است، اما
293
00:10:50,320 –> 00:10:53,360
درک مقیاس اندازه گیری های مختلف برای افراد ساده ترین کار است
294
00:10:53,360 –> 00:10:55,120
295
00:10:55,120 –> 00:10:56,640
، قوانین متفاوتی برای آنها وجود دارد،
296
00:10:56,640 –> 00:10:58,720
بنابراین ارزش بررسی کردن را دارد.
297
00:10:58,720 –> 00:11:00,000
وقتی با
298
00:11:00,000 –> 00:11:03,120
اندازههای مختلف نمایشگرها سروکار داریم، احتمالاً
299
00:11:03,120 –> 00:11:04,560
از درصد در اینجا استفاده میکنم،
300
00:11:04,560 –> 00:11:07,440
اما امروز فقط از پیکسلها و درصد استفاده میکنم،
301
00:11:07,440 –> 00:11:08,560
302
00:11:08,560 –> 00:11:12,240
بنابراین از padding برای گفتن اینکه
303
00:11:12,240 –> 00:11:15,920
داخل یک شی چقدر فاصله باید
304
00:11:15,920 –> 00:11:18,240
وجود داشته باشد استفاده میشود. شیء قبل
305
00:11:18,240 –> 00:11:20,320
از رسیدن به داخل آشکار آن، بهترین راه
306
00:11:20,320 –> 00:11:21,839
برای نشان دادن این موضوع در واقع با
307
00:11:21,839 –> 00:11:23,839
مدل جعبه و ابزار عنصر بازرسی
308
00:11:23,839 –> 00:11:25,200
در مرورگر وب است، بنابراین من این را در اندکی به شما نشان خواهم داد
309
00:11:25,200 –> 00:11:26,079
310
00:11:26,079 –> 00:11:27,360
و شما ایده بهتری از آنچه خواهید داشت.
311
00:11:27,360 –> 00:11:29,680
منظورم این است که در اینجا حاشیه صفر
312
00:11:29,680 –> 00:11:30,480
پیکسل است
313
00:11:30,480 –> 00:11:32,399
که فقط به این دلیل است که اوه من یک
314
00:11:32,399 –> 00:11:33,600
دونقطه از دست داده ام
315
00:11:33,600 –> 00:11:36,800
اینجا فقط به این دلیل است که عنصر بدنه به
316
00:11:36,800 –> 00:11:37,279
طور پیش
317
00:11:37,279 –> 00:11:39,519
فرض مانند حاشیه هشت پیکسل است
318
00:11:39,519 –> 00:11:41,600
و حاشیه فاصله خارج از یک
319
00:11:41,600 –> 00:11:42,240
عنصر است.
320
00:11:42,240 –> 00:11:45,040
بین عناصر دیگر، بنابراین یک بار دیگر
321
00:11:45,040 –> 00:11:46,079
می توانید خورشید را در مدل جعبه ببینید،
322
00:11:46,079 –> 00:11:46,720
323
00:11:46,720 –> 00:11:48,000
اما فقط می دانید که به طور معمول می خواهید آن را
324
00:11:48,000 –> 00:11:50,240
حذف کنید و به طور پیش فرض اگر چیزی روی بدنه مشخص نکنید، مانند
325
00:11:50,240 –> 00:11:50,800
این
326
00:11:50,800 –> 00:11:53,279
327
00:11:53,279 –> 00:11:53,920
است،
328
00:11:53,920 –> 00:11:56,000
بنابراین من آن را روی رنگ پسزمینه صفر است،
329
00:11:56,000 –> 00:11:57,200
زیرا رنگ پسزمینه برای چیزی
330
00:11:57,200 –> 00:11:59,360
رنگ، رنگ عناصر
331
00:11:59,360 –> 00:12:00,399
داخل آن را مانند
332
00:12:00,399 –> 00:12:03,200
متن تعیین میکند، من فکر میکنم ممکن است فقط
333
00:12:03,200 –> 00:12:03,839
متن باشد،
334
00:12:03,839 –> 00:12:07,200
صدها یا هزاران
335
00:12:07,200 –> 00:12:09,920
فیلد css و چیزهایی برای به هم ریختگی
336
00:12:09,920 –> 00:12:10,880
337
00:12:10,880 –> 00:12:12,079
وجود دارد. واضح است که
338
00:12:12,079 –> 00:12:13,440
همه چیز را در اینجا پوشش نمیدهم، من فقط میخواهم
339
00:12:13,440 –> 00:12:15,519
آنچه را که با چیزی که روی جعبه کار میکنم مرتبط است، پوشش دهم.
340
00:12:15,519 –> 00:12:18,560
341
00:12:18,560 –> 00:12:21,600
342
00:12:21,600 –> 00:12:22,240
343
00:12:22,240 –> 00:12:25,440
344
00:12:25,440 –> 00:12:28,079
احتمالاً به
345
00:12:28,079 –> 00:12:30,880
اندازه گسترش یا چیزی
346
00:12:30,880 –> 00:12:31,440
شبیه به آن است،
347
00:12:31,440 –> 00:12:33,200
من مطمئناً به یاد میآورم که مانند یکی از
348
00:12:33,200 –> 00:12:35,200
آنها مقدار تاری است و سپس
349
00:12:35,200 –> 00:12:37,440
فکر میکنم این دو نقطه افست
350
00:12:37,440 –> 00:12:39,680
سایه هستند، بنابراین بیایید این را دوباره راهاندازی کنیم
351
00:12:39,680 –> 00:12:41,680
تا بتوانید ببینید چه چیزی دارم. حالا اگر
352
00:12:41,680 –> 00:12:44,320
من رسم تارت
353
00:12:44,320 –> 00:12:46,000
ما این آشفتگی را داریم، بنابراین میبینید که در
354
00:12:46,000 –> 00:12:48,639
اینجا کمی سایه
355
00:12:48,639 –> 00:12:50,720
وجود دارد، همچنین رنگ متفاوتی برای این
356
00:12:50,720 –> 00:12:52,320
عنصر وجود دارد و ما
357
00:12:52,320 –> 00:12:54,560
فاصله کمی بین تصویر
358
00:12:54,560 –> 00:12:55,839
و لبه صفحه داریم،
359
00:12:55,839 –> 00:12:58,320
همچنین به این دلیل که من حاشیه را تغییر دادم. روی
360
00:12:58,320 –> 00:12:58,880
بدنه
361
00:12:58,880 –> 00:13:00,160
همه چیز
362
00:13:00,160 –> 00:13:01,440
تا لبههای صفحهنمایش میرود و به همین دلیل است
363
00:13:01,440 –> 00:13:03,200
که هشت پیکسل پیشفرض وجود دارد
364
00:13:03,200 –> 00:13:06,160
تا برای
365
00:13:06,160 –> 00:13:07,600
افرادی که کارهای جدید انجام میدهند
366
00:13:07,600 –> 00:13:09,279
اینطور به نظر نرسد، کار کردن با آنها برای افراد سادهتر است.
367
00:13:09,279 –> 00:13:11,040
بهعنوان پیشفرض است،
368
00:13:11,040 –> 00:13:13,040
اما در مورد من، من آن پیکسلهای اضافی را نمیخواهم،
369
00:13:13,040 –> 00:13:14,560
370
00:13:14,560 –> 00:13:16,399
اکنون مدل جعبه را به شما نشان میدهم،
371
00:13:16,399 –> 00:13:18,720
بنابراین اگر به اینجا بروم،
372
00:13:18,720 –> 00:13:21,920
میتوانید حاشیه حاشیه را به صورت لایهبندی مشاهده کنید،
373
00:13:21,920 –> 00:13:24,160
بنابراین حاشیه، فاصله خارج از
374
00:13:24,160 –> 00:13:26,240
یک عنصر بین عناصر دیگر
375
00:13:26,240 –> 00:13:28,320
uh و padding یک فضای
376
00:13:28,320 –> 00:13:30,079
داخلی است قبل از اینکه
377
00:13:30,079 –> 00:13:32,000
محتویات عنصر را ببینید و سپس
378
00:13:32,000 –> 00:13:33,279
محتویات عنصر وجود دارد، بنابراین
379
00:13:33,279 –> 00:13:34,959
در مورد من بالشتک صفر است، اما
380
00:13:34,959 –> 00:13:36,399
من معتقدم که می توانم
381
00:13:36,399 –> 00:13:38,160
یک بالشتک اضافی از آن را وارد کنم. مانند
382
00:13:38,160 –> 00:13:40,240
10 پیکسل این عالی است ابزاری برای
383
00:13:40,240 –> 00:13:41,519
آزمایش کردن چیزها
384
00:13:41,519 –> 00:13:44,160
به طور معمول وقتی
385
00:13:44,160 –> 00:13:46,320
css می نویسم ابتدا آن را در مرورگر
386
00:13:46,320 –> 00:13:46,639
387
00:13:46,639 –> 00:13:47,760
می نویسم تا بتوانم با چیزها سر و کله بزنم زیرا
388
00:13:47,760 –> 00:13:48,880
معمولاً همه چیز کار نمی کند
389
00:13:48,880 –> 00:13:50,800
ابتدا سعی کنید این دقیقاً به نوعی
390
00:13:50,800 –> 00:13:52,480
css است. کاری را که می خواهید انجام دهید ابتدا
391
00:13:52,480 –> 00:13:54,399
به طور معمول سعی کنید تا به نوعی با
392
00:13:54,399 –> 00:13:54,800
393
00:13:54,800 –> 00:13:56,079
موارد موجود در مرورگر قاطی کنید و
394
00:13:56,079 –> 00:13:57,760
بعد از خوشحالی آن را در فایل کپی کنید.
395
00:13:57,760 –> 00:13:59,279
396
00:13:59,279 –> 00:14:01,839
397
00:14:01,839 –> 00:14:02,880
در خارج،
398
00:14:02,880 –> 00:14:04,639
بنابراین شما می توانید به نوعی تصور کنید که
399
00:14:04,639 –> 00:14:06,720
مرز واقعی عنصر کجاست
400
00:14:06,720 –> 00:14:08,160
و بنابراین ممکن است از خود بپرسید که
401
00:14:08,160 –> 00:14:09,519
چرا به فضا در داخل و
402
00:14:09,519 –> 00:14:11,199
فاصله در خارج اهمیت می دهید،
403
00:14:11,199 –> 00:14:12,800
اگر واقعاً فاصله زیادی
404
00:14:12,800 –> 00:14:14,000
بین این عنصر وجود ندارد. چیزی بین این
405
00:14:14,000 –> 00:14:14,720
حاشیه است
406
00:14:14,720 –> 00:14:16,959
که می تواند رندر شود ام من در واقع می توانم
407
00:14:16,959 –> 00:14:17,920
یکی را به شما نشان
408
00:14:17,920 –> 00:14:22,079
دهم صفحه
409
00:14:22,240 –> 00:14:26,079
را انجام می دهم، بیایید عنوان صفحه را انجام دهیم، فکر می
410
00:14:26,079 –> 00:14:27,920
کنم این همان چیزی است که
411
00:14:27,920 –> 00:14:30,240
نامش را گذاشته اند، مرز
412
00:14:30,240 –> 00:14:33,360
یک px
413
00:14:33,360 –> 00:14:36,079
سبز ثابت انجام می دهیم، بنابراین در اینجا حاشیه است تا بتوانید
414
00:14:36,079 –> 00:14:37,120
واقعاً چیزها را بهتر می بینید
415
00:14:37,120 –> 00:14:39,519
پس پد ing در داخل است، اوه من باید
416
00:14:39,519 –> 00:14:40,720
padding
417
00:14:40,720 –> 00:14:43,440
padding را به mpx اضافه کنم تا بله، padding در
418
00:14:43,440 –> 00:14:44,880
419
00:14:44,880 –> 00:14:48,560
حاشیه حاشیه داخلی نیز مانند سایه کادر
420
00:14:48,560 –> 00:14:52,399
بالای صفحه ما در اینجا که نسبت
421
00:14:52,399 –> 00:14:55,920
به لبه است، بنابراین چیزهای بیرونی داخلی
422
00:14:55,920 –> 00:14:57,920
واقعاً مهم هستند. به
423
00:14:57,920 –> 00:14:59,360
عنوان مثال، اگر این حاشیه را تغییر دهم، می
424
00:14:59,360 –> 00:15:01,600
بینید که چه اتفاقی برای آن حاشیه می افتد، آن مرز
425
00:15:01,600 –> 00:15:03,920
واقعاً به آن نزدیک می شود، اما
426
00:15:03,920 –> 00:15:05,120
همه چیزهای دیگر خیلی تغییر نمی کند، از نظر
427
00:15:05,120 –> 00:15:05,680
428
00:15:05,680 –> 00:15:08,639
فنی خوب تغییر می کند، زیرا
429
00:15:08,639 –> 00:15:09,279
این
430
00:15:09,279 –> 00:15:12,639
عنوان یک حاشیه داخلی دارد، اما اگر من
431
00:15:12,639 –> 00:15:18,160
حاشیه 0px را انجام دهید و سپس
432
00:15:18,160 –> 00:15:22,240
اگر 10 در 0 انجام دهم این کار را انجام
433
00:15:22,880 –> 00:15:25,440
می دهم که اساساً یکسان است
434
00:15:25,440 –> 00:15:26,720
به جز اینکه تخته به تازگی جابجا شده است،
435
00:15:26,720 –> 00:15:28,560
اما بسیاری از تنظیماتی که می توانید
436
00:15:28,560 –> 00:15:30,800
با css انجام دهید
437
00:15:30,800 –> 00:15:33,360
بستگی به این دارد که آن مرز در واقع کجاست،
438
00:15:33,360 –> 00:15:34,079
بنابراین
439
00:15:34,079 –> 00:15:37,199
فقط مرز نیست. گزینه ای وجود دارد
440
00:15:37,199 –> 00:15:38,639
مانند بله همانطور که گفتم افزودنی سایه جعبه نیز
441
00:15:38,639 –> 00:15:40,480
نسبت به آن است و
442
00:15:40,480 –> 00:15:42,240
در یک لحظه خواهید دید که من از آن بهره می
443
00:15:42,240 –> 00:15:43,839
برم، بنابراین من قصد دارم لوگوی صفحه را تغییر
444
00:15:43,839 –> 00:15:46,959
دهم که همان تصویر
445
00:15:46,959 –> 00:15:50,639
صفحه نمایش بیسکویی عرض درونی
446
00:15:50,639 –> 00:15:54,000
32 است. ارتفاع پیکسل 32
447
00:15:54,000 –> 00:15:57,519
پیکسل و i می خواهم
448
00:15:57,519 –> 00:16:01,279
عنوان صفحه را به صورت
449
00:16:01,440 –> 00:16:05,120
درون خطی نمایش دهم، بنابراین نمایش درون خطی آن چیزی را انجام می دهد
450
00:16:05,120 –> 00:16:06,160
که به نظر می
451
00:16:06,160 –> 00:16:08,639
رسد باعث می شود عناصر
452
0