معهد آفاق التيسير للتعليم عن بعد - (4) الدرس الرابع: تنسيق الفقرات باستخدام css

بسم الله الرحمن الرحيم

تنسيق القوائم:

1. الطريقة الأولى :

كود بلغة HTML:

<style>ul.circle {list-style-type:circle}

ul.square {list-style-type:square}

ol.upper-roman {list-style-type:upper-roman}

ol.lower-alpha {list-style-type:lower-alpha}</style>

2. الطريقة الثانية:
في وسوم html

كود بلغة HTML:

<ol style="list-style-type:decimal;">



<ul style="list-style-type:circle;">

تنسيق النص text-decoration
وضع خط فوق النص text-decoration :overline
وضع خط تحت النص text-decoration:underline
وضع خط وسط النص text-decoration:line-through
وضع يظهر ثم يختفي النص text-decoration:blink
وضع النص عادي (يستخدم في إزلة الخط الإفتراضي تحت الوصلات التشعبية) text-decoration:none

تستطيع أن ترى الصورة بحجمها الطبيعي بعد الضغط عليها

لون وخلفية
color لتحديد لون النص
background وضع خلفية خلف النص (لون أو صورة)

كود بلغة HTML:

<span align=center size="10" style="background:#ccffcc">

وضع خلفية تحت النص

</span>

محاذاة النصوص text-align
text-align:center محاذاه النص إلى الوسط
text-align:right أو text-align:left محاذاه النص إلى اليمين أو اليسار
text-align:justify محاذاة النص إلى الاتجاهين

direction لتحديد اتجاه النص
قيمتان:ltr, rtl

letter-spacing زيادة أو نقصان المسافة بين الحروف في النص
الوضع الإفتراضي : normal

كود بلغة HTML:

letter-spacing:2px

أو

كود بلغة HTML:

letter-spacing:-2px

text-shadow إضافة تأثير الظل إلى النص (لا يدعمها متصفح اكسبلورر)

كود بلغة HTML:

text-shadow: 0.1em 0.1em 0.05em #00FF00

ومثال آخر

كود بلغة HTML:

<style type=text/css>

p {

text-shadow: 0.2em 0.5em 0.1em #00FF00,

      -0.3em 0.1em 0.1em #0000FF,

      0.4em -0.3em 0.1em #FF0000;

}

</style>



<body>





<p>لا إله إلا الله</p></body>

text-transform حالة النص كبير a او صغير a (للغات الأوروبية) وقيمها:
none,capitalize,uppercase,lowercase

تنسيق الفقرات:
إعطاء الفقرات مسافة بادئة: هناك ثلاثة أنواع من المسافات البادئة يمكن ضبطها في html :

(1) المسافة البادئة للسطر الأول :
text-indent تحدد المسافة البادئة من السطر الأول في كتلة النص (فقرة).
%,px

كود بلغة HTML:

(2) التبطين padding:
لإضافة مساحة حول محتويات العنصر ، في الجهة الداخلية للعنصر، فهو ينطبق بشكل متساو على كل أسطر الفقرة.

كود بلغة HTML:

كود:

p{padding: 20px}

(3) الهامش margin:
لإضافة مساحة حول محتويات العنصر ، في الجهة الخارجية للعنصر، فهو ينطبق بشكل متساو على كل أسطر الفقرة.

كود بلغة HTML:

كود:

p{margin: 20px}

line-height تحديد ارتفاع السطر أو المسافة بين كل سطر وتسمى أيضا leading

word-spacing زيادة أو نقصان المسافة بين الكلمات في النص

text-align تحديد المحاذاة الأفقية للنص
left, right, center, justify

تطبيق حدود على فقرة:
border-style نمط الحدود
solid(خالص),dotted(منقط),dashed(متقطع),double(مزدوج),groove(أخدودي),ridge(حيدي),inset(مغروز)
outset(ناتئ),none(بلا حدود)

ضبط تبطين الحدود padding:

كود بلغة HTML:

تحديد عرض الحدود border-width ولونها border-color:

كود بلغة HTML:

تخصيص الحدود:
تنسيق إحدى جهات الحدود ، مثال :

كود بلغة HTML:

http://www.afaqattaiseer.com/vb/uplo...1346653888.png

الواجب التطبيقي (7)
- استخدام تنسيق القوائم
- وضع خلفية خلف النص أو إضافة تأثير الظل
- مسافة بادئة text-indent
- حدود حول الفقرة

غفر الله لنا ولكم وللمسلمين أجمعين
والحمدلله
وصل الله وسلم على نبينا محمد وعلى آله وصحبه وسلم تسليما كثيرا