CSS الأساسية التي يحتاج كل مستخدم WordPress إلى معرفتها

أي شخص لديه موقع WordPress ، في مرحلة ما ، سيواجه موقفًا يحتاج فيه إلى تغيير بعض التعليمات البرمجية. هذا لا يعني أنه من المتوقع أن تكون مطور ويب ، تكتب JavaScript و PHP مثل المحترفين. على الأرجح ، ستحتاج إلى العبث بـ HTML و CSS الأساسي ، أساسيات أي صفحة ويب ، WordPress أم لا.

لدينا برنامج تعليمي رائع حول أكواد HTML الأكثر شيوعًا والصديقة للمبتدئين التي ستحتاج إليها. ألقِ نظرة واقرأ ذلك أيضًا. هذه المرة ، نريد أن نطلعك على بعض مقتطفات وأفكار CSS الأساسية التي ستساعدك على تعديل موقعك ليبدو ويتصرف تمامًا كما تريده.

اشترك في قناتنا على اليوتيوب

1. المحددات والفئات والمعرفات

في CSS ، أساس كل شيء هو المحدد . ببساطة ، إنه اختصار يخبر الكود بما يجب استهدافه. يمكنك استهداف جميع الفقرات الفردية على الموقع بحرف p {} . (يتم وضع أي كود يتم تطبيقه على المحدد بين الأقواس المتعرجة.) في كثير من الحالات ، ستصطف محددات العناصر هذه مع علامات HTML التي تنشئ صفحة الويب باستخدامها (مثل p {} Target <p> أو h2 {} و < h2> ).

بعد ذلك ، لديك دروس . هذه أنواع محددة من المحددات التي تحددها أنت (أو قالبك / WP نفسه). إذا كنت تريد استهداف عناوين H1 فقط للمشاركات ، فقد يكون لديك .post-title {}. يُشار إلى محدد فئة CSS بواسطة النقطة / الفترة الموجودة أمام المحدد نفسه. تُستخدم هذه لاستهداف العناصر على مستوى الموقع ، ولكن ليس العناصر الأساسية مثل H1 البسيط. لاحظ أن المحددات الأساسية لا تحتوي على نقطة أو مؤشر آخر ، مما يعني أنها لغة HTML الأساسية.

تعمل المعرفات في CSS تمامًا مثل الفصل الدراسي. باستثناء اثنين من الاختلافات الطفيفة. يشار إليها بعلامة # أمام المحدد ، ويتم تسميتها لمثيل واحد محدد (أو عدد محدود من الحالات) لعنصر يحتاج إلى تصميم متخصص. مثل # email-subscribe-about-page {} أو # email-subscribe-after-post {}. تشير هذه المعرفات إلى أنه بدلاً من استهداف نوع معين من العناصر ، فإنهم يختارون العناصر الفردية بأنفسهم.

p {
	color: red;
}

.class {
	color: white;
}

#id {
	color: blue;
}

محددات أخرى

نظرًا لأننا نناقش أساسيات CSS ، فلن نتعمق في المحددات الأكثر تعقيدًا ، ولكنها موجودة بالفعل. يمكنك أيضًا استهداف ما يسمى بالفئات الزائفة التي قد تنطبق فقط عند تمرير مؤشر الماوس فوق الرابط. أو محدد السمة الذي سيستهدف فقط العناصر التي لها معلمة معينة مرفقة بها. أيضًا ، يمكنك تمكين CSS ليكون نسبيًا لموضع عنصر باستخدام p :: after و img :: before.

يمكن أن تكون هذه الأمور متطورة ومعقدة بشكل لا يصدق للحصول عليها بشكل صحيح ، لذلك بالنسبة لتعلم الأساسيات ، فهي ليست شيئًا يجب أن تقلق بشأنه. ومع ذلك ، أردنا منك أن تعرف أن هناك طرقًا أكثر تحديدًا يمكنك من خلالها التفاعل مع المستند.

2. النقطتين والفاصلة المنقوطة

ذكرنا أعلاه أن كل كود CSS يقع بين الأقواس المتعرجة. داخل هذه الأقواس ، ومع ذلك ، يجب أن ينتهي كل سطر من التخصيص بفاصلة منقوطة (؛) . يشير ذلك للمتصفح إلى اكتمال نمط معين. لا يهم التباعد مع CSS باستثناء قابلية القراءة ، ولكن الفاصلة المنقوطة نفسها غير قابلة للتفاوض.

أيضًا ، بين نمط CSS الفعلي والقيمة ، يمكنك وضع نقطتين عاديتين (:) . مرة أخرى ، لا يهم التباعد هنا على الإطلاق . يمكن أن يكون لديك مسافات على أحد جانبيها ، أو كلاهما ، أو لا شيء ، وسيستمر عرض CSS.

لاحظ أنه في حين يمكنك ترك هذه المساحات، هو المقبول عموما أنه لا ينبغي. ومع ذلك ، مع معظم مواقع الويب والسمات التي تقدم تصغير CSS ، تتم إزالة جميع المساحات بغض النظر.

3. تعليقات CSS

إذا كنت بحاجة إلى تضمين وثائق في كود CSS ، فيمكنك القيام بذلك من خلال التعليقات. يتم فتح تعليقات CSS وأغلق مع / * و * / حرف. يعد التعليق على التعليمات البرمجية أمرًا مهمًا ليس فقط بالنسبة لك للعودة إلى CSS لاحقًا ، ولكن أيضًا للمطورين في وقت لاحق. بشكل عام ، تُستخدم تعليقات CSS للإشارة إلى ما يفعله مقتطف معين.

يمكنك أن ترى أعلاه أن الكود يقول فقط ما يفعله المقتطف التالي. من المهم جدًا الاستمرار في القيام بذلك ، حيث يمكن أن يصبح ملف CSS الخاص بك معقدًا للغاية بمرور الوقت.

/* This is what a CSS Comment Looks Like */

img {
	display:none;
}

4.! المهم

من الصعب المبالغة في تقدير مدى أهمية العلامة المهمة التي يمكن أن تكون لـ CSS. يقصد التورية. إنه أحد العناصر الأكثر استخدامًا في CSS ، ولكنه أيضًا أحد العناصر الأكثر استخدامًا وإفراطًا في الاستخدام.

ترى ، ! المهم يعلن أن أي سطر فيه هو تجاوز أي نمط آخر لهذا المحدد. في أي مكان في ورقة الأنماط. لذلك إذا أردت التأكد من أن عنصرًا معينًا له دائمًا لون معين ، فستستخدم ! المهم أن تفعل ذلك. تأكد من ملاحظة أن العلامة المهمة بأكملها تنتقل بين القيمة والفاصلة المنقوطة ، وليس بعد ذلك.

#author-name {
	color:red!important;
}

#author-name {
	color:blue;
}

5. عرض: لا شيء؛

يعد مقتطف CSS هذا أحد أهم مقتطفات CSS التي يجب أن يتعلمها القادمون الجدد. كل ما يفعله هو جعل أي عنصر تستهدفه يختفي ببساطة. على سبيل المثال ، إذا كنت بحاجة إلى صفحة لا تحتوي على قائمة رأس ، على سبيل المثال ، يمكنك ببساطة وضع هذا الرمز في:

يمكن أن يؤدي القيام بذلك مع فئة تظهر في كل صفحة تقريبًا إلى إزالتها تمامًا من الموقع. لذلك عليك أن تكون حريصًا بشأن ما تقوم بتطبيقه عليه.

يمكنك استخدام هذا في منشورات WordPress أو صفحات معينة لإزالة العناصر الفردية مثل البيانات الوصفية من المنشور نفسه. في Divi ، يمكنك تخصيص وحدة المدونة الفردية لعدم الحصول على مقتطفات المنشور باستخدام هذا الرمز:

.home-page-blog .post-content {
	display:none;
}

6. الرؤية: مخفي.

باختصار شديد ، يمكنك أيضًا استخدام الرؤية: مخفي ؛ CSS لإزالة عنصر من الشاشة. ضع في اعتبارك أن هناك فرقًا بين هذا والعرض: لا شيء ؛ في التعليمات البرمجية الخاصة بك.

العرض ؛ لا شيء ؛ ستزيل التعليمات البرمجية العنصر تمامًا من الصفحة. لن يعرض المتصفح العنصر على الإطلاق ، حيث تمت إزالته تمامًا. مع الرؤية: مخفي ؛ لا يزال يتم عرض العنصر وتحميله في الصفحة ، ولكنه غير مرئي. لجميع المقاصد الوظيفية ، لا يزال موجودًا. لا يمكن للمستخدم رؤيته.

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

#code-module { 
visibility:hidden; 
}

7. الهامش والحشو

يُساء فهم الهوامش والحشو من قبل الوافدين الجدد إلى CSS. تظهر هي نفسها في البداية ، ولكن بمجرد أن تبحث في الأمر ، سترى أنها مختلفة تمامًا.

الهامش هو المسافة حول العنصر. إنه غير مرئي وشفاف ، ويمكن حتى أن يكون سلبيًا. سيؤدي وجود هامش أيسر أكبر إلى دفع العنصر إلى اليمين. ثم يدفع الهامش العلوي الأكبر العنصر نحو الأسفل. الهامش السلبي يفعل العكس. سيؤدي الهامش العلوي السلبي إلى سحب العنصر لأعلى ، على سبيل المثال.

الحشو ، إذن ، يخزن حجم العنصر. سيؤدي الحشو الموجود على اليسار إلى توسيع خلفية العنصر إلى اليسار. إنها تزيد بشكل أساسي من كتلتها المادية. مثل إضافة سترة ثانية في يوم بارد. تحصل على مزيد من الحشو على جسمك. أنت أثخن مما كنت عليه من قبل. هذه هي الطريقة التي تعمل بها المساحة المتروكة في CSS أيضًا ، وبسبب ذلك لا يمكنك الحصول على حشوة سالبة .

عند استخدامه كرمز ، يمكنك استخدام الهامش الافتراضي : 15 بكسل ؛ أو الحشو: 1vw ؛ لتباعد منتظم حول المحدد. أو يمكنك استخدام margin-top أو margin-left أو margin-right أو margin-bottom للتأثير على هذا الجانب فقط ولديك مستويات مختلفة لكل منها. المساحة المتروكة أيضًا مع ترك مساحة فارغة وهكذا.

h2 {
	margin-bottom:25px;
	padding-left:15vh;
}

8. عناصر التلوين

يعد تغيير لون العناصر المختلفة أحد تلك الأشياء التي قد تبدأ في التغيير والتبديل فيها من اليوم الأول الذي تبدأ فيه موقعًا. في CSS ، يمكنك تحديد لون بطريقتين.

الطريقة الرئيسية هي استخدام الكود السداسي العشري المكون من 6 أرقام: #ffffff للأبيض أو # 000000 للأسود ، كأمثلة. يمكنك تحديد أي لون RGB برمز سداسي عشري ، وإذا كنت لا تعرفه ، فلا تقلق. يوجد الكثير من المواقع والأدوات للمساعدة في ذلك.

الطريقة الثانية هي استخدام كلمة ملونة محددة مسبقًا. الألوان الأساسية مثل الأزرق والأسود والأحمر محددة مسبقًا ويمكنك استخدامها دون الحاجة إلى تذكر أي رموز سداسية عشرية. ولكن إذا لم تكن النغمات الأساسية هي ما تحتاجه ، فإن الرموز السداسية هي أفضل رهان.

استخدام رموز الألوان

فيما يتعلق بالاستخدام الفعلي لأكواد الألوان ، هناك عدد من الطرق. لأي نص يحتاج إلى التغيير ، ما عليك سوى استخدام color: #ffffff؛ وسيتغير أي نص داخل هذا المحدد. يمكنك فعل الشيء نفسه لعناوين العناوين مثل H1 و H2 بالألوان .

p {
	color:white;
	background-color:#000;
}

h3	{
	background:green;
	border: #110011;
}

تغيير الأشياء مثل لون الخلفية: أحمر ؛ أو الخلفية: أخضر ؛ من عنصر بنفس السهولة. أضف قيمة اللون. يمكنك أيضًا استخدام اللون: # 000 ؛ قيم المحددات مثل : hover التي ستغير لون الارتباط عند التمرير فوقه. أو حتى الحدود: أزرق ؛ لوضع حافة ملونة حول أي عنصر تريده.

التفاف على أساسيات CSS

يمكن أن تكون CSS ساحقة. ويمكنك القيام بأكثر من مجرد تبديل الألوان وإظهار / إخفاء العناصر. ومع ذلك ، إذا كنت تتعلم CSS فقط وكيفية التعامل مع موقع ويب عبر التعليمات البرمجية ، فإن استيعاب هذه الأساسيات الخاصة سيجعلك تشعر بالراحة في قراءة التعليمات البرمجية وتعديلها حتى لو لم تفتح محرر كود من قبل.

ما هي بعض CSS الأساسية التي تستخدمها غالبًا على مواقعك؟

المادة مميزة صورة من darkwark / shutterstock.com