واحدهای اندازه‌گیری در 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 را تغییر دهید.

/* 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 ویوپورت، هرکدام بزرگتر است.

مثال

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

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

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

---

تمرین ۱

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

---

متغیرها – Variables

تعریف:

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

استفاده:

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

وراثت Inheritance

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

.two {
    --test: 10px;
}

.three {
    --test: 16px;
}

The results of var(–test) for class:

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

Fallback Values

.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));
}

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

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

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

---

تمرین ۲

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

---

محاسبات

Operators:

• + Addition
• – Subtraction
• * Multiplication
• / Division

Values:

• number
• percentage
• angle
• time

calc( ) Examples

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 باز کنید.
• با روش مثال بالا تغییراتی در آن بدهید تا همانند ویدیوی زیر همیشه در مرکز صفحه باشد.

سلکتور یا گزینشگر در CSS نام عبارتی است که یک یا چند المنت را در فایل HTML برمی‌گزیند. هنگامی که بخواهید ویژگی‌های نمایشی بخشی از فایل HTML خود را تعیین کنید. ابتدا باید آن بخش را به شکلی مشخص کنید. این کار به وسیله سلکتور انجام می‌گیرد.

آناتومی کلی CSS به شکل زیر است. در ابتدا سلکتور نوشته می‌شود. و پس از آن دستورات مورد نظر درون {…} کِرلی بِرَکِت Curly Bracket می‌آید.

---

انواع سلکتور:

• ساده
• مرکب
• شبه کلاس
• شبه المنت
• اتریبیوت

---

سلکتورهای ساده – Basic

۱- فراگیر – Universal

علامت ستاره یا Asterisk به تنهایی نوشته می شود.

* { color: black; }    /* همه المنت‌ها را برمی‌گزیند. */

۲-  نوع – Type

تگ به تنهایی نوشته می‌شود.

X { color: black; }    /* همه المنت‌هایی که با تگ X هستند را برمی‌گزیند. */

۳- کلاس – Class

در ابتدای نام کلاس علامت دات (dot)  نوشته می‌شود.

.X { color: black; }    /* المنت‌هایی که با کلاس X هستند را برمی‌گزیند. */

۴- آی دی – id

در ابتدای نام آی دی علامت هشتگ نوشته می‌شود.

#X { color: black; }    /* المنت‌هایی که با آی دی X هستند را برمی‌گزیند. */

۵- اتریبیوت – Attribute

اگر تنها نام اتریبیوت درون برکت Bracket […] نوشته شود.

[foo] { color: black; }

همه المنت‌هایی که اتریبیوت foo دارند را برمی‌گزیند. مهم نیست مقدار آن چه باشند.

اگر نام و مقدار اتریبیوت درون برکت نوشته شود.

[foo="bar"] { color: black; }

همه المنت‌هایی که اتریبیوت foo آنها برابر bar باشد را برمی‌گزیند.

---

سلکتورهای مرکّب – Combinator

سلکتور مرکب از ترکیب چند سلکتور ساده ساخته می‌شود.

۱-  لیست – List

سلکتورهای ساده با کاما از هم جدا می‌شوند.

X, Y { color: black; }

هر المنتی را که با یکی از سلکتورهای X یا Y هم‌خوانی دارد را برمی‌گزیند.

۲-  نوادگان – Descendant

سلکتورهای ساده با اسپیس Space از هم جدا می‌شوند.

X Y { color: black; }

هر المنت‌ Y ای که درون X هست را برمی‌گزیند. (بی واسطه یا با واسطه)

۳- فرزند بلافصل – Direct Child

سلکتورهای ساده با بزرگتر از هم جدا می‌شوند.

X > Y { color: black; }

هر المنت‌ Y ای که بی واسطه درون X هست را برمی‌گزیند.

۴- خواهر برادری – sibling

سلکتورهای ساده با تیلدا Tilde از هم جدا می‌شوند.

X ~ Y { color: black; }

هر المنت‌ Y ای که پس از X هست را برمی‌گزیند. (بلا فاصله یا با فاصله)

۵- خواهر برادری بلافصل – Adjacent sibling

سلکتورهای ساده با علامت جمع از هم جدا می‌شوند.

X + Y { color: black; }

هر المنت‌ Y ای که بلا فاصله پس از X هست را برمی‌گزیند.

---

سلکتورهای شبه کلاس – Pseudo-Classes

در ابتدای نام این سلکتورها یک علامت کولن Colon نوشته می‌شود.

:pseudo-classes { color: black; }

مانند یک کلاس کار می‌کند.

۱- فرزندی Child-Related

یک یا چند فرزند درون یک المنت را برمی‌گزیند.

X:first-child { color: black; }

اولین فرزند المنت X را برمی‌گزیند.

X:last-child { color: black; }

آخرین فرزند المنت X را برمی‌گزیند.

X:only-child { color: black; }

اگر المنت X تک فرزند داشت آن را برمی‌گزیند.

X:nth-child(n) { color: black; }

n امین فرزند المنت X را برمی‌گزیند.

X:nth-last-child(n) { color: black; }

n امین فرزند المنت X را از آخر برمی‌گزیند.

۲- خواهر برادری Sibling-Related

یک یا چند المنت درون یک المنت را برمی‌گزیند.

X:first-of-type { color: black; }

اولین المنت X درون یک المنت دیگر را برمی‌گزیند.

X:last-of-type { color: black; }

آخرین المنت X درون یک المنت دیگر را برمی‌گزیند.

X:only-of-type { color: black; }

المنت X را برمی‌گزیند، به شرط آنکه X درون یک المنت دیگر تک فرزند باشد.

X:nth-of-type(n) { color: black; }

n امین المنت X که درون یک المنت دیگر قرار دارد را برمی‌گزیند.

X:nth-last-of-type(n) { color: black; }

n امین المنت X از آخر که درون یک المنت دیگر قرار دارد را برمی‌گزیند.

۳- پیوندی Link-Related

بیشتر برای المنت از نوع لینک کاربرد دارد.

X:link { color: black; }

المنت X پیش از کلیک بر روی آن را برمی‌گزیند.

X:visited { color: black; }

المنت X پس از کلیک بر روی آن را برمی‌گزیند.

۴- ماوس Mouse-Related

X:hover { color: black; }

المنت X هنگامیکه نشانگر موس بر روی آن قرار گرفته است.

X:active { color: black; }

المنت X هنگامیکه کلید موس بر روی آن فشار داده شده است.

X:focus { color: black; }

المنت X هنگامیکه تمرکز بر روی آن است.

۵- ورودی – Input-Related

X:checked { color: black; }

المنت X هنگامیکه چک مارک خورده باشد.

۶- غیره

:root { color: black; }

المنت ریشه که همان html است.

:target { color: black; }

المنتی که id آن در انتهای URL آمده است.

:not(Y) { color: black; }

المنت‌هایی که Y نیستند.

---

سلکتورهای شبه المنت – Pseudo-Element

در ابتدای نام این سلکتورها دو علامت کولن Colon نوشته می‌شود.

::pseudo-element { color: black; }

یک المنت جدید درون المنت دیگر می‌سازد.

X::before { color: black; }

یک المنت درون یک المنت پیش از همه فرزندانش می‌سازد.

X::after { color: black; }

یک المنت درون یک المنت پس از همه فرزندانش می‌سازد.

پراپرتی content محتوای درون المنت را معیّن می‌کند.

---

برای تمرین و یادگیری بهتر به آدرس flukeout.github.io بروید.

---

مثال

در مثال زیر به کمک سلکتورهای before و after چیزی را  پیش و پس از محتوای اصلی المنت اضافه می‌کنیم.

<p>tea</p>
<p>water</p>
<p>coffee</p>

p::before {
    content: "Drinking ";
    color: Red;
}

p::after {
    content: " After Meals.";
    color: Blue;
}

---

مثال

در مثال زیر به کمک سلکتور before تصویری را  پیش از محتوای اصلی المنت اضافه می‌کنیم.

<p>Ali</p>
<p>Mahdi</p>
<p>Reza</p>

p::before {
    content: "";
    background: url(user.svg) no-repeat;
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: .1em;
}

---

Typicons

یک فونت اپن سورس و آزاد است که مجموعه کوچک و سبکی از آیکن‌های مورد نیاز شما را در خود فراهم آورده است. و شما می توانید آن ها را به سادگی در وب یا UI مورد نظر خود به کار برید.

موس خود را روی آیکن‌ها حرکت دهید. کد هر کدام در نوار پایین نمایش داده می‌شود. آن کد را در content به شکل زیر بنویسید.

مثال

در مثال زیر برای نمایش آیکن مورد نظر از تگ <i> استفاده شده است.

• کلاس icon برای تنظیمات عمومی است. مثل نوع فونت، سایز، محل قرارگیری و …
• کلاس بعدی (usr, cal, pen) تنها برای تعیین آیکن مورد نظر است. به کمک سلکتور before کد آیکن را مشخص می‌کنیم.

<p><i class="icon usr"></i>Mahdi</p>
<p><i class="icon cal"></i>May 1</p>
<p><i class="icon pen"></i>Edit</p>

@font-face {
    font-family: 'typicons';
    src: url('typicons.woff');
}

.icon::before {
    font: 1em 'typicons';
    display: inline-block;
    margin-right: .1em;
}

.usr::before { content: '\e12c'; }
.cal::before { content: '\e039'; }
.pen::before { content: '\e0c2'; }

---

تمرین

ابتدا یک پوشه به نام web2 بسازید. و در آن برای هر تمرین در هر جلسه پوشه‌ای جداگانه مشابه تصویر زیر بسازید. (ابتدا شماره جلسه سپس شماره تمرین)

---

تمرین ۱

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

---

مثال

در مثال زیر می خواهیم عنوان یک دیتا را پیش از آن بنویسیم.

برای این کار به کمک سلکتور before مقدار یک اتریبیوت را  پیش از محتوای اصلی المنت اضافه می‌کنیم.

<p data-label="Firstname">Ali</p>
<p data-label="Lastname">Mahdavi</p>
<p data-label="Age">16</p>

p::before {
    content: attr(data-label)": ";
}

---

مثال

در مثال زیر می خواهیم عنوان عکس را زیرش نمایش دهیم.

برای این کار به کمک سلکتور after مقدار یک اتریبیوت را  پس از محتوای اصلی المنت اضافه می‌کنیم.

<picture data-title="Cute Duck">
    <img src="cute.jpg" />
</picture>

picture::after{
    content: attr(data-title);
}

---

مثال

در مثال زیر می خواهیم نوع یک دیتا را با نمایش یک آیکن پیش از نشان دهیم.

برای این کار به کمک سلکتور before مقدار یک اتریبیوت را  پیش از محتوای اصلی المنت اضافه می‌کنیم.

<p data-icon="&#xe12c;">Mahdi</p>
<p data-icon="&#xe039;">May 1</p>
<p data-icon="&#xe0c2;">Edit</p>

@font-face {
    font-family: 'typicons';
    src: url('typicons.woff');
}

[data-icon]::before {
    content: attr(data-icon);
    font: 1em 'typicons';
    display: inline-block;
    margin-right: .1em;
}

---

تمرین ۲

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

فرض کنید شما و دوستتان روی یک پروژه کار می‌کنید. اطلاعات مربوط به این پروژه شامل تعداد زیادی فایل است که در یک پوشه نگهداری می‌شود. در ابتدا این فولدر را هرکدامتان روی لپتاپ خودش کپی می‌کند. (بیشتر…)

آیا می‌دانید همگام سازی دیتا (Data Synchronization) چیست و چرا مهم است؟ گاهی اوقات به دلایل مختلف ما مجبوریم اطلاعاتمان را روی دو یا چند وسیله جداگانه نگهداری کنیم. پس از مدتی که با آنها کار کنیم این اطلاعات با هم اختلاف پیدا می کنند و لازم است با هم یکسان شوند. به این کار همگام سازی دیتا می‌گویند. (بیشتر…)

امروزه راه‌های زیادی وجود دارد تا ایده‌هایمان را به دیگران برسانیم. رسانه‌های اجتماعی، وبلاگ‌ها، نوشتن نظر زیر مقالات خبری و غیره. اگر چیزی برای گفتن داشته باشید، بی‌گمان می‌توانید جایی برای گفتن آن پیدا کنید. اما عملکرد این پلتفرم‌ها به گونه‌ایست که، دنیایی از اخبار ساختگی ما را فراگرفته، و درون اتاق‌های پژواک گیر افتاده‌ایم. چنانکه گمان می‌کنیم همه باورهایمان صحیح است و چقدر ما باهوشیم که این باورها را داریم. (بیشتر…)