cssbit 2.0

عند كتابة كود css من الطبيعي ان تغير الالوان عدة مرات .. (استعمل color schemer) لاختيار الالوان .. بدل ان احذف اللون اضعه بين علامتي /* و */ فلربما احتاجه ..

#login {
	background: #9BD8F7;
	/* background: #8DC995;*/
}

هذه من بين الأمور التس استخدمها .. أيضا عندما أضيف border لشيء ما اجرب حذفه بوضع القيمة 0 بدل مسح السطر ..

#login {
	border: 1px dotted #ddd;
	border: 0px dotted #ddd;
}

ويمكن ترك السطر الاول بدون علامتي /* و */ لان السطر الاخير هو الذي سيأخذ بعين الاعتبار

لدي مجموعة من الالوان، من كثرة ما اكررها اصبحت احفظها وهي:

#login span {
  color: #eee;
  color: #e4e4e4; /* من 01 الى 04 */
  color: #ddd;
  color: #333;
  color: #666;
  color: #999;
}

وكلها من درجات الرمادي ..

اختصارات الالوان:

#login span {
  color: #999999;
  color: #999;
 
  color: #aa5511;
  color: #a51;
}

.. المزيد في خربشات جديدة

بدأت في كتابة درس هنا، ولم أتممه لانني واجهت مشاكل عديدة مع إضافة التلوين، فمجرد ان اعود للصفحة كي اعدل واضيف تختفي اكوادا وتترجم فعليا الى نصوص والوان وكأن <pre> لا تقوم بعملها ..

لذلك ساتتم الدرس اليوم في هذا الموضوع، وما بقي هو كود css لأننا كتبنا اكواد xhtml عبارة عن نموذج بريدي في وسط الصفحة .. سيكون الدرس معزز بالصور والامثلة ..

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

النموذج البريدي:

<!-- start login -->
<div id="login">
 
 <h4>لوحة تحكم الإدارة</h4>
  <!-- start form -->
  <form method="post" action="login.php">
 
  <p><label for="username">اسم الدخول</label><br />
  <input type="text" name="username" id="username" size="40" /></p>
 
  <p><label for="password">كلمة المرور</label><br />
  <input type="password" name="password" id="password" size="40" /></p>
 
  <p><input type="submit" value="دخول" class="submit" /></p>
 
  </form>
  <!-- end form -->
 
</div>
<!-- /end login -->

أنشأت كلاس رئيسي باسم login ثم عنوان بين h3 ..
بعدها وضعت input بين 3 فقرات .. (نعم يمكن استعمال p داخل الوسم form)

يمكن ايضا استعمال ul و li في انشاء نموذج بريدي ..

اعتقد ان كود xhtml مفهوم وواضح ولا يحتاج لشرح ؟

ساحصل على نموذج بريدي في يمين الشاشة فقط دون تأثيرات او الوان لانني لم انشئ ملف css بعد

مثال

الخطوة الثانية

سابدا بكتابة ملف css وسأضيف سطرا للصفحة السابقة وذلك لاستدعاء ملف css علما ان هناك 3 طرق مختلفة ..

 <link href="css/master.css" rel="stylesheet" type="text/css" />

أو

@import url("css/master.css");

ولكل طريقة إيجابيات وسلبيات .. فاستعمال import مثلا يجعل ملف css مخفيا عن اصدارات internet explorer القديمة ..

لدي ملف master.css داخل مجلد css .. لذلك وضعت المسار كاملا ..

/**
 
  @file: master.css
  @date: 28/05
  @by: cssbit
 
*/
 
body {
}
 
#login {
}
 
#login h4 {
}
 
#login form {
}
 
#login input {
}
 
#login p {
}
 
#login label {
}
 
#login .submit {
}

بالرجوع لكود xhtml فانني ساجد جميع هذه الوسوم التي اصبحت مثل الكلاسات في ملف css .. يمكنني الاستغناء عن البعض منها ..
هكذا تتوضح لي الأمور اكثر فاكثر ..
لن ارجع لملف xhtml وسابقى داخل المحرر اصمم ملف css وكانني ارسم بالفوتوشوب ..

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

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

كود css:

body {
	margin: 0;
	padding: 0;
	font: bold 95% Times New Roman;
	/*background :#F2F1DE;*/
	background: #D9D9D9;
}
#login {
	width: 350px;
	margin: 120px auto;
	border: 2px solid #B2B2B2;
	background: #fff;
	padding: .6em;
}
#login h4 {
	background: url(../images/private.gif) no-repeat right center;
	text-indent: 14px;
	color: #B82E2E;
}
#login form {
	border: 0 solid #ddd;
	padding: 0 .2em;
}
#login input {
	padding: .3em;
	border: 1px solid #CFCFCF;
	font: 1em arial;
	color: #4382B5;
}
#login label {
	color: #333;
}
#login br {
	margin: 10px 0;
}
#login .submit {
	background: url(../images/formgrad-input.png) repeat-x;
	color: #333;
}

وجدت شيئا واحدا مشتركا في الكود السابق وهو:

#login label, #login .submit {
	color:#333;
}

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

مثال حي

مثال اخر بطريقة أخرى

عند إنشاء الكلاسات الرئيسية التي تحدثت عنها سابقا وهي: main, header, sidebar, content, footer .. أبدا في ملء الصفحة بالمحتويات ..

لا استعمل div بكثرة وانما استعمل تشكيلة متنوعة من أوامر xhtml فاذا اردت مثلا الحصول على عنوان رئيسي فانني استعمل h من 1 الى 6 حسب الاختيار ..

<div class="sub-title">title here ..</div>

.sub-title {
 font: 1em tahoma;
 /*color: #333 */
}

ساستعمل h2 أو h3 هكذا:

<h3>title here ..</h3>

وهكذا استعمل اكبر قدر ممكن من اوامر xhtml مثل p, span, code, hr .. الخ

اذا كنت اعمل في منطقة content ساستعمل كلاسات و tags جديدة انسبها لهذا الكلاس الرئيسي ..

#wrap span {
	color:#f00;
}

وأيضا:

#sidebar h3 {
	color:#f00;
	font: 2em arial;
	padding: .2em;
}

بحيث span الاولى تتبع الكلاس wrap و h3 تتبع sidebar ..

في هذه المواضيع سأكتب عن بعض الأمور والتقنيات التي استعملها في كتابة ملفات css و xhtml، هي فكرة لمشاركة تجربتي الخاصة مع الاخرين.

ابدا دائما باختيار اسم للملف:

style.css
master.css
screen.css

واذا كان يخص لوحة التحكم فأسميه:

dashboard.css
admin.css

بالاضافة الى ملفات تكميلية واضحة من اسمها:

print.css
ie6.css
ie7.css

بعدها اوثق الملف:

/**
 @file: screen.css
 @date: 15/05/2008
 @by: cssbit [dot] com
*/

يمكنني تعديل القيم أو إضافة أخرى ..

ثم ابدا بتكوين الكلاسات الرئيسية:

body {
 
}
 
#main {
 
}
 
#header {
 
}
 
#sidebar {
 
}
 
#content {
 
}
 
#footer {
 
}

بعدها أعود لملف xhtml واكتب صفحة تتكون من هذه الكلاسات، .. وهكذا ابدا في بناء صفحتي ..

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

سأبحث هنا عن القيم المشتركة بين الكلاسات p و h3 و input وهي نفسها tags موجودة في xhtml

p {
	text-align: justify;
	font: 1em/1.2em Tahoma;
	color:#333;
	padding: .4em
}
 
h3 {
	margin: 0;
	padding: .4em;
	line-height: 1em;
 
}
 
input {
	color: #333;
	padding:  .4em;
	border:  1px solid #ddd;
}

الأسطر بعد الاختزال، فصلت بين الكلاسات التي تشترك في بعض القيم بالفاصلة:

p {
	text-align:justify;
	font:1em/1.2em Tahoma
}
 
h3 {
	margin:0;
	line-height:1.2em
}
 
input {
	border:1px solid #ddd
}
 
p,input {
	color:#333
}
 
p,h3,input {
	padding:.4em
}

يمكن ايضا كتابة أوامر css في سطر واحد لكسب المزيد من byte ..

p{text-align:justify;font:1em/1.2em Tahoma}
h3{margin:0;line-height:1.2em}
input{border:1px solid #ddd}
input,p{color:#333}input,h3,p{padding:.4em}

بالنسبة لي، أفضل كتابة الأوامر سطرا تحت سطر فهي تكون أكثر وضوحا ويسهل الوصول الى أمر عند التعديل ..

ايضا من بين الخصائص التي نكررها بكثرة في ملف css تاثيرات الروابط:

a:link {
   text-decoration: none;
   color:#333;
 
} 
a:visited {
   text-decoration: none;
   color:#919191;	
}
a:hover{
   text-decoration: none;
   color:#000;		
}

بعد الاختزال:

a:link {
	color:#333
}
 
a:visited {
	color:#919191
}
 
a:hover {
	color:#000
}
a:link, a:visited, a:hover {
	text-decoration:none
}

أعتقد ان الامر سهل وبسيط ؟ وستكون اكوادك اكثر اختصارا وقوة ..

• wobzip لفك ضغط الملفات
• csstypeset خدمة لمطور css (تحديد الخطوط والحجم، الألوان ..)
• domize للبحث عن الدومينات
• List Cleaner احذف العبارات المكررة
• thumbalizr اصنع مصغرات screenshot للمواقع
• web 2.0 logo صنع بانرات ..
• polaroize إضافة إطارات وتأثيرات على الصور
• ColorToy 2.0 اختيار الألوان

في خطوات كيف تصبح مطور ويب وتحصل على عمل في شركة ويب، أو حتى تعمل freelancer من منزلك وهو الأفضل بطبيعة الحال ..

• إتقان css والإلمام بجميع الاصدارات بدءاً من 2.1 و 3 ..
• تعلم xHTML والهدف هو تصميم صفحات ويب اعتمادا على css و xhtml بنسبة 100%
• استعمال firefox والإضافات التي تأتي معه (html validator .. الخ)
• متابعة 10 مواقع ومدونات أجنبية حول التطوير والتصميم
• تعلم تقطيع التصاميم PSD
• امتلاك مدونة شخصية تتحدث عنك وعن عملك
• إنجاز مشاريع لجهات أو شركات، بدونها لن تصدقك أحد أنك مطور ويب

• vectorials
• photoshoplady
• psdtuts
  
• tutorialkit
• flashperfection
• 3dlessons

يمكننا اضافة تاتيرات جميلة ب css على الصور مثلا او حتى على النصوص ..

عند تقريب الفأرة من صورة يمكن اظهار border أو إطار، ومواقع css showcase تستعمل هذا التأثير بكثرة ..
هذه احدى الطرق:

كود xhtml:

<img src="love.gif" alt="picture" width="180" height="180" />

كود css:

img {
   border: 1px solid #ddd;
}
 
img:hover {
   border: 1px solid #000;
   cursor: pointer;
}

يمكن جعل border يحمل القيمة 2px او اضافة اي خصائص اخرى تريدها ..

تجربة المثال

لتوسيط شيء في الصفحة، يمكنك استعمال margin مع تحديد القيمة auto على اليمين وعلى اليسار كالتالي:

اريد توسيط الكلاس content ليظهر في منتصف الصفحة:

#content {
	margin-right: auto;
	margin-left: auto;
}

ويمكن لك تحديد اي قيمة ل margin-top و margin-bottom حسب حاجتك ..

#content {
	margin-top: 05px;
	margin-bottom: 05px;
 
	margin-right: auto;
	margin-left: auto;
}

وبطريقة أخرى:

#content {
	margin: 05px auto;
}