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


ارسال پاسخ 
 
امتیاز موضوع:
  • 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
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
نصب جوملا نسخه دلخواه بصورت رایگان و پشتیبانی عالی

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

آر اس فرم حرفه ای | تب ساز نونامبر | کامپوننت لودر | ثبت نام درگروه کاربری دلخواه

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

!!!شماره همراه جهت پشتیبانی از خدمات و مشاوره خرید و سفارش می باشد لطفا مشکلات رو در انجمن مطرح کنید!!!
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
 سپاس شده توسط mshnejad1 ، رضا تقی‌زاده ، شاهین سمیع عادل ، iraj42 ، mal2moh ، btheme ، تینا ، کاوه
صفحه 2 (<ارسال بالا اولین ارسال این موضوع است>)
۲۰-۱-۱۳۹۷, ۰۴:۱۴ عصر
ارسال: #11
RE: آموزش سی اس اس ابتدا تا انتها
چرا فکر می کنید سی اس اس ۳ می تونه کار جی کو آری رو بگیره ؟ من درک نکردم چرا این صحبت رو مطرح کردید ؟

اگر شما می فرمودید به صورت مثال ری اکت یا انگولار یا ویو جی اس رو یاد می گرفتم جی کو آری می زاشتم کنار باز صحبت شما درست بود ولی css3 کجا و جی کو آری کجا !!!
امضاء shahryar warez
تمام افزونه های منتشر شده به صورت اختصاصی از طرف من می توانید در تلگرامم پیگیری کنید و دانلود ( دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
)
وب سایت : دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

۰۹۳۶۸۰۹۴۹۳۶ یا ۰۹۲۱۳۳۸۰۳۲۹
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
۲۱-۱-۱۳۹۷, ۰۱:۱۴ صبح
ارسال: #12
RE: آموزش سی اس اس ابتدا تا انتها
جدی نگیرید شهریار جان :-)
امضاء Pourdaryaei
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
 سپاس شده توسط shahryar warez ، Reza Ganji
ارسال پاسخ 


پرش به انجمن:


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