ایجاد حاشیه در CSS اموال مرزی

مرز CSSیک عنصر یک یا چند خط است که محتوای عنصر و بالشتک آن را احاطه کرده است. حاشیه با استفاده از ویژگی حاشیه کوتاه مشخص می شود. سبک فریم با استفاده از سه ویژگی تنظیم می شود: سبک, رنگو عرض.

تزئین فریم ها و حاشیه عناصر HTML با استفاده از ویژگی های CSS

1. سبک مرزی

به‌طور پیش‌فرض، حاشیه‌ها همیشه در بالای پس‌زمینه عنصر رسم می‌شوند و پس‌زمینه تا لبه بیرونی عنصر کشیده می‌شود. سبک قاب نمایش آن را تعیین می کند؛ بدون این ویژگی، فریم ها به هیچ وجه قابل مشاهده نخواهند بود. برای یک عنصر، می توانید با استفاده از ویژگی border-style به طور همزمان برای همه طرف ها یا با استفاده از ویژگی های واجد شرایط به سبک border-top-style و غیره برای هر طرف به طور جداگانه یک مرز تنظیم کنید. ارثی نیست.

به سبک مرزی (سبک حاشیه-بالا، سبک حاشیه-راست، سبک حاشیه-پایین، سبک حاشیه-چپ)
ارزش های:
هیچ یک	مقدار پیش فرض به معنای عدم وجود قاب است. همچنین کادر یک عنصر را از گروهی از عناصر با مقدار این مجموعه ویژگی حذف می کند.
پنهان شده است	معادل هیچکدام.
خط چین	خط چین
نقطه چین	نقطه چین
جامد	جامد
دو برابر	دو برابر
شیار	شیار
خط الراس	خط الراس
درونی	درونی
ابتدا	ابتدا
{1,4}	فهرست کردن چهار سبک مختلف برای حاشیه یک عنصر به طور همزمان، فقط برای ویژگی border-style: (سبک حاشیه: توپر نقطه نقطه هیچ نقطه نقطه؛)
اولیه
به ارث می برند

نحو

P (سبک حاشیه: جامد؛) p (سبک حاشیه بالا: جامد؛)

2. رنگ قاب حاشیه رنگ

این ویژگی رنگ قاب ها را در همه طرف ها به طور همزمان تنظیم می کند. با استفاده از ویژگی های شفاف کننده، می توانید یک رنگ متفاوت برای مرز هر طرف عنصر تعیین کنید. اگر رنگی برای کادر مشخص نشده باشد، همان رنگ متن عنصر خواهد بود. اگر عنصر متنی نداشته باشد، رنگ حاشیه همان رنگ متن عنصر والد خواهد بود. ارثی نیست.

رنگ لبه (رنگ حاشیه-بالا، رنگ حاشیه-راست، رنگ حاشیه-پایین، رنگ حاشیه-چپ)
ارزش های:
شفاف	رنگ شفاف حاشیه را تنظیم می کند. در همان زمان، عرض قاب باقی می ماند. می توان برای تغییر رنگ حاشیه هنگام قرار دادن ماوس روی یک عنصر برای جلوگیری از جابجایی عنصر استفاده کرد.
رنگ	رنگ قاب ها با استفاده از مقادیر ویژگی تنظیم می شود. (رنگ حاشیه: #cacd58;)
{1,4}	فهرست کردن چهار رنگ مختلف برای مرزهای یک عنصر، فقط برای ویژگی border-color: (رنگ حاشیه: #cacd58 #5faf8a #b9cea5 #aab238;)
اولیه	مقدار ویژگی را به مقدار پیش فرض تنظیم می کند.
به ارث می برند	مقدار ویژگی را از عنصر والد به ارث می برد.

نحو

P (رنگ حاشیه: #cacd58;)

3. عرض مرز

عرض فریم با استفاده از واحدهای طول یا کلمات کلیدی مشخص می شود. اگر ویژگی border-style روی none تنظیم شود و مرز عنصر روی مقداری عرض تنظیم شود، در این حالت عرض حاشیه روی صفر تنظیم می شود. ارثی نیست.

نحو

P (عرض حاشیه: 2 پیکسل؛)

4. تنظیم یک فریم با یک خاصیت

ویژگی border به شما امکان می دهد ویژگی های زیر را ترکیب کنید: border-width ، border-style، border-color، برای مثال:

Div (عرض: 100 پیکسل؛ ارتفاع: 100 پیکسل؛ حاشیه: 2 پیکسل خاکستری یکدست؛ )

در این حالت، ویژگی های مشخص شده به طور همزمان بر روی تمام مرزهای عنصر اعمال می شود. اگر مقداری مشخص نشده باشد، مقدار پیش فرض جای آن را خواهد گرفت.

5. تنظیم یک قاب برای یک حاشیه از یک عنصر

در مواردی که نیاز دارید یک سبک حاشیه متفاوت برای یک عنصر مشخص کنید، می توانید از علامت کوتاه برای حاشیه مربوطه استفاده کنید.
ویژگی‌های فهرست‌شده در زیر ویژگی‌های زیر را در یک اعلان واحد ترکیب می‌کنند: border-width، border-style، و border-color. لیست ویژگی ها به ترتیب مشخص شده است، در حالی که می توان یک یا دو مقدار را نادیده گرفت، در این صورت مقادیر آنها مقادیر پیش فرض را می گیرند.

سبک حاشیه بالا با استفاده از ویژگی border-top، bottom - border-bottom، سمت چپ - border-left، و right - border-right تنظیم می شود.

نحو

P (حاشیه بالا: 2 پیکسل خاکستری یکدست؛)

6. طرح کانتور خارجی

این ویژگی یک مرز بیرونی در اطراف عناصر (یعنی خارج از مرز عادی) را مشخص می کند. هدف اصلی این ویژگی برجسته کردن یک عنصر است. بر خلاف ویژگی border، اعمال این ویژگی بر اندازه یا موقعیت عنصر تأثیر نمی گذارد، زیرا طرح کلی در بالای کادر عنصر نمایش داده می شود که به نوبه خود می تواند منجر به همپوشانی لایه بیرونی عنصر و مناطق مجاور شود.

همچنین، کانتور بیرونی، بر خلاف قاب عنصر، عنصر را از همه طرف احاطه کرده و آن را به طور کامل قاب می کند.

طرح بیرونی همیشه مستطیل شکل است و از مرز بلوکی که شعاع مرزی برای آن مشخص شده است پیروی نمی کند.

ویژگی outline به شما امکان می دهد ویژگی های زیر را ترکیب کنید: outline-color، outline-style، outline-width. اگر مقداری مشخص نشده باشد، مقدار پیش فرض جای آن را خواهد گرفت.

Div (عرض: 100 پیکسل؛ ارتفاع: 100 پیکسل؛ طرح کلی: #cacd58 جامد 2 پیکسل؛ )

6.1. طرح کلی

ظاهر خط کانتور بیرونی مشابه سبک قاب عنصر تنظیم شده است. ارثی نیست.

نحو

P (طرح طرح: خط الراس؛)

6.2. نمای بیرونی رنگ طرح کلی-رنگ

رنگ طرح بیرونی را تنها در صورتی می توان مشخص کرد که مقدار سبک طرح کلی تنظیم شده باشد. ارثی نیست.

نحو

P (طرح طرح: خط الراس؛ طرح-رنگ: نقره ای؛)

6.3. نمای بیرونی ضخامت طرح کلی-عرض

ضخامت خط کانتور بیرونی به طور مشابه با ضخامت قاب عنصر تنظیم می شود. ارثی نیست.

نحو

P (طرح طرح: نقطه‌دار؛ عرض طرح: 5 پیکسل؛ )

با سلام خدمت دوستان عزیز و مهمانان وبلاگ امروز در ادامه با عناصر ساخت وب سایت آشنا می شویم و نحوه ایجاد فریمورک های css را یاد می گیریم. در آخرین مقاله ام به شما گفتم و نحوه ایجاد آنها را به شما نشان دادم، اما چارچوب cssزیباتر و جذاب تر به نظر برسند بنابراین، هر کسی که نحوه ساخت فریم های html را یاد گرفته باشد، می تواند یک فریم css ایجاد کند. و من در این مورد به شما کمک خواهم کرد! بیا شروع کنیم...

چگونه خودتان فریم های css برای یک وب سایت بسازید؟

همانطور که در بالا به شما گفتم، فریمورک های css بسیار زیباتر و کاربردی تر از فریمورک های html هستند و اگر قبلاً نحوه ساخت فریمورک های html را یاد گرفته باشید، ایجاد چنین فریمورک های css خودتان برای شما سخت نخواهد بود.

برای ساخت چارچوب css به چه چیزهایی نیاز داریم؟ هیچ چیز بیش از حد ظالمانه نیست! خواسته شما و مقاله من که در آن همه چیز را به تفصیل برای شما توضیح خواهم داد.

اینم کدش:

فریم های css ما!

در اینجا مثال دوم قاب css است:

اینم کدش:

فریم های css ما!

در اینجا سومین مثال از قاب نقطه‌دار آمده است:

این کد اوست:

فریم های css ما!

این چهارمین نمونه از یک قاب دوطرفه است:

این کد اوست:

فریم های css ما!

و اگر مقدار "رج" را اعمال کنید، این فریمی است که به دست می آورید:

اینم کدش:

فریم های css ما!

حالا بیایید لبه های گرد فریم css خود را با استفاده از این مقادیر "border-radius" و "box-shadow" بسازیم:

این قاب با لبه های گرد و کد آن است:

فریم های css ما!

حالا بیایید یک قاب با لبه های تار بسازیم، این نیز بسیار جذاب به نظر می رسد و انجام آن آسان است، فقط عدد موجود در مقدار "box-shadow" را به مقدار بالاتر تغییر دهید. و این چیزی است که اتفاق می افتد:

اینم کدش:

فریم های css ما!

اکنون یک قاب با خطوط چند رنگ می سازیم، فقط چند طرح رنگی را به مقدار "box-shadow" اضافه می کنیم:

اینم کدش:

فریم های css ما!

و اکنون اوج فریم های css ما یک قاب گرد است. این همچنین می تواند به سادگی با تغییر مقدار "border-radius" انجام شود. اینجا را نگاه کن:

کد اینجاست:

فریم های css ما!

خوب این همه برای امروز است. دوباره می بینمت!

اگر مطالب را دوست داشتید لطفا موارد زیر را انجام دهید ...

1. لطفا لایک کنید.

1. بازتوییت کنید.

1. این پست را با دوستان خود در شبکه های اجتماعی به اشتراک بگذارید.

با تشکر از توجه شما!

در این فصل:

مدل بلوک روشی برای نمایش عناصر توسط مرورگرها است که همه برچسب ها را به عنوان بلوک های کوچک پردازش می کند، برای آنها هر برچسب یک ظرف با محتوا است: متن، تصاویر، برچسب های دیگر و غیره.

• لبه(حاشیه) - فضای خالی (حاشیه) که یک عنصر را از عنصر دیگر جدا می کند. ساده ترین مثال تورفتگی، فاصله بین پاراگراف هایی است که پشت سر هم قرار می گیرند. قسمت حاشیه شفاف است و نمی تواند رنگ یا جلوه های دیگر طراحی خود را داشته باشد.
• مرز(حاشیه عنصر) - حاشیه در هر طرف عنصر. قاب را می توان در همه طرف المنت یا در یک طرف نصب کرد. با استفاده از یک قاب، می توانید به سادگی یک عنصر را به زیبایی تزئین کنید یا به صورت بصری محتویات عنصر فعلی را از سایر عناصر موجود در صفحه جدا کنید.
• لایه گذاری(padding) - فضای خالی بین محتوای یک عنصر و مرز آن. ناحیه بالشتک شفاف است و نمی تواند رنگ یا جلوه های دیگر طراحی خود را داشته باشد.
• اکثر عناصر دارای یک منطقه محتوایی هستند که همه چیز را در بر می گیرد محتواعنصر (متن، تصاویر درج شده یا عناصر دیگر).

قاب

حاشیه یک خط ساده است که در اطراف عنصری که در حال طراحی آن هستید ظاهر می شود. اما به هیچ وجه لازم نیست از یک قاب اطراف عنصر از هر طرف استفاده کنید. شما می توانید آن را فقط از سمت مورد نیاز عنصر اضافه کنید. به عنوان مثال، اگر یک حاشیه را فقط به سمت پایین یک عنصر بلوک اضافه کنید، همان اثر را ایجاد می کند عنصر

---

(خط افقی) که به عنوان جداکننده عمل می کند.

هر فریم دارای سه ویژگی است که می‌توانیم با استفاده از CSS آن‌ها را کنترل کنیم: عرض، سبک و رنگ. بیایید ببینیم از کدام ویژگی‌ها می‌توان برای تنظیم و تغییر آنها استفاده کرد:

به جای مشخص کردن هر سه ویژگی، می توانید فقط یکی را مشخص کنید - اموال مرزی، که به شما امکان می دهد به طور همزمان عرض، سبک و رنگ حاشیه را مشخص کنید:

پراگراف اول.

پاراگراف دوم.

بند سوم.

برای کنترل قاب به طور جداگانه در هر طرف عنصر، از ویژگی های زیر استفاده کنید:

• لبه بالا- فریم بالا
• لبه چپ- قاب سمت چپ
• مرز راست- قاب سمت راست
• لبه پایین- قاب پایین

این ویژگی‌ها دقیقاً مانند ویژگی border عمل می‌کنند، با این تفاوت که فقط به شما اجازه می‌دهند حاشیه را در یک طرف عنصری که در حال استایل کردن هستید، کنترل کنید.

حاشیه بیرونی و داخلی

تورفتگی- فضای خالی بین محتوای عنصر و حاشیه آن (در صورت نصب بودن). برای افزودن و کنترل عرض بالشتک در هر چهار طرف یک عنصر، استفاده کنید خاصیت padding.

حاشیه فضای خالی است که یک عنصر را از سایر عناصر یا لبه های پنجره مرورگر جدا می کند. برای افزودن و کنترل عرض بالشتک در هر چهار طرف یک عنصر، استفاده کنید دارایی حاشیه.

ویژگی های padding و margin می توانند از یک تا چهار مقدار داشته باشند:

جایی که مقادیر در جهت عقربه های ساعت تنظیم می شوند، از بالا شروع می شوند:

اگر فقط یک مقدار را برای ویژگی ها مشخص کنید، آنگاه تورفتگی ها در هر طرف یک عرض خواهند داشت.

در نگاه اول، جلوه قابل مشاهده هنگام استفاده از این ویژگی‌ها یکسان به نظر می‌رسد؛ برای مشاهده تفاوت بصری بین آنها، می‌توانید برای مثال یک قاب برای یک عنصر تنظیم کنید یا یک پس‌زمینه تنظیم کنید:

پاراگراف منظم

برای تورفتگی ها و همچنین برای فریم ها، ویژگی هایی وجود دارد که به شما امکان می دهد اندازه تورفتگی را در هر طرف به طور جداگانه کنترل کنید. بالشتک داخلی با ویژگی های زیر تنظیم می شود: بالشتک بالا , padding-right , بالشتک پایینو padding-left. حاشیه های خارجی توسط ویژگی ها تنظیم می شوند: حاشیه بالا , حاشیه-راست , حاشیه-پایینو حاشیه چپ.

توجه: مقادیر ویژگی های padding و margin توسط عناصر فرزند به ارث نمی رسند، بنابراین شما باید عرض padding را به طور جداگانه برای هر عنصری که به آنها نیاز دارد مشخص کنید.

عرض و ارتفاع عنصر

به طور پیش فرض، عناصر بلوک از عرض خودکار استفاده می کنند. این بدان معنی است که عنصر دقیقاً به اندازه فضای آزاد کشیده می شود. ارتفاع پیش‌فرض عناصر بلوک به‌طور خودکار تنظیم می‌شود، یعنی. مرورگر ناحیه محتوا را به صورت عمودی گسترش می دهد تا همه محتوا نمایش داده شود. برای تنظیم ابعاد سفارشی برای ناحیه محتوای یک عنصر، می‌توانید از ویژگی‌های عرض و ارتفاع استفاده کنید.

یکی از کاربردهای جالب ویژگی box-shadow CSS3 ایجاد یک حاشیه دوتایی در اطراف یک عنصر است. یک جلوه بسیار جالب برای طراحی صفحه، اما فقط در نسخه های جدید مرورگرهایی که از box-shadow پشتیبانی می کنند، کار می کند.

با این حال، چندین روش دیگر برای ایجاد این اثر وجود دارد. علاوه بر این، استفاده آشکار از یک تصویر پس زمینه بسیار دور از ایده آل است.

این آموزش پنج روش برای ایجاد یک مرز دوگانه در اطراف یک عنصر ارائه می دهد. علاوه بر این، تنها یکی از آنها نیاز به تصویر دارد و بقیه از کد CSS خالص با پشتیبانی عالی از مرورگر استفاده می کنند.

روش 1: حاشیه و طرح کلی

این روش فقط در مرورگرهایی کار می کند که از ویژگی outline پشتیبانی می کنند (همه به جز IE6/7). شما هر دو ویژگی حاشیه و طرح کلی را به عنصر اضافه می کنید.

یک (حاشیه: توپر 6px #fff؛ طرح کلی: توپر 6px #888؛ )

دلیل کارایی این روش این است که طرح کلی همیشه در بیرون مستطیل ظاهر می شود. مشکل ویژگی outline هنگام استفاده از عناصر شناور رخ می دهد زیرا مرز با عناصر مجاور همپوشانی دارد.

روش 2: شبه عنصر

این روش مستلزم موقعیت یابی مطلق قاب است:

دو (حاشیه: جامد 6 پیکسل #fff؛ موقعیت: نسبی؛ شاخص z: 1؛ ) .two: قبل ( محتوا: ""؛ نمایش: بلوک؛ موقعیت: مطلق؛ بالا: -12 پیکسل؛ سمت چپ: -12 پیکسل؛ حاشیه: جامد 6px #888؛ عرض: 312px؛ بالشتک پایین: 12px؛ حداقل ارتفاع: 100%؛ z-index: 10؛ )

نکات کلیدی تنظیم ویژگی z-index (به طوری که عنصر شبه روی محتوا همپوشانی داشته باشد)، موقعیت و مقدار حداقل ارتفاع. خاصیت دوم خاصیت ارتجاعی قاب را حفظ می کند.

روش 3: سایه

بهترین روش، زیرا برای تنظیم ویژگی box-shadow تنها به یک خط کد نیاز دارد.

سه (box-shadow: 0 0 0 6px #fff, 0 0 0 12px #888; )

از دو سایه برای نشان دادن قاب دوتایی استفاده می شود. آنها با کاما از هم جدا می شوند. تاری روی 0 تنظیم شده است. از آنجایی که سایه دوم با سایه اول همپوشانی دارد، عرض آن دو برابر است. نکته کلیدی استفاده از رنگ های مات است که مرز واضحی بین قاب ها ایجاد می کند.

مانند ویژگی outline، box-shadow بر عناصر مجاور تأثیر نمی گذارد و می تواند آنها را همپوشانی کند. بنابراین باید زمینه ای را برای شکل دادن به ظاهر ترکیب تعیین کرد.

به طور طبیعی، پشتیبانی از ویژگی box-shadow به مرورگرهای جدیدتر محدود می شود.

روش 4: عنصر div اضافی

این روش از یک عنصر خارجی استفاده می کند