السبت، 15 يوليو 2017

التعامل مع النصوص فى لغة CSS - الجزء الثاني

التعامل مع النصوص فى لغة CSS - الجزء الثاني

- في الدرس السابق تم شرح مقدمة فى لغة CSS للمزيد من المعلومات برجاء زيارة الرابط السابق التعامل مع النصوص فى لغة CSS 
- في هذا الدرس سنستكمل الحديث عن المزيد من خصائص الـ CSS المستخدمة للتعامل مع النصوص .

* text-trasnform

تستخدم هذه الخاصية لتعديل على النص فى لغة الـ CSS حيث يمكن للنص ان تكون جميع احرفه كبيرة Uppercase , او صغيرة Lowercase  او الحرف الاول من الكلمة فقط هو الكبير Capitalize 
h1 {
text-transform: uppercase;}
h2 {
text-transform: lowercase;}

* text-decoration


تستخدم هذه الخاصية لتعديل على النص فى لغة الـ CSS من حيث وضع خط اسفل النص underline او وضع خط اعلي النص overline او وضع نص خلال النص line-through او وميض على النص blink .

h1 {
  text-decoration: underline;}
a {
  text-decoration: none;}

* letter-spacing  

تستخدم هذه الخاصية لتحديد المسافة بين احرف النص فى لغة الـ CSS 
h1 {
letter-spacing: 0.2em;}

*word-spacing 

تستخدم هذه الخاصية لتحديد المسافة بين الكلمات فى لغة الـ CSS 
h2 {
word-spacing: 1em;}

* text-align

تستخدم هذه الخاصية لعمل محاذاة للنص سواء يمين right او يسار left او فى المنتصف center او justify.

p {

text-align: center;}

*vertical-align 

تستخدم هذه الخاصية مع inline elements مثل <img> و <em> و غيرها من العناصر للتحكم بمحاذاة النص سواء كان baseline , sub , super , top , text-top , middle , bottom , text-bottom

*text-indent

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

*first-letter

تستخدم هذه الخاصية لتحديد خواص معينه للحرف الاول من من نص لعنصر ما
p.intro:first-letter {
font-size: 200%;}

*first-line 

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

p.intro:first-line {
font-weight: bold;}

الروابط Links 

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

*link

تستخدم هذه الخاصية لتحديد شكل الروابط التي لم يتم زيارتها

* visited

تستخدم هذه الخاصية لتحديد شكل الروابط التي تمت زيارتها

* hover

تستخدم هذه الخاصية لتحديد شكل الروابط عند مرور الزائر عليها بمؤشر الـ Mouse .

*active

تستخدم هذه الخاصية لتحديد شكل الروابط عندما يقوم المستخدم بالضغط عليها.
a:link {
color: deeppink;
text-decoration: none; }
a:visited {
color: black; }
a:hover {
color: deeppink;
text-decoration: underline; }
a:active {
color: darkcyan; }

0 التعليقات

إرسال تعليق