نظاره گر پیشرفت کسب و کار خود باشید ، وقتی اسپیناس وب جرئی از تیم شما می شود

ادامه اموزش طراحی سایت با CSS :

در این قسمت از آموزش css با پنج ویژگی دیگر آشنا خواھیم شد، که به فضا ھای اطراف عنصر مربوط می شوند و

. width و height و border  و padding و margin : عبارتنداز

 

 

حال به تعریف دقیق تر  برای ھر خاصیت می پردازیم :

margin خصوصیت:

این خصوصیت فضای خالی بیرونی عناصر را مشخص می کند، یعنی فضای خالی بین عنصر و پنجره ی مرورگر یا فضایخالی بین دو عنصر را مشخص می کند. یکی از سه مقدار عددی، درصدی یا auto را می پذیرد:

Margin-top : فاصله بالای عنصر را مشخص می کند.

Margin-right : فاصله سمت راست عنصر را مشخص می کند.

Margin-bottom : فاصله پایینی عنصر را مشخص می کند.

Margin-left : فاصله سمت چپ عنصر را مشخص می کند.

مقدار پیشفرض auto  می باشد در ضمن استفاده از مقادیر منفی نیز مجاز است.

 

 

درضمن می توان بجای نوشتن ھر چھار خصوصیت از حالت کوتاه نویسی نیز استفاده کرد. در حالت کوتاه نویسی میتوان از یک تا چھار به مقدار به خصوصیت margin داد.

کوتاه نویسی خصوصیت Margin:

در صورت استفاده از یک مقدار در کوتاه نویسی این مقدار به ھر چھار فاصله بیرونی تخصیص خواھد یافت.

 

دستور فوق تمامی فاصله ھای بیرونی عنصر body  را (top , right , bottom , left) را برابر px5 قرار می دھد.

ھنگام استفاده از دو مقدار در کوتاه نویسی مقدار اول bottom , top و مقدار دوم right , left را مشخص می کند.

 

دستور فوق فاصله بالا و پایین (top , bottom) را برابر px2 و حاشیه چپ و راست را (right , left) را برابر px5  تعریفمی کند.

در صورت استفاده از سه مقدار در کوتاه نویسی مقدار اول top، مقدار دوم left، مقدار سوم right و مقدار چھارمbottom را مشخص می کند.

 

دستور فوق top  را برابر px20، خصوصیت left  و right را برابر px30 و مقدار سوم bottom را برابر px40 قرار می دھد.

در صورت استفاده از چھار مقدار در کوتاه نویسی مقدار اول top مقدار دوم right مقدار سوم bottom و مقدار چھارم left را مشخص می کند.

 

دستور فوق top  را برابر px2، مقدار right را برابر px3، مقدار bottom را برابر px5 و مقدار left را برابر px4  قرار میدھد.

 

 

در margin عمودی یعنی marign-top و margin-bottom امکان فروپاشی یا تداخل حاشیه ھا وجود دارد؛ این تداخلزمانی اتفاق می افتد که margin-top یا margin-bottom از یک عنصر با margin-bottom یا margin-top از عنصر دیگربرخورد داشته باشد. اگر تداخل حاشیه ھا اتفاق بیافتد فاصله بین دو عنصر بسیار بیشتر از چیزی می شود که انتظارداشتیم، ھنگامی که چنین اتفاقی بیافتد فقط حاشیه ھای عنصر با مقدار margin بزرگتر اعمال خواھند شد و حاشیهھای عنصر با margin کوچکتر در نظر گرفته نشده و حذف می شود.

اگر عنصری فرزند عنصر دیگری باشد و به ھر دو عنصر margin-top یا margin-bottom اختصاص داده باشیم در این

صورت نیز تداخل فاصله ھای بیرونی پیش خواھد آمد و margin عنصر پدر صرف نظر از کوچکتر بودن یا بزرگتر بودن اعمالخواھد شد و margin عنصر فرزند در نظر گرفته نخواھد شد و حذف می شود.

می توان با تعریف padding یا border متناسب با محل تداخل برای عنصر پدر از برخورد دو margin در عناصر پدر و فرزندجلوگیری کرد.

نکته :

• .این قاعده ھای کوتاه نویسی در خصوصیت ھای padding و border نیز به ھمین شکل به کار می روند.
• .معمولا در حالت کوتاه نویسی از دو یا چھار مقدار استفاده می شود و استفاده از سه مقدار چون گیجکننده است توصیه نمی شود.
• .در حالت کوتاه نویسی چھار مقدار در جھت عقربه ھای ساعت تخصیص می یابند. یعنی ھمان 12، 3 ، 6،

9 به این صورت که اول top سپس right سپس bottom و در آخر left.

استفاده از مقدار auto در margin نیز کاربرد زیادی دارد و برای چینش عناصر در وسط، چپ، یا راست استفاده میشود

 

Border خصوصیت:

Border یا حاشیه، در واقع بین margin و padding قرار گرفته و یک خط به دور عنصر مورد نظر می کشد و خود به چھارقسمت تقسیم می شود.

Border-width : پھنای خط دور عنصر را مشخص می کند

Border-color : رنگ خط دور عنصر را مشخص می کند.

Border-style : طرح خط دور عنصر را مشخص می کند.

حال به تعریف دقیق این سه قسمت وآشنا شدن با ھمه ی اجزای آن ھا می پردازیم :

Border Width:

از خاصیت border-width برای مشخص کردن پھنا یا عرض کادر یک عنصر استفاده می شود که یکی از مقادیر زیر را

میگیرد :

Thin : باریک، برابر با px1

Medium : متوسط برابر با px3Thick : پھن، برابر با px5مقدار عددی دلخواه برحسب یکی از واحدھای محاسباتی که معمولا px است.

و مقدار پیشفرض این خصوصیت medium  می باشد.

نکته :

• .مقادیر منفی برای این خصوصیت مجاز نیست
• .مقادیر درصدی نیز برای این خصوصیت قابل استفاده نیست، کلمات کلیدی نیز به ندرت استفاده میشود.

معمولا از واحد pixel برای مقدار دھی به این خاصیت استفاده می شود.

• .ھمانند margin در کوتاه نویسی این خصوصیت می توان از یک تا چھار مقدار استفاده کرد و قواعد گفتهشده در کوتاه نویسی margin در اینجا نیز صدق می کنند.

 

 

 border-color خاصیت:

این خاصیت برای مشخص کردن رنگ border استفاده می شود. و یکی از مقادیر ھگزادسیمال rbg , rgba ، کلماتکلیدی رنگ ھا یا  transparent(شفاف – بدون رنگ) را به عنوان مقدار می پذیرد

مقدار پیشفرص برای این خصوصیت برابر با مقدار تعیین شده در خصوصیت color از عنصر مورد نظر می باشد.

نکته :

• .در حالت کوتاه نویسی می توان چھار طرف border را در یک خط و به صورت جداگانه مقدار دھی کرد.

(ھمانند کوتاه نویسی خصوصیت margin)

• . در ie6 و ie7 کلمه کلیدی transparent برای border-color پذیرفته نمی شود.
• .در ie 7 کلمه کلیدی transparent به صورت black (سیاه) تفسیر می شود.

 

border-style خصوصیت:

این خاصیت برای یک border باید تخصیص یابد تا border به نمایش در آید، و طرح خط دور عنصر را مشخص می کند کهیکی از مقادیر زیر را می گیرد :

None , dotted , dashed , solid , double , hidden , groove , ridge , inset , outset

مقدار پیشفرض : none ( بدون خط حاشیه )

 

کوتاه نویسی خاصیت border:

قاعده کلی

ترتیب مقدار دھی به این خاصیت مھم بوده و جا به جایی در آن باعث از کار افتادن کد می شود.

 

این دستور border ھر چھار طرف عنصر را مشخص می کند اما شما می توانید از این از این کوتاه نویسی برای ھر ازچھار طرف استفاده کنید

 

 

 

 

اموزش طراحی سایت با CSS !! ادامه اموزش در جلسه بعدی…