تنظیمات مختلف css

در این مقاله با دو مفهوم width و همچنین height آشنا می شویم.تعیین طول  و عرض عناصر در CSS ، یکی از پله های مهم برای فراگیری و آموزش CSS محسوب می شود.هرچند مفوم width و Height در CSS ،پایه ای ومقدماتی است اما بسیار مهم و ضروری.

تعیین طول و عرض با Width و Height در CSS

دستور width برای مشخص نموردن طول در CSS مورد استفاده قرار می گیرد.واحد طول در CSS ،پیکسل می باشد. به عنوان مثال عرض یک عنصر را می توان 20px قرار داد.در CSS می توان width و height را به حالت auto قرار داد.در حالت پیش فرض نیز در CSS طول و عرض auto می باشد.در حالت تنظیم اتوماتیک در CSS ، بسته به محتوای درون عنصر HTML ، خودکار ظول و عرض تعیین می شود و نیازی نیست به عنصر طول و عرض بدهیم.توجه کنید که در CSS ،دو دستور width و height ،شامل کادرها و حاشیه داخلی نمی شود.بدین معنا که در CSS اگر height را برابر با 100 پیکسل بگذاریم، padding هرچقدر هم که باشد تاثیری روی ارتفاع عنصر ندارد.پس در CSS ، طول و عرضی که تعیین می کنیم،خالص است یعنی بدون حاشیه داخلی و یا کادرهای اطراف تگ در CSS.برای تعیین بیشینه عرض و ارتفاع یک تگ در CSS می توان از دو دستور max-width و همچنین max-height استفاده نمود.با استفاده از این دو دستور میتوانیم ماکزیمم طول و عرض عناصر را در CSS تعیین نماییم.به صورت مشابه،برای تعیین مینیمم مقدار طول و عرض در CSS می توانیم،از دو دستور min-width و همچنین min-height استفاده کنیم تا اجازه ندهیم در CSS ،طول و عرض عنصر از مقادیر تعیین شده کمتر شود.در اینحالت در CSS ، باز هم برحسب واحد پیکسل باید مقادیر را تعیین نماییم.جهت آموزش تصویری CSS کلیک کنید.

تعیین طول و عرض به صورت درصد در CSS

در CSS می توانیم به جز پیکسل،از درصد هم استفاده کنیم،به عنوان مثال:

div {
    max-width: 500px;
    height: 40%;
    border: 3px solid #73AD21;
}

در مثال بالا تگ div ،ارتفاعی برابر با 50 درصد عنصر والد خود خواهد داشت.یعنی ارتفاع عنصر در CSS ، بر اساس ارتفاع والد آن قابل مشخص شدن است.در ادامه به مقالات دیگر درباره آموزش CSS می پردازیم.

جهت آموزش جوملا کلیک کنید.

سایت بزرگ کلیک سایت،بهترین مرجع در ضمینه آموزش طراحی سایت و آموزش html و آموزش css میباشد.تمامی فیلم های آموزشی این سایت توسط استادان کاردان و بسیار با تجربه تهیه شده که تضمینی بر کیفیت بالای تمامی آن ها است.قیمت محصولات نیز کاملا رقابتی بوده و با مقایسه آن با سایر سایت ها میتوان به خوبی متوجه این موضوع شد.