آموزش کامل CSS قسمت یازدهم

در جلسه های قبلی از آموزش های CSS راجب رنگ، پهنا و همچنین اجزای border-style صحبت کردیم در این جلسه بصورت کامل تر ویژگی border را مورد بررسی قرار می‌دهیم.

ویژگی border-style درCSS

برای مقداردهی پهنای border از سه مقدار Thin ، medium ، thick و یا واحد اندازه گیری pixel که در جلسه های قبل نیز آن را معرفی کردیم، استفاده می‌شود و برای مقداردهی border-style نیز solid را معرفی کرده بودیم اما در این جلسه مقدار های جدیدی را بررسی می‌کنیم:

• dashed (برداری به شکل خط چین)
• double (برداری دوتایی)
• dotted (برداری به شکل نقطه چین)
• groove (برداری با نمای حجیم و سه بعدی)
• ridge (برداری حجیم و سه بعدی)
• inset (برداری حجیم و مقعر)
• outset (برداری حجیم و محدب)

تمامی مقادیر بالا را بنا به حالت مورد نیاز خود مانند آنچه در جلسه های گذشته گفتیم در قانون ; border-style: value به جای value قرار می‌دهیم و بردار زیبایی را برای عنصر موردنظرمان اعمال می‌کنیم.

ویژگی border-radius

با استفاده از ویژگی border-radius می‌توان گوشه های بردار را گرد کرد و با مقدار دهی می‌توان میزان گرد بودن گوشه ها را مشخص کرد به عنوان مثال برای پاراگراف دوم مقدار 10px را برای این ویژگی border-radius و مقدار groove را برای border-style درنظر می‌گیریم.

body      { color:#274472; font-family:Arial black;
            font-weight:normal; font-size:15px;background-color:#fefae0;}
h1        { text-decoration: underline; font-size:150%; text-align:center;}
h2        { text-decoration: underline; font-size:1.2em; text-align:center;}
p.para1   { color:#900020;}
p.para2   {
            color:#900020;
            border-color:#5C5F30;
            border-width:10px;
            border-style:groove;
            border-radius:10px;
            }

همانطور که در نتیجه بالا مشاهده می‌کنید برداری حجیم، سه بعدی و با گوشه هایی خمیده در وب سایت ایجاد شد و اما حالا با تغییر مقدار در خمیدگی بردار می‌خواهیم تفاوت بین مقادیر متفاوت را مشاهده کنیم در قسمت مقدار 25px را برای آن درنظر می‌گیریم.

body      { color:#274472; font-family:Arial black;
            font-weight:normal; font-size:15px;background-color:#fefae0;}
h1        { text-decoration: underline; font-size:150%; text-align:center;}
h2        { text-decoration: underline; font-size:1.2em; text-align:center;}
p.para1   { color:#900020;}
p.para2   {
            color:#900020;
            border-color:#5C5F30;
            border-width:10px;
            border-style:groove;
            border-radius:25px;
            }

همانطور که مشاهده می‌کنید گوشه های بردار کاملا خمیده شده است و ظاهر زیباتری پیدا کرده است. نکته مهم دیگری که باید به آن اشاره کرد این است که مرورگر های قدیمی مثل Internet Explorer ممکن است بعضی از کد های CSS را ساپورت نکنند درنتیجه بهتر است از نسخه های بروز مرورگرها استفاده کنید تا بتوانید از تمامی کد های CSS استفاده کنید و تغییرات را در وب سایتتان مشاهده کنید.

نکته جالبی که در رابطه با ویژگی border-radius وجود دارد این است که می‌توان هر سمت بردار را بصورت جداگانه انتخاب کرد و گوشه همان سمت را خمیده کرد. در نتیجه چهار ویژگی زیر را داریم:

• border-bottom-left-radius
• border-bottom-right-radius
• border-top-left-radius
• border-top-right-radius

در مثال زیر تمامی ویژگی های فوق را برای هر گوشه بردار بکار می‌بریم.

body      { color:#274472; font-family:Arial black;
            font-weight:normal; font-size:15px;background-color:#fefae0;}
h1        { text-decoration: underline; font-size:150%; text-align:center;}
h2        { text-decoration: underline; font-size:1.2em; text-align:center;}
p.para1   { color:#900020;}
p.para2   {
            color:#900020;
            border:#5C5F30 10px groove;
            border-bottom-left-radius:25px;
            border-bottom-right-radius:0px;
            border-top-left-radius:10px;
            border-top-right-radius:5px;
}

همانطور که مشاهده می‌کنید هرگوشه بردار با توجه به اندازه ای که برای آن مشخص کردیم تغییر پیدا کرده است. این ویژگی های بالا فقط برای گوشه های بردار کاربرد دارند اما اگر خواستید یک طرف بردار بصورت کامل تغییر کند باید از ویژگی های زیر استفاده کنید.

• border-bottom
• border-top
• border-left
• border-right

این مدل نوشتن کد برای ویژگی های style ،width و color نیز کاربرد دارد به عنوان مثال border-bottom-style:dotted و border-bottom-color:red را در کد های CSS زیر وارد می‌کنیم تا نتیجه را مشاهده کنید.

body      { color:#274472; font-family:Arial black;
            font-weight:normal; font-size:15px;background-color:#fefae0;}
h1        { text-decoration: underline; font-size:150%; text-align:center;}
h2        { text-decoration: underline; font-size:1.2em; text-align:center;}
p.para1   { color:#900020;}
p.para2   {
            color:#900020;
            border:#5C5F30 5px groove; 
            border-radius:25px;
            border-bottom-style:dotted;
            border-bottom-color:red;
            }

همانطور که در بالا مشاهده می‌کنید قسمت پایین بردار طبق کدهایی که برای آن عنصر مشخص کردیم بصورت dotted یا همان نقطه چین و به رنگ قرمز درآمده است.

• قسمت دهم آموزش CSS
• آموزش بعدی قسمت دوازدهم آموزش CSS