آموزش CSS – قسمت دوم :
سلام در خدمت شما هستیم با آموزش CSS قسمت دوم، در قسمت قبل ما راجب Css صحبت کردیم و این جلسه میخوایم تکمیلش کنیم. خب قبل از شروع یه نیم نگاهی به اون چه که جلسه قبل گفتیم میندازیم.
آموزش PHP : معرفی زبان PHP + آموزش HTML (قسمت اول)
آموزش php : آموزش HTML (قسمت دوم)
آموزش PHP : آموزش CSS (قسمت اول)
چرا باید آموزش CSS ببینیم و ازش استفاده کنیم ؟
CSS میتونه در بسیاری از کارهای تکراری ، زمان طراحی و حجم کدهای سایت صرفه جویی کنه.
ما میتونیم یکبار خصوصیات ظاهری عناصر رو در وب سایت با دستورات CSS مشخص کنیم، و بعد هرکجا در وب سایت از عنصر مورد نظرمون استفاده کنیم،همچنین هر وقت بخواید ظاهر وب سایت را تغییر بدید، کافیه به جایی که دستورات CSS رو نوشتید برید و اون هارو تغییر بدید تا ظاهر عنصر مورد نظرمون در تمام صفحات وب سایت تغییر کنه و نیازی به تغییر تمام کدهای HTML نیست.
بنابراین حجم صفحات وب سایت هم کمتر میشه و در نتیجه سرعت بارگزاری صفحه وب افزایش پیدا میکنه.
دستورات CSS می تواند در یک فایل جداگانه از کدهای HTML نوشته بشن و این تفکیک، تمیزی و پیچیدگی کمتر کدها را در تمام صفحات وب سایت برای ما به ارمغان میاره. خوبه که بدونید گوگل در رتبه بندی وب سایت ها، سرعت بارگذاری و کیفیت کدها را هم مدنظر قرار میده و وب سایت هایی که سرعت بارگذاری اونها مناسب نباشه، کمتر به جستجو کنندگان معرفی میشن.
در گذشته طراحی و چیدمان عناصر صفحات وب، از طریق جدول انجام میشد.
در اون روزها برای اینکه در تمام مرورگر ها ظاهر سایت یکسان و بدون بهم ریختگی باشد، جدول مطمئن ترین عنصر برای چیدن عناصرمحسوب میشد. جدول ها مشکلات زیادی داشتند و به این خاطر با ظهور CSS کاملا منسوخ شدند. از جمله مشکلات جدول ها میشه به حجم بالای پردازش اون ها توسط مرورگر و در نتیجه کاهش سرعت اشاره کرد.
حتما تا حالا وب سایت هایی رو دیدید که موقع باز شدن، مدت زیادی هیچ عنصری در صفحه نشون داده نمیشه، و بعد از چند ثانیه و یا حتی دقیقه در حالت انتظار و سردرگمی یک صفحه سفید رو میبینید. که یکدفعه تمام عناصر بر روی صفحه ظاهر میشن. این ویژگی منفی وب سایت هایی بود که با جدول پیاده سازی می شدند. برعکس این، وب سایتی که با CSS پیاده سازی میشن، عناصر یکی یکی موقع بارگذاری سایت بر روی صفحه، نمایش داده میشن، و کاربر همون لحظه درخواست میتونه سایت رو ببینه و مطالب رو بخونه تا زمانی که سایت بارگزاری کامل بشه.
آموزش ساختار دستورات CSS :
Selector : این بخش نام عنصر HTML مورد نظرمون هستش که می خواهیم استایلش (ظاهرش) رو تغییر بدیم.
Declaration : قسمتی که بین علامت {} نوشته می شن، در این قسمت باید نام خاصیت مورد نظرمون، که می خوایم تغییرات روش اعمال بشه و مقدار اونو تعیین کنیم.
تو این مثال رنگ خاصیت آبیه و خاصیت سایز فونت مساوی با ۱۲ پیکسل هستش.
مثال : در کد زیر، میبینید که مقدار هر خاصیت، بعد از علامت دو نقطه “:” در جلوی اون نوشته میشه. و در آخر هر خاصیت و مقدار علامت “;” میزاریم که معنی اتمام کد رو میده:
|
1 |
p{color:green;text-align:center;} |
برای اینکه دستورات خوانایی بیشتری داشته باشن و بتونیم با یک نگاه سریع بخش مورد نظرمون رو پیدا کنیم، می تونیم هر جفت خاصیت و مقدار رو در یک خط بنویسیم به این شکل:
|
1 2 3 4 5 |
p { Color:green; text-align:center; } |
CSS Comment چیست ؟
در تمامی زبان های برنامه نویسی امکانی وجود داره که در کنار کدهای اصلی ، توضیحاتی بنویسید که کدهای اون قسمت چه کاری رو دارن انجام میدن، و زمانی که بعدها خواستید کد ها رو تغییر بدید، این توضیحات اضافه خیلی بدرد میخوره. این توضیحات زمان اجرای سایت دیده نمیشن بنابراین هیچ خطایی بوجود نمیاد، و می تونید با خیال راحت هرچی که می خواید با هر زبانی درج کنید. شرطش فقط اینکه که توضیحات خودتون رو با علامت “/*” شروع و با علامت “*/” به پایان برسونید.
|
1 2 3 4 5 6 7 8 |
/*This is a comment*/ p { text-align:center; /*This is another comment*/ color:black; font-family:arial; } |
خب حالا جلسه جدید رو شروع میکنیم:
آموزش استایل عناصر در CSS :
آموزش استایل پس زمینه ها در CSS
با CSS می تونید برای عناصر در صفحات وب پس زمینه قرار بدید. این پس زمینه ها می تونن یک تصویر و یا یک رنگ مورد نظر ما باشند.
دستوراتی که در CSS برای کار با پس زمینه ها وجود داره:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
استفاده از رنگ برای پس زمینه ( background-color)
با این دستور میتونیم رنگ پس زمینه عنصر مورد نظرمون رو تغییر بدیم. مثلا پس زمینه یک پاراگراف، کادر متن، div و یا هر عنصر دیگه ای روبا رنگ دلخواه پر کنیم. به عنوان مثال کد زیر رنگ پس زمینه کل صفحه رو سبز می کنه:
|
1 2 3 |
body {background-color:red;} 1 body {background-color:red;} |
ما به سه روش می تونیم رنگ مورد نظر خودمون رو در دستور فوق بنویسیم:
- از طریق کد هگزای رنگ – مانند b0c4de#
- از طریق کد rgb رنگ – مانند (rgb(255,0,135
- از طریق نام رنگ – مانند “blue”
در مثال زیر عناصر h1، p و div پس زمینه هایی با رنگ های متفاوت خواهند داشت:
|
1 2 3 |
h1 {background-color:#6495ed;} p {background-color:#e0ffff;} div {background-color:#b0c4de;} |
استفاده از تصویر برای پس زمینه ( background-image )
با این دستور می تونیم یک عکس دلخواه رو به عنوان پس زمینه عنصر مورد نظرمون در صفحه وب قرار بدیم. نحوه استفاده از این دستور:
|
1 |
body {background-image:url('paper.gif');} |
در کد بالا ‘paper.gif’ نام تصویرمونه. همیشه در پس زمینه متن ها از تصویر استفاده کنید که از خوانایی متن کم نشه.
یادتون باشه، اگر عکس مورد نظرتون رو داخل یک فولدر قرار دادید، باید از نام فولدر هم در پارامتر url استفاده کنید.
برای مثال اگه تصاویر مورد استفاده در وب سایت، در فولدر images باشه، کد بالا باید به این شکل نوشته بشه:
|
1 |
body {background-image:url('images/paper.gif');} |
تکرار تصویر پس زمینه در محور افقی و عمودی ( Background-repeat )
برای داشتن صفحه ای با سرعت بارگزاری بالا، باید حجم صفحه را پایین نگه داریم.
اضافه کردن پس زمینه هایی با کیفیت بالا، سایز بزرگ و حجیم باعث کاهش شدید سرعت بارگزاری میشه. برای رفع این مشکل، طراحان وب سایت از یک تصویر کوچیک با حجم خیلی کم استفاده میکنند. تصویری که هر تعداد از اونو در کنار هم قرار بدیم، باعث بوجود آمدن تصویری واحد و یکپارچه میشه.
به عنوان مثال با تصویر زیر میشه یه پس زمینه برای کل صفحه وب ایجاد کرد:
توجه کنید که بطور پیش فرض، با نوشتن دستور پس زمینه به شکل زیر، تصویر در هر دو جهت افقی و عمودی تکرار میشه:
|
1 |
body {background-image:url('paper.gif');} |
اگر بخوایم تصویر فقط در محور افقی تکراربشه، باید از دستور زیر استفاده کنیم:
|
1 |
background-repeat:repeat-x; |
خروجی:
اگر بخوایم تصویر فقط در محور عمودی تکراربشه، باید از دستور زیر استفاده کنیم:
|
1 |
background-repeat:repeat-y; |
خروجی:
|
اگر بخوایم تصویر فقط یکبار نشون داده بشه و تکرار نشه، باید از دستور زیر استفاده کنیم:
|
1 |
background-repeat:no-repeat; |
تعیین موقعیت مکانی تصویر در پس زمینه ( background-position )
زمانی که بخوایم تصویر در پس زمینه یکبار و بدون تکرار نشون داده بشه، باید محل قرارگیری تصویر در یک زمینه بزرگ رو تعیین کنیم. برای این کار با دستور زیر موقعیت تصویر در پس زمینه رو تعیین میکنیم:
|
1 |
background-position:righttop; |
به عنوان مثال با مجموعه دستورات زیر، پس زمینه صفحه وب سایت، در سمت چپ و بالای صفحه نشون داده میشه:
|
1 2 3 4 5 6 |
body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:lefttop; } |
ثابت و یا قابل اسکرول بودن تصویر پس زمینه ( background-attachment )
شاید وبسایت هایی را دیده باشید که،وقتی که صفحه رو برای مطالعه اسکرول میکنید، پس زمینه آنها در جای خود ثابت موندن و محتوای اون صفحه حرکت میکنه.این کار توسط دستور background-attachment انجام میشه.
برای اینکه تصویر با اسکرول کردن صفحه در جای خود ثابت بمونه،از دستور زیر استفاده میکنیم:
|
1 |
Background-attachment:fixed; |
برای اینکه تصویر با اسکرول کردن صفحه همراه سایر عناصر حرکت کنه، از دستور زیر استفاده میکنیم:
|
1 |
Background-attachment:scroll; |
خب به پایان این بخش از آموزش صفر تا ده رسیدیم، امیدوارم که آموزش CSS براتون مفید باشه.
تمرین رو فراموش نکنید، شما قراره به بیست برسید به ده اکتفا نکنید.
جالب بود ممنون