امروز می خواهیم در طراحی سایت ساین وب از یکی از زبان های برنامه نویسی سمت کاربر صحبت کنیم زبانی که در زیبایی و جذابیت سایت شما می تواند نقش مهمی را ایفا کند . نقشی که باعث می شود سایت شما نزد مشتریان جذاب تر و حرفه ای تر به نظر آید شما می توانید با css رنگ متن های خودتان یا مثلا رنگ پشت سایت خودتان را به راحتی عوض کنید.
فقط کافی است بدانید هر یک از کدهای css چه کاری را انجام می دهند پس تا آخر این مطلب را مطالعه کنید تا بتوانید شما هم از css به راحتی استفاده کنید.
Css چگونه به وجود آمد؟
Css در سال ۱۹۹۶ به برنامه نویسان معرفی شد قبل از css زبان هایی دیگری هم بودند که کار استایل دادن به سایت را انجام می دادند ولی زبان css چون کامل ترین بود و جای خودش را سفت کرده بود توانست از همه آنها پیشی بگیرد و خودش را به عنوان یک زبان استایل دهی به برنامه نویسان معرفی کند .
راستی زبان css مخفف کلمه Cascading Style Sheets چون می توانید در طراحی سایت وردپرس سایت چند تا فایل 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 را چگونه در سایت پیاده سازی کنیم
- استفاده از 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
حتما شما هم با این موضوع مواجه شده اید به tag h2 یک استایل می دهید مثلا چون بک گراندآبی به کار برده اید باید رنگی روشن بدهید خوب در صفحه اول طراحی سایت تهران خوب دیده می شود ولی اگر به سایر صفحه های سایت سر بزنید مشاهده می کنید سر تیتر که با h2 داده اید نیست ولی هست ولی چون شما رنگ آن را به روشن تغییر داده اید در صفحه مشاهده نمی کنید این مشکل برای ما اتفاق افتاده هست. شاید بخواهید یک before به استایل h2 خودتون بدهید که جذاب تر بشه.
باید راهکاری داشته باشد که صفحات اینجوری نشود.
کدنویسی شی گرا
خوب شما یک تگ h2 دارید خوب طبق مثال زیر به این تگ یک کلاس در css بدهید ولی یک کلاس یکتا خوب در اینجا می توانید خیلی راحت هم استایل مورد نظر رو بدهید هم اینکه می توانید در هر قسمتی رنگ دلخواه خودتون را بدهید هم اینکه شاید بخواهید فونت هر کدام را بزرگ تر کنید یا از فونت های مختلف استفاده کنید راهکار زیاد وجود دارد باید دید شما چه می خواهید
به مثال زیر توجه کنید:
به هر صفحه از سایت یک id بدهید
ما خودمان وقتی می خواهیم در طراحی سایت وردپرس کدنویسی صفحات را انجام دهیم به هر صفحه یک ای دی یکتا می دهیم تا هم وقتی کدنویسی آن صفحه مثلا تگ p صفحه نوشته های وردپرس را انجام می دهیم با سایر صفحات اشتباه نشود البته این کار شاید طولانی باشد ولی چند مزیت دارد
- کدنویسی تمیز
- بهینه تر شدن کدهای css
- راحت تر پیدا کردن کد مورد نظر
- سریع تر شدن لود سایت
مثالی دیگر در مورد کدنویسی شی گرا
شما حتما با تگ li در کدنویسی آشنا هستید خوب شما می خواهید برای هر صفحه یک استایل li استفاده کنید که می توانید با تکنیک before به هرکدام از li ها یک کلاس بدهید و مثلا یکی کلاس تلفن یکی کلاس آدرس یکی کلاس ایمیل و فونت آیکن های مربوطه را به قبل از آنها اضافه کنید هم جذاب تر می شود هم طراحی سایت کمی متفاوت می شود
در پایان
یک برنامه نویس باید خلاق باشد الان قالب های آماده زیاد استفاده می شود قالب هایی که تک رنگ هستند و هیچ جذابیتی ندارند سایت باید کاربر را مجذوب خود کند سعی کنید.
در کدنویسی خود این خلاقیت را به کار ببرید تا کدنویسی تمیز تر و هم سریع تری داشته باشید
نتیجه این مطلب
شما در این مطلب آموختید که اگر کدنویسی css را یاد بگیرید می توانید ظاهری زیبا و جذاب برای سایت خودتان پیاده سازی کنید البته css هم زبان برنامه نویسی سمت کاربر هست یعنی اینکه شما می توانید فقط جلوی یا همان Front end سایت خودتان را طراحی کنید
پرسش و پاسخ 0
بحث درباره این مقاله را شما آغاز کنید!
ارسال دیدگاه