Cascading Style Sheets
الطريقة الأولى : external style
هي الطريقة المنفصلة ,
أي تنسق في صفحة امتدادها css وتربطها بصفحة html , ويكون الربط بكتابة كود في قسم الرأس له الوسم link وله السمات التالية .
السمات الأربعة وقيمها هي:
href سمة
وهو كما نعرف للرابط (المسار ) كاسم ملف الصفحة وهنا سيكون ملف صفحة css , فالقيمة مثلا اسم ملف الصفحة التي سأربط بها
css/styles.css
css/styles.css
rel سمة
وهو اختصار relationship أي العلاقة بين ملف css والملف الذي نود ربطه به , فالقيمة مثلا نوع تنسيق الصفحة الأخرى التي سأربط بها
stylesheet
type سمة
النوع : وهو نوع الورقة التي نستخدمه والتي ستكون ورقة تنسيق الأنماط المتتالية css فتكون القيمة هكذا:
text/css
text/css
media سمة
وهي تعني على ماذا ستكون المخرجات , وهي بالطيع ستكون الشاشة
لانه هناك ما يسمى screen أو print وما سنستخدمه هو قيمة screen .
<link href="css/you.css" rel="stylesheet" type="text/css" media="screen" />
الطريقة الثانية : internal style
كتابة تنسيق css في قسم الرأس head في صفحة html مباشرةداخل وسم اسمه اسلوب style وهو وسم ثنائي.
مثال:
في قسم الرأس سأكتب التنسيق التالي:
<head>
<style>
h1 {font-size:12px; }
h2 {color:#FF0000; }
</style>
</head>
النتيجة :<style>
h1 {font-size:12px; }
h2 {color:#FF0000; }
</style>
</head>
الطريقة الثالثة : inl-line style
فمثلا سأذهب إلى وسم النص p وأقوم بتنسيقه باستخدام الوسم style كـ سمه بداخله .
الطريقة :هي كتابة style ثم علامة مساوة وتنصيص بداخلة اسم السمة ثم نقطتين رأسيين ثم القيمة.
هكذا :
<p style="color: #00CCFF";> الهند</p>
النتيجة أن النص صيصبح باللون السماوي.___
لماذا تفضل طريقة css الخارجية ؟
consistency التوافق :
أي أنها تطبق على كافة وسوم الصفحات لكن مع الفردية ستضطر إلى تنسيق سطر سطر.
* ) في الحقيقة يفضل الطريقة المنفصلة لانها تطبق بشكل تام على كافة الكود وليس وسم ,,وسم ..
ملاحظة :
ماذا يحدث لو طبقت التنسيق بطريقة خارجية وسطرية (فردية ) في نفس الوقت ؟
ستكون الأسبقية precedence للأقرب وهو الفردي حتى وإن كان على نفس الوسم.
وإن كان المميزات أكثر في الورقة الخارجية فبعد أن يطبق التنسيق الفردي سيأخذ الميزات الباقية من الورقة الخارجية
قدر ترغب بالاطلاع على هذا الموضوع :
3 أنواع رئيسية من ورقة الأنماط : ( Cascading Style Sheets )
ليست هناك تعليقات:
إرسال تعليق