الوصفة السحرية لحجم خطوط الصفحة باستخدام الCSS
مدرج تحت قسم: دروس
لتتحكم في حجم خطوط صفحتك هناك أربع طرق-أذكرها إجمالا ثم أفصل-:
- باستخدام البيكسل
- بالنسبة المئوية
- بالتناسب
- بالكلمات(keywords)
والآن مع التفاصيل:
1- بالبيكسل:
body
{
font-size: 14px;
}
2- بالنسبة المئوية:
body
{
font-size: 14px;
}
h1
{
font-size: 150%;
}
لاحظ حجم ال(body) يبقى بوحدة البيكسل،والتغير يكون في العناصر الأخرى،وفي هذا المثال حجم ال(h1) يمثل 150% من حجم ال(body) الأساسي وهو 14 بيكسل.
3- بالتناسب: بمعنى أن حجم ال(h1)يمثل بمرة ونصف من الحجم الأساسي للـ(body)
1.5*14 بيكسل=21 بيكسل
body
{
font-size: 14px;
}
h1
{
font-size: 1.5em;
}
4- بالكلمات:
body
{
font-size: small;
}
(يعني تكتب حجم الخط: كبير(large)-وسط(medium)-صغير(small)-صغير جدا(x-small),…الخ)، وللمزيد حول الكلمات المتاحة ارجع لموضوع “طرق التحكم بالخط“.
طيب والسؤال الآن أين الوصفة السحرية؟؟
ومافائدتها؟؟
أولاً نبدأ بالوصفة:
- اختر كلمة للتحكم بالخط(يفضل صغير(small) أو وسط(medium)واجعلها لتخصيص ال(body) وستكون هي الخط الافتراضي للصفحة.
- حدد حجم الخط لأي عنصر آخر غير الـ(body) مثل الـ(p) والـ(h1) وغيرهما بالطرق الأخرى(إما الثانية أو الثالثة)
وما الجديد مع هذه الوصفة؟؟
عندما ترتبط أحجام خطوط صفحتك بالحجم الافتراضي للصفحة الذي خصصناه في الـ(body)؛فإنك بكل سهولة وسلاسة فقط بتغييرك حجم خط الـ(body) فإنك عمليا تغير كل أحجام خطوط العناصر المرتبطة بالـ(body).
فمثلا إذا أردت أن تكبر خطوط الموقع قليلا فما عليك سوى أن تغير حجم خط الـ(body) من small إلى medium على سبيل المثال.
وكذلك لو أراد المتصفح أن يكبر حجم الصفحة فالعملية ستكون أكثر سهولة واحترافية.
عن الكاتب
عبدالملك أحب القراءة في عدة مجالات أبرزها الأدب وتصميم المواقع وتحديدا في(HTML+CSS,JavaScript,AJAX) أدرس في السنة الأخيرة في تخصص علوم الحاسب الآلي في جامعة الملك خالد بأبها (KSA)
جزاك الله كل خير بالفعل طريقة جميلة , و حتى ذكرك لطرق تعريف حجم الخطوط جميل لأنني أول مرة أعرف الطريقة الخاصة بــ 1.5 em !!
تحياتي
فراس
معلومات جديدة شكرا ً :)
جزاك الله خير على هذه “الوصفة السحرية” .
إضافة على كلامك .. إذا حددت حجم خط معين ووضعته في body ، فهذا يعني بدلاً من كتابتك لحجم الخط في كل جزء من الصفحة أو جزء من الـ Class في CSS .. فهذا يعني تقليلك لحجم CSS كذلك ! ;)
السلام عليكم ورحمة ا لله وبركاته
أشكرك على هذه الوصفة الشهية، رغم أني لاحظت هذه الطريقة مطبقة في بعض المواقع لم أفهم الحكمة منها حتى قرأتها هنا.
واخيرا عرفت معنى em بالضبط .
شكرا لك , معلومات مفيدة وممتازه
بارك الله فيك ..
وصفه جميله حقاً :)
جعلها الله فى ميزان حسناتك اخى الحبيب عبد الملك
ما شاء الله عليك اخوي عبد الملك … بالفعل وصفة رائعة جدا يعطيك العافية .
ممكن نطور كلامك شوي لو سمحت ونضيف عليه كود جافا سكربت بسيط نربطه بملف css مع و – وهيك بنكون عملنا الوصفة اكثر سحر بمعنى لما نضغط يكبر حجم الخط مرحلة وحدة ولما نضغط – ايضا ينزل مرحلة واكيد كلنا فهمنا انو كل خطوط الموقع رح تكبر او تصغر حسب الضغطة وهيك بنكون عملنا ابداع بالموقع ليتناسب مع جميع المستويات .
او يمكن نستغني عن طريقة و – ونخليها احرف كبيرة وصغيرة يعني حرف A يكون بحجم صغير بجانبه نفسو بس اكبر ونحط 5 خيارات للمتصفح وهو يختار منها وبنفس الوقت عشان ما نغلب المتصفح وكل ما يدخل يختار حجم الخط نستطيع ان نربط الكود ايضا بالكوكيز وهيك بشكل تلقائي يحفظ الملف ما قام المصتفح باختياره ولما يفتح الصفحة من جديد يستخرج اخر خيار للمتصفح من ملف الكوكيز … يعني هيك صارت الوصفة اسطورية والسبب اكيد شرح الاخ عبد الملك …
مثال عملي على الطريقة الثانية (حرف A باكثر من حجم ) : http://phpscriptindex.com/jsfontchanger.html
يعطيك العافية اخوي .
اخوي الله يكثر من امثالك الفكره بسيطه وفائدتها كبيرها
دونتها بملاحظاتي
وادري بتدفيدني كثير في شغلى
وعوافي على هالفكره
اخوك خالد
اشكرك من كل قلبي وادعوا الله ان يوفقك ويجزاك كل خير على هذه الدروس المفيدة جداً .. فعلاً وأخيراً عرفت معناها …………………
السلام عليكم ،،
حقا طريقة رائعة جزاك الله خيرا
في الحقيقة لم أكن أعرف مهمة الوحدة em حتى اليوم
بإنتظار جديدك أخي الغالي
في أمان الله ~
ما شاء الله عليك ماقصرت
وربي يطول في عمرك
تقبل فائق أحترامي وتقديري لك
اخوك الداعي لك بوافر الصحه والعافيه
ويب البرامج