css الدرس السادس فى

Border

-سنتعلم فى هذا الجزء ضبط ستايل الاطار من خلال الخصائص التالية:

استخدامها

property

تستخدم لاختيار نوع الاطار المستخدم

border-style

تستخدم لتحديد عرض الاطار المستخدم

border-width

تستخدم لتحديد لون الاطار المستخدم

border-color

(1)border-style:

وتستخدم فى اختيار نوع الاطار وانواع الاطر هى:

شكلة

نوع الاطار

وهو عبارة عن اطار سميك

solid

وهو عبارة عن اطار يكون شكلة على هيئة نقط

dotted

والمثال التالى يشرح استخدامهما:

<!DOCTYPE html>

<html>

<head>

<style>

p.one

{

border-style:solid;

}

p.two

{

border-style: dotted;

}

</style>

</head>

<body>

<p>A solid border</p>

<p>A solid border</p>

</body>

</html>

(2)border-width:

تستخدم لتحديد عرض الاطار المستخدم وتقاس بوحدة البكسل كالمثال التالى:

<!DOCTYPE html>

<html>

<head>

<style>

p

{

border-style:solid;

border-width:5px;

}

</style>

</head>

<body>

<p>Some text.</p>

</body>

</html>

ملاحظة:لا تستخدم خاصية (border-width) بمفردها لذلك استخدمنا معها

خاصية (border-style).

(3)border-color:

وتستخدم فى تحديد لون الاطار المستخدم وذلك باستخدام اسماء الالوان او بالاكواد كما قلنا سابقا والمثال التالى يشرح الخاصية:

<!DOCTYPE html>

<html>

<head>

<style>

p.one

{

border-style:solid;

border-color:red;

}

p.two

{

border-style:solid;

border-color:#98bf21;

}

</style>

</head>

<body>

<p>A solid red border</p>

<p>A solid green border</p>

</body>

</html>

وهذة الخاصية ايضا لا تعمل بمفردها لذلك استخدمنا معها(border-style) .

-ملاحظة مهمة: يمكن استبدال الخواص الثلاثة السابقة بخاصية واحدة تجمعهم كالتالى:

<!DOCTYPE html>

<html>

<head>

<style>

p

{

border:5px solid red;

}

</style>

</head>

<body>

<p>This is some text in a paragraph.</p>

</body>

</html>

ويمكن ايضا تحديد نوع لكل جزء من الاطار عن طريق المثال التالى:

<!DOCTYPE html>

<html>

<head>

<style>

p

{

border-top-style:dotted;

border-right-style:solid;

border-bottom-style:dotted;

border-left-style:solid;

}

</style>

</head>

<body>

<p>2 different border styles.</p>

</body>

</html>

والامثلة السابقة فى الاطار تمت على تاج النصوص(p) ولكن يمكنك عمل اطار لاى تاج سواء الخاص بادراج الصور او تاج الجدول او غيرة.

Advertisements

ضع تعليقك هنا

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: