مرجع طراحی سایت حرفه ای

خصوصیت display در CSS چیست؟
با استعمال از خصوصیت display در CSS می قدرت موقعیت یا این که طریق اکران یک تگ طراحی سایت در مشهد را مشخص و معلوم کرد. از جمله میتوانید تعریف‌و‌تمجید نمایید که یک تگ به طور بلاکی (Block) اکران داده گردد یا این که به طور اینلاینی (Inline). هریک از تگ های HTML یک شرایط اکران دارا هستند، از جمله تگ P وضعیت نمایشش بصورت بلاکی یا این که Block میباشد، این یعنی آحاد پهنا سطر را به خودشان تخصیص میدهند.

در مقابل تگ هایی می باشند که موقعیت نمایششان بصورت داخل خطی میباشد، مثل تگ a و b و span. ( این ها در یک سطر کنار همدیگر قرار می‌گیرند و صرفا به اندازه خودشان گوشه و کنار اشغال میکنند.)هم اکنون شما به راحتی با به کارگیری از خصوصیت display در CSS میتوانید شرایط اکران یک تگ را به دلخواه خودتان در شکل نیاز تغییر‌و تحول دهید. مثلا میتوانید شرایط اکران تگ P که بلاکی می باشد را به اینلاینی یا این که Inline تغییر‌و تحول دهید.

کاربرد خواص display در CSS
همانگونه که گفته شد، با به کار گیری از خصوصیت display در css شما میتوانید خلق پیش فرض موادتشکیل دهنده را تغییر و تحول دهید. از جمله خلق یک عنصر inline را به block و برعکس تبدیل نمایید.

گونه های display در css
پیش از ذکر هر چیزی از خصوصیت display در CSS درباره ی گونه های display در css حرف می‌کنیم. شما متناسب با فعالیتی که در صفحه های اینترنت ایفا خواهید اعطا کرد، در درحال حاضر فعلی و در html5 میتوانید از display های ذیل در css به کار گیری نمائید:

display none
display inline
display block
display inline-block
display list-item
display run-in
display flex
display inline-flex
display flexbox
display inline-flexbox
display grid
display inline-grid
display table
display inline-table
display ruby
خصوصیت display none
همانگونه که در صدر گفته شد امر display برای مدیر روش اکران تگ های html استعمال میشود. درحال حاضر درصورتی که مقدار خصوصیت display در css برای یک تگ موازی با مقدار none یعنی هیچ باشد، عملا اکران تگ متبوع را محصور نموده اید (اکران داده نمیشود). دقت داشته باشید که‌این شغل تگ را از DOM حذف نمی نماید، البته اثری از عنصر در کاغذ باقی نگذاشته و فضایی که گرفته بود به طور کامل خالی می‌گردد و ارکان همسایه مکان آن را لبریز می نمایند. وقتی که عنصر حذف گردد تک تک فرزندان آن (ارکان باطن) نیز حذف خواهند شد.

نکته حائض اهمیت در بهینه سازی : توجه فرمایید که هنگامی عنصری را با این نحوه حذف کرده یا این که اکران آن را محصور می‌کنید، ربات های موتورهای کاوش به آن عنصر دسترسی نخواهند داشت.

خصوصیت display block
در خصوصیت display در CSS تگ هایی با خصوصیت پیش فرض display block را تگ های بلاکی میگویند. این تگ ها به واسطه داشتن خصوصیت display block یک سطر بی نقص از وبسایت را به خویش تخصیص میدهند. همان خلاف موادتشکیل دهنده inline که صرفا به اندازی فضای خویش تگ، محیط اشغال می نمایند، عناصری با خصوصیت display block تک تک فضای افقی را می‌گیرند. برای مثال تگ nav و تگ header از تگ های بلاکی میباشند.

تگ های بلاکی برخلاف موادتشکیل دهنده اینلاین میتوانند هر نوع عنصر بلاکی و اینلاین را داخل خویش داشته باشند. که در نمونه پایین و نمونه های آجل به آن پرداخته گردیده‌است. در نمونه پایین تگ p که یک تگ با display block میباشد داری متن فرنگی و با background آبی‌رنگ است. همینطور این تگ دربردارنده یک تگ i (تگ inline) با background قرمز رنگ میباشد.

Hi Aryatehran. I am i tag and my background is red.

همان طور که در تصویر می‌بینید، از‌آن‌جا‌که تگ p دارنده خصوصیت display در css با مقدار block میباشد، یک سطر بی نقص را به خویش تخصیص داده که با رنگ آبی رنگ اکران داده شد‌ه‌است. و تگ i که دارنده display با یه خرده inline میباشد با رنگ قرمز‌رنگ تنها ترازو فضایی که تگ نیاز دارااست را اشغال نموده است.

از سایر تگ های اصلی با display block می شود به تگ div، تگ p، تگ section و…. اشاره نمود.

خصوصیت display inline

در خصوصیت display در CSS در شرایطی‌که عنصری دارنده خصوصیت display inline باشد هنگامی که به‌دنبال یک خط و یا این که یک سطر قرار می‌گیرد، آن سطر یا این که خط شکسته نشده و عنصر به خط آتی نخواهد رفت. در واقع تگ هایی که inline میباشند، خطی بوده و به اندازه فضای موردنیاز خودشان دور و بر اشغال می نمایند. برعکس تگ های بلاکی که یک سطر بدون نقص را به خویش تخصیص میدهند، حتی اینکه به اندازه یک سطر گوشه و کنار احتیاج نداشته باشند. تگ em، تگ span و… از این نوع تگ ها میباشند که خصوصیت display در css آن ها inline میباشد.

مثلا در کد ذیل عبارات «اینجانب تگ اسپن هستم» و «اینجانب تگ تاکیدی هستم» در تگ span و تگ em قرار داشته و در‌صورتی‌که این کدها در برگه اینترنت قرار داشته باشند سبب شکستن خط نمی‌شوند. همین خوی درخصوص تصویری که در تگ img قرار داده می‌شود نیز درستگو گردیده‌است. اما در کد پایین تگ p دارنده خواص display block بوده که قادر است تگ های با خواص display inline را در خویش مکان دهد.

Hi Aryatehran. I am span tag and my background is blue. I am em tag and my background is red

چیزی که درباره ی تگ های با display inline اساسی میباشد، این میباشد که شما میتوانید بدین موادتشکیل دهنده margin و یا این که padding تخصیص دهید و خلاف تگ های با display block نمی توانید از خصوصیت های width و height به کارگیری نمایید. به همین انگیزه وقتی که برای این تگ ها خصوصیت padding و margin تخصیص می دهید ارکان مجاورشان را در راستای افقی هول می‌دهند، البته در راستای عمودی تاثیری بر روی آنان ندارند. در کد تحت متن مشخص و معلوم گردیده عنصر span میباشد که از کلیه جهت padding و margin گرفته میباشد.

Hi Aryatehran. I am span tag and my background is blue. I am inline tag

اما برای حل این نقص‌، در شرایطی‌که بخواهید از خصوصیت inline بودن و همینطور پهنا و طول دریافت کردن برای یک تگ به کارگیری نمایید، بایستی خصوصیت display در css آن را inline-block قرار دهید.

خصوصیت display در CSS چیست؟
با استعمال از خصوصیت display در CSS می قدرت موقعیت یا این که طریق اکران یک تگ طراحی سایت در مشهد را مشخص و معلوم کرد. از جمله میتوانید تعریف‌و‌تمجید نمایید که یک تگ به طور بلاکی (Block) اکران داده گردد یا این که به طور اینلاینی (Inline). هریک از تگ های HTML یک شرایط اکران دارا هستند، از جمله تگ P وضعیت نمایشش بصورت بلاکی یا این که Block میباشد، این یعنی آحاد پهنا سطر را به خودشان تخصیص میدهند.

در مقابل تگ هایی می باشند که موقعیت نمایششان بصورت داخل خطی میباشد، مثل تگ a و b و span. ( این ها در یک سطر کنار همدیگر قرار می‌گیرند و صرفا به اندازه خودشان گوشه و کنار اشغال میکنند.)هم اکنون شما به راحتی با به کارگیری از خصوصیت display در CSS میتوانید شرایط اکران یک تگ را به دلخواه خودتان در شکل نیاز تغییر‌و تحول دهید. مثلا میتوانید شرایط اکران تگ P که بلاکی می باشد را به اینلاینی یا این که Inline تغییر‌و تحول دهید.

کاربرد خواص display در CSS
همانگونه که گفته شد، با به کار گیری از خصوصیت display در css شما میتوانید خلق پیش فرض موادتشکیل دهنده را تغییر و تحول دهید. از جمله خلق یک عنصر inline را به block و برعکس تبدیل نمایید.

گونه های display در css
پیش از ذکر هر چیزی از خصوصیت display در CSS درباره ی گونه های display در css حرف می‌کنیم. شما متناسب با فعالیتی که در صفحه های اینترنت ایفا خواهید اعطا کرد، در درحال حاضر فعلی و در html5 میتوانید از display های ذیل در css به کار گیری نمائید:

display none
display inline
display block
display inline-block
display list-item
display run-in
display flex
display inline-flex
display flexbox
display inline-flexbox
display grid
display inline-grid
display table
display inline-table
display ruby
خصوصیت display none
همانگونه که در صدر گفته شد امر display برای مدیر روش اکران تگ های html استعمال میشود. درحال حاضر درصورتی که مقدار خصوصیت display در css برای یک تگ موازی با مقدار none یعنی هیچ باشد، عملا اکران تگ متبوع را محصور نموده اید (اکران داده نمیشود). دقت داشته باشید که‌این شغل تگ را از DOM حذف نمی نماید، البته اثری از عنصر در کاغذ باقی نگذاشته و فضایی که گرفته بود به طور کامل خالی می‌گردد و ارکان همسایه مکان آن را لبریز می نمایند. وقتی که عنصر حذف گردد تک تک فرزندان آن (ارکان باطن) نیز حذف خواهند شد.

نکته حائض اهمیت در بهینه سازی : توجه فرمایید که هنگامی عنصری را با این نحوه حذف کرده یا این که اکران آن را محصور می‌کنید، ربات های موتورهای کاوش به آن عنصر دسترسی نخواهند داشت.

خصوصیت display block
در خصوصیت display در CSS تگ هایی با خصوصیت پیش فرض display block را تگ های بلاکی میگویند. این تگ ها به واسطه داشتن خصوصیت display block یک سطر بی نقص از وبسایت را به خویش تخصیص میدهند. همان خلاف موادتشکیل دهنده inline که صرفا به اندازی فضای خویش تگ، محیط اشغال می نمایند، عناصری با خصوصیت display block تک تک فضای افقی را می‌گیرند. برای مثال تگ nav و تگ header از تگ های بلاکی میباشند.

تگ های بلاکی برخلاف موادتشکیل دهنده اینلاین میتوانند هر نوع عنصر بلاکی و اینلاین را داخل خویش داشته باشند. که در نمونه پایین و نمونه های آجل به آن پرداخته گردیده‌است. در نمونه پایین تگ p که یک تگ با display block میباشد داری متن فرنگی و با background آبی‌رنگ است. همینطور این تگ دربردارنده یک تگ i (تگ inline) با background قرمز رنگ میباشد.

Hi Aryatehran. I am i tag and my background is red.

همان طور که در تصویر می‌بینید، از‌آن‌جا‌که تگ p دارنده خصوصیت display در css با مقدار block میباشد، یک سطر بی نقص را به خویش تخصیص داده که با رنگ آبی رنگ اکران داده شد‌ه‌است. و تگ i که دارنده display با یه خرده inline میباشد با رنگ قرمز‌رنگ تنها ترازو فضایی که تگ نیاز دارااست را اشغال نموده است.

از سایر تگ های اصلی با display block می شود به تگ div، تگ p، تگ section و…. اشاره نمود.

خصوصیت display inline

در خصوصیت display در CSS در شرایطی‌که عنصری دارنده خصوصیت display inline باشد هنگامی که به‌دنبال یک خط و یا این که یک سطر قرار می‌گیرد، آن سطر یا این که خط شکسته نشده و عنصر به خط آتی نخواهد رفت. در واقع تگ هایی که inline میباشند، خطی بوده و به اندازه فضای موردنیاز خودشان دور و بر اشغال می نمایند. برعکس تگ های بلاکی که یک سطر بدون نقص را به خویش تخصیص میدهند، حتی اینکه به اندازه یک سطر گوشه و کنار احتیاج نداشته باشند. تگ em، تگ span و… از این نوع تگ ها میباشند که خصوصیت display در css آن ها inline میباشد.

مثلا در کد ذیل عبارات «اینجانب تگ اسپن هستم» و «اینجانب تگ تاکیدی هستم» در تگ span و تگ em قرار داشته و در‌صورتی‌که این کدها در برگه اینترنت قرار داشته باشند سبب شکستن خط نمی‌شوند. همین خوی درخصوص تصویری که در تگ img قرار داده می‌شود نیز درستگو گردیده‌است. اما در کد پایین تگ p دارنده خواص display block بوده که قادر است تگ های با خواص display inline را در خویش مکان دهد.

Hi Aryatehran. I am span tag and my background is blue. I am em tag and my background is red

چیزی که درباره ی تگ های با display inline اساسی میباشد، این میباشد که شما میتوانید بدین موادتشکیل دهنده margin و یا این که padding تخصیص دهید و خلاف تگ های با display block نمی توانید از خصوصیت های width و height به کارگیری نمایید. به همین انگیزه وقتی که برای این تگ ها خصوصیت padding و margin تخصیص می دهید ارکان مجاورشان را در راستای افقی هول می‌دهند، البته در راستای عمودی تاثیری بر روی آنان ندارند. در کد تحت متن مشخص و معلوم گردیده عنصر span میباشد که از کلیه جهت padding و margin گرفته میباشد.

Hi Aryatehran. I am span tag and my background is blue. I am inline tag

اما برای حل این نقص‌، در شرایطی‌که بخواهید از خصوصیت inline بودن و همینطور پهنا و طول دریافت کردن برای یک تگ به کارگیری نمایید، بایستی خصوصیت display در css آن را inline-block قرار دهید.