زمان کنونی: ۱۲-۱۰-۱۳۹۵, ۱۱:۱۳ صبح درود مهمان گرامی! (ورودثبت نام)


[-]

اطلاعیه ها


سلام و عرض وقت بخیر خدمت دوستان و کاربران گرامی

جهت پرسش و پاسخ و دریافت پاسخ سریعتر لطفا از بخش پرسش و پاسخ وب سایت Softskill.ir استفاده نمایید.

برای ورود به بخش پرسش و پاسخ وب سایت جدید کلیک کنید.


آموزش جامع CSS - جلسه ششم
زمان کنونی: ۱۲-۱۰-۱۳۹۵, ۱۱:۱۳ صبح
کاربرانِ درحال بازدید از این موضوع: 1 مهمان
نویسنده: Tutorial
آخرین ارسال: Tutorial
پاسخ: 1
بازدید: 1786

ارسال پاسخ 
 
امتیاز موضوع:
  • 2 رأی - میانگین امتیازات: 5
  • 1
  • 2
  • 3
  • 4
  • 5
 

آموزش جامع CSS - جلسه ششم

۱-۱۱-۱۳۹۳, ۰۷:۰۶ عصر
ارسال: #1
آموزش جامع CSS - جلسه ششم
جلسه ششم – استایل پس زمینه ها (css background)

[تصویر:  4.jpg]

*دوستان عزیز همانطور که مستخضرید با توجه به تعطیلات نوروزی آموزش جلسه ششم رو با کمی تاخیر بارگذاری کردیم تا تداخلی با برنامه ی عزیزانی که درخواست کرده بودند نداشته باشد .


*پیش نیاز: آشنایی مقدماتی با HTML
(برای آشنایی با زبان HTML به بخش دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
مراجعه نمایید .)


با استفاده از این صفت در css می توان برای یک عنصر پس زمینه قرار داد. پس زمینه می تواند رنگ یا یک تصویر باشد.
خواص زیر برای صفت پس زمینه در css قابل استفاده هستند :
• background-color
• background-image
• background-repeat
• background-attachment
• background-position


در ادامه به توضیح هریک از موارد فوق می پردازیم :

background-color (استفاده از رنگ برای پس زمینه) :
[تصویر:  2.jpg]
این خاصیت رنگ پس زمینه یک عنصر را مشخص میکند :
CSS syntax
کد php:
background-colorcolor|transparent|initial|inherit

مثال :
برای مثال برای تنظیم رنگ پس زمینه بدنه صفحه وب از کد زیر استفاده میکنیم :
کد php:
body {background-color:#b0c4de;} 

به سه روش می توان رنگ مورد نظر را در دستور فوق به کار برد:
• از طریق کد هگزای رنگ – مانند ff0000 #
• از طریق کد RGB رنگ – مانند ( rgb(255,0,0
• از طریق نام رنگ – مانند "red"

مثال :
در مثال زیر عناصر div, h1,p دارای پس زمینه های مختلف خواهند بود :
کد php:
h1 {background-color:#6495ed;}
{background-color:#e0ffff;}
div {background-color:#b0c4de;} 

نکته :
مقدار پیش فرض این خاصیت transparent می باشد که مشخص می کند پس زمینه عنصر مورد نظر باید شفاف باشد.


* مقادیر initial و inherit درجلسه آتی و در تاپیکی جدا بررسی و توضیح داده خواهند شد.

background-image (استفاده از تصویر برای پس زمینه)
[تصویر:  2.jpg]
CSS Syntax
کد php:
background-imageurl|none|initial|inherit
با استفاده از این خاصیت تصویر پس زمینه یک عنصر را مشخص میکنیم، به طور پش فرض تصویر تکرار میشود تا کل پس زمینه عنصر را پوشش دهد.
مثال :
برای مثال برای تنظیم تصویر پس زمینه بدنه صفحه وب از کد زیر استفاده میکنیم :
کد php:
body {background-image:url("paper.gif");} 

url تابعی هست که مسیر تصویر پس زمینه را مشخص می کند.فرضا اگر تصویر در داخل یک فولدر قرار گرفته باشد، نام فولدر رو هم درurl درج می کنیم .
مثال :
کد php:
body {background-image:url(''images/paper.gif");} 
دقت کنید که در پس زمینه متن ها از تصاویری استفاده شود که از خوانایی متن نکاهد.

همچنین اجباری هم نیست آدرس تصویر را بین علامتهای نقل قول قرار دهیم ، برای مثال دستور فوق رو هم می توانیم بصورت زیر استفاده کنیم:
کد php:
body {background-image:url(images/paper.gif);} 

نکته :
مقدار پیش فرض این خاصیت none می باشد، یعنی عنصر مورد نظر بدون پس زمینه نمایش داده خواهد شد.


background-repeat (تکرار پس زمینه در محور عمودی و افقی )
[تصویر:  2.jpg]
CSS syntax
کد php:
background-repeatrepeat|repeat-x|repeat-y|no-repeat|initial|inherit
از این خاصیت برای مشخص کردن نحوه تکرار تصویر در پس زمینه عنصر استفاده میشود که بصورت پیش فرض تصویر هم بصورت عمودی و هم بصورت افقی در کل پس زمینه عنصر تکرار میشود. با استفاده از این خاصیت می توان به جای استفاده از تصاویر بزرگ و پر حجم برای پس زمینه که باعث کند شدن سرعت لود صفحه می شوداز تصاویر کوچک و کم حجم استفاده کرد و کل صفحه رو پوشش داد.

اگر بخواهیم تصویر فقط در محور افقی تکرار شود از دستو زیر:
کد php:
background-repeat:repeat-x

و اگر بخواهیم تصویر فقط در محور عمودی تکرار شود از دستور زیر:
کد php:
background-repeat:repeat-y


و اگر بخواهیم تصویر تکرار نشده و فقط یکبار نمایش داده شود از دستور زیر استفاده می کنیم:
کد php:
background-repeat:no-repeat

نکته :
مقدار پیش فرض این خاصیت repeat می باشد که تصویر را در هر 2 محور عمودی و افقی تکرار می کند.


background-attachment (ثابت و یا قابل اسکرول بودن تصویر پس زمینه) :
[تصویر:  2.jpg]
این خاصیت ثابت بودن و یا اسکرول بودن پس زمینه را مشخص می کند.
CSS syntax
کد php:
background-attachmentscroll|fixed|local|initial|inherit

اگر بخواهیم تصویر پس زمینه صفحه همواره ثابت بوده و هنگام مطالعه وب سایت فقط محتوا و نوشته ها متحرک باشند از دستور زیر استفاده می کنیم:
کد php:
background-attachment:fixed

نکته :
مقدار پیش فرض این خاصیت scroll می باشد.


background-position(تعیین موقعیت مکانی تصویر در پس زمینه )
[تصویر:  2.jpg]
CSS syntax
کد php:
background-positionfirst_value second_value

هنگامی که بخواهیم تصویر در پس زمینه یکبار و بدون تکرار نشان داده شود، باید محل قرارگیری تصویر در یک زمینه بزرگ را تعیین کنید. برای این منظور توسط دستور زیر موقعیت تصویر در پس زمینه را تعیین میکنیم:
کد php:
background-position:right top
مثال :
برای مثال با دستورات زیر تصویر پس زمینه صفحه در گوشه سمت راست بالا نمایش داده خواهد شد.
کد php:
body
{
background-image:url("img_tree.png");
background-repeat:no-repeat;
background-position:right top;

مقدار اول موقعیت افقی هست که یکی از مقادیر left,right,center می باشد، و مقدار دوم موقعیت عمودی هست که یکی از مقادیر top,center,bottom می باشد.

این مقادیر را بر حسب پیکسل و یا درصد نیز می توان بیان کرد :
مقادیر 0px 0px و 0% 0% گوشه سمت چپ بالا می باشد که با افزایش رقم های صفر تصویر پس زمینه به سمت راست تر می آید به طوری که مقادیر 100% 100% گوشه سمت راست پایین صفحه می شود.

مقادیر اول و دوم می توانند بصورت ترکیبی نیز استفاده شوند .
مثال :
کد php:
background-position:200px top
or
کد php:
background-position:left 50%; 
or
کد php:
background-position:200px 10%; 

صفت shorthand (مختصر نویسی)
[تصویر:  2.jpg]
صفتی هست که بصورت کلی می باشد و شامل صفات زیر مجموعه و جانبی آن می باشد. صفت shorthand برای پس زمینه با یک مثال نشان می دهیم.
مثال :
کد php:
body {background:#ffffff url("img_tree.png") no-repeat right top;} 
همانطور که مشاهده کردیم به جای استفاده از 5 دستور، هر 5 ویژگی صفت پس زمینه را در یک خط نوشتیم، اگر سعی کنیم همیشه از صفت shorthand در کدهامون استفاده کنیم حجم کد تولیدی به مراتب کمتر و بهینه خواهد بود.



[تصویر:  4.jpg]
پایان جلسه ششم
یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط Adel ، AZAR2711 ، Dolati ، geray
ارسال پاسخ 


موضوع‌های مرتبط با این موضوع...
موضوع: نویسنده پاسخ: بازدید: آخرین ارسال
  آموزش ساخت فرم لاگین حرفه ای mesterseo 0 20 ۱۱-۲۷-۱۳۹۵ ۰۳:۱۳ عصر
آخرین ارسال: mesterseo
  آموزش ایجاد طیف رنگی با استفاده از css3 mesterseo 0 16 ۱۱-۲۷-۱۳۹۵ ۰۲:۵۴ عصر
آخرین ارسال: mesterseo
  آموزش جامع CSS - جلسه اول Tutorial 3 2,984 ۵-۲۷-۱۳۹۵ ۱۰:۵۸ صبح
آخرین ارسال: lioseo
  آموزش جامع CSS - جلسه دوم Tutorial 5 2,653 ۵-۱۳-۱۳۹۵ ۰۲:۲۳ عصر
آخرین ارسال: Adel
  آموزش ویدیویی جامع و کاربردی CSS academyit 0 212 ۴-۲-۱۳۹۵ ۰۳:۰۸ عصر
آخرین ارسال: academyit
Lightbulb آموزش ویدیویی css از مبتدی تا پیشرفته academyit 0 324 ۱۲-۱۵-۱۳۹۴ ۱۰:۵۴ صبح
آخرین ارسال: academyit
  آموزش CSS heidari 2 1,334 ۷-۲۰-۱۳۹۴ ۰۸:۴۹ عصر
آخرین ارسال: Adel
Question پرسش و پاسخ پیرامون آموزش جامع CSS - جلسه پنجم Tutorial 2 2,031 ۵-۳۱-۱۳۹۳ ۱۰:۵۲ صبح
آخرین ارسال: Adel
Question پرسش و پاسخ پیرامون آموزش جامع CSS - جلسه هفتم Tutorial 0 1,413 ۱-۱۷-۱۳۹۳ ۰۶:۵۸ عصر
آخرین ارسال: Tutorial
  آموزش جامع CSS - جلسه هفتم Tutorial 0 1,655 ۱-۱۷-۱۳۹۳ ۰۶:۵۳ عصر
آخرین ارسال: Tutorial

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان