بسم الله الرحمن الرحيم
تنسيق القوائم:
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">
(3) الهامش margin:
لإضافة مساحة حول محتويات العنصر ، في الجهة الخارجية للعنصر، فهو ينطبق بشكل متساو على كل أسطر الفقرة.
كود بلغة HTML:
<p style="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
- حدود حول الفقرة
غفر الله لنا ولكم وللمسلمين أجمعين
والحمدلله
وصل الله وسلم على نبينا محمد وعلى آله وصحبه وسلم تسليما كثيرا