النتائج 1 إلى 10 من 10

الموضوع: [css] طرق التحكم بالخط

  1. #1
    عضو نشيط
    تاريخ التسجيل
    Aug 2007
    المشاركات
    55

    [css] طرق التحكم بالخط



    أخي المطور..
    إن من أهم الأمور التي تضفي على موقعك أو برنامجك جمالاً هي تنظيم النص و سهولة قراءته، واليوم.. سأتحدث عن كيفية التحكم بالخط بالـ css وسأشرح لك أشهر أوامره
    1- نوع الخط

    بإمكانك التحكم بنوع الخط بواسطة القيمة font-family ..
    مثال:
    كود HTML:
     body { font-family: Arial, Helvetica, Tahoma; }
    2- قياس الخط

    بإمكانك التحكم بقياس الخط بواسطة القيمة font-size ..
    وهناك عدّة طرق للتحكم بقياس الخط، أذكر منها طريقة الكتابة، والتي تحتوي على عدّة قيم..
    مثال على جميع القيم :
    كود HTML:
    body {  font-size: xx-small;  font-size: x-small;  font-size: smaller;  font-size: small;  font-size: medium;  font-size: large;  font-size: larger;  font-size: x-large;  font-size: xx-large;  }
    3- شكل الخط

    بإمكانك التحكم بشكل الخط بواسطة القيمة font-style ..
    وله 3 أنواع من القيم هي:
    • normal : وهذا لجعل شكل الخط عادي كما هو
    • italic : وهذا لجعل الخط مائلاً
    • oblique : وهذا لجعل الخط مائلاً أيضاً
    مثال على جميع القيم :
    كود HTML:
    body {  font-style: normal;  font-style: italic;  font-style: oblique;  }
    4- لون الخط

    بإمكانك التحكم بلون الخط بواسطة القيمة color ..
    وهناك طرقتان للتحكم بلون الخط:
    • بالإسم : بحيث تكتب اسم اللون
    • بالرمز : بحيث تكتب رمز اللون
    مثال على القيمتين :
    كود HTML:
    body {  color: green;  color: #00FF00;  }
    5- التباعد بين الأحرف

    بإمكانك التحكم بتباعد الأحرف عن بعضها بواسطة القيمة letter-spacing ..
    مثال :
    كود HTML:
    body { letter-spacing: 1em; }
    6- المسافة بين الكلمات

    بإمكانك التحكم بالمسافة بين الكلمات بواسطة القيمة word-spacing ..
    مثال :
    كود HTML:
    body { word-spacing: 5em; }
    - تزيين الخط

    بإمكانك التحكم بزينة الخط بواسطة القيمة text-decoration ..
    وله 5 أنواع من القيم هي:
    • none : وهذا لجعل الخط عادي كما هو
    • underline : وهذا لإضافة خط أسفل الكلمة
    • overline : وهذا لإضافة خط أعلى الكلمة
    • line through : وهذا لإضافة خط على الكلمة
    • blink : وهذا لجعل الخط يومض (يظهر ويختفي)
    مثال على جميع القيم :
    كود HTML:
    body {  text-decoration: none;  text-decoration: underline;  text-decoration: overline;  text-decoration: line-through;  text-decoration: blink;  }
    و هذا مثال عن كل هذه الخصائص:
    ط£ظ…ط«ظ„ط© ط¹ظ„ظ‰ ط¯ط±ط³ ط§ظ„ط®ط· ظپظٹ css
    ويمكنك تحميل الملف من هنا:
    http://www.almashroo.com/articles/ex...t1/example.zip
    هذه هي أشهر خصائص الخط في css
    ط§ظ„ظ…ط´ط±ظˆط¹ » [css] ط·ط±ظ‚ ط§ظ„طھط*ظƒظ… ط¨ط§ظ„ط®ط·
    بواسطة mhamed







  2. #2
    عضو نشيط
    تاريخ التسجيل
    Aug 2007
    المشاركات
    33


    يعطيك العافية على المعلومات الجميلة


    تحياتي ،،،





    __________________
    شركة الحلول الذكية للاستضافة
    smart solution for hosting
    www.ss4h.com

    هدفنا راحة العميل والخدمة المميزة
    admin@ss4h.com

  3. #3


    جمل الله حالك ..





    __________________
    لله در الحسد ما أعدله بدأ بصاحبة فقتلة

  4. #4
    عضو نشيط جدا
    تاريخ التسجيل
    Jan 2005
    المشاركات
    518


    يعطيك العافية أخي

    حبيت ضيف اني بستخدم هالكود لنختصر ثلاثة قيم في واحدة

    يعني نوفر font-size + font-family + font-style

    في كلمة واحدة هي font

    يعني بدل ما نتكتب:

    كود HTML:
    font-style:bold; font-size:12px; font-family:Tahoma;
    سنكتب

    كود HTML:
    font:bold 12px Tahoma;
    يرجى الملاحظة بأن القيم لن تعمل اذا غيرنا في ترتيب القيم
    مثلا
    كود HTML:
    font:Tahoma bold 12px;
    تحياتي





    __________________
    اللهم أعز الاسلام و المسلمين

  5. #5
    عضو سوبر نشيط
    تاريخ التسجيل
    Jun 2003
    المشاركات
    680


    معلومات حلوه وقيمه
    جزاكم الله خير





    __________________
    اللهم أرحم والدي وأغفر له وأدخله الجنة من أوسع أبوبها يارب

    my Email : romntic (@) gmail.com

    أرا الخدمات التقنية

  6. #6

    Thumbs up



    معلومات حلوه وقيمه
    جزاكم الله خير
    وإضافة رائعة من أخي ALaa462






  7. #7
    عضو نشيط
    تاريخ التسجيل
    Aug 2007
    المشاركات
    242


    مشكور






  8. #8
    عضو نشيط
    تاريخ التسجيل
    Aug 2007
    المشاركات
    242


    مشكور اخي






  9. #9
    عضو سوبر نشيط
    تاريخ التسجيل
    Mar 2000
    المشاركات
    762


    عندي سؤال صغير ماهي الوسوم التي تستعملها لكتابة الفونت
    أنا استعمل في العاده em and p فقط
    هل تكتب الخطوط داخل وسوم أم تكتبها بدونها
    المشكله عند استعمال الوسم p فأن line high يصبح عالي جداً أي ان ال control اللذي يليه في السطر سوف يكون بعيد جداً





    __________________
    Eng.Fedail
    Computer and Electronics Engineer

  10. #10
    عضو نشيط
    تاريخ التسجيل
    Aug 2007
    المشاركات
    55


    الوسوم التي تستعمل في كتابة الخطوط هي
    كود HTML:
    <h1></h1>
    <h2></h2>
    تحياتي










ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  
0
أضف موقعك هنا