تبلیغات بنری ویکیوز

ارسال پاسخ 
 
امتیاز موضوع:
  • 1 رأی - میانگین امتیازات: 5
  • 1
  • 2
  • 3
  • 4
  • 5
اموزش کامل CSS
نویسنده پیام
! Omid StaR ! آفلاین
امید کریم زاده
******
مدیر کل سایت

ارسال‌ها: 4,723
تاریخ عضویت: Oct 2011
اعتبار: 104
ارسال: #1
اموزش کامل CSS
استايل (CSS) چيست؟

زبان HTML براي ايجاد يك سيستم كد سازي جهاني به وجود آمد تا بوسيله آن بتوان صفحات وب را بدون توجه به نوع كامپيوتر طراحي كرد. خاصيت مهم HTML قالب بندي ساختاري مي‌باشد ولی متاسفانه به طراحان قابلیت کنترل در همه زوایای صفحه را نمی‌دهد. برای قالب بندی و ایجاد افکت های بیشتر از CSS استفاده می‌کنیم.
در واقع CSS این امکان را ایجاد می‌کند تا طراح بتواند چندین مشخصه در طراحی صفحه را به یکباره تعیین کند بعنوان مثال خصوصیات تمامی تگهای h1 موجود در صفحه اعم از اندازه، فونت و رنگ را مشخص نمايد. و يا مشخصات ظاهري چندين صفحه را در يك فايل CSS تعيين نمايد.
CSS مخفف کلمه Cascading Style Sheets ميباشند.
نسخه های مختلف CSS به شرح زیر می‌باشد:

1- CSS1
2- CSS2
3- CSS3
4- CSS-P

زندگی به من آموخت

که همیشه منتظر حمله احتمالی کسی باشم
که به او محبت فراوانی کرده ام
18-02-2012 08:21 PM
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر نقل قول این ارسال در یک پاسخ
! Omid StaR ! آفلاین
امید کریم زاده
******
مدیر کل سایت

ارسال‌ها: 4,723
تاریخ عضویت: Oct 2011
اعتبار: 104
ارسال: #2
RE: اموزش کامل CSS
روشهای به کارگیری CSS

سه روش برای به کارگیری CSS وجود دارد:

1- محلی: (Inline) در صورتیکه تا به حال از CSS استفاده نکرده‌اید بهتر است از این روش ساده استفاده کنید، اگر چه با این روش نمی‌توان یک style را برای یک مجموعه تگ در آن واحد اعمال کرد.
در این روش درون تگ HTML ای که می‌خواهیم قالب آن را تغییر دهیم ویژگی style را مانند زیر تایپ می‌کنیم

[تصویر:  1.gif]

زندگی به من آموخت

که همیشه منتظر حمله احتمالی کسی باشم
که به او محبت فراوانی کرده ام
18-02-2012 08:25 PM
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر نقل قول این ارسال در یک پاسخ
! Omid StaR ! آفلاین
امید کریم زاده
******
مدیر کل سایت

ارسال‌ها: 4,723
تاریخ عضویت: Oct 2011
اعتبار: 104
ارسال: #3
RE: اموزش کامل CSS
- داخلی: (Internal)

این روش برای صفحات مجزایی که متن طولانی دارند بسیار مناسب می‌باشد. بدین صورت می‌توان style را در بالای سند HTML برای کل متن تعریف نمود.
در اینحالت در داخل تگ < head > تگ < style > را مانند زیر تایپ کنید.

[تصویر:  2.gif]

زندگی به من آموخت

که همیشه منتظر حمله احتمالی کسی باشم
که به او محبت فراوانی کرده ام
18-02-2012 08:27 PM
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر نقل قول این ارسال در یک پاسخ
! Omid StaR ! آفلاین
امید کریم زاده
******
مدیر کل سایت

ارسال‌ها: 4,723
تاریخ عضویت: Oct 2011
اعتبار: 104
ارسال: #4
RE: اموزش کامل CSS
3- خارجی: (External)

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

[تصویر:  3.gif]

نکته: url در یک style sheet خارجی(HREF)، مرتبط با محل فایل مذکور بر روی server می‌باشد.

[تصویر:  4.gif]

در اینحالت هر تغییری که در صفحه style sheet ایجاد شود به طور اتوماتیک در همه صفحات اعمال خواهد شد.

زندگی به من آموخت

که همیشه منتظر حمله احتمالی کسی باشم
که به او محبت فراوانی کرده ام
18-02-2012 08:30 PM
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر نقل قول این ارسال در یک پاسخ
! Omid StaR ! آفلاین
امید کریم زاده
******
مدیر کل سایت

ارسال‌ها: 4,723
تاریخ عضویت: Oct 2011
اعتبار: 104
ارسال: #5
RE: اموزش کامل CSS
طریقه نوشتن CSS در روش داخلی و خارجی

طریقه نوشتن CSS در روش داخلی و خارجی به یکی از صورتهای عمومی زیر است:
فعلا فرض را بر این می‌گذاریم که selector همان تگ HTML است.

[تصویر:  5.gif]

زندگی به من آموخت

که همیشه منتظر حمله احتمالی کسی باشم
که به او محبت فراوانی کرده ام
18-02-2012 08:31 PM
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر نقل قول این ارسال در یک پاسخ
! Omid StaR ! آفلاین
امید کریم زاده
******
مدیر کل سایت

ارسال‌ها: 4,723
تاریخ عضویت: Oct 2011
اعتبار: 104
ارسال: #6
RE: اموزش کامل CSS
نکات مورد توجه:

- خصوصیات هر تگ بایستی بین دو علامت {} قرار داده شوند. در ضمن بین هر خصوصیت و مقدار مربوطه به آن علامت ( : ) قرار داده می‌شود.
- می‌توان چند خصوصیت از یک تگ را به یکباره تعریف نمود. در این حالت خصوصیات مختلف را با علامت ( ; ) از هم جدا می‌کنند.
- میتوان خصوصیات چندین تگ را به یکباره تعریف نمود. البته مي بايستي هر کدام از تگها را با علامت (, ) از هم جدا نمود.

به عنوان مثال:

[تصویر:  6.gif]

رنگ فونت هر سه تگ را قرمز می‌کند.

- از آنجا که تمام عناصر موجود در CSS توسط Browser ها شناخته نمی‌شود بهتر است محتویات داخل تگ < style > را بین دو علامت [تصویر:  7.gif] قرار داده تا مشخصه ‌های تگ در Browserهايي كه اين عناصر را نمي‌شناسند به صورت اشتباه نشان داده نشوند.

زندگی به من آموخت

که همیشه منتظر حمله احتمالی کسی باشم
که به او محبت فراوانی کرده ام
18-02-2012 08:32 PM
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر نقل قول این ارسال در یک پاسخ
! Omid StaR ! آفلاین
امید کریم زاده
******
مدیر کل سایت

ارسال‌ها: 4,723
تاریخ عضویت: Oct 2011
اعتبار: 104
ارسال: #7
RE: اموزش کامل CSS
موارد مورد استفاده به جاي Selector

در فرمول فوق به جای selector موارد زیر را می‌توان به کار برد:

1- HTML tag

[تصویر:  8.gif]

2- Class

می توان اجزا داخل سند HTML را به صورت classهای مختلف طبقه بندی نمود تا بتوان هر کدام را به ترتیب استفاده نمود.
در این حالت در تگ مورد نظر، عبارت CLASS=classname را که در آن classname نام class مناسب می‌باشد را تایپ کنید و سپس در قسمت style صفحه html مانند نمونه زیر:

[تصویر:  9.gif]

زندگی به من آموخت

که همیشه منتظر حمله احتمالی کسی باشم
که به او محبت فراوانی کرده ام
18-02-2012 09:49 PM
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر نقل قول این ارسال در یک پاسخ
! Omid StaR ! آفلاین
امید کریم زاده
******
مدیر کل سایت

ارسال‌ها: 4,723
تاریخ عضویت: Oct 2011
اعتبار: 104
ارسال: #8
RE: اموزش کامل CSS
نکته: از class فقط در styleهای داخلی و خارجی می‌توان استفاده کرد.

3-Contextual

[تصویر:  10.gif]

4- تو در تو (Nested)

می‌توان چند تگ را به صورت تو در تو قرار داد. در این صورت توسط یک فاصله (space) آنها را از هم جدا می‌کنند.

[تصویر:  11.gif]

به عنوان مثال:

[تصویر:  12.gif]


زندگی به من آموخت

که همیشه منتظر حمله احتمالی کسی باشم
که به او محبت فراوانی کرده ام
18-02-2012 09:50 PM
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر نقل قول این ارسال در یک پاسخ
! Omid StaR ! آفلاین
امید کریم زاده
******
مدیر کل سایت

ارسال‌ها: 4,723
تاریخ عضویت: Oct 2011
اعتبار: 104
ارسال: #9
RE: اموزش کامل CSS
تمام قسمتهایی که داخل تگ h1 توسط EM علامتگذاری شده‌اند بصورت قرمز نشان می‌دهد اما تگهای EM موجود در بقیه متون دیگر بصورت قرمز نوشته نمی‌شوند.

5-پیوندها(Link)

[تصویر:  13.gif]

کلمه link را برای تغییر ظاهر پیوندهایی که هنوز بر روی آنها کلیک نشده است تایپ کنید.
کلمه visited را برای تغییر ظاهر پیوندهایی که کلیک شده‌اند تایپ کنید.
کلمه active را برای تغییر ظاهر پیوندها در زمانی که کلیک می‌شوند تایپ کنید.
کلمه hover را برای تغییر ظاهر پیواندها در زمانیکه نشانگر موس روی آنها قرار می‌گیرد تایپ کنید.

زندگی به من آموخت

که همیشه منتظر حمله احتمالی کسی باشم
که به او محبت فراوانی کرده ام
18-02-2012 09:51 PM
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر نقل قول این ارسال در یک پاسخ
! Omid StaR ! آفلاین
امید کریم زاده
******
مدیر کل سایت

ارسال‌ها: 4,723
تاریخ عضویت: Oct 2011
اعتبار: 104
ارسال: #10
RE: اموزش کامل CSS
خصوصیات تگها و مقادیر قابل الصاق به آنها

توضیح 1: اگر این قسمت از جزوه را به خوبی متوجه نمی‌شوید نگران نباشید. نحوه استفاده و کاربرد هر کدام از این خصوصیات در مثالهاي بعدي نشان داده‌شده‌است.

توضیح2: در اینجا تعدادی از خصوصیات پرکاربرد آورده شده‌است. مرجع کامل در پایان جزوه ارائه می‌شود.

[تصویر:  14.gif]

زندگی به من آموخت

که همیشه منتظر حمله احتمالی کسی باشم
که به او محبت فراوانی کرده ام
18-02-2012 09:53 PM
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر نقل قول این ارسال در یک پاسخ
ارسال پاسخ 


پرش به انجمن:


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

اخبار فناوری اطلاعات | نرم افزار املاک | نرم افزار دامپزشکی | نرم افزار داروخانه | نرم افزار رستوران | نرم افزار تاکسی سرویس | نرم افزار رستوران | دانلود نرم افزار مطب | دانلود نرم افزار تاکسی سرویس | مجله پزشکی آسان طب | دکتر آسان طب | نرم افزار مطب | نرم افزار دفترچه تلفن نرم افزار چاپ چک نرم افزار رستوران نرم افزار فست فود نرم افزار کافی شاپ نرم افزار تاکسی سرویس نرم افزار نمایشگاه خودرو نرم افزار املاک نرم افزار هتلداری نرم افزار مطب نرم افزار دندانپزشکی نرم افزار انبارداری نرم افزار حسابداری فروشگاه نرم افزار وکالت مجله اینترنتی پارسی وان | مجله اینترنتی زیگیل | خرید بک لینک | خرید رپورتاژ | سینما تئاتر مای استیج | یک مهاجر | دنیای مهاجرت | مجله گردشگری کاروان | وردپرس دانلود | مجله تفریحی تندیس فان | نرم افزار Software | جوک جدید | اخبار هنر | اخبار کامپیوتر | سایت پزشکی | فروشگاه اینترنتی | سایت خبری | دانلود موزیک | اندروید سه | بانک شماره موبایل | پایگاه صالحین | مجله کامپیوتری | جاب لر | نوین ساخت | سهام نت | تکی کو | تم کد | خرید هاست | مجله خانواده | مجله اینترنتی وبدون | پورتال خبری | سایت تفریحی تک لایو | مجله سرگرمی سیب رنک | فروش جوجه بوقلمون |   تولید کننده روغن زیتون | سایت پزشکی دکتر طب | مدرن بوک | لوازم ارایشی | مشاوره کنکور | باربری تهران | خرید گیفت کارت پلی استیشن | طراحی بنر | رژیم لاغری | شلوارک لاغری هات شیپر
خرید vpn

برای درج تبلیغات متنی، بنری و یا رپرتاژ آگهی در این وب سایت با شماره 09370888727 تماس حاصل فرمائید