آموزش CSS مبتدی : پسزمینهها و حاشیهها
در این درس، نگاهی به برخی از کارهای خلاقانهای که میتوانید با پسزمینهها و حاشیههای CSS انجام دهید، خواهیم انداخت. از اضافه کردن گرادیانها، تصاویر پسزمینه و گوشههای گرد گرفته تا پسزمینهها و حاشیهها، پاسخ بسیاری از سوالات مربوط به استایلدهی در CSS هستند.
ویژگی رنگ پسزمینه هر عنصری در CSS را تعریف میکند. این ویژگی هر معتبری را میپذیرد. یک در زیر محتوا و کادر عنصر امتداد مییابد.
در مثال زیر، ما از مقادیر رنگی مختلفی برای اضافه کردن رنگ پسزمینه به کادر، یک عنوان و یک عنصر استفاده کردهایم.
سعی کنید مثال را ویرایش کنید و رنگهای مشخص شده را با هر مقدار <color> موجود جایگزین کنید.
ویژگی امکان نمایش یک تصویر در پسزمینه یک عنصر را فراهم میکند. در مثال زیر، دو کادر داریم - یکی تصویر پسزمینهای دارد که از کادر بزرگتر است (). دیگری تصویر کوچکی از یک ستاره دارد ().
این مثال دو نکته را در مورد تصاویر پسزمینه نشان میدهد. به طور پیشفرض، تصویر بزرگ برای قرار گرفتن در کادر کوچک نمیشود، بنابراین ما فقط گوشه کوچکی از آن را میبینیم، در حالی که تصویر کوچک به صورت کاشیکاری شده در کادر قرار میگیرد.
اگر علاوه بر تصویر پسزمینه، رنگ پسزمینه را نیز مشخص کنید، تصویر روی رنگ نمایش داده میشود. برای مشاهدهی عملکرد آن، ویژگی را به مثال بالا اضافه کنید.
ویژگی برای کنترل رفتار کاشیکاری تصاویر استفاده میشود. مقادیر موجود عبارتند از:
no-repeat - از تکرار کامل پسزمینه جلوگیری میکند.
repeat-x - به صورت افقی تکرار میشود.
repeat-y - به صورت عمودی تکرار میشود.
repeat - پیشفرض؛ تکرار در هر دو جهت.
space - تا حد امکان تکرار میشود و در صورت وجود فضای اضافی، بین تصاویر فاصله اضافه میشود.
round - مشابه space است، اما تصاویر را برای پر کردن هر فضای اضافی امتداد میدهد.
این مقادیر را در مثال زیر امتحان کنید. ما مقدار را روی تنظیم کردهایم، بنابراین فقط یک ستاره خواهید دید. مقادیر مختلف را امتحان کنید تا ببینید چه تاثیری دارند.
اندازه بندی تصویر پس زمینه
تصویر که در مثال اولیه تصویر پسزمینه استفاده شده است، یک تصویر بزرگ است که به دلیل بزرگتر بودن از عنصری که پسزمینه آن است، برش داده شده است. در این حالت، میتوانیم از ویژگی برای اندازه دادن به تصویر استفاده کنیم تا در داخل پسزمینه قرار گیرد.
میتواند دو مقدار یا را برای تعیین اندازه تصویر در جهتهای افقی و عمودی یا کلمات کلیدی زیر بپذیرد:
cover — مرورگر تصویر را به اندازهای بزرگ میکند که به طور کامل ناحیه کادر را بپوشاند و در عین حال نسبت ابعاد آن را حفظ کند. در این حالت، احتمالاً بخشی از تصویر خارج از کادر قرار میگیرد.
contain — مرورگر تصویر را به اندازه مناسب برای قرار گرفتن در داخل کادر تنظیم میکند. در این حالت، اگر نسبت ابعاد تصویر با نسبت ابعاد کادر متفاوت باشد، ممکن است در هر دو طرف یا در بالا و پایین تصویر فاصله ایجاد شود.
ویژگی به شما امکان میدهد موقعیتی را که تصویر پسزمینه روی کادری که روی آن اعمال میشود، ظاهر میشود، انتخاب کنید. این ویژگی از یک سیستم مختصات استفاده میکند که در آن گوشه بالا سمت چپ کادر (0,0) است و کادر در امتداد محورهای افقی (x) و عمودی (y) قرار میگیرد.
مقدار پیشفرض است.
رایجترین مقادیر دو مقدار مجزا میگیرند - یک مقدار افقی و به دنبال آن یک مقدار عمودی. میتوانید از کلمات کلیدی مانند top و right استفاده کنید (بقیه را در صفحه جستجو کنید):
همچنین میتوانید از طول و درصد استفاده کنید:
همچنین میتوانید مقادیر کلمات کلیدی را با طول یا درصد ترکیب کنید، که در این صورت مقدار اول به موقعیت افقی و مقدار دوم به موقعیت عمودی اشاره دارد. برای مثال:
در نهایت، میتوانید از یک سینتکس ۴ مقداری برای نشان دادن فاصله از لبههای خاصی از کادر نیز استفاده کنید. هر جفت از مقادیر، لبه کادر برای جابجایی از آن و اندازه جابجایی از آن لبه را نشان میدهد. در قطعه کد زیر، ما پسزمینه را ۲۰ پیکسل از بالا و ۱۰ پیکسل از راست قرار میدهیم:
به جای و از عبارت مختصر استفاده میشود که به شما امکان میدهد مقادیر موقعیت محورهای مختلف را به صورت جداگانه تنظیم کنید.
یک گرادیان - وقتی برای پسزمینه استفاده میشود - درست مانند یک تصویر عمل میکند و با استفاده از ویژگی نیز تنظیم میشود.
میتوانید در صفحه PDN برای نوع داده در مورد انواع مختلف مقدار گرادیان و کارهایی که میتوانید با آنها انجام دهید اطلاعات کسب کنید.
در مثال زیر، مقادیر گرادیان مختلفی را امتحان کنید. در ابتدا، یک گرادیان خطی داریم که روی کل کادر اول کشیده شده است و یک گرادیان شعاعی با اندازه مشخص که روی کادر دوم تکرار میشود.
همچنین میتوان چندین تصویر پسزمینه را در یک تعریف واحد مشخص کرد. این کار را با تعیین چندین مقدار تصویر پسزمینه که با کاما از هم جدا شدهاند، انجام میدهید.
وقتی این کار را انجام میدهید، ممکن است در نهایت تصاویر پسزمینهای داشته باشید که روی هم قرار میگیرند. پسزمینهها با آخرین تصویر پسزمینه فهرستشده در پایین پشته لایهبندی میشوند و هر تصویر قبلی روی تصویری که در کد بعد از آن قرار دارد، انباشته میشود.
گرادیانها را میتوان به راحتی با تصاویر پسزمینه معمولی ترکیب کرد.
سایر ویژگیهای نیز میتوانند مانند مقادیری داشته باشند که با کاما از هم جدا شدهاند:
هر مقدار از ویژگیهای مختلف با مقادیری که در موقعیت مشابه در ویژگیهای دیگر قرار دارند، مطابقت خواهد داشت. برای مثال، در بالا، مقدار image1،
برای خواهد بود. با این حال، وقتی ویژگیهای مختلف تعداد مقادیر متفاوتی داشته باشند، چه اتفاقی میافتد؟ پاسخ این است که تعداد کمتر مقادیر به صورت چرخشی تغییر میکنند - در مثال بالا چهار تصویر پسزمینه وجود دارد اما فقط دو مقدار وجود دارد. دو مقدار موقعیت اول روی دو تصویر اول اعمال میشوند، سپس دوباره به عقب برمیگردند - به image3 مقدار موقعیت اول و به image4 مقدار موقعیت دوم داده میشود.
گزینه دیگری که برای پسزمینهها در دسترس داریم، مشخص کردن نحوه پیمایش آنها هنگام پیمایش محتوا است. این با استفاده از ویژگی کنترل میشود که میتواند مقادیر زیر را بپذیرد:
scroll: باعث میشود پسزمینه عنصر هنگام پیمایش صفحه پیمایش شود. اگر محتوای عنصر پیمایش شود، پسزمینه حرکت نمیکند. در واقع، پسزمینه در همان موقعیت روی صفحه ثابت میشود، بنابراین با پیمایش صفحه پیمایش میشود.
fixed: باعث میشود پسزمینه یک عنصر نسبت به نمای دید ثابت شود تا هنگام پیمایش محتوای صفحه یا عنصر پیمایش نشود. همیشه در همان موقعیت روی صفحه باقی میماند.
local: پسزمینه را به عنصری که روی آن تنظیم شده است، ثابت میکند، بنابراین وقتی عنصر را پیمایش میکنید، پسزمینه نیز با آن پیمایش میشود.
استفاده از ویژگی مختصر نویسی background
اغلب خواهید دید که پسزمینهها با استفاده از ویژگی مختصرنویسی background مشخص میشوند، که به شما امکان میدهد همه ویژگیهای مختلف را به طور همزمان تنظیم کنید.
اگر از چندین پسزمینه استفاده میکنید، باید همه ویژگیهای پسزمینه اول را مشخص کنید، سپس پسزمینه بعدی خود را بعد از یک کاما اضافه کنید. در مثال زیر یک گرادیان با اندازه و موقعیت داریم، سپس یک پسزمینه تصویر با تکرار صفر و موقعیت، و سپس یک رنگ.
چند قانون وجود دارد که باید هنگام نوشتن مقادیر مختصرنویسی تصویر پسزمینه رعایت شوند، به عنوان مثال:
رنگ پسزمینه فقط میتواند بعد از آخرین کاما مشخص شود.
مقدار اندازه پسزمینه فقط میتواند بلافاصله بعد از موقعیت پسزمینه، که با کاراکتر / جدا شده است، مانند این:
، درج شود.
هنگام قرار دادن متن روی تصویر یا رنگ پسزمینه، باید مراقب باشید که کنتراست کافی برای خوانایی متن برای بازدیدکنندگان داشته باشید. هنگام مشخص کردن تصویری با محتوای متنی روی آن، باید رنگ پسزمینهای را نیز مشخص کنید که در صورت عدم بارگذاری تصویر، متن خوانا باشد.
صفحهخوانها نمیتوانند تصاویر پسزمینه را تجزیه و تحلیل کنند؛ بنابراین، آنها باید صرفاً تزئینی باشند. هر محتوای مهم باید بخشی از صفحه HTML باشد و در پسزمینه قرار نگیرد.
هنگام یادگیری مدل جعبه، متوجه شدیم که چگونه حاشیهها بر اندازه جعبه ما تأثیر میگذارند. در این درس، به نحوه استفاده خلاقانه از حاشیهها خواهیم پرداخت.
معمولاً وقتی با CSS به یک عنصر حاشیه اضافه میکنیم، از ویژگی اختصاری border برای تنظیم رنگ، عرض و سبک حاشیه در هر چهار طرف جعبه در یک اعلان استفاده میکنیم:
یا میتوانیم یک لبه کادر را هدف قرار دهیم، برای مثال:
ویژگیهای منحصر به فرد شامل ویژگیهای مختصر میشوند:
همچنین ویژگیهای longhand برای عرض، سبک و رنگ برای هر یک از چهار طرف وجود دارد:
شما میتوانید با استفاده از ویژگی و خطوط طولانی مرتبط با هر گوشه کادر، گوشههای گرد به آن اضافه کنید. دو طول یا درصد میتوانند به عنوان مقدار استفاده شوند، مقدار اول شعاع افقی و مقدار دوم شعاع عمودی را تعریف میکند. در بسیاری از موارد، شما فقط یک مقدار را ارسال میکنید که برای هر دو استفاده میشود.
به عنوان مثال، برای دادن شعاع 10 پیکسل به هر چهار گوشه یک کادر:
یا برای اینکه گوشه بالا سمت راست شعاع افقی ۱em و شعاع عمودی ۱۰٪ داشته باشد:
