قوالب توفر الوقت في CSS

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

قوالب توفير الوقت في CSS

1 – تعليقات الراس:
كثير لا يكتبها ولكنها مفيدة على الأقل لمعرفه الحقوق لذلك سنبدأ بها.


/*
Site Name:
Site URI:
Description:
Version:
Author:
Author URI:
*/

2- الألوان الأساسية:
فقط لتحديد نمط الألوان الأساسية في الموقع وليس تفصيلا.

Body Background:
Main Text:
Links:
*/

3- إعادة التصفير:
تحدثنا سابقا عن التصفير وأهميته وأنواعه، ولكن سوف نأخذ في الاعتبار أن يكون بسيط وفي نفس الوقت يؤدي الغرض المطلوب منه وهو تصفير الخاص بـ ياهو.


body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol,ul {
list-style: none;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
abbr,acronym { border: 0;
}

والآن جاء وقت التحميل: من هنا

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


body {
font-family: ;
font-size: 100%;
background: ;
color: #;
}
a:link {
color: #;
}
a:visited {
color: #;
}
a:hover, a:active {
color: #;
text-decoration: none;
}
h1 {
color: #;
font-size: ;
}
h2 {
color: #;
font-size: ;
}
h3 {
color: #;
font-size: ;
}
h4 {
color: #;
font-size: ;
}
ol {
list-style-type: ;
}
ul {
list-style-type: ;
}
li {
margin: ;
}
blockquote {}
#wrapper {
width: 960px;
margin: 10px auto;
}

5 – الراس:
للهيدر الخاص بالصفحة

#header {}
#logo {}

6- الجزء الخاص بالملاحة كما يسمونه جزء القوائم:

#nav {}

7- المحتويات

#content {}
#content h2 {}
#content h3 {}
#content p {}

8- الجوانب

#sidebar {}
#sidebar h2 {}
#sidebar ul {}
#sidebar li {}

9- الحقول

input {}
textarea {}
button {}
input:focus {}
textarea:focus {}
button:hover {}

10- الجداول

table {}
tr {}
th {}
td {}

11- المؤخرة أو التذييل

#footer {}
#footer h2 {}
#copyright {}

12- وهناك بعض الإضافات الشائعة التي لا تندرج تحت بند معين من هذه البنود السابقة.

.alignleft {float: left;}
.alignright {float: right;}
.clear {clear: both;}
.center {text-align: center;}
.left {text-align: left;}
.right {text-align: right;}
.small {font-size: 0.8em;}
.hidden {display: none;}

  • مصطفى جبيل

    الف شكر يا احمد موضوع جميل جدا

  • ممتاز.. شكرا لك 🙂

  • الله ينور ممكن اشوف بقية دروس السي اس اس ازاي بتاعة حضرتك

  • ممتازة وهتوفر وقت كبير

  • يا سلام 🙂

    هذا موضوع يستحق التجارب حقاً , سأتعبث بمدونتي قليلاً.

    شكراً أخي أحمد, جهودك طيبة جداً.

  • أبو وليد

    بارك الله فيك

    لدي استفسار بخصوص “3- اعاده التصفير :” لم أفهم وظيفة هذا التصفير
    مع العلم أني اطلعت على المقال السابق وأيضاً لم تتضح لدي الصورة.
    الحمدلله أفهم css جيداً إلا أني لم أستخدم هذا التصفير قط لذلك أردت معرفة الفائدة التي يقدمها لي كمصمم.

    • اهلا يا ابو وليد وشكرا لتعليقك وياريت تفيدنا بخبراتك
      بالنسبه للموضوع التصفير
      انا حشرحلك باختصار اللى فاهمه بالنسبه للموضوع والاخ سعود او اى اخ حابب يضيف نقطه يكون مشكور
      الموضوع باختصار ان المتصفحات الاعدادت الافتراضيه ليها بالنسبه للاستايل فى الغالب بتكون مختلفه بنسب بسيطه
      فايده الريست تحديدا انك بتخليى كل الاعدادت صفر بحيث لما تطبق الاستايل الخاص بيك يديك نفس النتيجه على اغلب المتصفحات
      ياريت اكون قدرت افيدك

  • جميل جدا الشرح بارك الله فيك

  • متشكر لكل الردود يا جماعه واهلا بيكم وبصراحه تشجعيكم يجعلنى ابذل المزيد

  • موضوع متميز .. شكرا لك ،، يحتاج المرئ بين الحين والآخر أن يراجع بعض الطرق الجيدة لاختصار الوقت ..

  • شرح رائع بارك الله فيك ..
    حبذا تكتب لنا شرح عن قيم التموضع
    absolute
    relative

    مع ذكر الفوارق بينهم وشرح بالصور كلما أمكن

    وجزاك الله خيراً

    • سوف ارد عليك برد بسيط يا اخ صقر لحين تجهيز موضوع
      بالنسبه شيم التموضع

      absolute العنصر فى هذه الحاله هو عنصر حر تماما غير مرتبط بايى divقبله ولا بعده تحدد مكانه من اعلى يسار الصفحه بالقيم

      relative فهى تتثاثر بالعناصر التى حولها
      خصوصا ال div الرئيسى او الاب لهذا العنصر

  • جميييييييييييل

  • تدوينة رائعة جداً..! ماشاء الله
    تمت الاضافة الى المفضلة
    راح استفيد منها الكثير

تعليقات عبر الفيسبوك