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

Text

– سنتعلم فى هذا الجزء كيفية التعامل مع النصوص بلغة (css) والخصائص المستخدمة فى ضبط النصوص هى:

Property

الاستخدام

color

تستخدم لضبط لون النص

direction

ويستخدم لتحديد طريقة كتابة النص من اليمين الى اليسار او العكس

text-align

وتستخدم لتحديد وضع النص اى فى يمين الصفحة ام فى يسارها ام فى الوسط

text-decoration

تستخدم فى عمل خط اسفل النص او اعلاة او خلال النص

text-shadow

تستخدم فى عمل ظل للنص

text-transform

تستخدم فى عمل نصوص تكون احرفها كابتل او سمول او كل كلمة فى النص يكون اول حرف فية كابتل

والان مع شرح الخصائص السابقة :

(1)Color:

وقد تم شرحها سابقا.

(2)direction:

ويتم عن طريقها تحديد اتجاة الكتابة فى النص ولها قيمتين الاولى من اليمين الى اليسار(rtl) او العكس من اليسار الى اليمين (ltr) كما بالمثال التالى:

<!DOCTYPE html>

<html>

<head>

<style>

p.text1 {direction:rtl;}

p.text1 {direction:ltr;}

</style>

</head>

<body>

<p> text1 from right to left </p>

<p >text2 from left to right</p>

</body>

</html>

وتظهر فى صفحة الويب كما يلى:

text1 from right to left

text2 from left to right

– وهنا نظرا لاننا استخدمنا تاجين متشابهين(p) فى عمل النصوص فلكى نفرق بينهم فاننا نستخدم خاصية  (class)وهى ان تعطى اسم معين للتاج من داخل خاصية (class) كما بالمثال ثم بدل استخدامها بالطريقة السابقة نزيد عليها نقطة ومعها اسم(class) كالتالى (p.text1) واستخدام خاصية (class) داخل لغة (css) لها اهمية كبيرة اذ ان غالبية مستخدمى لغة(css) يستخدمون خاصية (class).

(3)text-align:

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

1- (right) لضبط النص يمين الصفحة

2- (left) لضبط النص يسار الصفحة

3- (center) لضبط النص فى وسط الصفحة

والمثال التالى يشرح الخاصية السابقة بجميع قيمها:

<!DOCTYPE html>

<html>

<head>

<style>

h1 {text-align:center}

h2 {text-align:left}

h3 {text-align:right}

</style>

</head>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

</body>

</html>

وتظهر بصفحة الويب كما يلى:

This is heading 1

This is heading 2

This is heading 3

(4)text-decoration:

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

1- (overline) لوضع خط اعلى النص

2- (line-through) لوضع خط خلال النص

3- (underline) لوضع خط تحت النصوص

والمثال التالى يشرح الخاصية بقيمها المختلفة:

<!DOCTYPE html>

<html>

<head>

<style>

h1 {text-decoration:overline;}

h2 {text-decoration:line-through;}

h3 {text-decoration:underline;}

</style>

</head>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

</body>

</html>

وتظهر بصفحة الويب كما يلى:

This is heading 1

This is heading 2

This is heading 3

(5)text-transform:

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

1- (uppercase)عن طريقا يكون النص كلة كابتل

2- (lowercase) عن طريقها يكون النص كلة سمول

3- (capitalize) عن طريقها يكون النص كل كلمة فية اول حرف كابتل

والمثال التالى يشرح الخاصية بقيمها الثلاثة:

<!DOCTYPE html>

<html>

<head>

<style>

p.uppercase {text-transform:uppercase;}

p.lowercase {text-transform:lowercase;}

p.capitalize {text-transform:capitalize;}

</style>

</head>

<body>

<p>This is some text.</p>

<p>This is some text.</p>

<p>This is some text.</p>

</body>

</html>

وتظهر بصفحة الويب كالتالى:

THIS IS SOME TEXT.this is some text.

This Is Some Text.

Advertisements

2 responses

  1. محمد النور-السودان | Reply

    ربنا يجعل لكم من كل ضيق مخرجا ؛ ومن كل هم فرجا “آمـــــــــــــــــــــــين يا الله”

    1. امين يا رب وشكرا

ضع تعليقك هنا

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: