۲- اندازه‌ها – سواد دیجیتال

واحدهای اندازه‌گیری – Units

واحدهای اندازه‌گیری در CSS بسیار کاربرد دارد. چون بسیاری از پراپرتی‌های یک المنت HTML اندازه‌ای را تعیین می‌کند. و دادن اندازه یک چیز به صورت یک عدد بدون واحد، بی‌فایده است. به عنوان نمونه اگر شما بخواهید width یک عکس را مشخص کنید، و تنها یک عدد بدهید (مثلا ۲۰) و واحد آن را مشخص نکنید، نوشتن این عدد هیچ ارزشی ندارد. پس تعیین واحد برای معنا دادن به اعداد بسیار مهم است.

پراپرتی‌های بسیاری به تعیین واحد نیاز دارند. از جمله:

width, Height, margin, padding, border, border-radius, shadow, font-size, …

واحدها به دو نوع اصلی دسته بندی می‌شوند:

مطلق – Absolute
نسبی – Relative

مطلق – Absolute

واحدهای اندازه‌گیری مطلق به چیز دیگری وابسته نیست.

px (pixels) : 1 px = 1/96 of 1 inch
pt (points) : 1 pt = 1/72 of 1 inch
pc (picas) : 1 pc = 1/6 of 1 inch

in (inch) : 1 in = 25.4 mm
cm (centimeter) : 1 cm = 10 mm
mm (millimeter)

نسبی – Relative

واحدهای اندازه‌گیری نسبی به اندازه پنجره بروزر، المنت پرنت، فونت یا چیز دیگری وابسته است.

% (Percent) : Relative to the parent element

em : 1 em = font-size of the element
rem : 1 rem = font-size of the root element

vw : 1 vw = 1% viewport width
vh : 1 vh = 1% viewport height
vmin : 1 vmin = 1% smaller length of vw or vh
vmax : 1 vmax = 1% larger length of vw or vh

درصد %

واحد % هر جایی معنای خودش را دارد:

font-size: نسبت به font-size پرنت
width: نسبت به width پرنت
height: نسبت به height پرنت
…

em / rem

حرف M اگر به صورت Capital نوشته شود، طول و عرض آن مساوی است. و درون یک مربع را پر می‌کند. اندازه ضلع این مربع را یک em می‌گویند. بنابراین در هر المنتی 1em برابر font-size همان المنت است. و اندازه 1em در یک المنت با یک المنت دیگر ممکن است متفاوت باشد. اگر برای اندازه font-size از این واحد استفاده شود، براساس font-size پرنت محاسبه می‌شود.

و اما rem کوتاه شده root em است. و root به معنای ریشه است و در اینجا منظور المنت html است. که همه المنت‌ها را دربرمی‌گیرد. بنابراین مقدار 1rem همه جا با هم برابر است. و برابراست با font-size المنت html.

نکته‌‌هایی برای اندازه فونت:

در المنت html واحد em یا rem را به کار نبرید.
در بخش‌های اصلی مثل header یا footer یا … از واحد rem استفاده کنید.
در جاهای دیگر از em استفاده کنید.

سعی کنید برای تعیین اندازه هر چیز در هر جایی از واحد em یا rem استفاده کنید. با این کار اگر بخواهید محتوای سایت خود را درشت‌تر یا ریزتر کنید، بسیار ساده خواهد بود. تنها اندازه فونت html را تغییر دهید.

CSS


/* Root */
html {font-size: 16px;}

/* Components */
header {font-size: 1.5rem;}
footer {font-size: 0.75rem;}
main {font-size: 1.0rem;}

/* Text Elements */
p {font-size: 1em;}

h1 {font-size: 2em;}
h2 {font-size: 1.5em;}
h3 {font-size: 1.17em;}
h4 {font-size: 1em;}
h5 {font-size: .83em;}
h6 {font-size: .75em;}

p,h1,h2,h3,h4,h5 {
    margin-top: .5em;
    margin-bottom: .25em;
}

ویوپورت Viewport

ویوپورت به معنای گستره دیدگاه است. یعنی جایی که محتوای سایت نمایش داده‌ می‌شود. (فضای درونی پنجره بروزر) ویوپورت یک مستطیل است بنابراین همیشه width و height دارد.

۱- vw: مقدار 100vw برابر است با width ویوپورت.

۲- vh: مقدار 100vh برابر است با height ویوپورت.

۳- vmin: مقدار 100vmin برابر است با width یا height ویوپورت، هرکدام کوچکتر است.

۴- vmax: مقدار 100vmax برابر است با width یا height ویوپورت، هرکدام بزرگتر است.

مثال

در این مثال می‌خواهیم یک مربع در میان صفحه نمایش داده شود. و با بزرگ و کوچک کردن پنجره بروزر اندازه مربع نیز تغییر کند.

CSS


main {
    margin: 10vmin;
    width: 80vmin;
    height: 80vmin;
}

گوشه فریم بالا را بگیرید و آن را بزرگ و کوچک کنید و نتیجه را ببینید.

تمرین ۱

این فایل را دانلود کنید.
آن را در فولدر web2 باز کنید.
در آن تغییراتی بدهید تا عکس مورد نظر همانند تصویر زیر در وسط صفحه باشد. و با تغییر اندازه بروزر کوچک و بزرگ شود.

متغیرها – Variables

تعریف:

CSS


element {
    --main-bg-color: brown;
}

استفاده:

CSS


element {
    background-color: var(--main-bg-color);
}

وراثت Inheritance

HTML


<div class="one">
    <div class="two">
        <div class="three"></div>
        <div class="four"></div>
    </div>
</div>

CSS


.two {
    --test: 10px;
}

.three {
    --test: 16px;
}

The results of var(–test) for class:

.one – invalid
.two – 10px
.three – 16px
.four – 10px (inherited)

Fallback Values

CSS


.two {
    /* Red if --my-var is not defined */
    color: var(--my-var, red);
}

.three {
    /* pink if my-var and --my-background are not defined */
    background-color: var(--my-var, var(--my-background, pink));
}

متغیرهای نامعتبر

CSS


:root { --text-color: 16px; }

p {
    color: blue;  
    color: var(--text-color);
}

This paragraph is initial black.The invalid value is replaced by
the inherited value.
if doesn’t have,
the initial value is used.

تمرین ۲

این فایل را دانلود کنید.
آن را در فولدر web2 باز کنید.
از variable استفاده کنید، تا عکس مورد نظر همانند تصویر زیر در وسط صفحه باشد.

محاسبات

Operators:

+ Addition
– Subtraction
* Multiplication
/ Division

Values:

number
percentage
angle
time

calc( ) Examples

CSS


element {
    margin-left: calc(50% + 20px);
    width: calc(50% - 3em);
    font-size: calc(1.5rem + 3vw);
    width: calc(40% + 20px - 1em);
    height: calc(100vh / 7 * 3);
    width: calc((100% + 60px) / 3);

    --ht: 4em;
    height: calc(var(--ht) + 7px);

}

Example: Position Background Image

css


element {
    background-position: calc(100% - 20px) calc(100% - 20px);
}

گوشه فریم بالا را بگیرید و آن را بزرگ و کوچک کنید و نتیجه را ببینید.

تمرین ۳

این فایل را دانلود کنید.
آن را در فولدر web2 باز کنید.
با روش مثال بالا تغییراتی در آن بدهید تا همانند ویدیوی زیر همیشه در مرکز صفحه باشد.