آموزش رایگان برنامه نویسی در کانال یوتیوب yasharhabibimedia
سبد خرید
0

هیچ محصولی در سبد خرید نیست.

با دنبال کردن این قدمها یه سوپراستار تو دنیای CSS میشی

با دنبال کردن این قدمها یه سوپراستار تو دنیای CSS میشی

(Cascading Style Sheets) CSS یکی از اصلی ترین فناوری های مورد استفاده برای ساخت صفحات وبه. از اونجایی که این زبان فقط توسط مرورگرها قابل فهم و درکه، یادگیری کامل CSS برای تسلط تو حوزه توسعه وب خیلی مهمه و بهتون حتما توصیه میشه.
مطلب پیشنهادی: آموزش رایگان برنامه نویسی
کار با CSS خیلی آسونه، فقط با چند ساعت آموزش و تمرین می تونید متن ها، عناصر و طرح بندی ها رو خیلی راحت طراحی کنید. با این وجود، هر چقدر که جلوتر میرین و بیش تر یاد می گیرین به تدریج دشوار می شه و به زودی به وضعیتی می رسید که کدهاتون کاملاً نامرتب و بهم ریخته می شه. اجزایی که قبلاً درست کار می کردن شروع می کنن به بهم ریختگی و اینجاست که میرین سراغ گوگل (Google) تا یه راه حلی برای مشکلتون پیدا کنید. بنظر میاد که راه حلای گوگل مشکلو حل کرده اما، می بینید که موقعیت یا ظاهر عناصر دیگه بهم ریخته و دچار مشکل شده!

چرا یاد گرفتن CSS از راه درستش مهمه؟

اگه درک عمیق تری از مبانی پایه نداشته باشید، CSS بیشتر براتون شبیه یه روش همراه با آزمایش و خطا میشه. مقادیر مختلفی رو برای خصوصیات مختلف امتحان می کنید تا بالاخره به اون مقداری که دنبالش بودین برسین و اخرش هم نمی دونین که چطور بهش رسیدین و اصلا چطور کار می کنه. شما شروع به جستجوی موارد اساسی مانند “چگونگی قرار دادن دو قسمت در مرکز” یا “نحوه تراز کردن یک div و یک متن به صورت عمودی” می کنید و هر بار از StackOverflow یا CodePen کپی می کنید. در آن روزها که Flexbox چندان محبوب نبود، “چگونه می توان div را به صورت عمودی و افقی در یک صفحه تراز کرد؟” یک سوال مصاحبه CSS کلاسیک بود. بسیاری از مبتدیان می تونن قسمت افقی را درست بگیرن اما فقط تعداد کمی از اونها قسمت عمودی را درست می گیرن.

نقشه راه

تو این بخش یاد می گیرین چطور شروع کنین و موفق بشین

۱- اصول پایه

اگر تازه کارید و می خواید طراحی وب سایتو شروع کنید، قبل از شروع CSS بهتره یک سری از اصول اولیه HTML رو یاد بگیرید. تو مرحله یادگیریCSS ، برای شروع بهتره برین سراغ تئوری پایه؛ مثل اینکه CSS چی هست، کاربردش چیه و تو مرورگر چطور کار می کنه و … در مورد انواع سبک های موجود، تفاوتشون با هم، انتخاب کننده ها و استایل های اصلی مثل اندازه قلم، عرض، ارتفاع و چیزهای مشابه یاد بگیرید و اطلاعات خودتون رو بالا ببرید.

۲- مدل جعبه ای (Box Model)

اصول اصلی مدل جعبه‌ای CSS و خصوصیات مربوط بهش مثل اندازه پدینگ (Padding)، اندازه خط دور لبه (Border) و اندازه مارجین (Margin) رو یاد بگیرید و تمرین کنید.

۳- تصاویر و پس زمینه

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

<img src="../images/wallpaper.jpg" > <div class="image" > </div> .image { background-image: url(../images/wallpaper.jpg); }

۴- نمایش و موقعیت عناصر

این دو مورد از مهم ترین ویژگی های CSS هستن که باید برای درک صحیح از چگونگی عملکردشون در موردشون یاد بگیرید و تمرین کنید. دانش کافی در مورد این دوتا ویژگی می تونه سفر شما تو دنیای CSS رو بسیار جذاب تر و راحت تر کنه. پس حتما درموردش یاد بگیرید و توجه ویژه ای بهش داشته باشید.

display: block | inline | inline-block | table | etc

دانستن نحوه استفاده از هر یک از ویژگی های display ضروری هست. تگ های HTML مثل <div> <p> یا <h1> و <img> <span> و نحوه عملکردشون و ارتباطشون با block و inline

position: static | absolute | relative | fixed | sticky

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

این مرحله اونقدر مهمه که می تونید بارها و بارها تکرار کنید تا کاملا متوجه بشید و واستون جا بیافته!

float: left | right

هر چند که این روزا ویژگی float کمی قدیمی شده، اما خیلی از وب سایتای قدیمی هنوز ازش استفاده می کنن پس بهتره نگاهی بهش بندازید.

۵- رنگ ها، فونت ها، لیست ها و جداول

دونستن فرمتای مختلف رنگ مثل کد HEX ، rgb ، rgba ، hsl ، hsla ، transparent از واجابته، پس داشتن اطلاعات کافی در موردشون حتما لازمه.

color: white; color: #fff; color: rgb(255, 255, 255); color: rgba(255, 255, 255, 1); color: hsl(0, 100%, 100%); color: hsla(0, 100%, 100%, 1); color: transparent;

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

۶-شبه کلاس‌ها (Pseudo-classes)و ترکیب کننده‌ها (Combinators)در CSS

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

ترکیب کننده‌‌ها به ما کمک می‌کنن تغییرات مورد نظرمون رو به راحتی و بدون نیاز به ایجاد کلاس‌های جدید برای عناصر فرزندان اعمال کنیم.

/* all the paragraph elements inside the container will have color red */ .container > p { color: yellow; }

 

۷- خطایابی و ابزارهای Chrome Developer Tools

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

Chrome Dev Tools به عنوان یک ابزاری شگفت انگیز برای توسعه دهندگان وب بشمار میره. این برنامه ویژگی‌های عالی برای خطایابی و اشکال زدایی وب سایت شما بصورت زنده فراهم می‌کنه، همزمان و در لحظه کد بنوسین و اشکالات و خطاها رو بررسی و تست کنین.

۸- تمرین، تمرین، تمرین

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

۹- طراحی وب سایت واکنش گرا (Responsive)

وسایل الکترونیکی زیادی هست که وب سایت ها از طریق اونا قابل نمایش هستن. ابزاری مثل موبایل، تبلت و.. پس تنها دونستن اینکه چطور یه وب سایت رو برای نمایش روی صفحه های دسکتاپ طراحی کنیم کافی نیست. باید یاد بگیریم طراحی که انجام میدیم توی صفحات کوچک تر و با مشخصات متفاوت هم قابل دیدن باشن و تجربه خوبی رو برای کاربر فراهم کنن. به این روش طراحی واکنش گرا گفته میشه. قبل از این موضوع، طراح ها مجبور بودن سایتای مختلفی رو برای موبایل، تبلت و دسکتاب طراحی کنن که هزینه و زمان زیادی رو می گرفت. سایت فیس بوک یه نمونه از همین سایتا بود!

در طراحی واکنش گرا ۳ نکته مهم وجود داره که باید در نظر بگیرین

لایه های سیال (fluid layouts)

عناصری که عرضشون براساس px مقدار دهی شده باشه، نمیتونن سایزشون رو براساس اندازه مرورگر تنظیم کنند، بنابراین بهتره از مقادیر % یا remبرای مقدار دهی عناصر استفاده کنیم تا تجربه کاربری بهتری برای ببینده ایجاد کنیم.

Media Query

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

@media only screen and (max-width: 600px) { body { background-color: lightblue; } }

تصاویر واکنش گرا

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

۱۰- فلکس باکس (Flexbox) و گرید (Grid)

مدت زمان طولانی از معرفی فلکس باکس میگذره اما از سوال ۲۰۱۵ به طور رسمی مورد استفاده طراحا و کدنویسا قرار گرفته. Flexbox و Grid ویژگیایی هستن که با استفاده ازشون صفحات واکنش گرا خیلی راحت‌تر و ساده تر ساخته میشن، به بیان ساده کار طراح ها رو خیلی راحت تر کردن و جزو بهترین قابلت هایی هستن که برای CSS در نظر گرفته شده. تصویری که می بینید بدون استفاده از Flexbox و Grid از حدود ۳۰۰ خط کد CSS تشکیل میشه.

See the Pen oNZvRrV by Yashar Habibi (@yasharhabibi) on CodePen.

۱۱- تغییر شکل، انتقال و انیمیشن

اگه دنبال طراحی وب سایتی جالب و پر تحرک با استفاده از انیمیشن و عناصر متحرک هستید، باید اصول اولیه مربوط به این بخش رو یاد بگیرید. قبل از به وجود اومدن CSS3 انیمیشن رو با استفاده jQuery طراحی می کردند که کار سخت تری بود. اما امروزه CSS اونقدر قدرتمند شده که با استفاده ازش بتونیم انمیشن پیچیده و جذاب طراحی کنیم. مثل متحرک شدن یا تغییر شکل دادن یک المان وقتی موس روش قرار می گیره یا حتی وقتی که روش کلیک می کنیم. این ها موارد جزئی هستن که جذابیت یه صفحه وب رو چند برابر می کنند.

See the Pen JjWPQWV by Yashar Habibi (@yasharhabibi) on CodePen.

۱۲- پیش پردازنده ها (Preprocessors)

پیش پردازنده به توسعه دهنده وب کمک می کنه در وقت و میزان کاری که باید انجام بده صرفه جویی کنه و کمک میکنه با استفاده از منطق هایی مثل متغیرها، اپراتورها، توابع و mixins عملکرد CSS را بالاتر بره و بهره وری رو بهبود ببخشه. SASS، LESS ، STYLUS و POSTCSS از محبوب ترین پیش پردازنده ها بین توسعه دهندهای وب محسوب میشن. از اونجایی که فرمت SCSS از SASS بطور گسترده بین کدنویس ها استفاده میشه پس بهتره شما هم ازش برای شروع طراحی استفاده کنید. همین طور پلاگین autoprefixerپیش پردازنده POSTCSS قوانین اضافی مانند -moz- و-webkit- رو اضافه میکنه که کمک میکنه قوانین CSS شما رو با مرورگرهای مختلف سازگار کنه.

۱۳- فریم ورک (Framework)

یادگیری فریم ورکهایی مثل Bootstrap ، Semantic-UI یا Materialize اختیاریه اما یکی از مزیت های غیرقابل انکارشون افزایش سرعت عمل بشمار میره. فریم ورک مجموعه ای از کدها و کتابخونه هایی هست که از قبل تهیه شده و طراح، موقع کار اون ها رو فراخونی میکنه که سرعت کارو بالا میبره و برنامه نویس مجبور نیست دوباره کاری کنه و میتونه کدی که قبلا ساخته رو به راحتی فراخوانی کنه. استفاده از فریم ورک خیلی از مشکلاتی که موقع طراحی واکنش گرا ایجاد میشه رو هم کمتر میکنه.

۱۴- مفهوم Specificity

Specificity رو میشه به عنوان یه هرم یا رتبه بندی سلسله مراتبی در نظر گرفت، چون کمک میکنه دستورات CSS که اولویت و جایگاه‌های متفاوتی دارند براساس اولویت‌ روی عناصر اعمال بشوند. گاهی این دستورات با هم در تضاد هستن که اگر از مفهوم Specificity بی خبر باشیم دچار مشکل می شیم. کد زیر به عنوان مثال براتون در نظر گرفته شده:

<style> div.wrapper p.paragraph { color: pink; } #container p { color: violet; } p { color: green; } .paragraph { color: yellow; } </style>

 

<div class="wrapper" id="container"> <p class="paragraph">یه متن تستی</p> </div>

فکر می کنید پارارگراف چه رنگی میشه؟

 

۱۵- CSS قابل نگهداری

نوشتن کد CSS به تنهایی ممکنه کار ساده‌ای بنظر بیاد اما نوشتن کدی که قابلیت نگهداری، بازیابی و خوانایی مجدد داشته باشه خیلی خیلی مهم تره. بنابراین برای نوشتن یه کد خوب و تمیز CSS، باید یک سری استایل و متد رعایت بشن. BEM, OOCSS, SMACSS از جمله متدایی هستن که می تونید ازشون استفاده کنید. کافی یه نگاهی بهشون بندازین و براساس سلیقه و پروژه مورد نظرتون یکی رو انتخاب کنین و کار رو شروع کنید.

هر چیزی که لازمه رو یاد گرفتید

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

امتیاز 5 از 5 رای

20

من یاشار حبیبی 15 سال تو حوزه برنامه نویسی وب در حال فعالیت هستم و اینجا قراره تجربیاتم رو باشما به اشتراک بزارم و باهم کلی چیز یادبگیریم و لذت ببریم

دیدگاه کاربران
  • آواتار
    abolffff1383 2 خرداد 1400 / 10:53 ب.ظ

    عالیه حرف نداره

  • laleh.safarian 3 خرداد 1400 / 1:07 ب.ظ

    واقعا عالی بود 👌

  • pouyadeveloper1997 8 خرداد 1400 / 11:05 ب.ظ

    سلام خیلی دوست داشتم مطلب های خیلی پیشرفته تری از css رو مطرح میکردید

  • vbmth18 28 تیر 1400 / 6:41 ب.ظ

    عالیه. من میخوام گام بگام آموزشهاتونو جلو ببرم.

ارسال دیدگاه

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

توسط
تومان