Summarize this content to 400 words in Persian Lang
پیشرفت امروز
در دستور کار امروز پس زمینه ها، حاشیه ها و رنگ ها هستند. این درس با دو ویدیو در مورد این موضوعات آغاز می شود. ابتدا Adda در مورد CSS و رنگ صحبت می کند.
او نحوه افزودن رنگ را با استفاده از خاصیت رنگ توضیح می دهد. در ویدیوی دوم، او توضیح می دهد که چگونه پس زمینه ها و حاشیه ها را می توان به یک وب سایت اضافه کرد. اینجاست که او ویژگی‌های CSS را که می‌توانید برای پس‌زمینه‌ها و حاشیه‌ها استفاده کنید، معرفی می‌کند.
پس زمینه ها
پس زمینه پیش فرض یک پس زمینه در یک وب سایت شفاف است. بنابراین اغلب در مرورگر وب سفید به نظر می رسد. با این حال، اگر دوست دارید از CSS استفاده کنید، می توانید رنگ پس زمینه را تغییر دهید.
تنها کاری که باید انجام دهید این است که از ویژگی پس زمینه استفاده کنید. بعد از کولون، نام رنگ یا کد هگزادسیمال را به عنوان مقدار قرار دهید.
افزودن تصویر پس زمینه
دو راه برای افزودن تصویر پس زمینه وجود دارد: URL نسبی و URL مطلق. صرف نظر از نوع یا URLی که می خواهید استفاده کنید، باید از ویژگی پس زمینه استفاده کنید و مقدار url() را بعد از کولون اختصاص دهید. در داخل url() جایی است که URL مورد نظر خود را قرار می دهید.
مطمئن شوید که URL را در گیومه قرار دهید. می توانید از نقل قول های تکی یا دوگانه استفاده کنید. URL نسبی مسیر فایلی است که می گوید فایل تصویر از جایی که فایل کد شما قرار دارد کجاست.
اگر تصویر در پوشه پروژه شما باشد، از این نوع URL در مقدار ()url استفاده خواهید کرد. با این حال، اگر از یک ویرایشگر متن آنلاین استفاده می کنید، از URL مطلق استفاده خواهید کرد. URL مطلق مسیری به یک فایل تصویری در یک وب سایت یا وب سرور دیگر است.
اگر می خواهید از یک تصویر پس زمینه استفاده کنید، باید از ویژگی هایی مانند تکرار، موقعیت پس زمینه و رنگ پس زمینه استفاده کنید. وب‌سایت‌های پیش‌فرض تصویر را چندین بار تکرار می‌کنند. اگر نمی خواهید تصاویر تکرار شوند، می توانید بدون تکرار را به مقدار ویژگی پس زمینه خود اضافه کنید.
body {
background: url(“https://images.pexels.com/photos/1323550/pexels-photo-1323550.jpeg?cs=srgb&dl=pexels-simon-berger-1323550.jpg&fm=jpg”) no-repeat;
}
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
اضافه کردن مقدار تکرار ضروری نیست، اما Skillcrush به دانش‌آموزان توصیه می‌کند که اگر قصد تغییر مقدار را دارند، آن را اضافه کنند. به علاوه برای توسعه دهندگان جدید خوب است که ببینند آیا تازه شروع به کار کرده اند و می خواهند مطمئن شوند که یک تصویر پس زمینه را تکرار می کنند.
ایده خوبی است که یک رنگ بازگشتی در جای خود داشته باشید زیرا گاهی اوقات تصاویر بارگذاری نمی شوند یا اگر تصویر شفاف است. موقعیت پس‌زمینه کمی سخت‌تر است، زیرا مقدار تصویر بر اساس نسبت صفحه‌نمایش سایت است. Skillcrush می گوید که به نوعی شبیه کاغذ دیواری است.
این جایی است که اندازه پس زمینه وارد عمل می شود. عرض تصویر را تعیین می کند. بسیاری از توسعه دهندگان تصاویر پس زمینه را روی مقدار جلد تنظیم می کنند که تصویر را تا ارتفاع و عرض ظرف گسترش می دهد. تکنیک دیگر موقعیت پس زمینه است.
تصویر را در صفحه قرار می دهد. بسیاری از توسعه دهندگان از مقدار مرکزی برای تصاویر پس زمینه استفاده می کنند. Skillcrush با ساختن پس‌زمینه کاشی‌شده با استفاده از نمادهای قلب، این موضوع را از بین میبرد. این باعث می شود که شبیه به تکرار الگوی کاغذ دیواری به نظر برسد.
مرزها
حاشیه راه دیگری برای اضافه کردن سبک به وب سایت شما است. می توانید با قرار دادن ویژگی border در بلوک CSS مورد نظر خود یک حاشیه به وب سایت خود اضافه کنید. مقدار خاصیت حاشیه عرض، سبک و رنگ است. عرض به عددی با مقدار پیکسل (px) نیاز دارد.
بسیاری از سبک های حاشیه مختلف برای انتخاب وجود دارد. مواردی که می توانید انتخاب کنید عبارتند از:
نقطه چین
خط خورده
جامد
دو برابر کردن
شیار
اگر رنگی برای حاشیه خود می خواهید، رنگ را روی نام رنگ یا کد هگزادسیمال تنظیم کنید. اگر می‌خواهید حاشیه‌ای را در سمت خاصی قرار دهید یا اندازه حاشیه خاصی را سفارشی کنید، می‌توانید از ویژگی‌های CSS مانند border-bottom، border-top، border-left و border-right استفاده کنید.
یکی دیگر از توسعه دهندگان دارایی که دوست دارند با مرزها استفاده کنند، شعاع مرزی است. این ویژگی گوشه های حاشیه ها را گرد می کند تا انحنای بیشتری داشته باشند. ویژگی border-radius را به بلوک CSS خود اضافه کنید.
در مرحله بعد، تعداد پیکسل های مورد نظر خود را برای مقدار قرار دهید. همیشه به یاد داشته باشید که هرچه پیکسل های بیشتری برای مقدار خود قرار دهید، گوشه ها گردتر خواهند بود.
رنگ
رنگ فقط برای متن نیست. همچنین برای حاشیه ها و پس زمینه ها استفاده می شود. در روزهای اولیه وب، رنگ های زیادی برای انتخاب وجود نداشت. اینها رنگهای ایمن برای وب هستند.
اینها رنگ هایی مانند سیاه، قرمز و حتی فوشیا هستند. امروزه رنگ های زیادی وجود دارد که می توانید انتخاب کنید. با این حال، Skillcrush یک دقیقه طول می کشد تا در مورد تضاد رنگ صحبت کند.
کنتراست به معنای درخشندگی (روشنایی) بین دو عنصر استایل است. این بدان معناست که در یک وب سایت باید تضاد خوبی بین عناصر پیش زمینه (آیکون های فکر، متن، تصاویر و غیره) و عناصر پس زمینه وجود داشته باشد. کنتراست در وب سایت ها خوب است زیرا باعث می شود همه چیز در یک سایت به راحتی دیده شود.
اگر چیزهای پیش زمینه و پس زمینه خیلی شبیه به هم باشند، خواندن آن بسیار سخت خواهد بود. Skillcrush با داشتن متن روی همان پس‌زمینه آبی تیره نشان می‌دهد. یکی سفید و دیگری سبز است.
اگر می خواهید دسترسی در وب سایت خود را بهبود بخشید، کنتراست راه دیگری برای انجام این کار است. کنتراست برای افرادی که نیازهای بصری دارند بسیار مهم است. من این روزها بیشتر با رنگ درگیر هستم و دیدن رنگ در برخی رنگهای پس‌زمینه (مثلا سیاه روی قرمز) برایم سخت‌تر است.
بنابراین توسعه دهندگان باید مراقب رنگ های متضاد باشند. یک راه خوب برای اطمینان از اینکه کنتراست رنگ شما کار می کند، آزمایش خوب است. این به معنای آزمایش آن با تعداد زیادی از کاربران نیست.
سایت خود را در یک اتاق با نور خوب و همچنین بیرون در یک روز آفتابی آزمایش کنید. یک تضاد رنگ خوب در هر شرایطی کار خواهد کرد. سپس Skillcrush سطوح و نسبت‌های کنتراست رنگ را توضیح می‌دهد.
دستورالعمل های دسترسی به محتوای وب (WCA) از محاسبات مختلفی برای تعیین روشنایی یک وب سایت استفاده می کند. این به معنای “روشنایی نسبی هر نقطه در فضای رنگی” است. برای انجام این کار، کنترل‌کننده‌های کنتراست وجود دارند که می‌توانند میزان درخشندگی وب‌سایت شما را محاسبه و رتبه‌بندی کنند.
اگر به این رتبه بندی ها نگاه کنید، سطح AA یا AAA دریافت خواهید کرد. بهترین رتبه AAA است، بنابراین اگر می خواهید رتبه بالایی داشته باشید، این همان چیزی است که می خواهید. هنگامی که به رتبه بندی درخشندگی نگاه می کنید، چیزی شبیه “8.59.1” یا “3.1” خواهید دید.
این نسبتی است که برای اندازه گیری رنگ ها استفاده می شود. بنابراین یک وب سایت با رتبه AA دارای نسبت 4:5:1 برای متن معمولی و 3:1 برای متن بزرگتر است. یک وب سایت با رتبه AAA 7:1 برای متن معمولی و 4:5:1 برای بزرگ است.
این بدان معناست که متن بزرگ 24 پیکسل با وزن فونت معمولی یا حدود 18 با وزن قلم پررنگ است. این فقط نشان می دهد که استانداردهای متن معمولی و بزرگتر با کنتراست رنگ اهمیت دارند. این متن را بزرگتر می‌کند یا از وزن قلم پررنگ‌تر در یک وب‌سایت استفاده می‌کند.
آزمون و کدنویسی
در مسابقه امروز عالی عمل کردم. امروز فقط یک سوال را از دست دادم. من ریج را برای یکی از سبک های مورد استفاده برای ویژگی های حاشیه فراموش کردم.
دو فعالیت کدنویسی امروز اعمال پس‌زمینه، حاشیه‌ها و رنگ‌ها در وب‌سایت بود. یک چالش جایزه وجود داشت که در آن دانش‌آموزان می‌توانستند کنتراست رنگ را بررسی کنند و ببینند که آیا رتبه AAA را دریافت کرده‌اند یا خیر. فعالیت های کدگذاری به خوبی پیش رفت.
وقت گذاشتم تا کمی با رنگ ها بازی کنم و ببینم که ترکیبات خاصی در وب چگونه کار می کنند. من روی کسب رتبه AAA برای این چالش تمرکز نکردم، اما هر دو بررسی رنگی که Skillcrush توصیه می‌کرد را امتحان کردم تا ببینم چگونه هستند و چه چیزی همراه با رتبه‌بندی است. هر دو سایت امتیازات بسیار مشابهی را برای رنگ های پیش زمینه و پس زمینه یکسان دریافت کردند.
چکرزها اطلاعات خوبی همراه با رتبه‌بندی‌هایشان به من دادند، بنابراین در پروژه‌های آینده دوباره از یکی از آنها استفاده خواهم کرد. همه توسعه‌دهندگان باید در پروژه‌های خود با کنترل‌کننده‌های کنتراست بازی کنند تا خواندن این رتبه‌بندی‌ها را تمرین کنند و ببینند چگونه کار می‌کنند.
برنامه فردا
بررسی CSS با ابعاد و مدل جعبه ادامه دارد. در این درس نحوه استفاده از CSS برای تغییر اندازه و قرارگیری عناصر HTML توضیح داده خواهد شد. دانش آموزان فرصتی برای استفاده از ویژگی های ارتفاع، عرض، حاشیه و padding در بلوک های CSS خواهند داشت.
اینجاست که CSS می تواند کمی مشکل پیدا کند. بنابراین خوب است که در این مرحله احساس ناامیدی کنید. به یاد داشته باشید که اگر به بررسی بیشتری نیاز دارید، در خواندن برخی از پست‌های سری Skillcrush 101 تردید نکنید.
منابع
بررسی کنتراست رنگ WebAIMرنگ.بررسی ColorZillaسوالات متداول Skillcrush: URL های نسبی در مقابل URL های مطلق چیست؟
پیشرفت امروز
در دستور کار امروز پس زمینه ها، حاشیه ها و رنگ ها هستند. این درس با دو ویدیو در مورد این موضوعات آغاز می شود. ابتدا Adda در مورد CSS و رنگ صحبت می کند.
او نحوه افزودن رنگ را با استفاده از خاصیت رنگ توضیح می دهد. در ویدیوی دوم، او توضیح می دهد که چگونه پس زمینه ها و حاشیه ها را می توان به یک وب سایت اضافه کرد. اینجاست که او ویژگی‌های CSS را که می‌توانید برای پس‌زمینه‌ها و حاشیه‌ها استفاده کنید، معرفی می‌کند.
پس زمینه ها
پس زمینه پیش فرض یک پس زمینه در یک وب سایت شفاف است. بنابراین اغلب در مرورگر وب سفید به نظر می رسد. با این حال، اگر دوست دارید از CSS استفاده کنید، می توانید رنگ پس زمینه را تغییر دهید.
تنها کاری که باید انجام دهید این است که از ویژگی پس زمینه استفاده کنید. بعد از کولون، نام رنگ یا کد هگزادسیمال را به عنوان مقدار قرار دهید.
افزودن تصویر پس زمینه
دو راه برای افزودن تصویر پس زمینه وجود دارد: URL نسبی و URL مطلق. صرف نظر از نوع یا URLی که می خواهید استفاده کنید، باید از ویژگی پس زمینه استفاده کنید و مقدار url() را بعد از کولون اختصاص دهید. در داخل url() جایی است که URL مورد نظر خود را قرار می دهید.
مطمئن شوید که URL را در گیومه قرار دهید. می توانید از نقل قول های تکی یا دوگانه استفاده کنید. URL نسبی مسیر فایلی است که می گوید فایل تصویر از جایی که فایل کد شما قرار دارد کجاست.
اگر تصویر در پوشه پروژه شما باشد، از این نوع URL در مقدار ()url استفاده خواهید کرد. با این حال، اگر از یک ویرایشگر متن آنلاین استفاده می کنید، از URL مطلق استفاده خواهید کرد. URL مطلق مسیری به یک فایل تصویری در یک وب سایت یا وب سرور دیگر است.
اگر می خواهید از یک تصویر پس زمینه استفاده کنید، باید از ویژگی هایی مانند تکرار، موقعیت پس زمینه و رنگ پس زمینه استفاده کنید. وب‌سایت‌های پیش‌فرض تصویر را چندین بار تکرار می‌کنند. اگر نمی خواهید تصاویر تکرار شوند، می توانید بدون تکرار را به مقدار ویژگی پس زمینه خود اضافه کنید.
body {
background: url("https://images.pexels.com/photos/1323550/pexels-photo-1323550.jpeg?cs=srgb&dl=pexels-simon-berger-1323550.jpg&fm=jpg") no-repeat;
}
اضافه کردن مقدار تکرار ضروری نیست، اما Skillcrush به دانش‌آموزان توصیه می‌کند که اگر قصد تغییر مقدار را دارند، آن را اضافه کنند. به علاوه برای توسعه دهندگان جدید خوب است که ببینند آیا تازه شروع به کار کرده اند و می خواهند مطمئن شوند که یک تصویر پس زمینه را تکرار می کنند.
ایده خوبی است که یک رنگ بازگشتی در جای خود داشته باشید زیرا گاهی اوقات تصاویر بارگذاری نمی شوند یا اگر تصویر شفاف است. موقعیت پس‌زمینه کمی سخت‌تر است، زیرا مقدار تصویر بر اساس نسبت صفحه‌نمایش سایت است. Skillcrush می گوید که به نوعی شبیه کاغذ دیواری است.
این جایی است که اندازه پس زمینه وارد عمل می شود. عرض تصویر را تعیین می کند. بسیاری از توسعه دهندگان تصاویر پس زمینه را روی مقدار جلد تنظیم می کنند که تصویر را تا ارتفاع و عرض ظرف گسترش می دهد. تکنیک دیگر موقعیت پس زمینه است.
تصویر را در صفحه قرار می دهد. بسیاری از توسعه دهندگان از مقدار مرکزی برای تصاویر پس زمینه استفاده می کنند. Skillcrush با ساختن پس‌زمینه کاشی‌شده با استفاده از نمادهای قلب، این موضوع را از بین میبرد. این باعث می شود که شبیه به تکرار الگوی کاغذ دیواری به نظر برسد.
مرزها
حاشیه راه دیگری برای اضافه کردن سبک به وب سایت شما است. می توانید با قرار دادن ویژگی border در بلوک CSS مورد نظر خود یک حاشیه به وب سایت خود اضافه کنید. مقدار خاصیت حاشیه عرض، سبک و رنگ است. عرض به عددی با مقدار پیکسل (px) نیاز دارد.
بسیاری از سبک های حاشیه مختلف برای انتخاب وجود دارد. مواردی که می توانید انتخاب کنید عبارتند از:
- نقطه چین
- خط خورده
- جامد
- دو برابر کردن
- شیار
اگر رنگی برای حاشیه خود می خواهید، رنگ را روی نام رنگ یا کد هگزادسیمال تنظیم کنید. اگر می‌خواهید حاشیه‌ای را در سمت خاصی قرار دهید یا اندازه حاشیه خاصی را سفارشی کنید، می‌توانید از ویژگی‌های CSS مانند border-bottom، border-top، border-left و border-right استفاده کنید.
یکی دیگر از توسعه دهندگان دارایی که دوست دارند با مرزها استفاده کنند، شعاع مرزی است. این ویژگی گوشه های حاشیه ها را گرد می کند تا انحنای بیشتری داشته باشند. ویژگی border-radius را به بلوک CSS خود اضافه کنید.
در مرحله بعد، تعداد پیکسل های مورد نظر خود را برای مقدار قرار دهید. همیشه به یاد داشته باشید که هرچه پیکسل های بیشتری برای مقدار خود قرار دهید، گوشه ها گردتر خواهند بود.
رنگ
رنگ فقط برای متن نیست. همچنین برای حاشیه ها و پس زمینه ها استفاده می شود. در روزهای اولیه وب، رنگ های زیادی برای انتخاب وجود نداشت. اینها رنگهای ایمن برای وب هستند.
اینها رنگ هایی مانند سیاه، قرمز و حتی فوشیا هستند. امروزه رنگ های زیادی وجود دارد که می توانید انتخاب کنید. با این حال، Skillcrush یک دقیقه طول می کشد تا در مورد تضاد رنگ صحبت کند.
کنتراست به معنای درخشندگی (روشنایی) بین دو عنصر استایل است. این بدان معناست که در یک وب سایت باید تضاد خوبی بین عناصر پیش زمینه (آیکون های فکر، متن، تصاویر و غیره) و عناصر پس زمینه وجود داشته باشد. کنتراست در وب سایت ها خوب است زیرا باعث می شود همه چیز در یک سایت به راحتی دیده شود.
اگر چیزهای پیش زمینه و پس زمینه خیلی شبیه به هم باشند، خواندن آن بسیار سخت خواهد بود. Skillcrush با داشتن متن روی همان پس‌زمینه آبی تیره نشان می‌دهد. یکی سفید و دیگری سبز است.
اگر می خواهید دسترسی در وب سایت خود را بهبود بخشید، کنتراست راه دیگری برای انجام این کار است. کنتراست برای افرادی که نیازهای بصری دارند بسیار مهم است. من این روزها بیشتر با رنگ درگیر هستم و دیدن رنگ در برخی رنگهای پس‌زمینه (مثلا سیاه روی قرمز) برایم سخت‌تر است.
بنابراین توسعه دهندگان باید مراقب رنگ های متضاد باشند. یک راه خوب برای اطمینان از اینکه کنتراست رنگ شما کار می کند، آزمایش خوب است. این به معنای آزمایش آن با تعداد زیادی از کاربران نیست.
سایت خود را در یک اتاق با نور خوب و همچنین بیرون در یک روز آفتابی آزمایش کنید. یک تضاد رنگ خوب در هر شرایطی کار خواهد کرد. سپس Skillcrush سطوح و نسبت‌های کنتراست رنگ را توضیح می‌دهد.
دستورالعمل های دسترسی به محتوای وب (WCA) از محاسبات مختلفی برای تعیین روشنایی یک وب سایت استفاده می کند. این به معنای “روشنایی نسبی هر نقطه در فضای رنگی” است. برای انجام این کار، کنترل‌کننده‌های کنتراست وجود دارند که می‌توانند میزان درخشندگی وب‌سایت شما را محاسبه و رتبه‌بندی کنند.
اگر به این رتبه بندی ها نگاه کنید، سطح AA یا AAA دریافت خواهید کرد. بهترین رتبه AAA است، بنابراین اگر می خواهید رتبه بالایی داشته باشید، این همان چیزی است که می خواهید. هنگامی که به رتبه بندی درخشندگی نگاه می کنید، چیزی شبیه “8.59.1” یا “3.1” خواهید دید.
این نسبتی است که برای اندازه گیری رنگ ها استفاده می شود. بنابراین یک وب سایت با رتبه AA دارای نسبت 4:5:1 برای متن معمولی و 3:1 برای متن بزرگتر است. یک وب سایت با رتبه AAA 7:1 برای متن معمولی و 4:5:1 برای بزرگ است.
این بدان معناست که متن بزرگ 24 پیکسل با وزن فونت معمولی یا حدود 18 با وزن قلم پررنگ است. این فقط نشان می دهد که استانداردهای متن معمولی و بزرگتر با کنتراست رنگ اهمیت دارند. این متن را بزرگتر می‌کند یا از وزن قلم پررنگ‌تر در یک وب‌سایت استفاده می‌کند.
آزمون و کدنویسی
در مسابقه امروز عالی عمل کردم. امروز فقط یک سوال را از دست دادم. من ریج را برای یکی از سبک های مورد استفاده برای ویژگی های حاشیه فراموش کردم.
دو فعالیت کدنویسی امروز اعمال پس‌زمینه، حاشیه‌ها و رنگ‌ها در وب‌سایت بود. یک چالش جایزه وجود داشت که در آن دانش‌آموزان می‌توانستند کنتراست رنگ را بررسی کنند و ببینند که آیا رتبه AAA را دریافت کرده‌اند یا خیر. فعالیت های کدگذاری به خوبی پیش رفت.
وقت گذاشتم تا کمی با رنگ ها بازی کنم و ببینم که ترکیبات خاصی در وب چگونه کار می کنند. من روی کسب رتبه AAA برای این چالش تمرکز نکردم، اما هر دو بررسی رنگی که Skillcrush توصیه می‌کرد را امتحان کردم تا ببینم چگونه هستند و چه چیزی همراه با رتبه‌بندی است. هر دو سایت امتیازات بسیار مشابهی را برای رنگ های پیش زمینه و پس زمینه یکسان دریافت کردند.
چکرزها اطلاعات خوبی همراه با رتبه‌بندی‌هایشان به من دادند، بنابراین در پروژه‌های آینده دوباره از یکی از آنها استفاده خواهم کرد. همه توسعه‌دهندگان باید در پروژه‌های خود با کنترل‌کننده‌های کنتراست بازی کنند تا خواندن این رتبه‌بندی‌ها را تمرین کنند و ببینند چگونه کار می‌کنند.
برنامه فردا
بررسی CSS با ابعاد و مدل جعبه ادامه دارد. در این درس نحوه استفاده از CSS برای تغییر اندازه و قرارگیری عناصر HTML توضیح داده خواهد شد. دانش آموزان فرصتی برای استفاده از ویژگی های ارتفاع، عرض، حاشیه و padding در بلوک های CSS خواهند داشت.
اینجاست که CSS می تواند کمی مشکل پیدا کند. بنابراین خوب است که در این مرحله احساس ناامیدی کنید. به یاد داشته باشید که اگر به بررسی بیشتری نیاز دارید، در خواندن برخی از پست‌های سری Skillcrush 101 تردید نکنید.
منابع
بررسی کنتراست رنگ WebAIM
رنگ.بررسی
ColorZilla
سوالات متداول Skillcrush: URL های نسبی در مقابل URL های مطلق چیست؟
