28 فروردین 1391, 02:34 ق.ظ
CSS یا Cascading Style Sheet روشی برای قالب بندی و طراحی اجزای صفحه از قبیل متن، تصویر، زمینه صفحه، کادرها و تقریباً هر چیزی که در طراحی صفحه استفاده میشه بدون استفاده از کدهای HTML هستش.به کمک CSS میتونیم از دوباره نویسی کدهای HTML که باعث مشکل شدن کدنویسی و همچنین کند شدن سرعت بارگذاری صفحه در اینترنت میشه جلوگیری کنیم. برای مثال می تونیم یک بار نوع فونت مورد استفاده در یک صفحه را تعیین کنیم و دیگر مجبور نباشیم کد مربوط به فونت را در صفحه به کارببریم.
در واقع بطور کلی میشه گفت CSS این امکان رو ایجاد میکنه تا طراح بتونه چندین مشخصه توی طراحی صفحه رو به یکباره تعیین کنه و همچنین میشه گفت برای کنترل دقیق مشخصات صفحه و استاندارد کردن تگ های غیراستاندارد HTML و طراحی Layout صفحه میتونیم CSS رو بکار ببریم.
------------------------------------------------------------------------------
*مزایای CSS : (در مورد هرکدوم از این مزایا میشه مفصل صحبت کرد و مفهوم اونا رو در عمل باید دید)
- CSS در وقت صرفه جویی میکنه (همونطور که گفتم با تعیین یکباره مشخصات)
- تغیییرات مجدد تگ های HTML بسیار راحت میشه.
- طراحی صفحه بدون نیاز به تگ های قالب بندی HTML
- طراحی صفحات دینامیک به کمک javascript
- و ...
------------------------------------------------------------------------------
*تشریح دستور CSS :
دستورات CSS از دو بخش تشکیل میشن :
یکی نام تگ(همون تگ های HTML ) و دیگری هم مشخصات اون تگ که بیان کننده ی چگونگی نمایش اجزای انتخاب شدست که داخل {} قرار میگیرن.
هر کدوم از مشخصه ها شامل یک خصوصیت و علامت : و یک یا چند مقدار (Value) و علامت ; در پایان هستن.
مثال :
body{font-family: Tahoma, Arial, sans-serif;color: black;background: white;margin: 8px;}
------------------------------------------------------------------------------
*روش های بکارگیری CSS :
- CSS محلی
- CSS داخلی
- CSS خارجی
روش محلی بر داخلی تقدم داره و روش داخلی بر روش خارجی تقدم داره.
- CSS محلی در داخل یک تگ HTML اسفاده میشه که مزایایی نسبت به تگ های HTML داره ولی قدرت زیادی نداره.
- CSS داخلی برای صفحات مجزایی که متن طولانی دارن بکار میره.تو این روش میشه Style رو بالای HTML گذاشت و برای کل اون صفحه تعریف کرد.(داخل تگ Head از HTML تعریف میشه.)
- CSS خارجی که بهترین و قویترین (و به نظر من ساده تر از دو نوع قبلی) نوع CSS هستش رو میشه برای تمام صفحات وب بصورت یکپارچه بکار برد.این نوع CSS برای تمام صفحات ظاهر یکسان و متداول میتونه بوجود بیاره.
------------------------------------------------------------------------------
*نحوه ی ایجاد CSS محلی
-درون تگ ویژگی “ =style تایپ کنید
-نوشتن خصوصیت ها و مقادیر (علامت ; بین هر یک از آن ها)
-علامت “(گیومه برای بستن)
------------------------------------------------------------------------------
*نحوه ی ایجاد CSS داخلی
-ایجاد تگ <style> داخل تگ <head>
-تایپ نام تگ
-علامت }
-نوشتن خصوصیت ها و مقادیر (علامت ; بین هر یک از آن ها)
-علامت {
-تایپ تگ پایانی <style/>
------------------------------------------------------------------------------
*نحوه ی ایجاد CSS خارجی
-ایجاد یک سند متنی (فایل Notepad)
-تایپ نام تگ
-علامت }
-نوشتن خصوصیت ها و مقادیر (علامت ; بین هر یک از آن ها)
-علامت {
-ذخیره سند در قالب Text only و با پسوند CSS
-لینک کردن در صفحه ی وب به CSS خارجی فرضاً به شکل زیر :
<link href="Site.css" rel="stylesheet" type="text/css" />
============================================
*مباحث دیگه ای هم که بعنوان کلیات تو مبحث CSS میشه بهش پرداخت اینا هستن که ان شاءالله اگه عمری بود توی ارسالای بعدی بهشون اشاره میکنم:
- استفاده ازCLASSو ID درطراحی با CSS
- تگ های تولیدکننده برای ترکیب با CLASS ها و IDها
- مشخص کردن style برای لینک ها
- تعیین فرمت متن با استفاده از CSS(مبحث کلی)
- طراحی Layout صفحه با استفاده از CSS (مبحث کلی)
============================================
دوستان توجه کنن کسانی که مایل به یادگیری CSS هستن قبلش حتماً باید با HTML آشنا (و البته تا حدودی مسلط!) باشن وگرنه یادگیری CSS به تنهایی و قبل از HTML معنایی نداره!
در واقع بطور کلی میشه گفت CSS این امکان رو ایجاد میکنه تا طراح بتونه چندین مشخصه توی طراحی صفحه رو به یکباره تعیین کنه و همچنین میشه گفت برای کنترل دقیق مشخصات صفحه و استاندارد کردن تگ های غیراستاندارد HTML و طراحی Layout صفحه میتونیم CSS رو بکار ببریم.
------------------------------------------------------------------------------
*مزایای CSS : (در مورد هرکدوم از این مزایا میشه مفصل صحبت کرد و مفهوم اونا رو در عمل باید دید)
- CSS در وقت صرفه جویی میکنه (همونطور که گفتم با تعیین یکباره مشخصات)
- تغیییرات مجدد تگ های HTML بسیار راحت میشه.
- طراحی صفحه بدون نیاز به تگ های قالب بندی HTML
- طراحی صفحات دینامیک به کمک javascript
- و ...
------------------------------------------------------------------------------
*تشریح دستور CSS :
دستورات CSS از دو بخش تشکیل میشن :
یکی نام تگ(همون تگ های HTML ) و دیگری هم مشخصات اون تگ که بیان کننده ی چگونگی نمایش اجزای انتخاب شدست که داخل {} قرار میگیرن.
هر کدوم از مشخصه ها شامل یک خصوصیت و علامت : و یک یا چند مقدار (Value) و علامت ; در پایان هستن.
مثال :
body{font-family: Tahoma, Arial, sans-serif;color: black;background: white;margin: 8px;}
------------------------------------------------------------------------------
*روش های بکارگیری CSS :
- CSS محلی
- CSS داخلی
- CSS خارجی
روش محلی بر داخلی تقدم داره و روش داخلی بر روش خارجی تقدم داره.
- CSS محلی در داخل یک تگ HTML اسفاده میشه که مزایایی نسبت به تگ های HTML داره ولی قدرت زیادی نداره.
- CSS داخلی برای صفحات مجزایی که متن طولانی دارن بکار میره.تو این روش میشه Style رو بالای HTML گذاشت و برای کل اون صفحه تعریف کرد.(داخل تگ Head از HTML تعریف میشه.)
- CSS خارجی که بهترین و قویترین (و به نظر من ساده تر از دو نوع قبلی) نوع CSS هستش رو میشه برای تمام صفحات وب بصورت یکپارچه بکار برد.این نوع CSS برای تمام صفحات ظاهر یکسان و متداول میتونه بوجود بیاره.
------------------------------------------------------------------------------
*نحوه ی ایجاد CSS محلی
-درون تگ ویژگی “ =style تایپ کنید
-نوشتن خصوصیت ها و مقادیر (علامت ; بین هر یک از آن ها)
-علامت “(گیومه برای بستن)
------------------------------------------------------------------------------
*نحوه ی ایجاد CSS داخلی
-ایجاد تگ <style> داخل تگ <head>
-تایپ نام تگ
-علامت }
-نوشتن خصوصیت ها و مقادیر (علامت ; بین هر یک از آن ها)
-علامت {
-تایپ تگ پایانی <style/>
------------------------------------------------------------------------------
*نحوه ی ایجاد CSS خارجی
-ایجاد یک سند متنی (فایل Notepad)
-تایپ نام تگ
-علامت }
-نوشتن خصوصیت ها و مقادیر (علامت ; بین هر یک از آن ها)
-علامت {
-ذخیره سند در قالب Text only و با پسوند CSS
-لینک کردن در صفحه ی وب به CSS خارجی فرضاً به شکل زیر :
<link href="Site.css" rel="stylesheet" type="text/css" />
============================================
*مباحث دیگه ای هم که بعنوان کلیات تو مبحث CSS میشه بهش پرداخت اینا هستن که ان شاءالله اگه عمری بود توی ارسالای بعدی بهشون اشاره میکنم:
- استفاده ازCLASSو ID درطراحی با CSS
- تگ های تولیدکننده برای ترکیب با CLASS ها و IDها
- مشخص کردن style برای لینک ها
- تعیین فرمت متن با استفاده از CSS(مبحث کلی)
- طراحی Layout صفحه با استفاده از CSS (مبحث کلی)
============================================
دوستان توجه کنن کسانی که مایل به یادگیری CSS هستن قبلش حتماً باید با HTML آشنا (و البته تا حدودی مسلط!) باشن وگرنه یادگیری CSS به تنهایی و قبل از HTML معنایی نداره!