:: شركة الحمد وفروعها (آخر رد :soha mag)       :: # دورة إعداد الموازنة والتحليل المالي#21 يوليو 2024م ##metc (آخر رد :جهاد سعيد)       :: # دورة منسق الخدمات اللوجستية البحرية#6 يونيه 2024م #دبي#metc (آخر رد :جهاد سعيد)       :: فروع شركة الحمد (آخر رد :soha mag)       :: إيجار ليموزين في مطار القاهرة (آخر رد :جاسر صفوان)       :: # دورة التفكير الإبداعي في إدارة الأعمال#6 يونيه 2024م #دبي#metc (آخر رد :جهاد سعيد)       :: شركة الحمد وفروعها (آخر رد :soha mag)       :: # دورة الأساليب الحديثة في التوازن البيئي#26 مايو 2024م #القاهرة#metc (آخر رد :جهاد سعيد)       :: # دورة الاستراتيجيات الإدارية في أمن المعلومات#2يونية 2024م #القاهرة#metc (آخر رد :جهاد سعيد)       :: فروع شركة الحمد (آخر رد :soha mag)      
اختر لونك:
وَقُلِ اعْمَلُوا فَسَيَرَى اللَّهُ عَمَلَكُمْ وَرَسُولُهُ وَالْمُؤْمِنُونَ ۖ وَسَتُرَدُّونَ إِلَىٰ عَالِمِ الْغَيْبِ وَالشَّهَادَةِ فَيُنَبِّئُكُم بِمَا كُنتُمْ تَعْمَلُونَ [ التوبة : ( 105 )] كلمة الإدارة

يرجى إختيار القسم المناسب قبل النشر وسيعاقب المخالف بإنذار أول مرة وسيتم حظره إذا تكرر ذلك كلمة الإدارة

يُمنع كتابة مواضيع السحر والشعوذة والروحانيات والابراج بكافة الأشكال والمخالف سيعاقب بحظر مؤقت وإذا تكرر سيكون حظر دائم تنبيه هام جداً



أضف رد جديد

قديم 27-02-2019, 05:08 PM   #1
تاريخ التسجيل: Feb 2019
العمر: 28
المشاركات: 1,003
التقييم: 10
تاريخ التسجيل: Feb 2019
العمر: 28
المشاركات: 1,003
التقييم: 10
افتراضي الدليل السريع إلى لغة التنسيق css

الدليل السريع إلى لغة التنسيق CSS

تعتمد صفحات الويب على HTML التي تُحدد محتوى الصفحة.تعدّ CSS لغة منفصلة عن HTML ودورها هو تحديد الشكل والمظهر الخاص بصفحة الويب. الشفرة الخاصّة بـ CSS عبارة عن قواعد ساكنة. كل قاعدة تأخذ مُحدِدًا Selector أو أكثر، وتُرجع قيم لمجموعة من الخصائص الشكلية. تُطبَّق هذه الخصائص بعد ذلك على عناصر صفحة الويب المشار إليها بواسطة المحددات.
ملاحظة: لتعلم CSS بطريقة صحيحة، ولأن مخرجات هذه اللغة عبارة عن نتائج مرئية، يجب عليك ممارسة كل ما تتعلمه وننصحك بتطبيقه على موقع dabblet. الهدف الرئيسي من هذا المقال التركيز على كيفية الكتابة الصحيحة مع بعض النصائح.
سنتناول في هذا المقال العناوين التالية:

التعليقات.
المحددات.
الخصائص.
طريقة استخدام CSS في الصفحة.
الأولوية أم التتالي.
استعلامات الميديا.
التوافقية.
التعليقات
توجد طريقة واحدة لكتابة التعليقات في ملف CSS وهي كتابة التعليقات بين الرمزين /* */.

/* التعليقات تُتكتب هنا
ولا يوجد نمط لكتابة التعليق في سطر واحد سوى هذه الطريقة */
المحددات
يُستخدم المحدد في استهداف عنصر في صفحة، ويُكتَب بالطريقة التالية:

selector { property: value;
/* خصائص أخرى*/ }
لنفترض وجود العنصر التالي من نوع div في صحة ويب:

<div class='class1 class2' id='anID' attr='value' otherAttr='en-us foo bar' />
تستطيع تطبيق قاعدة CSS على هذا العنصر باستخدام أحد أسماء الأصناف Classes التي ينتمي إليها في الصفحة:

.class1 { }
أو باستخدام جميع أسماء الأصناف المطبَّقة عليه:

.class1.class2 { }
أو باستخدام نوع العنصر:

div { }
أو باستخدام الرقم الخاص بالعنصر:

#anID { }
نستطيع تحدد العنصر من الصفحة في حال وجود صفة Attribute باسم معين:

[attr] { font-size:smaller; }
أو في حالة وجود صفة بقيمة معينة:

[attr='value'] { font-size:smaller; }
في حالة وجود صفة معينة في عنصر، ونريد تطبيق قاعدة على هذا العنصر بشرط وجود قيمة تبدأ منها الصفة نستخدم الطريقة التالية:

[attr^='val'] { font-size:smaller; }
أما إن كان الشرط يتعلّق بقيمة معينة تنتهي بها الصفة:

[attr$='ue'] { font-size:smaller; }
نستطيع تحديد العنصر في حالة احتواء الصفة على قيمة معينة ضمن قائمة قيم منفصلة عن بعضها بمسافة فارغة (يوافق الشرط أدناه العناصر التي لديها صفة otherAttr تساوي “foo” أو “foo bar” أو “foo bar far” …إلخ):

[otherAttr~='foo'] { }
أو تحديد العنصر في حالة احتواء الصفة على قيمة معينة ضمن قائمة قيم منفصلة عن بعضها برمز – كما في المثال التالي:

[otherAttr|='en'] { font-size:smaller; }
نستطيع جمع أكثر من مُحدد ببعضها للحصول على مُحدد مُركز كما في المثال التالي:

div.some-class[attr$='ue'] { }
من الممكن أيضا أن تقوم بتحديد عنصر يكون تابعا (ابن) لعنصر آخر:

div.some-parent > .class-name { }
في المثال السابق، يكون العنصر الابن على مستوى واحد أسفل من العنصر الأب. تستطيع أن تُحدد عنصر من سلالة عنصرآأخر (الأب)، وهذا يعني من أي مستوى أسفل من مستوى العنصر الأب (ليس شرطا أن يكون مستوى واحد أقل):

div.some-parent .class-name { }
يختلف المُحدد التالي عن المُحدد السابق لوجود مسافة فاصلة بين الأسماء:

div.some-parent.class-name { }
نستطيع تحديد العنصر بناءً على عنصر آخر مجاور له باستخدام الطريقة التالية:

.i-am-just-before + .this-element { }
أو بناءً على أي عنصر يسبق العنصر الذي نريده:

.i-am-any-element-before ~ .this-element { }
توجد بعض المُحددات تسمى الأصناف الزائفة pseudo classes تطبَّق على العنصر عندما يكون بحالة محددة، فمثلا، نستطيع تحديد عنصر عندما يمر عليه المؤشر:

selector:hover { }
أو رابط تمت زيارته:

selector:visited { }
أو لم تتم زيارته:

selected:link { }
أو عنصر في حالة التركيز:

selected:focus { }
لتحديد أول عنصر تابع لعنصر:

selector:first-child {}
لتحديد آخر عنصر تابع لعنصر:

selector:last-child {}
نستطيع تنسيق أجزاء محددة من العنصر باستخدام العناصر الزائدة Pseudo elements، فمثلا، نستخدم before لإضافة محتوى قبل محتوى عنصر معين:

selector::before {}
وafter لإضافة محتوى بعد محتوى عنصر معين:

selector::after {}
في أماكن معينة، يُستخدم رمز * كحرف “بدل” لاختيار كافة العناصر.

* { } /* كل العناصر */
.parent * { } /* كل التابعين */
.parent > * { } /* كل الأبناء */
الخصائص
selector {
وحدات الطول إما مطلقة أو نسبية.
الوحدات النسبية:

width: 50%; /* نسبة من عرض العنصر الأب */
font-size: 2em; /* مضاعفة حجم الخط الخاص بالعنصر نفسه*/
font-size: 2rem; /* مضاعفة حجم الخط حسب حجم الخط الخاص بالعنصر الأب */
font-size: 2vw; /* مضاعفة حجم الخط بالنسبة ل 1% من عرض المساحة المرئية للمستخدم*/
font-size: 2vh; /* من الارتفاع*/
font-size: 2vmin; /* مضاعفة حجم الخط لأصغر قيمة من الارتفاع أو العرض*/
font-size: 2vmax; /* لاكبر قيمة */
القيم المطلقة:

width: 200px; /* بكسل */
font-size: 20pt; /* نقطة */
width: 5cm; /* سنتميتر */
min-width: 50mm; /* مليميتر */
max-width: 5in; /* إنش */
الألوان:

color: #F6E; /* صيغة سداسية قصيرة */
color: #FF66EE; /* صيغة سداسية طويلة */
color: tomato; /* حسب الاسم */
color: rgb(255, 255, 255); /* كقيم rgb */
color: rgb(10%, 20%, 50%); /* كنسبة rgb */
color: rgba(255, 0, 0, 0.3); /* كقيم rgba */
color: transparent; /* الشفافية صفر*/
color: hsl(0, 100%, 50%); /* كنسب hsl */
color: hsla(0, 100%, 50%, 0.3); /* كنسب hsla */
الحدود:

border-width:5px;
border-style:solid;
border-color:red;
border: 5px solid red; /* اختصار القواعد السابقة في قاعدة واحدة */
border-radius:20px; /* خاصية ابتداء من css3 */
الصور:

background-image: url(/img-path/img.jpg);
الخطوط:

font-family: Arial;
إذا كان اسم الخط به مسافات فيجب وضع الاسم بين علامتي تنصيص:

font-family: "Courier New";
في نسرُد لائحة من الخطوط وإن لم يجد المتصفح الخط، يستخدم نوع الخط التالي:

font-family: "Courier New", Trebuchet, Arial, sans-serif;
}
طريقة استخدام CSS في الصفحة
توجد ثلاث طرق لإجراء عملية تنسيق صفحة الويب وهي كالتالي:
1- تضمين اسم الملف بالامتداد .css داخل العنصر head في بداية صفحة html كالتالي (وهي الطريقة المُوصى بها):

<link rel='stylesheet' type='text/css' href='path/to/style.css'>
2- كتابة قواعد css مباشرة في ملف الصفحة:

<style>
a { color: purple; }
</style>
3- تنسيق العنصر بطريقة مباشرة:

<div style="border: 1px solid red;">
</div>
الأولوية أم التتالي
العنصر الواحد في صفحة الويب قد يكون مُستهدفا (محددا) من قبل مجموعة متعددة من المحددات، وقد يكون هناك تعديل أو تحديد لقيمة خاصية تابعة لهذا العنصر من قبل أكثر من مُحدد. في مثل هذه الحالات، فإن قاعدة واحدة سيكون لها الأولوية في التطبيق على هذا العنصر.
القواعد التي تمتلك محددات مُفصلة لها أولوية على المحددات ذات التفاصيل الأقل، والقواعد التي تأتي في النهاية تقوم بالتعديل على القواعد التي قبلها (وهذا يعني أنه في حالة تضمين ملفي css وكلاهما يقومان بتحديد عنصر والتعديل على خصائصه، فإن ترتيب ربط الملفات يحكم تنسيق العنصر حسب قاعدة الترتيب المذكورة والتي تُسمى التتالي أو التتابع).

استعلامات الوسائط Media queris
استعلامات الوسائط هي خاصية بدأت من CSS 3 وتسمح لك بتحديد متى تُطبَّق قواعد CSS، مثلا عند الطباعة، أو عند كثافة وأبعاد شاشة معينين.
أمثلة:
هذه قاعدة CSS تُطبَّق على كل الأجهزة.

h1 {
font-size: 2em;
color: white;
background-color: black;
}
يعدّل استعلام الوسيط التالي القاعدة السابقة عند الطباعة:

@media print {
h1 {
color: black;
background-color: white;
}
}
يجعل استعلام الوسيط التالي حجم الخط أكبر في شاشة بعرض 480 بكسل على الأقل:

@media screen and (min-width: 480px) {
h1 {
font-size: 3em;
font-weight: normal;
}
}
تحتوي استعلامات الوسائط على الخصائص التالية:

width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color,color-index, monochrome, resolution, scan, grid.
من الممكن أن يسبق أغلب الخصائص السابقة خاصيتي min- و max-.
خاصية الدقة Resolution غير مدعومة على الأجهزة القديمة، وبدلا من ذلك استخدم خاصية device-pixel-ratio.
تحاول كثير من أجهزة الجوال والأجهزة اللوحية عرض الصفحة كما لو كانت على سطح المكتب العادي إلا إذا قمت بإضافة الصفة viewport بالشكل التالي:

<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
</head>
التوافقية
أغلب المميزات والخصائص الموجودة في CSS2 وكثيرا من CSS3 موجودة في كل المتصفحات والأجهزة، ولكن ينصح من باب الممارسة الأفضل أن يتم الفحص قبل استخدام الخاصية الجديدة.

القيصر غير متواجد حالياً   اقتباس
قديم 28-07-2019, 07:50 PM   #2
الصورة الرمزية احمد البرنس
تاريخ التسجيل: Jul 2019
المشاركات: 500
التقييم: 10
افتراضي

بارك الله فيكم ونفعنا بما قدمتم
جزاكم الله خير الجزاء
سلمت اناملكم
فى انتظار ابدعاتكم
دمتم متألقين مبدعين متميزين
احمد البرنس غير متواجد حالياً   اقتباس
أضف رد جديد

الكلمات الدلالية (Tags)
منتديات رحيل, رحيل, شبكة رحيل, r7il, r7il.com


الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)
 
أدوات الموضوع
انواع عرض الموضوع

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

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة
Trackbacks are متاحة
Pingbacks are متاحة
Refbacks are متاحة


المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
مدخل لتعلم لغة التنسيق css الفارس قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress 0 09-04-2019 10:25 AM
الدليل السريع إلى لغة البرمجة بايثون Python 3 مهرة النجدية قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress 0 01-03-2019 09:44 AM
الدليل السريع إلى لغة البرمجة Kotlin القيصر قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress 0 27-02-2019 04:55 PM
الدليل السريع للغة البرمجة Java القيصر قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress 0 27-02-2019 04:32 PM
أسهل طريقة للحفظ السريع رفيق الدرب المواضيع العامة 0 07-02-2019 03:29 AM


الساعة الآن 10:12 PM

 


Content Relevant URLs by vBSEO ©2010, Crawlability, Inc.