مدونة الويب 2.0

اختصارات ال CSS

July 21, 2008 - الاثنين 19 رجب 1429 التصنيف: تصميم

مجموعة اختصارات عند كتابتك لملف 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”

عبد الهادي: July 21, 2008 - الاثنين 19 رجب 1429 في 6:44 م

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

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

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

لدي ملاحظة !

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

ألم تنسى center ?

وبالتوفيق وان شاء الله نتعلم المزيد على ايديكم
Khaled: July 22, 2008 - الثلاثاء 20 رجب 1429 في 12:43 ص

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

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

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

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

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

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

.
.

شكرًا لك
خالد: August 8, 2008 - الجمعة 06 شعبان 1429 في 9:14 م

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