0

مقدمات آموزش CSS

 
hosseinb68
hosseinb68
کاربر طلایی1
تاریخ عضویت : بهمن 1389 
تعداد پست ها : 1269
محل سکونت : بوشهر

مقدمات آموزش CSS

برای یادگیری و آموزش css نیاز به یک سری مقدمات ، درباره سی اس اس و اصول نوشتن آن دارید.

توصیه می شود این بخش را به دقت مطالعه نمایید ، تا از ابتدا به درستی در آموزش سی اس اس پیش بروید.

یک شنبه 26 مرداد 1393  11:50 AM
تشکرات از این پست
yaskabod
hosseinb68
hosseinb68
کاربر طلایی1
تاریخ عضویت : بهمن 1389 
تعداد پست ها : 1269
محل سکونت : بوشهر

پاسخ به: مقدمات آموزش CSS

Css چیست ؟ (سی اس اس چیست)

css چیست ؟ الگوهای آبشاری یا روی‌ انداز آبشاری سَبْک یا سی‌ اس‌ اس (به انگلیسی: CSS: Cascading Style Sheets ) در کنار اچ‌تی‌ام‌ال هستهٔ فناوری ساخت صفحه‌های وب هستند. سی‌اس‌اس روشی ساده برای نمایش چیدمان و جلوه‌های تصویری (مانند نوع قلم، رنگ و اندازه‌ها) بر صفحه‌های وب است. الگوهای آبشاری از جنس زبان‌های نشانه‌گذاری، با ساختار متن سادهٔ رایانه هستند و درون هرکدام، دستورهایی آبشار مانند و پی‌درپی، برای چگونگی نمایش هر صفحه وب افزوده می‌شود. به گفته‌ای ساده تر، این دستورها روش نشان داده شدن قلم‌ها و اندازه شان، رنگ‌ها و پس زمینه‌ها، روش چیدمان موزاییک‌های دربرگیرنده داده‌ها (دیواره ها)، و بسیاری دیگر از عنصرهای ساختار هر صفحه وب را، درون خود جای می‌دهند.

کاربرد اصلی css چیست ؟ بیشترین استفاده‌ای که از این زبان در حال حاضر می‌شود مشخص کردن سبک صفحهٔ وب اچ‌تی‌ام‌ال و اکس‌اچ‌تی‌ام‌ال است ولی آن را می‌توان بر هر نوع مستند اکس‌ام‌ال از جمله اس‌وی‌جی و اکس‌یوال اعمال کرد. نگهداری و تغییر مشخصات سی‌اس‌اس به عهدهٔ کنسرسیوم وب جهانگستر است.

یکی از مهمترین نکته ها برای طراحی سایت ، استفاده بهینه از  css میباشد در این بخش از آموزش css به شرح ویژگی های اساسی و مهم در طراحی وب سایت میپردازیم و روشهای اضافه کردن CSS به صفحه را مورد بررسی قرار میدهیم.

سه روش برای اضافه کردن CSS به صفحه وجود دارد :

  • CSS خارجی
  • CSS داخلی
  • سبک درون خطی

برای آسان کردن کار موتور های جستجو سعی کنید از انیمیشن های فلش و یا تگ های span بوسیله css ،  کمتر استفاده کنید. با استفاده از css از دوباره نویسی کدهای HTML که باعث کند شدن لود صفحه میشود جلوگیری میکنیم.

یک شنبه 26 مرداد 1393  11:51 AM
تشکرات از این پست
hosseinb68
hosseinb68
کاربر طلایی1
تاریخ عضویت : بهمن 1389 
تعداد پست ها : 1269
محل سکونت : بوشهر

مزایای Css

مزایای Css

با اینکه در سال‌های نخست پیدایش طراحی وب، طراح‌ها از جدول‌ها و ترفند پنهان سازی آنها برای چیدمان کمک می‌گرفتند، روش مدرن طراحی وب، این روند را منسوخ کرده است. چیدمان اکنون، تنها با دیواره (یا DIV)، که برتری‌های فراوانی نسبت به جدول‌ها (یا TABLE) دارند، انجام می‌شود. هر دیواره، یک موزاییک مجازی بخش کننده صفحه‌است که کار چیدمان را آسان‌تر انجام می‌دهد. جدول‌ها به جایگاه نمایش داده‌های ستونی خود بازگشتند و دیگر از آنها برای چیدن داده‌های صفحه‌های وب استفاده نمی‌شود. الگوهای آبشاری، افزون بر سبک تر کردن هر صفحه وب و پاک‌تر کردن آن، از داده‌های تصویری و نمایشی استاندارد، روش طراحی وب را به میزان فراوانی آسان تر و دسترسایی و کارایی وب را بهتر کرده‌اند.

به کمک CSS میتونیم از دوباره نویسی كدهای HTML که باعث مشکل شدن کدنویسی و همچنین كند شدن سرعت بارگذاری صفحه در اینترنت میشه جلوگیری كنیم.

برای مثال می تونیم یك بار نوع فونت مورد استفاده در یك صفحه را تعیین كنیم و دیگر مجبور نباشیم كد مربوط به فونت را در صفحه به كارببریم.
در واقع بطور کلی میشه گفت CSS این امکان رو ایجاد میکنه تا طراح بتونه چندین مشخصه توی طراحی صفحه رو به یکباره تعیین کنه و همچنین میشه گفت برای کنترل دقیق مشخصات صفحه و استاندارد کردن تگ های غیراستاندارد HTML و طراحی Layout صفحه میتونیم CSS رو بکار ببریم.

مزایای CSS بصورت خلاصه : (در مورد هرکدوم از این مزایا میشه مفصل صحبت کرد و مفهوم اونا رو در عمل باید دید)

  • CSS در وقت صرفه جویی میکنه (همونطور که گفتم با تعیین یکباره مشخصات)
  • تغیییرات مجدد تگ های HTML بسیار راحت میشه.
  • طراحی صفحه بدون نیاز به تگ های قالب بندی HTML 
  • طراحی صفحات دینامیک به کمک javascript
  • و ...
یک شنبه 26 مرداد 1393  11:52 AM
تشکرات از این پست
hosseinb68
hosseinb68
کاربر طلایی1
تاریخ عضویت : بهمن 1389 
تعداد پست ها : 1269
محل سکونت : بوشهر

طریقه نوشتن CSS - خاصیت Style تگ ها

سبک درون خطی ( Inline )

این روش از نوشتن css دارای بالاترین اولویت اجرا نسبت به دو روش دیگر است. استفاده از این روش تمامی Style های موجود در دو روش دیگر را نادیده میگیرد.این روش در واقع  هدف واقعی  استفاده از css را کاهش میدهد .

برای اینکه طراحی سایت بهینه تری داشته باشید پیشنهاد میشود که از این روش فقط در مواقع ضروری استفاده کنید.

با استفاده از ویژگی style در یک عنصر میتوانید از این روش نوشتن css استفاده کنید.

مثال :

<p style="background: blue; color: white;">A new background and
font color with inline CSS</p>

یک شنبه 26 مرداد 1393  11:54 AM
تشکرات از این پست
hosseinb68
hosseinb68
کاربر طلایی1
تاریخ عضویت : بهمن 1389 
تعداد پست ها : 1269
محل سکونت : بوشهر

طریقه نوشتن CSS - تگ Style در Head صفحه

CSS داخلی

یکی از روشهای تعریف css استفاده از روش Internal Style Sheet میباشد. برای استفاده از این روش  بایستی کد های CSS را در فایل HTML ، درون تگ<head> قرار دهید.

از این روش فقط در طراحی سایت هایی که تعداد صفحات کمتری دارند ، ولی بهترین روش برای داشتن طراحی سایت حرفه ای استفاده از روش css خارجی میباشد.

مزایای استفاده از این سبک :

  • تنها بر روی صفحاتی که از این سبک استفاده کرده اند تاثیر میگذارد.
  • بر خلاف سبک درون خطی ، این روش میتواند از خاصیت ارث بری کلاس ها استفاده کند.برای مثال میتوانید از یک Style در چندین جای همان صفحه اسفاده کنید.
  • این سبک ممکن است اولویت بالاتری از CSS خارجی ها داشته باشند.

معایب استفاده از این سبک : 

  • تنها در صفحاتی که در آن هستند تاثیر میگذارند.
  • افزایش زمان بارگزاری صفحه 

<head>
<style>
           hr {color:silver;}
           p {margin-left:20px;}
           body {background-image:url("images/bg.gif");}
</style>
</head>

یک شنبه 26 مرداد 1393  11:56 AM
تشکرات از این پست
hosseinb68
hosseinb68
کاربر طلایی1
تاریخ عضویت : بهمن 1389 
تعداد پست ها : 1269
محل سکونت : بوشهر

طریقه نوشتن CSS - فایل خارجی در پروژه

CSS خارجی

یکی از روشهای تعریف css استفاده از روش External Style Sheet میباشد.

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

از CSS خارجی زمانی استفاده میشود که آن style در بیشتر صفحات استفاده شده باشد.
با استفاده از CSS خارجی ، شما با تغییر دادن تنهایک فایل میتوانید ظاهر سایت خود را تغییر دهید.هر صفحه بایستی به CSS Style مورد نظر خود لینک داده شود. بهترین روش برای گذاشتن CSS Style در صفحات وب ، CSS خارجی میباشد
با استفاده از تگ <link> در داخل بخش head شما میتوانید یک CSS خارجی تعریف کنید.
مثال :

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

CSS خارجی را میتوان در هر ویرایشگر متنی نوشت ، CSS Style ها باید با  فرمت css. ذخیره شوند. با استفاده از این سبک در واقع شما از یک Style میتوانید در چندین صفحه از وب سایت خود استفاده کنید.

برای نامگذاری فایل های CSS باید نکاتی را رعایت کرد که در بخش قوانین نام گذاری فایل های CSS  به طور کامل به آن خواهیم پرداخت.

یک شنبه 26 مرداد 1393  11:57 AM
تشکرات از این پست
hosseinb68
hosseinb68
کاربر طلایی1
تاریخ عضویت : بهمن 1389 
تعداد پست ها : 1269
محل سکونت : بوشهر

اصول نوشتن کدهای CSS

اصول نوشتن کدهای CSS

در این بخش از آموزش css ، اصول نوشتن کدهای css را شرح میدهیم.

  • گذاشتن فاصله بین مقدار و واحد اشتباه است

مثال صحیح :

margin-left:20px;

مثال غلط:

margin-left:20 px;

  • قوانین نام گذاری فایل های css
  1. از کاراکترهای خاص استفاده نکنید.کاراکترهای مجاز عبارتند از :حروف a-z ، اعداد 0-9 ، خط زیر (_) ، خط فاصله (-)
  2. از کاراکتر فضای خالی استفاده نکنید ( ) مثلا : style Master.css  ، این نامگذاری میتواند در وب سرور شما مشکل ایجاد کند.
  3. نام فایل بایستی با یک حرف شروع شود.
  4. برای نام گذاری فایل از حروف کوچک استفاده کنید.
  5. نام فایل را تا آنجا که ممکن است کوتاه تعریف نمایید.
  6. فراموش نکنید که حتما فایل را با پسوند css ذخیره کنید.

با رعایت تمامی این نکات شما طراحی سایت بهینه تری را خواهید داشت .

یک شنبه 26 مرداد 1393  11:58 AM
تشکرات از این پست
دسترسی سریع به انجمن ها