Css چیست؟ css چه نقشی در طراحی سایت دارد ؟

Css چیست؟ و چه نقشی در طراحی سایت دارد ؟ را پیشنهاد می کنیم حتما مطالعه کنید مطلبی جالبی هست در مورد css3

  • نوشته شده توسط : رضا رجب پور
  • دسته بندی :آموزش css
  • بازدید: 1894
Css چیست؟ css چه نقشی در طراحی سایت دارد ؟
Rate this blog

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

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

Css چگونه به وجود آمد؟

Css  چگونه به وجود آمد؟

Css  در سال ۱۹۹۶ به برنامه نویسان معرفی شد قبل از css زبان هایی دیگری هم بودند که کار استایل دادن به سایت را انجام می دادند ولی زبان css چون کامل ترین بود و جای خودش را سفت کرده بود توانست از همه آنها پیشی بگیرد و خودش را به عنوان یک زبان استایل دهی به برنامه نویسان معرفی کند .

راستی زبان css مخفف کلمه  Cascading Style Sheets چون می توانید در سایت چند تا فایل css داشته باشید که هر کدام از آنها مربوط به استایل دهی از یک جای سایت هست

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

Css دارای نسخه های مختلفی است

Css  دارای نسخه های مختلفی است

همان طور که همه برنامه های و امکانات سایت ها در حال تغییر هستند css مثل همه پیشرفت کرد و تا رسید به امروز که اول نسخه ۱ آن را معرفی کرد بعد نسخه ۲ تا رسید به نسخه ۴ در ادامه می خواهیم مشاهده کنیم که هر کدام از نسخه های css شامل چه ویژگی بودند.

  • نسخه css1

نسخه css1 که در سال ۱۹۹۶ به صورت رسمی به جهان برنامه نویسی راه پیدا کرد شما ویژگی های زیر بود که برای همه ما آشنا هست :

عوض کردن رنگ متن و رنگ پشت زمینه

تنظیم موقعیت تصاویر و متن ها

ایجاد حاشیه دادن Margin به عناصر وب خاصیت border  دادن

  • نسخه css2

Css2 در سال ۱۹۹۸ طراحی شد این نسخه هم چند امکانات بهش اضافه می شد در این نسخه شما Absolute ، Relative ، Fixed اضافه شده بودند که هر کدام کار خودشان را انجام می دادند مثلا منوهایی هست که در سایت ها هست و همراه با سایت پایین می آید از امکان Fixed استفاده می شود

  • نسخه css3

وقتی css3 در سال ۲۰۱۲ منتشر شد توانست انقلاب بزرگی را در دنیای وب به وجود آورد که آن انیمیشن بود قبلا باید از jquery استفاده می کردی برای جذاب کردن سایت ولی الان می توانید به راحتی از css3  استفاده کنید و انیمیشن های جذاب و خوبی را برای سایت خودتان پیاده سازی کنید حتی خاصیت Media Query هم که برای سایت موبایلی می توانستید انجام دهید در نسخه ۳ css است

  • نسخه css4

در این نسخه بیشتر خاصیت ماژول محوری داشت و کار خاصی را انجام نمی داد

پشتیبانی مرورگرها از css

پشتیبانی مرورگرها از css

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

شما نمی توانید این خاصیت را مشاهده کنید چون اینترنت اکسپلورر  از این خاصیت پشتیبانی نمی کرد یا مثلا باز شدن منوها یا خیلی از موارد و بیشتر خاصیت های css در مرورگرهای دیگر به خوبی نمایش می دهد

Css را چگونه در سایت پیاده سازی کنیم

  • استفاده از inline style

شما می توانید در تگ های html خودتان از کدهای css استفاده کنید مثل شکل زیر که ما به خاصیت span  رنگ نارنجی می دهیم البته این روش را اصلا پیشنهاد نمی دهیم چون جالب نیست

<p style="color:red;">learn CSS at Signweb</p>
  • ایجاد استایل با فایل CSS

حالا شما می خواهید یک فایل css ایجاد کنید و کدهای خودتان را در آن بزارید باید توسط یک محیط برنامه نویسی گزینه css را بزنید و کدهای خودتان را در آن جا گذاری کنید و اسم آن را هم عوض کنید و یدر فولدر سایت قالب یا سایت خودتان بزارید به کدهای زیر دقت کنید

h3 {
   color: red;
 }
  • بارگذاری فایل css

حالا شما فایل css را در قالب سایت خودتان یا در یکی از پوشه بارگذاری کردید حالا سایت شما از کجا می داند که شما فایل css را کجا گذاشتید باید در در قسمت هدر سایت خودتان مسیر این فایل css را به بگید تا مرورگر بتواند فایل css را از آن مسیر بخواند و کدهای استایل دهی شما را نشان دهد

 <head>
<link rel="stylesheet" type="text/css" href="style.css" title="style">
</head>

البته بهتر هست شما فایل های css را در پوشه ای به نام css  بارگذاری کنید هیچ وقت فایل های css  را در ریشه طراحی سایت خودتان بارگذاری نکنید

یک تکنیک جالب در کدنویسی css

یک برنامه نویس باید بروز باشد و تا بتواند سریع تر و راحت تر طراحی سایت مشتری خود را انجام دهد هم سریع تر هم اینکه بتواند از کدی که به یک استایل داده است در جای دیگر استفاده کند اینکار هم می تواند کاری کند هم شما آن کد را در جای دیگر استفاده کنید هم کدهای دیگر سایت شما اشتباه نمی شود

یک تکنیک جالب در کدنویسی css

یادگیری تکنیک css

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

باید راهکاری داشته باشد که صفحات اینجوری نشود.

کدنویسی شی گرا

یک تکنیک جالب در کدنویسی css

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

به مثال زیر توجه کنید:

به هر صفحه از سایت یک id  بدهید

ما خودمان وقتی می خواهیم در طراحی سایت وردپرس کدنویسی صفحات را انجام دهیم به هر صفحه یک ای دی یکتا می دهیم تا هم وقتی کدنویسی آن صفحه مثلا تگ p صفحه نوشته های وردپرس را انجام می دهیم با سایر صفحات اشتباه نشود البته این کار شاید طولانی باشد ولی چند مزیت دارد

  • کدنویسی تمیز
  • بهینه تر شدن کدهای css
  • راحت تر پیدا کردن کد مورد نظر
  • سریع تر شدن لود سایت

مثالی دیگر در مورد کدنویسی شی گرا

یک تکنیک جالب در کدنویسی css

شما حتما با تگ li  در کدنویسی آشنا هستید خوب شما می خواهید برای هر صفحه یک استایل li استفاده کنید که می توانید با تکنیک before به هرکدام از li ها یک کلاس بدهید و مثلا یکی کلاس تلفن یکی کلاس آدرس یکی کلاس ایمیل و فونت آیکن های مربوطه را به قبل از آنها اضافه کنید هم جذاب تر می شود هم طراحی سایت کمی متفاوت می شود

در پایان

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

در کدنویسی خود این خلاقیت را به کار ببرید تا کدنویسی تمیز تر و هم سریع تری داشته باشید

نتیجه این مطلب

شما در این مطلب آموختید که اگر کدنویسی css را یاد بگیرید می توانید ظاهری زیبا و جذاب برای سایت خودتان پیاده سازی کنید البته css هم زبان برنامه نویسی سمت کاربر هست یعنی اینکه شما می توانید فقط جلوی یا همان Front end  سایت خودتان را طراحی کنید

مقالات مرتبط

پیشنهاد می کنیم این مطالب هم مطالعه کنید

راز های رسیدن به رتبه یک گوگل چیست؟

راز های رسیدن به رتبه یک گوگل چیست؟

نکات کلیدی برای دستیابی به صفحه اول گوگل ، موانع قرار گرفتن وب سایت در صفحه اول گوگل ، یکی…

انتخاب شرکت مناسب برای طراحی سایت

انتخاب شرکت مناسب برای طراحی سایت

بهترین شرکت طراحی سایت برای ارائه خدمات طراحی سایت شرکتی و بهینه سازی سایت کدام شرکت طراحی سایت هست

CRM چیست؟

CRM چیست؟

واژه CRMمخفف عبارتCustomer Relationships Management به معنای مدیریت ارتباط با مشتریان هست. CRM در تکنولوژی و فروش به کمک شما…

پرسش و پاسخ 0

بحث درباره این مقاله را شما آغاز کنید!

دیدگاهتان را بنویسید

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

مشاوره رایگان تلفنی