ابعاد - dimensions در css

ویژگی های مربوط به ابعاد، اندازه یک عنصر و کوچکترین و بزرگ ترین ابعاد مربوط به عنصر را تنظیم می کند. این ویژگی ها، خصوصیات خود را از عنصر والد به ارث نمی برند و فقط به عناصر بلوک و جایگزین شده inline اعمال می شوند.

Width & height

با استفاده از ویژگی های width و height می توانیم عرض و ارتفاع محدوده محتوای مربوط به یک عنصر را تنظیم کنیم. این دو ویژگی را می توانیم با یک مقدار طولی یا درصد مشخص کنیم، که درصد به نسبت ابعاد عنصر والد تعیین می شود.

width | height: auto | <length> | <percentage>

مقدار پیش فرض برای این ویژگی، مقدار auto است. در حالت معمولی یک عنصر از نوع بلوک تا لبه های ظرف نگهدارنده خود کشیده می شود. در مقابل آن ارتفاع عنصر کم می شود تا با محتوا تنظیم شود. با استفاده از ویژگی های width و height می توان این رفتارهای پیش فرض را تغییر داد. در مثال زیر در عناصری که این کلاس به آنها اعمال شده است، عرض به اندازه 100 پیکسل و ارتفاع به اندازه 50 پیکسل تعیین می شود. پس از آنکه این اندازه ها به یک عنصر اعمال شد، آن عنصر این اندازه را پیدا می کند و حتی اگر اندازه صفحه تغییر کند بازهم اندازه عنصر تغییر نخواهد کرد.

این نکته را به خاطر داشته باشید که مقادیر مربوط به height و width شامل padding، border و margin نمی شود. این ویژگی ها عرض و ارتفاع فضای داخلی عنصر را مشخص می کنند.

.mybox{
width : 100px;
height : 50px;
}

ویژگی های min-width و min-height

این ویژگی ها، کمترین و بیشتری ابعاد یک عنصر را مشخص می کنند. با استفاده از این ویژگی ها بازهم طول و ارتفاع عنصر تا جایی گسترش پیدا می کند که با محتوا هماهنگ شود، اما عرض یا ارتفاع عنصر تا مقداری کمتر از کمترین ابعاد تعیین شده تنظیم نمی شود. همانطور که قبلا هم گفته شد این مقدار شامل padding, border & margin نمی شود.

min-width| min-height : <length> | <percentage>

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

.half{
min-width : 50%;
min-height : 50%;
}

ویژگی های max-width و max-height

با استفاده از ویژگی های max-width و max-height می توانیم بیشترین ابعاد منطقه محتوای مربوط به یک عنصر را تعیین کنیم. این مقدار را می توان بر اساس یک مقدار طولی یا درصد مشخص کنیم؛ با استفاده از کلیدواژه none می توانیم مقداری که قبلا تعیین شده است را پاک کنیم.

max-width | max-height : none | <length> | <percentage>

با تنظیم کردن مقدار کمترین و بیشترین عرض و طول، شما می توانید یک فاصله را تعیین کنید که عرض یک عنصر چگونه تغییر کند. یک عنصر از نوع بلوک با استفاده از کلاسی که در زیر تعریف کرده ایم سعی می کند اگر امکان داشته باشد عرضی به اندازه 500 پیکسل داشته باشد. زمانی که فضای افقی محدود باشد، این کلاس عنصر را وادار می کند عرضش کمتر از 200 پیکسل نباشد.
در حالت عادی ممکن است عرض صفحه بیشتر از عرض تعریف شده توسط css باشد و در این حالت مرورگر به صورت خودکار یک نوار پیمایش ایجاد می کند. برای جلوگیری از این مساله، از این دو ویژگی استفاده می کنیم. در این صورت دیگر نگران ایجاد یک نوار پیمایش نخواهیم بود و مرورگر به صورت خودکار عرض را تنظیم می کند:

max-width : 500px;
min-width : 200px;

ویژگی max-width نسبت به ویژگی min-width دارای اولویت است. با این وجود این مساله در مورد ارتفاع متفاوت است، به خاطر اینکه ویژگی min-height دارای اولویت بیشتری نسبت به ویژگی max-height است. بنابراین در مثال زیر، عنصری که دارای کلاس تعریف شده زیر است دارای ارتفاع 5em خواهد بود مگر اینکه محتوای داخل عنصر به ارتفاع بیشتری نیاز داشته باشد. در این حالت عنصر به صورت عمودی تا بیشترین مقداری که اجازه داده شده است (20em) گسترش پیدا می کند.

.mybox{
max-height : 20em;
min-height : 5em;
}

این نکته را در نظر داشته باشید که مقادیر ثابت مربوط به طول و عرض را نباید با مقادیر min و max به صورت همزمان استفاده کنیم. چهار ویژگی مربوط به min و max که در بالا به آنها اشاره شد در بیشتر مرورگرهای معتبر مورد پشتیبانی قرار می گیرند؛ این مرورگرها شامل این موارد هستند:
Chrome 1+, Firefox1+, IE7+, Safari1+, Opera8+. از این ویژگیها به همراه قوانین مربوط به media برای طراحی صفحات برای نمایش در صفحه های با اندازه های مختلف استفاده می شود. ویژگی box-sizing ویژگی های مربوط به ابعاد معمولا به محدوده محتوا اشاره می کنند، و با محدوده padding یا border کاری ندارد. بنابراین برای اطلاع از عرض و ارتفاع واقعی که یک عنصر در مدل box model اشغال می کند، میزان padding و border که آن عنصر اشغال می کند نیز باید محاسبه شود.

/* یک عنصر با عرض 100 پیکسل */
.mybox{
padding : 3px;
border : 2px solid black;
width : 90px;
}

در css3 یک ویژگی با نام box-sizing در اختیار طراحان وب قرار گرفته است که به آنها اجازه می دهد این انتخاب را داشته باشند که عرض و طول ها چگونه محاسبه شوند. مقدار پیش فرض برای این ویژگی content-box است و به این نکته اشاره می کند که ویژگی های ابعاد فقط به محدوده محتوا اشاره می کند. مقدار جایگزین دیگر border-box است که padding و border را نیز در این اندازه گیری دخیل می کند.

box-sizing : content-box | border-box;

با تغییردادن مقدار مربوط به box-sizing به border-box می توانید یک طرح بندی شبکه ای (grid layout) را بهتر ایجاد کنید به خاطر اینکه دیگر لازم نیست که خودتان مقدار مربوط به padding و border را محاسبه کنید.

/* یک عنصر با عرض 100 پیکسل */
.mybox{
box-sizing : border-box;
padding : 3px;
border : 2px solid gray;
width : 100px
}

ویژگی border-box خصوصیات خود را از عنصر والدش به ارث نمی برد، اما این ویژگی تمام خصوصیات خود را به تمام عناصری که در وب سایت از انتخاب کننده universal استفاده می کند نسبت می دهد. برای افزایش میزان پشتیبانی مرورگرهای وب از این ویژگی باید از پیشوندهای –webkit و –moz استفاده کنید:

/* استفاده از border-boxبرای تمام عنصر ها */
*{
/* Chrome 1-8, Safari 3-5 */
-webkit-box-sizing: border-box;
/* Firefox 1-28 */
-moz-box-sizing: border-box;
/* Chrome9+, Firefox29+, IE8+, Safari5.1+, Opera9.5+ */
box-sizing: border-box;
}

پشتیبانی از ویژگی box-sizing در وضعیت خوبی قرار دارد و تقریبا تمام مرورگرهای وب معتبراز آن پشتیبانی می کنند. به همین خاطر خیلی از وب سایت های جدید از این ویژگی استفاده می کنند تا محاسبات مربوط به شبکه ها در وب سایتشان آسان تر شود.

ویژگی outline

منظور از outline خطی است که در اطراف یک عنصر و خارج از لبه حاشیه رسم می شود. این ویژگی معمولا به صورت یک خط نقطه چین در اطراف عناصر تعاملی نمایش داده می شود تا مشخص کند کدام عنصر به عنوان عنصر فعال است. اگر چه این ویژگی شبیه به border است اما outline هیچ فضایی را در box model اشغال نمی کند. علاوه بر این، بر خلاف borderتمام چهار جهت یک outline باید شبیه به هم باشند. ویژگی های مربوط به outline را می توان به هر عنصری اعمال کرد و این ویژگی از عنصر والد خود چیزی را به ارث نمی برد.

ویژگی outline-style 

سبک مربوط به outline با استفاده از ویژگی outline-style تعیین می شود. مقدار پیش فرض برای این ویژگی مقدار none است و اگر بخواهیم که outline نمایش داده شود باید مقداری غیر از none را بنویسیم.

outline-style : none | solid | dotted | dashed | double | 
groove | ridge | inset | outset 

مقادیر مربوط به این ویژگی دقیقا مثل border-style است به استثنای این مورد که مقدار hidden یک مقدار معتبر برای outline-style نیست. شکل مربوط به هر کدام از مقادیر را در زیر می بینید:

تصویر بالا: حالت های مختلف ویژگی outline

ویژگی outline-width

ضخامت outline با استفاده از ویژگی outline-width تعیین می شود. مثل ویژگی border-width مقدار مربوط به این ویژگی می تواند طول باشد یا یکی از این کلیدواژه ها: thin, medium, thick.

outline-width : <length> | thin | medium | thick 

cssضخامت outline را به صورت عددی مشخص کرده است، اما معمولا به صورت 1px, 3px, & 5px نمایش داده می شوند. مثل ویژگی border-width مقدار پیش فرض مربوط به این ویژگی مقدار medium است.

ویژگی outline-color

با استفاده از ویژگی outline-color می توانیم رنگ outline را تغییر دهیم. علاوه بر رنگ های استانداردی که وجود درد، می توان مقدار invert را نیز برای این ویژگی قرار داد.

outline-color : invert | <color>

برای اینکه مطمئن شویم به کنتراست مورد نظر خود می رسیم، خصوصیات مربوط به این اعلان پیشنهاد می کند که مقدار invert را به عنوان پیش فرض انتخاب کنیم، این کار باعث می شود رنگ outline رنگی مخالف پس زمینه خود انتخاب شود. با این وجود فقط IE8+ و Opera7+ واقعا از این مقدار پشتیبانی می کنند. بنابراین این مقدار معمولا استفاده نمی شود.

ویژگی outline

ویژگی outline حالت کوتاه شده برای دسترسی به تمام ویژگی هایی است که در بالا به آنها اشاره شد. با این دستور می توان تمام خصوصیات outline را به صورت یکجا تنظیم کرد:

outline : <outline-width> + <outline-style> + <outline-color>

از آنجایی که مقادیر موجود در دستور بالا کاملا با یکدیگر متفاوت هستند و هیچ نوع ابهامی نسبت به یکدیگر ندارند، می توان این مقادیر را با هر ترتیبی استفاده کرد. و البته هر کدام از آنها را می توان نادیده گرفت:

outline : thin solid red;

این کار را می توان با تنظیم کردن هر کدام از مقادیر به صورت جداگانه نیز انجام داد، اما مسلما دستور بالا ساده تر و راحت تر است:

outline-width : thin;
outline-style : solid;
outline-color : red;

ویژگی outline-offset

میزان فضای بین outline و لبه حاشیه را می توان با استفاده از این ویژگی تنظیم کرد. این ویژگی در css3 ارائه شده است.

outline-offset : <length>;

دستور زیر outline را به اندازه 3پیکسل از حاشیه به سمت بیرون دور می کند. می توانیم از مقادیر منفی نیز استفاده کنیم، که در این حالت outline به سمت داخل عنصر حرکت می کند.

outline-offset : 3px;

اگرچه این ویژگی در مروگر IE پشتیبانی نمی شود، اما در تمام مرورگرهای مهم دیگر مورد پشتیبانی قرار می گیرد.

فاصله گذاری

ویژگی line-height 

از ویژگی line-height برای مشخص کردن فاصله بین خطوط استفاده می کنیم. مقدار پیش فرض برای این ویژگی normal است که معمولا به اندازه 120% اندازه فونت در نظرگرفته می شود. همچنین می توانیم فاصله بین خطوط را بر اساس واحد اندازه گیری طول، درصدی از اندازه فونت فعلی، یا یک عدد بدون بعد که در اندازه فونت فعلی ضرب می شود مشخص کنیم.

 

line-height :inherit | normal | <length> | <percentage> | <number>

ویژگی line-height مقدار خود را از عنصر والدش به ارث می برد، بنابراین بهتر است که مقدار آن را با استفاده از یک عدد بدون بعد تعیین کنیم.
مقدار دهی ویژگی line-height با یک واحد اندازه گیری طول یا درصد می تواند برای عناصر فرزند مربوط به عنصر اصلی که از فونت هایی با اندازه متفاوت استفاده می کنند نتایج غیرقابل پیش بینی به وجود آورد. به خاطر اینکه در این صورت دیگر فاصله بین خطوط ثابت است و دیگر وابسته به اندازه فونت عنصر فرزند نیست.

/* در قطعه کد زیر، فاصله بین خطوط به اندازه 1.5 برابر اندازه فونت است */
line-height :1.5;

ویژگی line-height بر روی عناصر جایگزین شده خطی (inline replaced elements) مانند <img> تاثیری ندارد. هنگامی که در مورد عناصر جایگزین نشده خطی استفاده می شوند، فاصله بین خطوط همانطور که مورد انتظار است تنظیم می شود. در مورد عناصری که به صورت بلوک هستند ویژگی line-height بر اساس کمترین فاصله بین خطوط داخل باکس تنظیم می شود. 

ویژگی های word-spacing و letter-spacing 

با استفاده از ویژگی word-spacing فاصله بین کلمات را تنظیم می کنیم، و با استفاده از letter-spacing فاصله بین کاراکترها (حروف) را مشخص می کنیم. برای هر دوی این ویژگی ها می توان از مقادیر منفی استفاده کرد.

word-spacing :inherit | normal | <length> letter-spacing : inherit | normal | <length>

در مثال زیر مشخص می کنیم که بین حروف به اندازه 3 پیکسل فاصله باشد و بین کلمات به اندازه 5 پیکسل فاصله وجود داشته باشد. این قانون برای متن داخل پاراگراف ها نوشته شده است:

p{ 
letter-spacing : 3px;
word-spacing : 5px;
}

ویژگی white-space 

ویژگی white-space مشخص می کند که کاراکترهای فاصله در داخل یک عنصر بلوکی به چه صورت مورد پردازش قرار بگیرند. 

 

white-space (block) : inherit | normal | nowrap | pre | pre-wrap | pre-line

در حالت معمول چند کاراکتر فضای خالی در داخل یک فایل اچ تی ام ال به یک کاراکتر کاهش پیدا می کنند، و اگر لازم باشد عرض بلوکی که متن در آن قرار دارد را اشغال می کند.

/* Wrap text and collapse newline, spaces and tabs */
p { white-space : normal; }

با تنظیم کردن مقدار white-space به nowrap باعث می شویم متن به هیچ تگی غیر از تگ <br> واکنش نشان ندهد. البته مقدار pre(preformatted) هم باعث می شود که متن بسته بندی (wrap) نشود، اما این ویژگی از تمام کاراکترهای فضای خالی نیز جلوگیری می کند. این مقدار مثل عنصر <pre> در اچ تی ام ال عمل می کند.
هر دو ویژگی pre-wrap و pre-line باعث می شوند که متن به صورت عادی بسته بندی شود، با استفاده از pre-wrap ترتیب فضاهای خالی حفظ می شود و با استفاده از pre-line این فضاهای خالی کاهش پیدا می کنند (یکی می شوند). تفاوت بین pre-line و normal در این است که مقدار pre-lineکاراکترهای خط جدید را حفظ می کند. توجه داشته باشید که پشتیبانی از دو مقدار اخیر از نسخه 8 به بعد IE اضافه شده است.

پیشرفت قدم به قدم

هنگامی که تصمیم می گیرد یکی از ویژگی های جدید css را در وب سایت خود استفاده کنید، باید به این فکر کنید که ظاهر وب سایت شما بدون استفاده از آن ویژگی به چه شکلی خواهد داشت؟ اگر آن ویژگی باعث می شود سایت شما بهتر شود و پیشرفت کند – مثل استفاده از ویژگی border-radius- ممکن است بخواهید از آن ویژگی استفاده کنید، مگر اینکه آن ویژگی فقط توسط تعداد اندکی از کاربران وب سایت شما قابل مشاهده و استفاده باشد. خودتان باید بررسی کنید که آیا حتما لازم است از آن ویژگی استفاده کنید یا خیر؟ اگر به این نتیجه رسیدید که استفاده نکردن از این ویژگی به ظاهر سایت شما یا خدماتی که در آن سایت ارائه می کنید لطمه می زند می توانید با احتیاط از آن ویژگی استفاده کنید. 

 
زمان به نفع شما به عنوان یک طراح وب عمل می کند، و با کنار گذاشتن مرورگر های قدیمی توسط کاربران در طول زمان، تعداد بیشتری از کاربران وب سایت شما می توانند آن ویژگی را مشاهده کنند؛ که این کار باعث می شود از دیدن وب سایت شما بیشتر لذت ببرند.

از طرف دیگر، اگر وب سایت شما به آن ویژگی وابسته باشد و بدون وجود آن ویژگی دچار اختلال شود، باید ببینید برای اینکه بتوانید از آن ویژگی در وب سایت خود استفاده کنید چه کارهایی را می توانید انجام دهید. اغلب اوقات راه های زیادی برای رسیدن به یک نتیجه مشابه با استفاده از css وجود دارد، بنابراین منطقی است که روشی را انتخاب کنید که ویژگی های کلیدی مورد استفاده در وب سایت شما به بهترین شکل توسط اکثریت مرورگرهای وب پشتیبانی شود، مثلا صفحه بندی (layout) وب سایت شما.

کلیدواژه های عمومی

علاوه بر کلیدواژه inherit، دو کلیدواژه عمومی دیگر نیز وجود دارند که ممکن است در هنگام کار کردن با css با آن مواجه شویم: initial و unset. هر دوی این کلیدواژه ها در نسخه 3 css ارائه شده اند و می توان از آنها برای تمام ویژگی ها استفاده کرد.

کلیدواژه initial ، مقدار اولیه مربوط به یک ویژگی را که توسط css تعریف شده است به آن نسبت می دهد. این کلیدواژه در نسخه هایChrome 1+، Firefox 19+، Safari 1.2+، و Opera 15+پشتیبانی می شود؛ اما فعلا در هیچ کدام از نسخه های IE پشتیبانی نمی شود. به خاطر اینکه IE از این کلیدواژه استفاده نمی کند، این مقدار خیلی مفید نیست. توصیه می شود که مقدار اولیه یک ویژگی را صریحا مشخص کنید تا خیالتان از مقدار اولیه که به صورت پیش فرض تعریف شده است راحت شود.

سومین کلیدواژه عمومی، کلیدواژه unset است. این کلیدواژه ترکیبی از کلیدواژه های inherit و initial است. با استفاده از این مقدار، اگر یک مقدار به ارث برده شده وجود داشته باشد آن مقدار ریست می شود. در غیر این صورت مقدار ویژگی به مقدار اولیه تنظیم می شود. در حال حاضر این کلیدواژه فقط توسط Firefox 27+ پشتیبانی می شود. پس بهتر است ازاین کلیدواژه فعلا استفاده نکنیم.

ویژگی ها در css

سعی می کنیم از این قسمت به بعد در مورد ویژگی های (property) زیادی که در کدنویسی css وجود دارد صحبت کنیم. برای نشان دادن یک ویژگی و مقادیر مربوط به آن از دستور نشانه گذاری رسمی استفاده می کنیم که در پایین یک نمونه از آن را مشاهده می کنید: 

text-shadow : inherit | none | <offset-x><offset-y> [<blur-radius>] [<color>]

نمونه بالا به این معنی است که ویژگی text-shadow می تواند یکی از سه مقدار مشخص شده در بالا را به خود اختصاص دهد. مقدار پیش فرض به عنوان اولین مقدار نوشته شده است؛ در این حالت مقدار پیش فرض inherit است. به خاطر اینکه کلیدواژه inherit را می توانیم برای هر ویژگی اختصاص دهیم، این ویژگی را ذکر نمی کنیم مگر اینکه به عنوان مقدار پیش فرض باشد. مقدار دوم، none، هم یک کلیدواژه است. این مقدار، مقدار اولیه این ویژگی است که می توان از آن برای غیر فعال کردن اثر ویژگی به ارث بردن استفاده کرد.
سومین گزینه در این نشانه گذاری، شامل 4 مقدار است، که دوتای آنها لازم و دوتای دیگر اختیاری هستند.
مقادیر اختیاری با علامت [] نشان داده می شوند.
نشانه های <> مشخص می کنند که مقادیر داده شده کلیدواژه نیستند؛ آنها انواع دیگر مقادیر هستند.
در مثال بالا این مقادیر شامل سه مقدار طول و یک مقدار رنگ هستند. بر اساس مثال توضیح داده شده در بالا، در قسمت پایین یک مثال معتبر از ویژگی ذکر شده را مشاهده می کنید:

text-shadow: 1px 1px 1px red;

واحد های اندازه گیری در css

هنگامی که برای نوشتن قانون نیاز به واحد اندازه گیری برای مقدار یک ویژگی داشته باشید، برای این کار روش های مختلفی وجود دارد:
واحد های اندازه گیری مطلق
واحد های اندازه گیری مطلق مربوط به طول عبارتند از سانتی متر (cm)، میلیمتر (mm)، و اینچ (in). اگرچه به نظر می رسد که بدون در نظر گرفتن رزولوشن (resolution) صفحه نمایش همه این واحدهای اندازه گیری طول با یکدیگر برابر هستند، اما این مساله همیشه قابل اعتماد نیست! چون معمولا مرورگرهای وب اندازه دقیق نمایشگر رسانه مورد استفاده را نمی دانند.

.one-cm { font-size: 1cm; }
.one-mm { font-size: 1mm; }
.one-in { font-size: 1in; }

در اصل از این نوع واحد اندازه گیری باید زمانی استفاده کنیم که دقیقا اندازه رسانه ای که قرار است محتوا بر روی آن نمایش داده شود مشخص باشد؛ مثلا فرض کنید که یک محتوا را می خواهیم دقیقا برای چاپ بر روی یک کاغذ با اندازه خاص آماده کنیم. این روش برای نمایش اطلاعات بر روی صفحه نمایش (screen) ابزار مختلف توصیه نمی شود، چون اندازه صفحات نمایش مختلف با یکدیگر بسیار تفاوت دارند.
واحد های اندازه گیری بر اساس مقادیر تایپی (Typographical)
اگر با فرایند صفحه بندی و تایپ آشنایی داشته باشید می دانید که دو واحد اندازه گیری برای تایپ فونت ها وجود دارد: points (pt) و picas (pc). بر اساس تعریف، هر اینچ شامل 72 پوینت است و هر 12 پوینت برابر با یک pica است. مثل واحدهای اندازه گیری مطلق، این نوع واحد های اندازه گیری هم برای رسانه های چاپی بسیار مناسب هستند و بهتر است در صفحات نمایش از آنها استفاده نکنیم.

.one-point { font-size: 1pt; }
.one-pica { font-size: 1pc; }

واحدهای اندازه گیری نسبی (Relative)
واحد های اندازه گیری نسبی مربوط به طول، شامل پیکسل (px) و درصد (%) هستند. منظور از درصد، نسبت اندازه به اندازه ویژگی والد همان عنصر(parent element) است. اندازه یک پیکسل به اندازه فیزیکی پیکسل بر روی نمایشگر کاربر بستگی دارد.

.one-pixel { font-size: 1px; }
.one-pica { font-size: 1%; }

در نوشتن کدهای css برای نمایش محتوا بر روی صفحه نمایش دستگاه کاربر، دو واحد پیکسل و درصد از پرکاربردترین واحدهای اندازه گیری هستند. پیکسل ها اندازه های مشخص و ثابت هستند و بنابراین به شما این اجازه را می دهند که کنترل کامل و دقیق بر روی اندازه محتوای قابل نمایش بر روی صفحه نمایش داشته باشید.
از طرف دیگر، می توان از واحد درصد برای مشخص کردن اندازه متن استفاده کرد به خاطر اینکه معمولا می خواهیم که اندازه متن قابل تنظیم باشد، چون این مساله مخصوصا در ابزارهایی که دارای صفحه نمایش کوچک هستند مساله مهمی است.
اما در زمانی که متن قسمتی از طراحی شما به حساب می آید و باید تناسب دقیق با سایر محتوای صفحه داشته باشد، می توان از واحد اندازه گیری پیکسل استفاده کرد (تا کنترل کاملی بر روی اندازه فونت ها داشته باشیم). مرورگرهای وب مدرن معمولا به ما این امکان را می دهند که بتوانیم در تمام قسمت صفحه زوم انجام دهیم، در این حالت می توانیم از واحد پیکسل استفاده کنیم که کنترل بیشتری بر روی محتوا داشته باشیم. توجه داشته باشید که در صفحه های نمایش که دارای رزولوشن خیلی بالا هستند، هر پیکسل در مورد قوانین css به عنوان پیکسل های چندگانه (multiple pixels) صفحه نمایش ارائه می شوند. به عنوان مثال در صفحه های نمایش نوع Retina در سیستم Appleتمام اندازه های پیکسل به صورت دو برابر اندازه واقعی محاسبه می شوند.
واحد های اندازه گیری مربوط به فونت ها
دو واحد اندازه گیری دیگر نیز وجود دارند که به صورت نسبی هستند: em-height (em) و ex-height (ex).
em-height مثل font-size عمل می کند.ex-hight تقریبا به اندازه نصف font-size است.

.one-ex { font-size: 1ex; }
.one-em { font-size: 1em; }

مثل درصد، واحد em-heightیک واحد نسبی خوب است که معمولا برای تعیین کردن اندازه فونت ها در صفحه وب استفاده می شود. با هر دو این واحدهای اندازه گیری می توان به کاربر این اجازه را داد که خودش اندازه فونت ها را انتخاب کند و این نوع واحد ها برای خواندن متن در دستگاه های با صفحات نمایش کوچک تر مناسب تر هستند.
درcss3 دو واحد اندازه گیری دیگر نیز ارائه می شود: rem و ch. واحد اندازه گیری root em-heightیا همان (rem) اندازه فونت را نسبت به اندازه فونت عنصر ریشه خود در ساختار اچ تی ام ال، مشخص می کند. از این واحد می توان به جای em استفاده کرد؛ با این کار می توان از تغییر اندازه فونت بر اساس تغییراتی که در اندازه فونت والد ایجاد می شود جلوگیری کرد.

.one-rem { font-size: 1rem; }

واحد اندازه گیری Character unit (ch) عرض کاراکتر صفر (0) را برای فونت اندازه گیری می کند. از این واحد اندازه گیری می توان برای تعریف عرض کادری (box) که متن در آن قرار می گیرد استفاده کرد چون این واحد اندازه گیری تقریبا متناسب با تعداد کاراکترهایی است که در داخل آن جعبه قرار گرفته اند.

/* عرض های مشابه */

00000

در هنگام استفاده از واحد های rem و ch دقت کنید که مروگرهای وب در نسخه های خاصی از این دو واحد اندازه گیری پشتیبانی می کنند. البته واحد rem در نسخه های بیشتری از مروگرهای وب پشتیبانی می شود.
واحدهای اندازه گیری viewport
عرض دید (vw) و ارتفاع دید (vh) اجازه می دهد که عناصری که توسط آن مشخص شده اند بر اساس ناحیه دید (viewpoint) اندازه دهی شوند، منظور از viewpoint قسمت قابل دیدن سند در پنجره مرورگر است، یعنی همان قسمتی از صفحه وب، که کاربر آن را در صفحه نمایش خود مشاهده می کند. هر واحد یک درصد از نمای فعلی را نشان می دهد.

width: 50vw; /* 50% of viewpoint width  */
height: 25vh; /* 25% of viewpoint height */

در واحد اندازه گیری viepoint دو واحد دیگر نیز وجود دارد، vmin و vmax که این دو واحد در واقع بیشترین و کمترین اندازه های viewpoint را برمی گردانند.

width: 1vmin; /* 1vh یا 1vw, هرکدام که کوچک تر باشند */
width: 1vmax; /* 1vh یا  1vw,  هرکدام که بزرگ تر باشند */

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

گروه بندی کردن قوانین

برای اینکه شیوه نامه هایی که ایجاد می کنیم را بتوانیم به آسانی و با سرعت ویرایش کنیم می توانیم قوانین مشابه را در یک گروه قرار دهیم (گروه بندی کنیم - grouping). با استفاده از گروه بندی می توانیم مجموعه ای از قوانین مربوط به یکدیگر را مشخص کنیم. به عنوان مثال اگر بخواهیم برای دو نوع تیتر (h1, h2) به صورت همزمان سبکی را تعیین کنیم که رنگ متن قرمز و پسزمینه آن مشکی باشد می توانیم این کار را به چهار روش انجام دهیم:
قوانین به صورت گروه بندی نشده
هر قانون را می توانیم به صورت جداگانه بنویسیم؛ با این کار می توانیم هر سیک را به صورت جداگانه به عنصر انتخاب شده اعمال کنیم:

h1{ color: red; }
h1 { background: black; }
h2{ color: red; }
h2 { background: black; }

انتخاب کننده های گروه بندی شده
می توانیم انتخاب کننده ها (selector) را با یکدیگر گروه بندی کنیم، برای این کار چند انتخاب کننده که مورد نظرمان هستند را می نویسیم و بین انتخاب کننده ها از علامت ویرگول استفاده می کنیم. با این کار اعلان به تمام انتخاب کننده هایی که انتخاب کرده ایم اعمال می شود:

h1, h2 {color: red;}
h1, h2 { background: black; }

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

h1{
color: red;
background: black;
}
H2{
color: red;
background: black;
}

انتخاب کننده ها و اعلان ها به صورت گروه بندی شده
ما می توانیم هم انتخاب کننده ها و هم اعلان ها را با یکدیگر گروه بندی کنیم. با این کار یک قانون یکجا و کلی به دست می آید که مشخص می کنیم چه اعلان هایی به چه انتخاب کننده هایی اعمال شود:

h1, h2{
color: red; 
background: black; 
}

هرجا که امکان داشته باشد باید قوانین به صورت گروه بندی شده نوشته شوند؛ این کار باعث می شود که فایل مربوط به شیوه نامه ها کوتاه و مختصر شود؛ در نتیجه عملکرد سایت شما هم بهتر خواهد شد، چون کوتاه تر بودن قوانین یعنی کوچک ترو در نتیجه کم حجم تر شدن فایل شیوه نامه؛ این مساله باعث می شود که زمان بارگذاری فایل شیوه نامه کوتاه تر شود. همچنین باعث می شود که ویژگی های مورد نظر شما فقط در یک محل نوشته شوند، و در نتیجه ویرایش کدها نیز در آینده آسان تر خواهد شد.

استفاده از فاضاهای خالی (space)

منظور از فضاهای خالی یعنی فاصله، تب (فشار دادن کلید tab بر روی صفحه کلید کامیپیوتر یا فضای معادل آن)، و خط جدید. شما می توانید به راحتی شیوه نامه هایی که می نویسید را با استفاده از فضاهای خالی سازماندهی کنید تا بهتر و راحت تر خوانده شوند. مثلا می توانید در داخل یک قانون، هر اعلان را در یک خط جدید بنویسید که کدهای شما خوانا تر شوند؛ با این کار ظاهر کدهای شما بهتر می شود و البته مرورگر نیز در خواندن کدهای شما دچار مشکلی نخواهد شد:

.menu{
color: red:
margin: 1px;
}

نکته مهم:
توجه کنید که بین مقدار یک ویژگی و واحد اندازه گیری مربوط به آن فاصله وجود نداشته باشد. مثلا margin: 1 px; غلط است چون بین 1 و px فاصله وجود دارد. این قطعه کد باید به این صورت نوشته شود: margin: 1px;