اشترك ليصلك جديدنا
ليصلك جديد التصاميم المجانية والمدفوعة، ومقالات التسويق الإلكتروني،
اشترك معنا باضافة بريدك الإلكتروني، وكذلك واتساب (اختياري).
الدرس الرابع عشر: النصوص CSS Text
جميع دروس CSS
الدرس الاول: مقدمة حول CSSالدرس الثاني: كيف نكتب كود CSS
الدرس الثالث: محرر Adobe Dreamweaver
الدرس الرابع: طريقة تطبيق لغة CSS
الدرس الخامس: المحددات CSS Selectors
الدرس السادس: الألوان CSS Colors
الدرس السابع: العنصر HTML div
الدرس الثامن: الخلفيات CSS Backgrounds
الدرس التاسع: حدود العناصر CSS Borders
الدرس العاشر: الحدود المدورة CSS Rounded Borders
الدرس الحادي عشر: الهوامش CSS Margins
الدرس الثاني عشر: الهوامش الداخلية CSS Padding
الدرس الثالث عشر: الطول والعرض CSS Height and Width
الدرس الرابع عشر: النصوص CSS Text
الدرس الخامس عشر: الخطوط CSS Fonts
الدرس السادس عشر: القوائم HTML Lists
الدرس السابع عشر: الروابط CSS Links
الدرس الثامن عشر: الاتجاهات CSS directions
الدرس التاسع عشر: الجداول CSS Tables
أنواع النصوص CSS Text Types
خصائص تنسيق النصوص CSS Text formatting
أنواع النصوص CSS Text Types
لا شك أن النصوص تعتبر من أهم محتويات صفحات الويب، وهي إما أن تكون عناوين أو فقرات أو مقالات طويلة أو روابط وغير ذلك.
خصائص تنسيق النصوص CSS Text formatting
هناك الكثير من الخصائص في CSS لتنسيق النصوص وسيتم ذكر الأكثر استخداماً وهي كالتالي:
- لون النصوص CSS Text color: من أهم الخصائص للنصوص تعيين اللون ويكون ذلك عبر خاصية color وتكون القيم هي الألوان سواء بالاسم او بالكود مثل: #000
- محاذاة النص CSS Text alignment: وهذه الخاصية لتعيين محاذاة النص في أحد الثلاث الجهات سواء اليمين او اليسار او الوسط ويتم التعيين بواسطة text-alignment وأما القيم فهي (left – right - center).
- اتجاه النص CSS Text direction: اتجاه النص يتم تطبيقه لتحديد من أين يبدئ النص فمثلا نستخدم هذه الخاصية لتحويل اتجاه النص من اليمين إلى اليسار لو كان النص باللغة العربية ويتم تعيين الخاصية بواسطة direction وأما القيم فهي اثنتان فقط rtl وتعني من اليمين إلى اليسار وكذلك ltr وتعني من اليسار الى اليمين.
- خط مع النص CSS Text decoration: نستخدم هذه الخاصية لعمل خط تحت النص أو أعلاه أو في منتصفه ويكون عبر text-decoration والقيم هي (underline،line-through،overline ).
- خط النص CSS Text font: بالتأكيد أن الخط يعتبر أهم خاصية في النصوص، ويتم تعيين الخطوط بسهولة عبر خاصية font-family واما القيم فهي أسماء الخطوط مثل: Times Roman وأيضا Arial.
- تحويل النصوص CSS Text transformation: وهذه الخاصية تستخدم للغة الإنجليزية وهي تحويل حروف النص الصغير إلى الكبيرة والعكس، وتكون عبر خاصية text-transformation والقيم هي (uppercase – lowercase).
- ارتفاع السطر للنص CSS Text height line: وهي خاصية مهمة جدا من خلالها نستطيع تحديد ارتفاع السطر للنص سواء العناوين أو الفقرات أو غيرها وذلك عبر خاصية line-height والقيم قد تكون محددة بالبكسل أو قيم أخرى مثل (inherit – normal).
- الفراغ بين الأحرف CSS Text spacing: خاصية تستخدم لزيادة الفراغ بين أحرف الكلمات وتستخدم في حروف الكلمات الإنجليزية واللاتينية عبر خاصية letter-spacing وتعيين القيمة يكون بالبكسل.
- حجم الخط CSS Font size: من أهم خصائص النصوص في CSS هي تعيين حجم الخط وذلك عبر خاصية font-size ويتم تعيين القيمة بالبكسل.
مثال (17)
سنقوم بعمل div ويحتوي على عنوان ونصين (نص باللغة الإنجليزية وآخر بالعربية) الطول سيكون 300 بكسل والعرض 50% مع تحديد الحدود، على ان تكون خواص النص كالتالي:
- اختيار لون للعنوان ولون مختلف للنص.
- تحديد خط Tahoma للنصوص.
- تحديد اتجاه النصين العربي والإنجليزي حسب الأنسب لهما.
- العنوان يكون باللغة الإنجليزية ويحول لحروف كبيرة عبر CSS بالإضافة لفراغ مناسب بين الأحرف.
- حجم نص العنوان 44 بكسل، وحجم النص الإنجليزي والعربي 16 بكسل وارتفاع النص لهما يكون 22 بكسل.
- إضافة صورة رئيسية بداية div قبل العنوان.
الخطوات:
- نقوم بإنشاء ملفين (صفحة ويب Text.html) وملف CSS (style.css) في نفس المجلد.
- سنقوم بعمل div داخل ملف صفحة الويب html وبداخله (صورة – عنوان – نصين بالعربية والإنجليزية).
- سنربط ملف صفحة الويب بملف CSS.
- سننشئ 4 كلاسات داخل ملف CSS والذي اسميناه style.css والذي سيتضمن: كلاس div-style وسيكون مخصص لصندوق او مربع الـ div والذي يحوي الجميع، كلاس title مخصص للعنوان، كلاس English-text مخصص للنص باللغة الإنجليزية، الكلاس Arabic-text مخصص للنص العربي.
- في ملف صفحة الويب سنربط جميع العناصر بالكلاس الخاص بها.
- سيتم إضافة جميع الخصائص اللازمة داخل كل كلاس.
ملف صفحة الويب Text.html سيتضمن الكود التالي:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Text Style Example</title>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<div class="div-style">
<img src="/photo1.jpg" width="100%">
<h3 class="title">What is Lorem Ipsum? </h3>
<p class="English-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p class="Arabic-text">
ابجد هوز حطي كلمن سعفص قرشت. الأبجدية الفينيقية الكنعانية من أقدم الكتابات الأبجدية تتألف من اثنين وعشرين حرفا تتبع ترتيب أبجد هوز حطي كلمن سعفص قرشت وتكتب من اليمين إلى اليسار واستخدمت في المنطقة الساحلية لشرقي البحر المتوسط.
</p>
</div>
</body>
</html>
ملف style.css ويحوي الكود التالي:
.div-style {
width: 50%;
height: auto;
padding: 20px;
margin: 0 auto;
border:#2DB074 solid 1px;
}
.title {
letter-spacing: 6px;
color: #9BCDBE;
font-family: tahoma;
font-size: 33px;
}
.English-text {
color: #866C22;
font-size: 16px;
line-height: 22px;
font-family: tahoma;
direction: ltr;
}
.Arabic-text {
color: #3E3F42;
font-size: 16px;
line-height: 22px;
font-family: tahoma;
direction: rtl;
}النتيجة:
صورة للكود لملف Text.html في Dreamweaver
من خلال الكود أعلاه قمنا بإنشاء div وقمنا بربطه مع كلاس في ملف css وهو div-style كما يتبين ذلك في سطر 11،
وتم في سطر 13 ادراج صورة photo1.jpg وحددنا العرض ب 100% كي يكون عرضها تلقائياً بحجم div التي هي فيه.
في سطر 14 أدرجنا عنوان h3 وربطناه بالكلاس title الموجود في ملف style.css،
في سطر 15 بدانا بعمل فقرة باللغة الإنجليزية بواسطة كود <p> وربطناها بكلاس خاص بها وهو English-text،
كذا تم انشاء فقرة باللغة العربية وربطناها بالكلاس الخاص بها Arabic-text، وأخيراً أغلقنا div في السطر 27.
صورة للكود لملف style.css في Dreamweaver
في الكود أعلاه تم عمل 4 كلاسات:
في السطر 4 تم عمل كلاس div-style والمربوط بالdiv الذي يتضمن جميع البيانات الصور والعنوان والنصوص، قمنا بتعيين الخصائص
في السطر 5 حددنا العرض 50% من صفحة المتصفح.
السطر 6 حددنا الارتفاع بأن يكون تلقائي auto حسب المحتوى.
السطر 7 حددنا المساحة للهامش من الداخل مابين المحتوى وحدود الdiv وتم تعيين 20 بكسل.
السطر 8 حددنا الفراغ الخارجي بين حدود div من الأعلى والأسفل 0 بكسل ومن اليمين واليسار اوتوماتيكي auto (وتعني التوسط بين الجهتين).
السطر 9 حددنا حدود div وتم تعيين اللون والسٌمك للحدود.
كلاس title وهو المخصص للعنوان ويحوي الخواص التي تضبط شكل العنوان،
في السطر 13 حددنا الفراغ بين الأحرف 6 بكسل، وحددنا اللون في سطر 14.
سطر 15 حددنا الخط المستخدم Tahoma.
سطر 16 تحديد اتجاه الخط من اليسار إلى اليمين ltr والتي هي اختصار left to right.
بقية الكلاسات English-text وكذلك Arabic-text مخصص للنصين العربي والانجليزي وتم تعيين الخواص المذكورة مسبقاً.