WEP.X
مرحبا بكم في موقع (WEP.X) موقع متخصص في علوم التكنولوجيا والبرمجة نقدم محتوي تعليمي عن لغات البرمجة وتكنولوجيا الحاسوب
الدرس الثاني في سلسلة تعلم (CSS)
المحتوي
- المقدمة
- العنصر link
- محددات العناصر
- خصائص اخري
(المقدمة)
اهلا بك في سلسلة دروس تعلم لغة css المقدمة من موقع wep.x نعمل علي تقديم ادق الشروحات لتصلك المعلومة كاملة
(العنصر link)
يمكنك استخدام العنصر link بديل الخصائص الداخلية التي هي بين وسوم style لتسهيل ألأستخدام حيث يمكنك كتابة اكواد css مرة واحدة واستخدامها علي اكثر من ملف وتسريع تحميل الصفحة وهو عنصر من ضمن العناصر التي ليس لها قوس غلق
مثال
- <link rel="stylesheet" href="style.css" type="text/css">
- أو يمكن استخدامه كالأتي
- <link rel="stylesheet" href="style.css">
حيث ان الخاصية type غير مهمة عند استيراد ملف css لأن تحديد العلاقة في الخاصية rel تدل علي ان هذا ملف تنسيق وكما هو موضح العنصر rel لتحديد العلاقة بين الملفين وقيمتها stylesheet لتحديد علاقة تنسيق والعنصر type لنوع الملف و بالطبع href لمسار الملف
(محددات العناصر)
يمكن استخدام محددات العناصر لأكثر من عنصر بمعني تطبيق الخصائص علي نوعين من العناصر
مثال
- → p , a {...الخصائص هنا}
هكذا يتم تطبيق القواعد علي كل العناصر a و p الموجودة في الصفحة ويجب الفصل بينهم بفاصلة
والنوع الثاني هو عنصر داخل عنصر
مثال
- → p a {...الخصائص هنا}
فقط استبدلنا الفاصلة بمسافة فارغة وهذا المحدد يعني كل عناصر a الموجودة داخل عناصر p يتم تطبيق القواعد عليها
(خاصية font-size و color)
سنعرض اليوم نوعين من الخصائص
النوع الاول هي الخاصية color وهي تستخدم لتحديد لون العنصر وتأخذ قيمة لونية مثل red yellow
- → p , a {
color:red;
}
ويمكن ايضا اعطاء قيمة لونية بطريقة hexadesimal للتعبير عن اللون
- → p , a {
color:#1f1f1f;
}
ويعتبر كل خانتين تمثل لون ويتراوح بين 0 الي f
والخاصية الثانية هي
الخاصية font-size التي تحدد حجم النص في الصفحة وتأخذ قيمة رقمية بأي وحدة قياس مثل px او em
مثال
- → p a {
font-size:15px;
}
هكذا يتم تطبيق حجم نص مختلف علي عناصر a الموجودة داخل p
ويمكنك استبدال px بوحدة قياس اخري مثل em
- → p , a {
color:#1f1f1f;
}
فيديو شرح
الخاتمة:-
هكذا اتممنا الحديث عن خاصية font-size و color وجمع عنصرين في محدد واحد