• Dubai, UAE
  • +971 54 408 4441
  • moe.rayan@gmail.com
الدرس الأول: مقدمة في الCSS

الدرس الأول: مقدمة في الCSS

السلام عليكم ورحمة الله،

هذه دورة مقدمة من: محمد ريان
المستوى: للمبتدئين

سجل في النشرة البريدية حتى يصلك جديد الدورة

سنغطي أساسيات الCSS وكيفية استخدامها في الwordpress

لنبدأ رحلتنا ونتجول في عالم التصميم من أوسع أبوابه
الCSS

  • تعريف الCSS:


الCSS هي اختصار لـ Cascading Style Sheet
تستخدم في تصميم المواقع، من خلالها تستطيع توفير الكثير من الوقت من حيث أن الاستغناء عنها يتطلب منا كتابة أكواد كثيرة في HTML

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

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

  • تطبيق سريع في الCSS

لنفرض أننا نملك موقع مكون من 5 صفحات، مصمم بإستخدام الHTML فقط

وأردنا تغيير لون الخلفية من الأبيض الى الأسود

سنضطر الى التعديل على جميع الصفحات وتعديل وسم الBody

<body bgcolor="black">

أو اذا اردنا تغيير حجم خط الترويسة h1
سنضطر الى تغيير كم كبير من السطور

ولكن في الCSS جل ماعليك عمله هو

لنفرض أننا أردنا تغيير حجم خط الترويسة h1 من 18 الى 24

h1 { 
font-size:24px;
}

وسيتم تغيير جميع الترويسات المحتواه في الموقع.

  • الخطوة الأولى

لبداية تصميم موقع بالCSS

نعمل صفحة ويب
مثلاً

<html>
<head>
<title> 3nkboot el wordpress </title>
<link rel="stylesheet" type="text/css" href="style.css"> << لتحديد مكان ملف الستايل (هنا سيتم كتابة جميع أكواد الستايل الخاص بالموقع)
</head>
<body>
 
<ul>
 
<li>my first website</li>
<p>
 
<li>3nkboot.com</li>
<p>
</ul>
<p>
</body>
</html>
  • استخدام الCSS في الووردبريس

جميع قوالب الووردبريس لا تخلو من الCSS
للوصول الى ملف الستايل الخاص بموقعك، اذهب الى wp-content/themes/your_template
وانتقل الى ملف القالب الخاص بموقعك
افتح ملف header.php
وستجد مكان ملف الستايل

دورة CSS

شاركونا أرائكم 🙂

انتظرونا في دروس أخرى

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

11 رأي على “الدرس الأول: مقدمة في الCSS”

  1. LOSH قال:

    وآأإآأإه ، كمساميّــــدا ^.^

  2. LOSH قال:

    هممممم ، وين ملف الهيدر ؟
    ف المدونه نفسسسها ؟ !!
    وبعدين لو فتحته وحصلت السطر وت اسسوي ؟

    1. محمد ريان قال:

      اليوم ان شاء الله سأشرح كيفية الوصول الى هذا الملف

  3. LOSH قال:

    مممماشششا الله تبارك الرحمن ^.^
    شرح مفصصصل للِـ CSS ، تشوقت لتعلمها =)
    ولكن !
    أخيّ بِـ النسبه لِـ [ wp-content/themes/your_template ] ، مدونتي انا عربيّـه . .
    ومستخدمه حاليّـاً قالب اسمه [ Paperpunch ] . .
    فَـ لو ابي صل لِـ الملف الخاص بستايل المدونه ششلون ؟ @.@

    سوري لو ثقلت عليّـك ، بس مشتهيّـه وبعنف اتعلم هَـ اللغه البرمجيّـة ^.^

    1. محمد ريان قال:

      ان شاء الله الدرس الثالث في الطريق 😀

      لتصلي لملف الCSS

      افتحي ملف الheader.php
      في داخل وسم الhead
      ستجدي سطر يبدأ ب <link rel='stylesheet type="text/css" href ="xxxxxxxxxxxxx/style.css

  4. محمد ريان قال:

    أجمعين ان شاء الله، جزاك الله خيراً على المداخلة

  5. ادعس قال:

    بداية موفقة .. استمر يامبدع 😀

  6. عبدربه قال:

    استمر أيها البطل على مهلك وتذكر أن هناك أناس لا يعرفون أدنى شي عن وورد بريس أو css
    آمل منك التسهيل بقدر استطاعتك

    ويا ليت لو تسوي الدروس بالفيديو! فكرة رائعة!

    1. محمد ريان قال:

      ولايهمك ياخوي، تأكد أن تتابع عنكبوت، وسنرتقي بالمبتدئين لنجعلهم محترفين 🙂

  7. تنبيه: غير معروف

أضف تعليقاً

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