• Dubai, UAE
  • +971 54 408 4441
  • moe.rayan@gmail.com
الدرس الثاني: تحليل كود الCSS والبدء بتنفيذه في الووردبريس

الدرس الثاني: تحليل كود الCSS والبدء بتنفيذه في الووردبريس

أعزائي، وكم رأيتم لقد غطينا أساس الCSS ولماذا تستخدم في الدرس الأول

في هذا الدرس سنخطو الى الامام لكي نعرف كيف نكتب كود CSS وكيف نستخدمه في الووردبريس

  • أساس كتابة كود الCSS

لكتابة كود CSS، بإتباع هذه الداله

selector {
peroperty:value;
}

يأتي مكان الSelector الكلاس أو الأي دي (ID) او الوسوم العالمية المستخدمة في الHTML كـ body أو HTML أو h1 أو p … الخ

يأتي مكان الproperty الخاصية وهي خواص مستخدمة ومعروفة بلغة الCSS كـ font أو color أو background-color أو width أو height … الخ

ويأتي مكان الvalue القيمة كـ #a2a2a2 أو 100% … الخ

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

body {
font-size:15px;
}

لنحلل الكود

الselector المستخدم هو body
الخاصيه font-size اي حجم الخط
القيمة 15px;

النتيجة ، سيتغير حجم الخط الى 15 بيكسل

  • Class & ID

للتمييز بين الكلاس والاي دي
في ملف الستايل
الكلاس يبدأ بنقطة
.class
اما الاي دي يبدأ بهاش #
#id

لنفرض أنه لدينا قائمة جانبية ولون خلفيتها أسود، وأردنا تغيير لون الخلفية الى اللون الأبيض

<br />
<div class="sidebar">
<br />
<div id="text-3" class="box list1 widget widget_text">
 
<br />
<div class="wtitle">
<h2>النشرة البريدية</h2>
</div>
<p><!--/wtitle -->
<br />
<div class="hl"></div>
<p>
<br />
<div class="content">
 
<br />
<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=3nkboot', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p>ادخل ايميلك:</p>
<p><input type="text" style="width:140px" name="email"/></p>
<p><input type="hidden" value="3nkboot" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" class="small buttonn" value="اشترك" /></form>
<p>
 
</div>
<p>
</div>
<p>

كما تلاحظ في السطر الأول

<br />
<div class="sidebar">

أي، القائمة الجانبية تحمل كلاس باسم sidebar

نفتح ملف الستايل، ونبحث الكلاس عن

.sidebar

هذا هو ستايل القائمة الجانبية

.sidebar {
background-color: white;
float: left;
width: 270px;
}

اذاً، سنغير لون الخلفية من الأبيض الى الأسود
سنغير هذا السطر background-color:white;
الى

background-color:black;

بعد ذلك نحفظ التغييرات!

مثال آخر

لنفرض أن نوع الخط لدينا Arial وأردنا تغيير الخط الى Tahoma
افتح ملف الستايل
وابحث عن font-family
مثلاً الfont-family لدي هة arial
واريد تغييره الى tahoma

font-family:"arial, vardena;"

سأغيره الى التالي

font-family:tahoma;

سهلة، أليس كذلك؟

تدريب: غير لون الخط من الاسود الى الرصاصي(gray

3 آراء على “الدرس الثاني: تحليل كود الCSS والبدء بتنفيذه في الووردبريس”

  1. عآيض قال:

    اولآ آستفدت من موقعك جزآك الله خير وعلمتني آسآسيآت CSS
    طيب كيف آغير خط المدونة بالكآمل إلى ae_AlMothnna
    والجوآب إلى
    background-color:gray;

  2. abdessamed قال:

    لماذا لا يوجد دورات و الله كرهت

  3. مشكوور يالطيب وانا بانتظار الدروس القادمة، في الوقت الحالي افكر افتح مدونة ووردبريس سيتم التواصل معك عبر الايميل

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *