طراحی سایت تهران، سیدخندان به سمت رسالت شرق، خیابان کابلی (دبستان)، نبش کوچه آگاهی، پلاک ۴ ، واحد ۱۵
02188471521   ۰۲۱۴۰۸۸۱۰۳۸

آموزش CSS – بخش سوم

آموزش css

سلام دوستان عزیز؛

امروز هم با یکی دیگه از سلسله جلسات آموزش CSS در خدمت شما عزیزان هستم. در آموزش CSS – بخش سوم با دستوراتی دیگر از CSS آشنا خواهیم شد و در انتهای این جلسه خواهیم توانست که تنظیمات زیر را برای عنصر اجام دهیم:

  • حاشیه ها و خطوط خارجی
  • فاصله خارجی
  • فاصله داخلی

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

در ادامه آموزش ها، دستورات CSS را در فایل خارجی نوشته و به سند HTML پیوند می دهیم. بدیهی است که دستورات CSS را در فایل style.css و کدهای HTML را در index.html باید بنویسید.

خب در ابتدا میخواهم که شما دوستان را با انواع حاشیه و خطوط خارجی آشنا کنم. همراه من باشید.

حاشیه ها و خطوط خارجی

برای برجستگی و زیبایی المان ها از حاشیه ها (که در جلسه پنجم آموزش HTML به طور مختصر با حاشیه ها آشنا شدیم) و خطوط خارجی استفاده می کنیم که برای حاشیه گذاری از ویژگی border و برای رسم خطوط خارجی از ویژگی outline استفاده خواهیم کرد. حال به بررسی این دو ویژگی می پردازیم:

حاشیه ها

برای حاشیه گذاری و سبک دهی به آن، سه ویژگی اصلی زیر را داریم:

ویژگیتوضیح
border-styleسبک حاشیه
border-colorرنگ حاشیه
border-widthاندازه عرض حاشیه

حالا می خواهیم مقادیر این دستورات را بررسی کنیم:

سبک حاشیه

اما سبک هایی که می توان برای حاشیه انتخاب کرد (مقادیر ویژگی border-style ) عبارتند از:

  • dotted : حاشیه نقطه چین.
  • dashed : حاشیه خط چین.
  • solid : حاشیه به صورت خطی پیوسته.
  • double : حاشیه دو خطی.
  • groove : حاشیه ای با لبه ی گود را اطراف المان قرار می دهد.
  • ridge : حاشیه ای با لبه برامده را ایجاد می کند.
  • inset : حالت تو رفتگی به المان می دهد.
  • outset : حالت برامدگی به المان می دهد.
  • none : حاشیه را حذف می کند.
  • hidden : حاشیه ایجاد می کند ولی این حاشیه نمایش داده نمی شود.

توجه کنید که حاشیه های groove ، ridge ، inset  و outset سه بعدی هستند. در عکس زیر انواع حاشیه ها را خواهید دید:

آموزش CSS - بخش سوم

اندازه عرض حاشیه

پهنای هر حاشیه را می توان با ویژگی border-width  تنظیم کرد. مقادیر این ویژگی به صورت زیر خواهد بود:

  • یکی از سه مقدار thin برای حاشیه نازک، medium برای حاشیه متوسط و thick حاشیه پهن.
  • مقدار عددی با واحدهای px (پیکسل) ، pt (point یعنی نقطه) ، cm (سانتی متر) و em (که اندازه پیش فرض خود مرورگر است.)

آموزش CSS - بخش سوم

رنگ حاشیه

تنظیم رنگ حاشیه ها را با ویژگی border-color  انجام می دهیم و به یکی از سه روش گفته شده (نام رنگ، RGB و یا کد هگز رنگ) به آن مقداری دهی می کنیم. همچنین مقدار transparent حاشیه ای شفاف را ایجاد می کند.

در نظر داشته باشید که اگر رنگ حاشیه تنظیم نشود، رنگ المان را به ارث می برد.

به مثال زیر توجه کنید:

آموزش CSS - بخش سوم

در رابطه با حاشیه گذاری باید به چند نکته مهم زیر توجه داشت:

نکته1: CSS این امکان را به ما می دهد که حاشیه هر لبه را به طور مجزا انتخاب و سبک دهی کنیم. با استفاده از 4 لغت top ، right ، bottom  و left می توان هر لبه را انتخاب می کنیم. به عنوان مثال اگر بخواهیم سبک حاشیه بالا را تغییر دهیم از ویژگی border-top-style  استفاده می کنیم. به همین تریتب می توان هر لبه را به طور مجزا سبک دهی کرد.

نکته2: هر کدام از ویژگی های border-style ، border-width  و border-color  می توانند از 1 تا 4 مقدار دریافت کنند. ویژگی border-style را بررسی می کنیم:

  • 4 مقدار دریافت کند: border-style: dotted solid double dashed;

مقدار اول حاشیه بالا را سبک دهی می کند، مقدار دوم حاشیه راست، مقدار سوم حاشیه پایین و مقدار چهارم حاشیه چپ.

  • 3 مقدار دریافت کند: border-style: dotted solid double;

مقدار اول حاشیه بالا، مقدار دوم حاشیه چپ و راست و مقدار سوم حاشیه پایین را سبک دهی می کند.

  • 2 مقدار دریافت کند: border-style: dotted solid;

مقدار اول حاشیه بالا و پایین را سبک دهی می کند و مقدار دوم حاشیه چپ و راست.

  • 1 مقدار دربافت کند: border-style: dotted;

که در این صورت هر 4 حاشیه یکسان خواهند بود.

بدین ترتیب نیز می توان ویژگی های border-color  و border-width  را مقدار دهی کرد.

نکته3: می توان ویژگی حاشیه را نیز خلاصه نویسی کرد به این ترتیب که ویژگی border  را  می نویسیم و به آن سه مقدار می دهیم. مقدار اول width ، مقدار دوم style و مقدار سوم color خواهد بود. همچنین حاشیه هر لبه را می توان با خلاصه نویسی سبک دهی کرد.

نکات بالا را در مثال زیر بررسی می کنیم:

آموزش CSS - بخش سوم

حاشیه گرد

با استفاده از ویژگی border-radius  می توان حاشیه گرد شده ای را برای المان ها ایجاد کرد:

آموزش CSS - بخش سوم

خطوط خارجی

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

آموزش CSS - بخش سوم

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

ویژگیتوضیح
outline-styleسبک خط
outline-colorرنگ خط
outline-widthاندازه عرض خط

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

آموزش CSS - بخش سوم

اگر مقدار آفست را درست تنظیم نکنید، خط خارجی با دیگر المان ها تداخل خواهد داشت:

آموزش CSS - بخش سوم

فاصله خارجی

یکی از مباحث مهم در CSS تنظیم فاصله خارجی برای المان ها است. اما فاصله خارجی چیست و چرا به کار می رود؟

مرورگر ها برای هر المانی که در صفحه قرار می گیرد لبه هایی را در نظر می گیرند که می توان اطراف این لبه ها فضای خالی ای را ایجاد کرد که در آن هیچ المان و عنصری نمی تواند قرار بگیرد. به این فضای خالی، فاصله خارجی (margin) می گوییم.

با ویژگی های زیر می توان فاصله خارجی را برای لبه های یک المان تنظیم کرد:

  • margin-top : برای تنظیم فاصله خارجی از بالا.
  • margin-right : برای تنظیم فاصله خارجی از راست.
  • margin-bottom : برای تنظیم فاصله خارجی از پایین.
  • margin-left : برای تنظیم فاصله خارجی از چپ.

مقادیری که این ویژگی ها می توانند بگیرند عبارتند از موارد زیر:

  • auto: مرورگر اندازه فاصله خارجی را محاسبه خواهد کرد.
  • مقدار عددی با واحد های px، pt، cm و em.
  • مقداری بین 0 تا 100 با واحد %.
  • inherit: تعیین می کند که فاصله خارجی از المان پدر به ارث برده شود. (المان های هر سند یا هم رابطه خوشاوندی دارند که در جلسات بعدی با آن آشنا می شویم.)

از مقادیر منفی نیز می توانیم برای مقدار دهی استفاده کنیم.




آموزش CSS - بخش سوم

معمولا ویژگی margin  را نیز به صورت کوتاه شده و مختصر می نویسیم که در این صورت از 1 تا 4 مقدار به این ویژگی می دهیم:

آموزش CSS - بخش سوم

با توجه به مثال های بالا، ویژگی margin می تواند از 1 تا 4 مقدار بگیرد:

  • اگر ویژگی margin تعداد 4 مقدار بگیرد مانند: margine: 10px 15px 30px 25px;

مقادیر اول و دوم و سوم و چهارم به ترتیب فاصله های خارجی از لبه بالا، راست، پایین و چپ را تنظیم می کنند.

  • اگر ویژگی margin تعداد 3 مقدار بگیرد مانند: margin: 30px 15px 25px;

مقدار اول فاصله خارجی از لبه بالا، مقدار دوم از لبه های چپ و راست و مقدار سوم فاصله خارجی از لبه پایین را تنظیم می کنند.

  • اگر 2 مقدار به margin  بدهیم مانند: margin: 20px 25px;

مقدار اول فاصله خارجی از لبه های بالا و پایین و مقدار دوم فاصله خارجی از لبه های چپ و راست را تنظیم می کنند.

  • اگر به ویژگی margin تنها یک مقدار بدهیم: margin: 10px;

فاصله خارجی از لبه های هر چهار طرف را تنظیم می کند.

محاسبه خودکار فاصله خارجی

اگر ویژگی margin  یک المان مقدار auto  داشته باشد، مرورگر فاصله خارجی را محاسبه می کند و آن المان همواره در وسط عرض المان دربرگیرنده خود قرار می گیرد. فرض کنید یک دیو با عرض a داریم که یک دیو دیگر با عرض b را در بر می گیرد. اگر برای دیو درونی ویژگی margin: auto  را تنظیم کنیم، مرورگر مقدار فاصله خارجی از لبه راست را (a – b)/2 و فاصله خارجی از لبه چپ را نیز همین مقدار قرار می دهد.

به مثال زیر توجه کنید:

آموزش CSS - بخش سوم

در مثال بالا، عرض دیو را حذف کنید و بعد عرض مرورگر را کم و زیاد کنید.

ارث بری فاصله خارجی

وقتی که مقدار margin  یک المان inherit  باشد، فاصله خارجی خود را از المان پدر به ارث می برد:

آموزش CSS - بخش سوم

ادغام فاصله خارجی

سوال: فرض کنید یک المان با فاصله خارجی 10px و یک المان دیگر با فاصله خارجی 15px داریم. اگر المان دوم زیر المان اول قرار گیرد، فاصله بین آنها چند پیکسل است؟

ممکن است پاسخ شما 25px باشد که پاسخ نادرستی است. زمانی که دو المان با فاصله خارجی متفاوت از بالا به پایین زیر یک دیگر قرار بگیرند، مرورگر فاصله خارجی المان ها را جمع نمی کند بلکه  بزرگترین مقدار فاصله را در نظر می گیرد. پس پاسخ صحیح به این پرسش 15px خواهد بود. به این پدیده ادغام فاصله خارجی (margin collapse) می گوییم که فقط برای فاصله های خارجی از لبه بالا و پایین به وجود می آید.

آموزش CSS - بخش سوم

و آخرین مبحث این جلسه:

فاصله داخلی

از دیگر مباحث مهم در CSS تنظیمات فاصله داخلی (padding) است که فاصله خالی بین محتوای یک المان تا لبه آن می باشد.

ویژگی های دسته padding  عبارتند از:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

مانند حاشیه و فاصله خارجی، می توان فاصله داخلی را برای 1 یا 2 یا 3 و یا هر 4 طرف المان ایجاد کرد. (ترتیب بالا، راست، پایین و چپ هم در اینجا کاربرد دارد.)

مقادیری را که می توان به این ویژگی ها داد، 3 دسته هستند که عبارتند از:

  • مقدار عددی با واحدهای px ، pt ، cm و em
  • عددی بین 0 تا 100 با واحد %
  • inherit: ارث بردن فاصله داخلی از پدر.

ویژگی padding مقدار auto نمی گیرد.




آموزش CSS - بخش سوم

همانطور که در مثال بالا می بینید، ویژگی padding  نیز می تواند از 1 تا 4 مقدار بگیرد.

  • 4 مقدار: padding: Apx Bpx Cpx Dpx;

در این صورت مقدار فاصله داخلی از بالا A پیکسل، از راست B پیکسل، از پایین C پیکسل و از چپ D پیکسل باشد.

  • 3 مقدار: padding: Apx Bpx Cpx;

مقادیر فاصله داخلی از بالا A پیکسل، از چپ و راست B پیکسل و از پایین C پیکسل خواهد بود.

  • 2 مقدار: padding: Apx Bpx;

فاصله داخلی به مقدار A پیکسل از بالا و پایین و مقدار B پیکسل از چپ و راست خواهد بود.

  • 1 مقدار: padding: Apx;

در اینصورت فاصله داخلی هر 4 طرف A پیکسل خواهد بود.

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

علاوه بر نظراتتون، اگر سوالی در زمینه این مطالب دارید، از قسمت دیدگاه ها می توانید با کارشناسان سایت سازان در ارتباط باشید.

در جلسه چهارم آموزش CSS با دستورات جدیدی برای سبک دهی به المان ها آشنا خواهیم شد. همراه ما باشید.

پیروز و سرافراز باشید.

نوشته های مرتبط

دیدگاه ‏خود را بنویسید