آموزش CSS :CSS3 چیست؟ آشنایی با CSS (قسمت اول)

قسمت اول دوره آموزش CSS3

🌟سلامی به دلرباییِ CSS3 و درودی با طعم استایل های رنگارنگ، تقدیم به شما پری رویانِ گرامی🌟

⭕آیا از وب سایت زشتی💀 که با HTML ساخته اید، رنج می برید؟😓 

⭕آیا از تگ های خشک و بی رمقِ HTML، دلسرد💔 شده اید؟😳

⭕آیا به دنبال یک قالب زیبا و رنگ و وارنگ🌈 برای سایت خود هستید؟😏

⭕آیا برای شروعی برق آسا⚡ و جنگنده آماده اید؟😍

اگر پاسخ شما به این پرسش ها بلی است، به شما تبریک می گوییم و بیایید تا با هم پس از پشت سر گذاشتن آموزش های HTML5، این بار اولین قسمت از آموزش CSS3 را آغاز نماییم. این شما و این هم:

👇👇🎥قسمت اولِ آموزش ویدیویی CSS3 تحت عنوان: CSS چیست؟🎥👇👇

 

CSS چیست؟

اگر شما خوانندگان گرامی، در سال ۱۹۹۴ درحال مطالعه این مطلب بودید، قطع به یقین به دلیل در اختیار داشتن دانش HTML هیچ خدایی را بنده نبودید😊 و به خود می بالیدید. می دانم که باورش سخت است اما اکنون سالِ ۲۰۱۹ می باشد و هیچکس برای دانش اچ تی ام الیِ تان، به شما افتخار نمی کند😔.

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

حال که روحیه تان به اندازه کافی خراب گردید😍، بهترین زمان برای شروع یادگیری CSS است.

زبان CSS نیز همانند HTML یک زبان برنامه نویسی تحت وب است. البته می دانم که همین لحظه برخی عزیزان بزرگوار بنده را بی سواد👎 قلمداد می نمایند و خواهند گفت: CSS و HTML زبان های نشانه گذاری هستند و نه برنامه نویسی. تا حدی درست است اما بیایید (برخلاف مقالات دیگر)زاویه دیدمان را نسبت به این موضوع تغییر دهیم و کمی ساده تر مفهوم برنامه نویسی را بیان کنیم.

از نظر بنده مجموعه ای از دستورات که با هم متحد می شوند و برنامه ای را پدید می آورند، در حقیقت برنامه نویسی کرده اند. به HTML و CSS می توان لقبِ زبان های برنامه نویسی بی ارزه ی سمت کاربر را انتساب داد. به این معنی که صرفاً با یکسری دستورات ساده می توانند محتواها را به کاربران نمایش دهند. اما نمی توانند پردازش های سنگین انجام دهند، منطق های شرطی را مدیریت کنند و یا به دیتابیس متصل شوند. به زبان هایی مانند: J2E, ASP.NET, PHP, ECMAScript و غیره می توان لقب زبان های برنامه نویسی تحت وب باارزه را اهدا نمود.

تفاوت HTML و CSS چیست؟

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

اما حرفه تان به شما این اجازه را نمی دهد که کار را همین جا رها نمایید. بنابراین با بهره گیری از ابزارهایی خاص برجسته کاری و پاشیدن رنگ را نیز انجام داده و یک سفالِ فاخر را پدید می آورید (دقیقاً مثل سفالِ سمت راست تصویر زیر).

فرق بین HTML و CSS چیست؟

در طراحی سایت هم به همین شکل کار را پیش می بریم. ابتدا با استفاده از HTML شالوده و استخوان بندیِ سایت را ایجاد می کنیم و با دستورات CSS به آن جَلا می بخشیم. به طوری که کاربر عادی حتی متوجه نشود که طرحِ ما (در ابتدا)چقدر کریح المنظر بوده.

CSS مخفف چیست؟

CSS سرنام کلمات Cascading Style Sheets است. ترجمه فارسی این سه واژه ورقه هایی به سبک آبشار می باشد که واقعاً برای ما کاربردی نیست. دلیل آبشاری بودن آن هم این است که می توانیم برای یک تگِ خاص، به صورت آبشاری و از راه های مختلف، استایل دهی کنیم و اینجا بحثِ اولویت بندی کدها مطرح می شود که در آینده درباره آن صحبت خواهیم کرد.

تاریخچه CSS + نسخه های مختلف

🎭این بخش از آموزش با کمی طنز همراه است، می توانید از آن عبور نمایید🎭

در سال ۱۹۹۶ که زبان CSS به تازگی چشم به جهانِ وب گشوده بود، یک رقیبِ مجرب و تازه نفس پیش روی خود داشت. تا قبل از ظهور CSS، زبان HTML در قصرِ مرورگرها و مغزِ طراحانِ وب، پادشاهی می کرد. اما طولی نکشید که طراحانِ سایت، مقهورِ قدرت CSS شدند.

رفته رفته طراحان سایت به سمت یادگیری CSS روی آوردند، مرورگرها سعی در پشتیبانی کامل از این زبان داشتند.

اما یک روزِ عصرِ پاییزی (دقیق یادمه👀)که زبان HTML گوشه ی عزلت گزیده بود و اندیشه های شوم خود را سبک سنگین می نمود، سواره نظام خود را به طرف منزلِ CSS روانه ساخت🏹.

💥نزاع و درگیری جدی بین HTML و CSS ایجاد گردید💥

سپس با فریادی هولناک، بدو گفت: مرورگرها به تو نیازی ندارند. آن ها عکس، رنگ، عرض و ارتفاع می خواهند که من دارم.

CSS از پشت شیشه، با صدایی نچندان واضح گفت: اگر سواره نظامت را بازگردانی، پیشنهادی رَد نشدنی برای تو دارم.

HTML تا چشم بر هم نهاد و بلند نمود، خود را بر سرِ میز مذاکره با CSS دید❗

🔵CSS عرضید: از آنجایی که حضرتعالی کوهی از تجربه همراه خود دارید آیا قائلِ به این هستید که همواره کارِ تیمی جواب می دهد؟

🔴HTML فرمود: آری جوان.

🔵CSS عرضید: بیایید دست در دستِ هم دهیم به مهر، جهانِ وب را کنیم آباد 💑.

🔴HTML فرمود: خب بابا چی کنیم❓❕

🔵CSS عرضید: وظایف مربوط به ساختارِ سایت مثل نمایش متن و عکس به عهده تو و کارهای مربوط به زیباسازی این ها را من انجام می دهم.

🔴HTML فرمود: اولاً تو نه و شما🤪. دوماً اوکی.

بدین ترتیب، پرچم صلح🏳 میانِ HTML و CSS برافراشته گردید و همین اتفاقِ مبارک باعث شد تا زبان CSS به شدت رشد کند و در CSS3 به اوجِ آمادگی خود برسد.

البته CSS Level 4 نیز در حال حاضر وجود دارد اما مرورگرها هنوز به طور کامل از آن پشتیبانی نمی کنند، لذا یادگیری قواعد آن اکنون به صلاح نیست.

Syntax کلی زبان CSS چیست؟

اما قبل از این که به قواعد نگارش دستورات CSS بپردازیم، لازم است تا سه اصطلاح مهم را با هم بررسی نماییم:

🔵Selector (انتخابگر): قسمتی از کدهای CSS است که در آن، یک یا چند تگ HTML را انتخاب می کنیم تا تغییرات دلخواه خود را روی آن ها ایجاد نماییم.

🔵Property (خاصیت): پس از این که متوجه شدیم به کدام المان HTML می خواهیم استایل دهیم، در این بخش، یکسری خواص از پیش تعیین شده CSS را درج می نماییم. خواصی مانند: رنگ متن، رنگ پس زمینه، انیمیشن، فونت و غیره.

🔵Value (مقدار): بالتبع هر خاصیتی، مقداری دارد و در این بخش مقدارِ خواص نوشته می شود. به عنوان مثال: رنگ متن یک خاصیت است و مقدار آن می تواند قرمز باشد.

پس از دانستن سه اصطلاح بالا، می توان با نگاه کردن به تصویر زیر، Syntax یا قاعده نوشتاری زبان  CSS را درک نمود. با این وجود در ادامه این کدها را تشریح خواهیم کرد.

🔴قانون کلی کدهای CSS: ابتدا تگ مورد نظر را انتخاب کرده و بدون علامت های <> می نویسیم.

پس از آن علامت } (Curly Braces) باز را می نویسیم.

در گام بعد، خاصیت مورد نظر، علامت : و مقدار آن و پس از آن نیز علامت ; (SemiColon) را درج کرده و در نهایت { (Curly Braces) بسته را درج می کنیم.

در بخش Example که در تصویر بالا مشاهده می کنید، دقیقاً با همین الگوریتم، به تگ <p> رنگ قرمز و فونت Tahoma را انتساب داده ایم.

شروع کدنویسی با زبان CSS

حال اگر موافق باشید به صورت عملی کدنویسی با زبان CSS را آغاز نماییم. همانطور که در تصویر زیر مشهود است، با بهره گیری از چند تگ <p> یکسری پاراگراف در صفحه وب ایجاد کردیم و در گام بعد باتوجه به ساختاری که در بالا فراگرفتیم، قصد داریم پاراگراف خشک و بی روح مان را تاحدی متفاوت تر از قبل نمایش دهیم.

نکته جالب توجه هنگام کدنویسی با زبان CSS این است که، پیش از آن که ساختار بالا را پیاده سازی نماییم، ابتدا لازم است تگ های باز و بسته <Style> را درج کرده و کدهای سی اس اس را درون این تگ بنویسیم (در غیر این صورت، کدها اعمال نخواهند شد).

در گام بعد، با به کارگیری خاصیت Color رنگ پاراگراف ها را قرمز کرده و با نوشتن خاصیت Background-Color پس زمینه پاراگراف ها را نیز به رنگ زرد تبدیل نمودیم.

خاصیت Text Align در CSS چیست؟

یکی از چالش های رایج در طراحی سایت، تعیین جایگاه متن در صفحه است که با استفاده از خاصیت Text Align در CSS می توان آن را رفع نمود. در واقع اگر به این Property مقدار left اختصاص داده شود، متن مورد نظر به سمت چپ صفحه هدایت می شود. در صورتی که مقدار Center را به آن بدهیم، متن ها در وسط قرار خواهند گرفت و در نهایت در عین ناباوری اگر مقدار Right را به آن اضافه می نماییم.

آموزش Justify کردن متن در وب با CSS

جهت نمایش هر چه بهتر متون، با بهره گیری از مقدار Justify در خاصیت Text Align می توان به راحتی متن های خود را در سطح وب، مرتب نمود. با توجه ویژه به تصویر زیر می توانید تغییرات اعمال شده توسط این Property را مشاهده نمایید (قبل از عمل، بعد از عمل).

خاصیت Text Indent در CSS

واژه Indent به معنای فرورفتگی است و خاصیت Text Indent نیز در CSS به جهت فرورفتگی متن به کار گرفته می شود. در این خاصیت مقادیر عددی به صورت px، rem و درصد نیز قرار می گیرد که جهت نمایش اصولی تر در موبایل و تبلت، شاید بهتر باشد به جای px از % استفاده گردد. علی ایحال همان طور که در عکس زیر کاملاً واضح است، ۱۰۰px فضای خالی به اول پاراگراف افزوده شده است.

خاصیت Text Decoration در CSS چیست؟

با درج و استفاده از خاصیت Text Decoration قادر هستیم تغییراتی در ظاهر متون، ایجاد نماییم. این خاصیت سه مقدار می تواند درون خود داشته باشد که در ادامه هر کدام را توضیح خواهیم داد:

🔵Underline: با درج این مقدار، زیر متنِ مورد نظر، یک خط ممتد ایجاد خواهد شد.

🔵Overline: با استفاده از این مقدار، بالای متن، خطی ممتد اضافه می شود.

🔵Line-Through: با اختصاص دادن این مقدار، روی متنِ مورد نظر، خطی ممتد کشیده می شود (مانند: قیمت محصولات برخی سایت ها، هنگام فروش ویژه)

معرفی خاصیت مهم Line Hight در CSS

یکی دیگر از Property های کاربردی در CSS خاصیت Line Height است. با استفاده از این خاصیت خواهیم توانست، فاصله (عمودی)میان متن ها را تعیین کنیم. مقداری که معمولاً به این خاصیت داده می شود، عددهایی به شکل px یا % است. البته به دلیل اینکه فواصل به صورت عمودی ایجاد می شود، الزامی به استفاده از مقادیری درصدی وجود ندارد. همانطور که در تصویر زیر مشخص است، Line height تگ <h1> را برابر ۶۰px قرار دادیم و در مرورگر، شاهدِ ایجاد فضای خالی میان ۲ تیتر هستیم.

خواص Word Spacing و Letter Spacing در CSS

اکنون که اغلب مباحث حول محور استایل های متنی می چرخد، بد نیست دو خاصیت مرتبط با این موضوع را نیز بررسی نماییم

🔵Word-Spacing: با استفاده از این خاصیت می توان فاصله (افقی)میان حروف موجود در صفحه وب را مشخص نمود.

🔵Letter-Spacing: با به کارگیری این خاصیت خواهیم توانست بین کلمات به مقدار دلخواه، فضای خالی ایجاد نماییم.

از تصویر زیر می توان فهمید که این دو خواص چه فرقی با هم دارند و اساساً به چه شکل کار می کنند. البته توصیه اکید می شود که بلافاصله پس از اتمام این آموزش، دست به کد شوید و به صورت عملی، مطالب را پیاده سازی کنید.

😜به قول دانشمندان: هرچی زودتر بیشتر کد بزنی، بیشتر سختیش کمتر میشه😜

خاصیت White Space در CSS چیست؟

همانطور که پیش تر نیز اشاره شد، با پیشرفت CSS، رفته رفته یکسری از تگ ها و Attribute ها از زبان HTML حذف شدند و به CSS واگذار شدند. یکی از تگ های HTML که منسوخ اعلام شد، تگ <Pre> بود. اما به دلیل کاربردی بودن این تگ، تصمیم بر این شد که به زبان CSS منتقل گردد. لذا در حال حاضر در صورتی که بخواهیم همان شکلی که کدنویسی می کنیم، متن های ما در مرورگر نمایش داده شود فقط کافیست به خاصیت White-Space مقدار pre را بدهیم (برای درک بهتر این موضوع، تصویر زیر را با دقتِ مضاعف بررسی نمایید).

 

جمع بندی مقاله CSS چیست؟ از انگشتان محمدرضا یعقوبی🧐

هزار تبریک🙏 به شما عزیزان که تا این لحظه زمان گذاشتید و قسمت اول آموزش CSS3 را فرا گرفتید. مطمئن باشید که این مسیر را ادامه خواهیم داد و به صورت هفتگی مقالات سریالی مرتبط با برنامه نویسی تحت وب در سایت قرار خواهد گرفت.

خواهشی از یکایک شما بزرگان دارم این است که از استایل های بی رنگ و لعابی که در این جلسه مطرح شد، ناامید نشوید و بدانید و آگاه باشید که در آینده ای نه چندان دور، شما را با انیمیشن های جذاب CSS3 آشنا خواهیم ساخت.

ضمناً برای کسب اطمینان بیشتر از کدهای خود، مثل همیشه می توانید به سایت W3Schools مراجعه نمایید.

🔥شادترین لحظات را برایتان آرزومندم. ارادتمند شما، محمدرضا یعقوبی🔥

 

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

رونمایی از محصول قدم صفر کسب و کار + گارانتی بی قید و شرط
همین الان توضیحات محصول را می خوانم