مدونة الويب 2.0

اختصارات ال CSS

21, يوليو 2008 التصنيف: تصميم

مجموعة اختصارات عند كتابتك لملف css

1- اختصار ال margin وال padding
بدلاً من كتابة:

 div {

margin-top: 5px;

margin-right: 8px;

margin-bottom: 3px;

margin-left: 4px;

}

div {

padding-top: 5px;

padding-right: 8px;

padding-bottom: 3px;

padding-left: 4px;

}

نكتب التالي:

 div {

margin: 5px 8px 3px 4px;

}

div {

padding: 5px 8px 3px 4px;

}

حيث الاختصار يكون دائماً بالترتيب التالي: Top – Right – Bottom – Left

2- الإطار:
بدلاً من:



div {

border-width: 3px;

border-style: solid;

border-color: #c00;

}

نكتب:

div { border: 3px solid #c00; }

3- الخلفية:
بدلاً من:

 div {

background-color: #fff;

background-image: url(../images/bg.gif);

background-repeat: repeat-y;

background-attachment: fixed;

background-position: top center;

}

نكتب:

div { background: #fff url(../img/bg.gif) repeat-y fixed top center; }

4- الخط:
بدلاً من:



p {

font-style: italic;

font-variant: small-caps;

font-weight: bold;

font-size: small;

line-height: 1.2em;

font-family: Helvetica, Arial, sans-serif;

}

نكتب:

 p { font: italic small-caps bold small/1.2em Helvetica, Arial, sans-serif; }

شارك هذه التدوينة:

إضافة 'اختصارات ال CSS' إلى Stumble Upon

إضافة 'اختصارات ال CSS' إلى Google Bookmarks

الوسوم: css, تصميم, تكتيك, نصائح

أرسل هذه التدوينة لصديق

طباعة هذه التدوينة

إقرأ أيضاً:

6 تعليق في “اختصارات ال CSS”

عبد الهادي: 21, يوليو 2008 في 6:44 م

السلام عليكم ورحمة الله وبركاته..
شكرا لك أخي الكريم على هذه الاشارات المفيدة، فعلا يمكن اختصار الكثير من الوقت والجهد إن طبقناها، وأنا شخصيا أحاول دوما الاختصار ما أمكن..
موفق ومني لك أرق تحية..
Qniq: 21, يوليو 2008 في 11:04 م

يبدو اننا حنتكروت
نريد على الأقل مقالان من النوع الدسم قبل نهاية التحدى
فكرة مصمم: 21, يوليو 2008 في 11:24 م

شكرا على هذه الطريق المختصرة .. توفركثيرا من الوقت

لدي ملاحظة !

في رقم 3 (الخلفية) : بدلا من background-position: top center; نكتب div { background: #fff url(../img/bg.gif) repeat-y fixed top; } ..

ألم تنسى center ?

وبالتوفيق وان شاء الله نتعلم المزيد على ايديكم
Khaled: 22, يوليو 2008 في 12:43 ص

@Qniq: يا أخي الطمع ضر مانفع لم تعد تعجبكم سوى المقالات الطويلة !

@فكرة مصمم: تماماً شكراً على التنبيه سأقوم بتصحيحها فوراً
إحسان: 8, أغسطس 2008 في 8:48 م

أتفق معكم على أنَّ اختصارات الـCSS تختزل الكثير من الوقت لكنِّي أفضل كتابتها مفرقة لسبب بسيط ، هو إعطاء الفرصة لغيري – خصوصًا إذا كان مبتدئًا – في قراءة ممعنة ودقيقة للمستند .

أكثر ما تعلمت CSS من المصمم السويدي أندريس الَّذي تجد بعض القوالب الَّذي قام بتصميمها في ووردبريس المجانية ، وتجد جميعها في موقعه الشخصي .

كنتُ أفتح مستندات الـCSS في تصاميمه وأدرسها ، فأجدها مرتبة وغير مختصرة ، فيسهل علي فهمها .

وهي وجهات نظر في النهاية ، يختلف المصممون والمطورون في طرائقهم

.
.

شكرًا لك
خالد: 8, أغسطس 2008 في 9:14 م

تماماً هي وجهات نظر وارتياح شخصي في الطريقة التي يفضلها المصمم.