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

سامية السلفية · #1 2 ذو الحجة 1433هـ/17-10-2012م, 07:43 AM

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

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

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:

 <p style="text-indent: 20px">

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

كود بلغة HTML:

 <p style="padding: 20px">

كود:

 p{padding: 20px}

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

كود بلغة HTML:

<p style="margin: 20px">

كود:

 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:

 <p style="border-style: solid; padding: 15px">

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

كود بلغة HTML:

 <p style="border-style: solid; border-width:2px; border-color: brown">

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

كود بلغة HTML:

 <p style="padding:20px; border-top-style:dotted; border-bottom-style:dotted">

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

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

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)