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


ارسال پاسخ 
 
امتیاز موضوع:
  • 1 رأی - میانگین امتیازات: 5
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش سی اس اس ابتدا تا انتها
۱۷-۱۰-۱۳۸۹, ۰۷:۲۱ صبح (آخرین ویرایش در این ارسال: ۲۶-۱۱-۱۳۸۹ ۰۸:۲۷ عصر، توسط Reza Ganji.)
ارسال: #1
Wink آموزش سی اس اس ابتدا تا انتها
توجه:اين آموزش به كتاب الكتروني (ايبوك) تبديل شده و در آخرين پست لينك دانلود قرار گرفته است
سلام
در این پست به آموزش سی اس اس از منابع مختلف میپردازم و هر از چندگاهی که فرصت شد تاپیک را ادامه میدهم و از دوستان خواهش میکنم در این تاپیک پستی ارسال نکنند تا طبق روال این تاپیک رو به پیش ببرم !

در مورد تاریخچه سی اس اس دوست عزیزم آقای سمیع عادل مطالبی را در تاپیک تاریخچه سی اس اس گفتند و ما وارد جزئیات نمیشیم و مطاب آموزشی را شروع میکنیم.
البته برای یادگیری سی اس اس لازم است اچ تی ام ال هم یاد گرفت!

سی اس اس چیست؟

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

CSS1
CSS2
CSS3
CSS-P

روشهای به کارگیری CSS

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

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

<tag style="css declarations"...>content </tag>

<p style="color:red"> content </p>

<p style="color:red;font-size:14pt;border:1pt blue dashed" p>


2-داخلی: (Internal)

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>
   <style type="text/css">codhaye css</style>
  </title>
</head>

<body>

</body>

</html>

نمونه حاوی کدهای سی اس اس:

<head>
  <title>
   <style type="text/css">
   p{
   font-family:arial; color:red; font-size:12px;
   border:1px
}

</style>
  </title>
</head>


3-خارجی: (External)

در صورتیکه بخواهید از یک style در چندین صفحه استفاده کنید این روش را به کار ببرید. در این حالت می‌توان برای تمام صفحات وب ظاهر متداول و یکسانی بوجود آورد. یعنی به جای آنکه برای هر صفحه از style های داخلی استفاده کنید می‌توانید تمام صفحات را با یک style خارجی طراحی کنید.
برای اینکار در برچسب head یک لینک به فایل سی اس اس میدهیم و توجه داشته باشید که فایل سی اس اس هم بر روی همان سرور قرار دارد.
نکته: url در یک style sheet خارجی(HREF)، مرتبط با محل فایل مذکور بر روی server می‌باشد.

[تصویر:  1294346234_1_29896e446a.gif]

در تصویر زیر تمامی صفحات به یک فایل سی اس اس لینک شده اند.

[تصویر:  1294346327_1_b9c9bd49df.gif]

اکنون هر تغییری که در فایل سی اس اس دهید در تمامی صفحات به طور اتوماتیک اجرا خواهد شد.
امضاء Reza Ganji
انجمن پارس جوم
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
 سپاس شده توسط mshnejad1 ، رضا تقی‌زاده ، شاهین سمیع عادل ، iraj42 ، mal2moh ، btheme ، تینا ، کاوه ، KOCOM
۱۷-۱۰-۱۳۸۹, ۰۸:۰۶ صبح (آخرین ویرایش در این ارسال: ۱۷-۱۰-۱۳۸۹ ۰۸:۰۹ صبح، توسط Reza Ganji.)
ارسال: #2
RE: آموزش سی اس اس ابتدا تا انتها
طریقه نوشتن CSS در روش داخلی و خارجی

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

[تصویر:  1294347616_1_b912387b6a.gif]

نکات مورد توجه:

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

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

h1,h2,h3 {color: red}

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

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

ادامه دارد.....
امضاء Reza Ganji
انجمن پارس جوم
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
 سپاس شده توسط رضا تقی‌زاده ، شاهین سمیع عادل ، iraj42 ، mal2moh ، کاوه ، nyusha
۵-۱۱-۱۳۸۹, ۱۱:۲۸ صبح (آخرین ویرایش در این ارسال: ۳-۸-۱۳۹۰ ۰۸:۱۹ عصر، توسط Reza Ganji.)
ارسال: #3
RE: آموزش سی اس اس ابتدا تا انتها
این آموزش در اینجا به پایان نرسیده ولی چون دوست عزیزم آقای مهدی رفوگر زحمت کشیدند و این آموزش رو به ایبوک تبدیل کردند شما میتوانید در تاپیک زیر این کتاب را دانلود کنید.


دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.


Ok
امضاء Reza Ganji
انجمن پارس جوم
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
 سپاس شده توسط mamalhi ، mshnejad1 ، رضا تقی‌زاده ، aliabadi ، احسان افشاری ، ehsansabet ، شاهین سمیع عادل ، iraj42 ، btheme ، nyusha
۳-۸-۱۳۹۰, ۰۸:۲۰ عصر
ارسال: #4
RE: آموزش سی اس اس ابتدا تا انتها
لینک تصحیح شد !
امضاء Reza Ganji
انجمن پارس جوم
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
 سپاس شده توسط ehsansabet ، شاهین سمیع عادل ، iraj42 ، mal2moh ، nyusha
۲۴-۲-۱۳۹۱, ۰۳:۴۲ صبح
ارسال: #5
نظیم شفافیت (Opacity) تصاویر با سی اس اس
در فرمت PNG می توانیم شفافیت (Opacity) تصویر را تغییر دهیم.
اما متاسفانه مروگر IE6 از این فرمت بطور پیش فرض پشتیبانی نمی کند و اغلب کاربران در ایران از این مروگر قدیمی و آسیب پذیر استفاده می کنند.
به همین علت، هنوز استفاده از PNG برای تنظیم شفافیت (Opacity) راهکار مناسبی نیست و می توان از سی اس اس برای تنظیم شفافیت (Opacity) در تصاویر استفاده کرد.
استفاده از سی اس اس برای تنظیم شفافیت (Opacity) یک حسن دیگری نیز دارد
و آن این است که اگر شما به دو تصویر با شفافیت ۷۰% و ۱۰۰% نیاز داشته باشید
می توانید فقط از یک تصویر استفاده کنید و فقط شفافیت ها را در سی اس اس تغییر دهید.
البته متاسفانه تا زمان نگارش این مقاله هنوز w3c این خصیصه CSS را Valid نکرده است.
نکنته مهم این است کدی که برای تنظیم Opacity یا همان شفافیت استفاده می کنید در تمام مروگر ها کار کند.
برای این منظور از کد زیر استفاده کنید و فقط مقادیر شفافیت را تغییر دهید:

.transparent_class {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* IE 5-7 */
filter: alpha(opacity=50);

/* Netscape */
-moz-opacity: 0.5;

/* Safari 1.x */
-khtml-opacity: 0.5;

/* Good browsers */
opacity: 0.5;
}
امضاء تیم اسان وب
طــــــــــــراحی وبسایت وطـــــراحی انواع پرتال های سازمانی وشخصی ومیزبانی وب
طراحی وگرافیست طــــراحی قالب

اطلاعات بیشتر:دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
 سپاس شده توسط nyusha
۲۸-۹-۱۳۹۱, ۰۷:۱۵ صبح
ارسال: #6
RE: آموزش سی اس اس ابتدا تا انتها
سلام من یک سایت با سیستم شیرترانیکس دارم
برای کادر دور عکس های یوذر های سایتم یک کد سی اس اس میخوام
میتونید کمکم کنید؟
امضاء sina19910
هاست حرفه ای با 2 گیگ فضا و پهنای باند با 9 ماه اعتبار از شرکت نت افروز
فقط40000 sorosh0091@yahoo.com
یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
۲۹-۹-۱۳۹۱, ۰۶:۱۰ عصر
ارسال: #7
RE: نظیم شفافیت (Opacity) تصاویر با سی اس اس
(۲۴-۲-۱۳۹۱ ۰۳:۴۲ صبح)تیم اسان وب نوشته شده توسط: دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
در فرمت PNG می توانیم شفافیت (Opacity) تصویر را تغییر دهیم.
اما متاسفانه مروگر IE6 از این فرمت بطور پیش فرض پشتیبانی نمی کند و اغلب کاربران در ایران از این مروگر قدیمی و آسیب پذیر استفاده می کنند.
به همین علت، هنوز استفاده از PNG برای تنظیم شفافیت (Opacity) راهکار مناسبی نیست و می توان از سی اس اس برای تنظیم شفافیت (Opacity) در تصاویر استفاده کرد.
استفاده از سی اس اس برای تنظیم شفافیت (Opacity) یک حسن دیگری نیز دارد
و آن این است که اگر شما به دو تصویر با شفافیت ۷۰% و ۱۰۰% نیاز داشته باشید
می توانید فقط از یک تصویر استفاده کنید و فقط شفافیت ها را در سی اس اس تغییر دهید.
البته متاسفانه تا زمان نگارش این مقاله هنوز w3c این خصیصه CSS را Valid نکرده است.
نکنته مهم این است کدی که برای تنظیم Opacity یا همان شفافیت استفاده می کنید در تمام مروگر ها کار کند.
برای این منظور از کد زیر استفاده کنید و فقط مقادیر شفافیت را تغییر دهید:

.transparent_class {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* IE 5-7 */
filter: alpha(opacity=50);

/* Netscape */
-moz-opacity: 0.5;

/* Safari 1.x */
-khtml-opacity: 0.5;

/* Good browsers */
opacity: 0.5;
}

سلام محمد جان همکار محترم لطفا آموزش را کامل قرار بدهید

باتشکر

سرپرست گروه آسان وب

شرکت فنی مهندسی آسان پردازشگر (فناوران مانــدگار)
یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
۲۷-۱۲-۱۳۹۶, ۰۹:۲۴ عصر
ارسال: #8
RE: آموزش سی اس اس ابتدا تا انتها
سلام...استاد...ایا پی اچ پی و سی اس اس مکمل همدیگه هستن....
امضاء sajjad
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
- دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
- دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
- دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
- دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
۴-۱-۱۳۹۷, ۱۰:۵۴ عصر
ارسال: #9
RE: آموزش سی اس اس ابتدا تا انتها
این css 3 رو من وقت باشه بتونم کامل یادبگیرم jquery بی صاحابو میزارم کنار :|
خیلی تو دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
کمک میکنه
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
۱۴-۱-۱۳۹۷, ۰۷:۴۶ عصر
ارسال: #10
RE: آموزش سی اس اس ابتدا تا انتها
درود
پی اچ پی زبان برنامه نویسی است ولی سی اس اس برای استایل دهی بکار میرود.البته در اچ تی ام ال 5 و سی اس اس 3 هم میتوان از توابع استفاده کرد .

در لینک زیر میتوانید برخی توابع آموزش داده شده در سایت دبیلوتری اسکول را مشاهده کنید :

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.


در سایت بالا به زبان ساده میتوانید بیشتر زبان های نشانه گذاری و برنامه نویسی را یاد بگیرید.
امضاء Reza Ganji
انجمن پارس جوم
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
ارسال پاسخ 


پرش به انجمن:


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