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




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

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

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

۱۲-۱۸-۱۳۹۲, ۰۶:۱۷ عصر
ارسال: #1
آموزش جامع CSS - جلسه سوم
جلسه سوم – دستورات CSS را کجا بنویسیم؟

[تصویر:  4.jpg]

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



نحوه نوشتن دستورات CSS
[تصویر:  2.jpg]
برای نوشتن دستورات CSS در یک وب سایت سه روش وجود دارد:
1- External Style Sheet : شیوه نامه خارجی
2- Internal Style Sheet : شیوه نامه داخلی یا صفحه ای
3- Inline Style : شیوه درون خطی یا دستوری

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


External Style Sheet :
[تصویر:  2.jpg]
در این روش تمامی دستورات CSS در یک فایل جدا با پسوند .css نوشته شده و سپس در هر صفحه ای که می خواهیم این دستورات بر عناصر آن اعمال شوند، به بخش <head> رفته و توسط تگ <link> فایل css خود را به صفحه متصل میکنیم .
مثال :
کد php:
<head>
<
link rel="stylesheet" type="text/css" href="mystyle.css">
</
head

برای پرهیز از تکرار کد نویسی و اعمال تغییرات راحت تر در وب سایت های چند صفحه ای از این روش استفاده می کنیم. فایل های CSS فقط حاوی دستورات CSS هستند و هیچ کد و تگی از HTML در آنها نوشته نمیشود. در زیر یک نمونه از فایل CSS را مشاهده میکنید که کافیست ان را در یک فایل notepad نوشته و با پسوند css ذخیره کنید :
کد php:
hr {color:sienna;}
{margin-left:20px;}
body {background-image:url("images/background.gif");} 

نکته: در مقادیری که برای خصوصیت ها قرار میدهیم دقت شود که مابین مقدار و واحد فاصله قرار نگیرد .
( مثلا در دستور ;margin-left:20px نباید ما بین عدد20 و px فاصله گذاشته شود . )

Internal Style Sheet
[تصویر:  2.jpg]
زمانی که می خواهیم یک سری استایل خاص رو فقط بر روی یک صفحه اعمال کنیم و یا وب سایت ما فقط از یک صفحه تشکیل شده از این روش استفاده میکنیم. برای استفاده از این روش به بخش head صفحه رفته و کدهای css را داخل تگ <style> می نویسیم :
کد php:
<head>
<
style>
hr {color:sienna;}
{margin-left:20px;}
body {background-image:url("images/background.gif");}
</
style>
</
head


Inline Style
[تصویر:  2.jpg]
اگر از این روش استفاده کنید بسیاری از مزیت ها و ویژگی هایی که CSS بخاطر آنها به وجود آمده را از دست خواهید داد. چراکه برای هر عنصر باید خصوصیات مربوط به خودش را بنویسید که باعث افزایش حجم صفحات شده و اعمال تغییرات نیز دشوار خواهد بود.
برای استفاده از این روش باید به عنصر مورد نظر صفت Style را افزوده و سپس خاصیت ها و مقدارها را به این صفت اضافه کنید.
مثال:
کد php:
<p style="color:sienna;margin-left:20px;">این یک پاراگراف هست</p


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


موضوع‌های مرتبط با این موضوع...
موضوع: نویسنده پاسخ: بازدید: آخرین ارسال
  آموزش جامع CSS - جلسه اول Tutorial 3 2,841 ۵-۲۷-۱۳۹۵ ۱۰:۵۸ صبح
آخرین ارسال: lioseo
  آموزش جامع CSS - جلسه دوم Tutorial 5 2,505 ۵-۱۳-۱۳۹۵ ۰۲:۲۳ عصر
آخرین ارسال: Adel
  آموزش ویدیویی جامع و کاربردی CSS academyit 0 156 ۴-۲-۱۳۹۵ ۰۳:۰۸ عصر
آخرین ارسال: academyit
Lightbulb آموزش ویدیویی css از مبتدی تا پیشرفته academyit 0 273 ۱۲-۱۵-۱۳۹۴ ۱۰:۵۴ صبح
آخرین ارسال: academyit
  آموزش CSS heidari 2 1,244 ۷-۲۰-۱۳۹۴ ۰۸:۴۹ عصر
آخرین ارسال: Adel
Question پرسش و پاسخ پیرامون آموزش جامع CSS - جلسه پنجم Tutorial 2 1,963 ۵-۳۱-۱۳۹۳ ۱۰:۵۲ صبح
آخرین ارسال: Adel
Question پرسش و پاسخ پیرامون آموزش جامع CSS - جلسه هفتم Tutorial 0 1,343 ۱-۱۷-۱۳۹۳ ۰۶:۵۸ عصر
آخرین ارسال: Tutorial
  آموزش جامع CSS - جلسه هفتم Tutorial 0 1,583 ۱-۱۷-۱۳۹۳ ۰۶:۵۳ عصر
آخرین ارسال: Tutorial
  پرسش و پاسخ پیرامون آموزش جامع CSS - جلسه ششم Tutorial 0 1,236 ۱-۱۱-۱۳۹۳ ۰۷:۰۸ عصر
آخرین ارسال: Tutorial
  آموزش جامع CSS - جلسه ششم Tutorial 0 1,691 ۱-۱۱-۱۳۹۳ ۰۷:۰۶ عصر
آخرین ارسال: Tutorial

پرش به انجمن:


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