hamidreza dourifar
hamidreza dourifar
خواندن ۳ دقیقه·۴ سال پیش

آشنایی با css و معرفی چند صفت معروف آن


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

ابتدا به معرفی css میپردازم و با تاریخچه آن آشنا می شویم و در انتها شما عزیزان را با چند صفت مهم و کاربردی css آشنا می کنم.

آشنایی با CSS

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

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

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

در واقع css مثل یک کت شلوار برای سایت شما است، css رنگ و لعاب سایت شما را برای کاربران فراهم می کند و کاربران با دیدن سایت شما حس خوبی را پیدا می کنند تا آنکه یک سایت را ببینند که فقط با html خام طراحی شده است.

البته این نکته را فراموش نکنید که css مثل یک ابزار عمل می کند و به شما کمک می کند که سایت جذاب و زیبایی داشته باشید ولی این شما هستید که با مطالعه رنگ ها و نکات مربوط به UI و UX سایت را کاربر پسندتر می کنید.

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

این نکته را فراموش نکنید که:

زبان نشانه گذاری css مکمل html است، و به تنهایی آن کاربردی ندارد، و فقط می توان کد های html را قدرتمند تر کرد.

بدون css وب سایت ها چگونه اند؟

در واقع شما باید دنیایی را تصور کنید که بی روح است یا یک شهری که هیچ جذابیتی در آن وجود ندارد، به این اندازه Css مهم است، فرض کنید اگر html و css را به آناتومی بدن انسان تشبیه کنیم، استخوان ها حکم html را دارد، ولی گوشت و پوست و لباس و... حکم css را دارد.

ولی شاید بگویید پس جاوا اسکریپت چی؟

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

آشنایی با ساختار نحوی کد ها در css

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

کد های css را در چه محیطی می نویسند؟

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

ولی پیشنهاد من به شما استفاده کردن از ++notepad است که در این برنامه که بسیار سبک می باشد می توانید زبان مورد نظر را تعریف کنید و با خیال راحت در آن شروع به کدنویسی کنید.

نحوه قرار گیری کد های css به چند صورت می باشد؟

3 روش وجود دارد که در ادامه به آن ها خواهیم پرداخت.

  1. اگر شما بخواهید کد های css را به یک صفحه html وارد کنید در واقع 3 راه وجود دارد، شما می توانید کد ها را در کنار کدهای html استفاده کنید که به آن Inline Style (اتصال درون خطی) گویند.
  2. روش بعدی شما می توانید که css را در بین کد های مستقیم html قرار ندهید و از شلوغی و ازدحام کد ها جلوگیری کنید، در این روش می توانید Internal Style Sheet(اتصال داخلی) استفاده کنید که درون تگ باز و بسته head قرار می گیرد.
  3. روش بعدی اگر شما بخواهید کد های css را به صورت خارجی در برنامه تزریق کنید باید از سبک External Style Sheet (اتصال خارجی) استفاده کنید.

خیلی ممنونم که تا اینجا با من همراه بودید، نظرات خودتان را برایم بنویسد که باعث ایجاد انگیزه بیشتر می شود.




cssطراحی سایتhtml
زندگی گذر زمان است تا که هستیم خوب باشیم و خوب بمانیم آنچه که از ما می ماند همین خوبی است...
شاید از این پست‌ها خوشتان بیاید