راهنماي خلاصه نويسي دستورات CSS براي Font

CSS Shorthand چيست ؟

CSS Shorthand يک مجموعه طراحی وب سایت از تکنيک و دستورات است که به منظور خلاصه نويسي دستورات CSS مورد استفاده قرا ميگيرد .

خلاصه نويسي دستورات CSS ميتواند به ما کمک کند تا :

کنترل بيشتري بر روي اجزاء يک صفحه وب سايت داشته باشيم

يک فايل CSS تميز و قابل خواندن داشته باشيم

حجم فايل CSS وب سايت کاهش يابد

the font shorthand property – خصوصيات فونت به صورت خلاصه نويسي شده

element {

font: font-style font-variant font-weight font-size/line-height font-family;

}

نکته

توجه داشته باشيد که در صورت خلاصه نويسي ، مقادير طراحی وب سایت تعيين نشده به صورت پيش فرض در نظر گرفته خواهند شد. براي توضيح اين مطلب به مثال زير دقت کنيد

مثال به صورت خلاصه نويسي شده / در اين مثال مقادير font-style , font-variant تعيين نشده اند

p {

font:bold 1em/1.2em georgia,"times new roman",serif;

}

مثال به صورت خلاصه نويسي نشده و واقعي / مقادير تعيين نشده به صورت پيش فرض تعيين مقدار مي شوند

p {

font-style:normal;

font-variant:normal;

font-weight:bold;

font-size:1em;

line-height:1.2em;

font-family:georgia,"times new roman",serif;

}

نکته

براي تعيين مقادير به صورت خلاصه نويسي شده براي اجزائي مانند h1-h6 , strong , small , em که به صورت پيش فرض داراي مقادير منحصر به فردي هستند دقت بيشتري لازم است . در هنگام خلاصه نويسي خصوصيت Font براي اين اجزاء دقت داشته باشيد که تعيين نکردن مقادير font-style, font-variant, and font-weight باعث تغيير در خصوصيات خواهد شد . براي درک اين موضوع به مثال زير دقت کنيد

مثال به صورت خلاصه نويسي شده / در اين مثال مقادير font-style , font-variant , font-weight تعيين نشده اند

strong {

font:12px verdana;

}

مثال به صورت خلاصه نويسي نشده و واقعي / مقادير تعيين نشده به صورت پيش فرض تعيين مقدار مي شوند و به طور مثال font-weight به صورت normal در خواهد آمد

strong {

font-style: normal;

font-variant:normal;

font-weight: normal;

font-size: 12px;

line-height: normal;

font-family:verdana;

}

آشنايي با CSS Positioning

css position اين امکان را به شما خواهد داد تا موقعيت يک عنصر را در چينش صفحه وب سايت انتخاب کنيد .

امير سروري?? ديدگاهCSS , اصول طراحي وب سايتچهارشنبه, ?م خرداد , ????7373 بازديد

CSS position چيست؟

Positioning اين امکان را به شما خواهد داد تا موقعيت يک عنصر را در چينش صفحه وب سايت انتخاب کنيد . اين خصوصيت به شما امکان خواهد داد يک عنصر را بر روي عناصر ديگر قرار دهيد و يا تعيين کنيد چه اتفاقي رخ دهد وقتي محتواي يک عنصر بسيار بزرگ باشد .

با تعيين عناصر top , right , bottom , left ميتوانيد موقعيت يک عنصر در صفحه را تعيين کنيد . تعيين اين مقادير به تنهايي کار ساز نخواهند بود و بايد نوع اين تعيين موقعيت نيز مشخص شود .

تعيين موقعيت عناصر در صفحه ( CSS Positioning ) داراي چهار مقدار و روش ( static , absolute , relative , fixed ) متفاوت است که در زير به توضيح اين روشها و نحوه استفاده از آنها خواهيم پرداخت .

تعيين موقعيت ايستا ( Static )

تمامي عناصر Html به صورت پيش فرض داراي نوع موقعيت ايستا ( static ) هستند . عناصر با نوع موقعيت ايستا به طورمعمول با توجه به جريان طبيعي صفحه و نحوه قرارگيري عناصر در کنار يکديگر تعيين موقعيت مي شود . ويژگي top , right , bottom , left , z-index بر روي موقعيت اينگونه عناصر تاثيري ندارند و نميتوانند باعث تغييرمکان اين عنصر شوند.

css position static

چهار عنصر با نوع موقعيت static در کنار يکديگر قرار دارند . تمامي عناصر به طور پيش فرض داراي نوع موقعيت static هستند

تعيين موقعيت ثابت ( Fixed Positioning )

يک عنصر با نوع موقعيت ثابت ( fixed ) نسبت به پنجره مرورگر تعيين موقعيت خواهد شد . اين عنصر با حرکت صفحه به بالا و پايين و حتي چپ و راست ( scroll ) تغيير موقعيت نخواهد داد . نوع موقعيت ثابت عنصر را از جريان طبيعي صفحه جدا خواهد کرد و موقعيت اين عنصر تاثيري در چينش و جريان طبيعي صفحه نخواهد داشت و از چينش صفحه حذف خواهد شد . يک عنصر با نوع موقعيت ثابت مي تواند بر روي ديگرعناصر قرار گيرد .

div {position:fixed;top:50px;right:50px;}

css position static

يک عنصر با نوع موقعيت fixed در کنار سه عنصر با موقعيت static يا نرمال

css position static

عنصر با نوع موقعيت fixed از جريان صفحه جدا شده است و با حرکت صفحه در جاي خود ثابت باقي مي ماند و جاي خود را نيز در صفحه از دست داده است

تعيين موقعيت نسبي ( Relative Positioning )

يک عنصر با نوع موقعيت نسبي ( relative ) ميتواند نسبت به موقعيت طبيعي خود تغيير مکان دهد و يا بر روي ديگر عناصر قرار گيرد . اين عنصر از جريان طبيعي صفحه به طور کامل خارج نخواهد شد و با عناصر ديگر در صفحه در ارتباط خواهد بود . نکات مهم در اين نوع تغيير موقعيت باقي ماندن فضا و تاثير اين عنصر در چينش و جريان طبيعي صفحه و همچنين تغيير موقعيت نسبت به موقعيت طبيعي است .

از عناصر با موقعيت نسبي ( relative ) به عنوان نگهدارنده و محدود کننده عناصر با نوع موقعيت ثابت ( absolute ) استفاده مي شود که توضيحات بيشتري در اين مورد ارائه خواهد شد.

div {position:relative;left:-20px;bottom:30px;}

css position static

يک عنصر با نوع موقعيت relative در کنار سه عنصر با موقعيت static يا نرمال

css position static

يک عنصر با نوع موقعيت relative نسبت به مکان طبيعي خود تغيير مکان داده است و اثر خود را در صفحه حفظ کرده

css position static

با حرکت صفحه عنصر با نوع موقعيت relative از جريان طبيعي صفحه جدا نشده است

تعيين موقعيت مطلق ( Absolute Positioning )

يک عنصر با نوع موقعيت مطلق ( absolute ) از جريان طبيعي صفحه خارج خواهد شد . اين عناصر نسبت به اولين عنصر بالا سري خود ( parent ) که داراي خاصيت و نوع موقعيتي غير ازموقعيت ايستا ( static ) هستند تغيير موقعيت خواهند داد . در صورتي که هيچ کدام از عناصر بالا سري داراي نوع موقعيت متفاوت با حالت طبيعي ( ايستا ) نباشند اين عناصر نسبت به عنصر html تغيير موقعيت مي دهند .

عناصر با موقعيت مطلق مي توانند بر روي ديگر عناصر قرار گيرند ( overlap )

div {position:absolute;left:0px;top:0px;}

css position static

يک عنصر با نوع موقعيت absolute از جريان صفحه جدا شده است و نسبت به html تعيين موقعيت مي شود

css position static

با حرکت صفحه عنصر با نوع موقعيت absolute در جاي خود باقي مانده و از جريان صفحه جدا شده است . اين عنصر نسبت به محدوده تگ html تعيين موقعيت شده است . تفاوت بين يک عنصر absolote و fixed در حرکت صفحه است . عنصر fixed در هنگام حرکت صفحه در جاي خود باقي ميماند ولي عنصر absolute از جريان صفحه به صورت کلي خارج مي شود و در هنگام حرکت صفحه نيز در جاي خود ثابت مي ماند .

قرار گرفتن روي هم ( Overlapping Elements )

هنگامي که عناصر از حالت عادي و نوع موقعيت ايستا ) static ) خارج ميشوند و مقدار متفاوتي براي آنها مشخص مي شود ( fixed , relative , absolute ) اين توانايي را خواهند داشت تا بر روي ديگر عناصر قرار گيرند .

div.a {position:absolute;left:20px;top:20px;z-index:0;}

div.b {position:absolute;left:30px;top:30px;z-index:1;}

div.c {position:absolute;left:40px;top:40px;z-index:2;}

div.d {position:absolute;left:50px;top:50px;z-index:3;}

css position static

عناصر با نوع موقعيت absolute بر روي يکديگر قرار گرفته اند و به ترتيب اولويت z-index نمايش داده ميشوند

براي کنترل و نحوه قرار گيري و اولويت در قرارگيري اين عناصر بر روي يکديگر از مقدار z-index استفاده مي شود . چند عنصر مي توانند به صورت همزمان بر روي يکديگر قرار گيرند و با تعيين مقدار z-index مي توان اولويت در قرار گيري اين عناصر را تعيين نمود . عناصر با z-index بيشتر نسبت به عناصر با مقدار z-index کمتر بالاتر قرار خواهند گرفت . اين عناصر مانند چند لايه بر روي يکديگر قرار خواهند گرفت .