قوالب توفر الوقت في 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;}

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

المصدر

Advertisements
Explore posts in the same categories: الرئيسية

اترك رد

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s


%d مدونون معجبون بهذه: