راسخون

کارگاه آموزشی مقدماتی css

hossein201273 کاربر طلایی1
|
تعداد پست ها : 26938
|
تاریخ عضویت : مهر 1392 

با سلام خدمت دوستان :دوکارگاه آموزشی اچ تی ام ال مقدماتی واچ تی ام ال پیشرفته را پشت سر گذاشتیم .پیش زمینه ای بود که اول با مبانی اچ تی ام ال در قالب سازی آشنا شویم ودر مراحل بعد که الان محقق می شود به سراغ سی اس اس قالب برویم .پس با ماه همراه باشید .قصد داریم در 6مبحث در 6روز این مبحث را پیگیری کنیم .بعد از این کارگاه آموزشی نیزسه کارگاه آموزشی دیگر مرتبط با cssخواهیم داشت .

خبری خوش ،ان شالله در پایانبرگزاری چهار مبحث آموزشی که مباحث آخر دررابطه با آموزش  قالب سازی وبلاگ هست در تاپیکی با عنوان پرسش وپاسخ درباره قالب سازی وبلاگ با حضور مدیر محترم تالار فناوری اطلاعات کاربر محترم samsam برگزار خواهد شد تا شما سوالات قالبی خود را بپرسشید واز راهنمایی هاتی ایشان بهره ببرید.

سپاسگزارم

پس با ما همراه باشید...

تاریخ شروع مبحث آموزش :20اسفند 1392

تاریخ پایان آموزش:26اسفند 1392

hossein201273 کاربر طلایی1
|
تعداد پست ها : 26938
|
تاریخ عضویت : مهر 1392 

 

hossein201273 کاربر طلایی1
|
تعداد پست ها : 26938
|
تاریخ عضویت : مهر 1392 

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

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

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

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

  • CSS در وقت صرفه جویی میکنه (همونطور که گفتم با تعیین یکباره مشخصات)
  • تغیییرات مجدد تگ های HTML بسیار راحت میشه.
  • طراحی صفحه بدون نیاز به تگ های قالب بندی HTML 
  • طراحی صفحات دینامیک به کمک javascript
  • و ...
hossein201273 کاربر طلایی1
|
تعداد پست ها : 26938
|
تاریخ عضویت : مهر 1392 
hossein201273 کاربر طلایی1
|
تعداد پست ها : 26938
|
تاریخ عضویت : مهر 1392 
hossein201273 کاربر طلایی1
|
تعداد پست ها : 26938
|
تاریخ عضویت : مهر 1392 
a2h کاربر تازه وارد
|
تعداد پست ها : 79
|
تاریخ عضویت : دی 1392 

با اجازه دوست عزیز من هم این رو بک توضیحی میدم 

لازم به ذکر است قبل از شروع CSS باید حتماً Html رو یاد بگیرید ، یادگیری Html خیلی سخت نیست و در مدت کوتاهی می توانید به آن مسلط شوید. Html زبانی است که تمامی عناصر موجود در صفحات وب مانند جعبه های متن، دکمه ها و غیره توسط آن ساخته می شود و با ترکیب آن با کدهای CSS ظاهر صفحه شکل می گیرد.

 

 CSS چیست؟ 
CSS یا همان مخفف Cascading Style Sheet (شیوه نامه ی آبشاری) یک زبان برنامه نویسی تحت وب جهت شکل دهی، موقعیت سازی و زیبا سازی صفحات وب است. در واقع CSS همان سندیست که مرورگر از روی آن می فهمد که کد های HTML را باید با چه ویژگی هایی به نمایش بگذارد و هر عنصر در صفحه چه خصوصیاتی دارد.
تا به حال بالاترین ورژن  Css3 , Cssاست که با آمدن آن و HTML5 ، به زودی J-Query از بین خواهد رفت چرا که این ورژن دارای انیمیشن و ... و زیبا سازی های جدیدی نیز هست.

چراباید از CSS استفاده کنیم؟

CSS می تواند در بسیاری از کارهای تکراری ، زمان طراحی و حجم کدهای سایت صرفه جویی کند. شما میتوانید یکبار خصوصیات ظاهری عناصر را در وب سایت توسط دستورات CSS مشخص کنید، سپس هرکجا در وب سایت از عنصر مورد نظر استفاده کردید، خصوصیات مشخص شده را به آن عنصر اعمال کنید. همچنین هر زمان نیز تصمیم بگیرید ظاهر وب سایت را تغییر دهید، کافیست به محلی که دستورات CSS را نوشته اید مراجعه کرده و آنها را تغییر دهید تا ظاهر عنصر مورد نظر در تمام صفحات وب سایت تغییر کند و نیازی به تغییر تمام صفحات سایت نیست. بنابراین حجم صفحات وب سایت شما نیز کمتر خواهد شد و در نتیجه سرعت بارگزاری صفحه وب شما افزایش خواهد یافت. همچنین دستورات CSS می تواند در یک فایل جداگانه از کدهای HTML شما نوشته شود و این تفکیک تمیزی و پیچیدگی کمتر کدها را در تمامی وب سایت برای شما به ارمغان می آورد. خوب است بدانید گوگل در رتبه بندی وب سایت ها، سرعت بارگزاری و کیفیت کدها را نیز مدنظر قرار میدهد و وب سایت هایی را که سرعت بارگذاری آنها مناسب نباشد، کمتر به جستجو کنندگان معرفی خواهد کرد.

روش های استفاده از  CSS در کد های HTML ؟ 
 CSSرا به 3 روش می توان مورد استفاده قرار داد که در زیر می بینید:
1. میان تگ Head ، در تگ Style :

کد:
<html>
<head>
<style type=”text/css”>
CSS CODES
</style>
</head>
</html>

2. استفاده در هر تگ:

کد:
<div style=”CSS CODES”> CODE </div>

3. استفاده در تگ Head و فراخوانی سند CSS:

کد:
<html>
<head>
<link href=”../CSS-FILE-ADDRESS.css” type=”text/css” rel=”StyleShreet”/>
</head>
</html>
نکته: خصوصیات نزدیک تر به تگ ها همیشه اولویت دارد. یعنی اگر شما رنگ متن را در فایل فراخوانی شده (حالت3) قرمز ، در تگ Head و بین تگ استایل (حالت1) آبی و در تگ، (حالت2) زرد انتخاب کرده باشید ؛ اولویت با زرد است. اما اگر حالت تگ را نداشته باشد آبی و در غیر این صورت قرمز خواهد شد.

در بین 3 مدلی که در بالا گفته شد ، سومین حالت معمول تر است ولی سرعت کمتری نسبت به بقیه ی حالات دارد. یعنی باعث سنگین تر شدن قالب می شود ، چرا که در این حالت مرورگر باید فایل را در آدرسی دیگر بخواند ولی در حالات دیگر ، مرورگر کد ها را در کد قالب پیدا می کند.

 

a2h کاربر تازه وارد
|
تعداد پست ها : 79
|
تاریخ عضویت : دی 1392 

ساختار نحوی دستورات CSS


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

....

ساختار نحوی دستورات CSS


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

. میان تگ Head ، در تگ Style :

کد:
<html>
<head>
<style type=”text/css”>
CSS CODES
</style>
</head>
</html>
:: که دستور سی اس اس شما بجای CSS CODES قرار می گیرد 

2. استفاده در هر تگ:

کد:
<div style=”CSS CODES”> CODE </div>

3. استفاده در تگ Head و فراخوانی سند CSS:

کد:
<html>
<head>
<link href=”../CSS-FILE-ADDRESS.css” type=”text/css” rel=”StyleShreet”/>
</head>
</html>
:: در روش زیر شما دستورات رو در فایلی با نام دلخواه با پسوند css. ذخیره کنید و لینک رو به جای ../CSS-FILE-ADDRESS.css قرار دهید.
 
نمونه ای از یک دستور CSS :
 
 
دستوری که می بینید مربوط میشه به حالت سوم یعنی  استفاده در تگ Head و فراخوانی سند CSS که دستور بالا نمایی از یک دستور در فایل css می باشدکه به یک تگ h1  دستور داده شده که رنگ تمام تگ های h1 آبی باشه و اندازه قلم هم 12 پیکسل باشد.
با این حال به عبارتی میشه :
Selector : این بخش نام عنصر HTML است که می خواهیم استایل مورد نظر را بر روی آن اعمال کنیم.
Declaration : بخشی که در میان علامت {} نوشته می شود، بخش اعلان نام دارد و در این قسمت شما باید نام خاصیت مورد نظر که می خواهید اعمال شود و مقدار آن را تعیین کنید. در این مثال
p {color:red;text-align:center;}
برای اینکه دستورات خوانایی بیشتری داشته باشد و بتوانید با یک نگاه سریعا بخش مورد نظر خود را پیدا کنید، می توانید هر جفت خاصیت و مقدار را در یک خط بنویسید:
 
p {
     color:red;
     text-align:center;
}
اما حالت دوم یعنی :
 
<div style=”CSS CODES”> CODE </div>

در اینجا دستورات CSS رو داخل تگ style قرار می دهیم. به این صورت
 
style="color#000000;font-family:tahoma;font-size:12px;"
 
این دستورو یا خاصیت رو میتونیم هر جا که دلمون میخواد قرار بدیم البته نه همه جا فقط در جاهایی که بشه بهش خاصیت های مختلف داد من چندتا از تگ های HTML که میشه بهش خاصیت CSS رو داد اینجا مینویسم :
<P></P>
مثال :
<P style="color#000000;font-family:tahoma;font-size:12px;" >متن شما </P>
<h3></h3>
مثال :
<h3 style="color#dddddd;font-family:Arial;font-size:14px;" >متن شما </h3>
امید وارم متوجه شده باشید حالا اما اینجا داشتیم به متن خاصیت میدادیم برای دیگر تگ ها هم به همین صورته البته اونجا دیگه با خاصیت هایی که می خوایم.
 
حالت اول هم که تقریبا مثل حالت سوم میمونه به مثال زیر توجه کنید متوجه میشید .
 
<style type=”text/css”>
 
p {
     color:red;
     text-align:center;
}
 
</style>
CSS Comment :
در تمامی زبان های برنامه نویسی امکانی وجود دارد که در کنار کدهای اصلی خود، توضیحاتی بنویسید که کدهای آن قسمت را شرح میدهند و هنگامی که مدت ها بعد شما و یا شخص دیگری به آنها مراجعه میکند، این توضیحات اضافه کمک بسیاری برای تغییرخواهند کرد. این توضیحات هنگام اجرای سایت نادیده گرفته می شوند بنابراین هیچ خطایی بوجود نخواهد آمد و می توانید با خیال راحت هرچه را که می خواهید با هر زبانی درج کنید. شرط اینکار اینست که توضیحات خود را با علامت "/*" شروع کنید و با علامت "*/" به پایان برسانید.
/*This is a comment*/
p {
    text-align:center;
/*This is another comment*/
    color:black; font-family:arial;
}
id و Class در CSS :
همانطور که در بخش ساختار نحوی دستورات مشاهده کردید، در بخش Selector عنصری که می خواهیم استایل روی آن اعمال شود را ذکر میکنیم. به عنوان نمونه در تمامی دستورات فوق عنصر مورد نظر پاراگراف بود و استایل های نوشته شده در براکت ها، بر روی همه پاراگراف های موجود در صفحه وب اعمال میشد. حالا اگر بخواهیم دستورات استایل مورد نظر فقط روی یک عنصر در صفحه وب و یا فقط گروهی از عناصر مورد نظر ما اعمال شود باید از id و Class استفاده کنیم.
 
اعمال دستورات فقط بر روی یک عنصر واحد توسط id:
برای این منظور ابتد باید به کدهای HTML رفته و برای عنصر مورد نظر صفت id را تعریف کنید. سپس به بخش دستورات CSS رفته و در بخش Selector ، صفت id که برای عنصر مورد نظر تعریف کرده اید را نوشته و یک نماد "#" قبل از آن اضافه کنید.
مثلا چنانچه بخواهیم دستورات فقط بر روی یک پاراگراف خاص اعمال شود، ابتدا برای آن پاراگراف یک صفت id در کدهای HTMLتعریف میکنیم :
<p id="para1">This is a Paragraph.<p>
سپس در دستورات CSS در بخش Selector مقدار صفت id تعریف شده را همراه با یک علامت "#" می نویسیم: 
#para1{
            text-align:center;
            color:red;
}
بدین ترتیب این دستورات فقط بر روی پاراگرافی اعمال میشوند که دارای id برابر با para1 است و سایر پاراگراف های موجود در صفحه از این دستورات تاثیرپذیر نیستند.
نکته :  هرگز صفت id را با عدد شروع نکنید چراکه در مرورگر فایرفاکس کار نخواهد کرد.
 
اعمال دستورات بر روی یک گروه از عناصر توسط Class
برای این منظور ابتد باید به کدهای HTML رفته و برای همه عناصری که میخواهید خصوصیت های ظاهری یکسان داشته باشند صفت Class را تعریف کنید. سپس به بخش دستورات CSS رفته و در بخش Selector ، صفت Class که برای عناصر مورد نظر تعریف کرده اید را نوشته و یک نماد "." قبل از آن اضافه کنید
مثلا چنانچه بخواهیم دستورات بر روی تعدادی پاراگراف مورد نظر ما اعمال شود، ابتدا برای آن دسته از پاراگراف ها یک صفت Classمشترک در کدهای HTML تعریف میکنیم :
<p class="cneter">This is a Paragraph.</p>
سپس در دستورات CSS در بخش Selector مقدار صفت Class تعریف شده را همراه با یک علامت "." می نویسیم:
.cneter {
             text-align:center; 
}
بدین ترتیب این دستورات فقط بر روی پاراگراف هایی اعمال میشوند که دارای Class برابر با Center هستند و سایر پاراگراف های موجود در صفحه از این دستورات تاثیرپذیر نیستند.
نکته: هرگز صفت Class را با عدد شروع نکنید چراکه فقط در مرورگر اینترنت اکسپلورر کار خواهد کرد.
 
خوب امیدوارم راضی کننده باشه امروزم تموم شد . قرار بود من جمعه به جمعه آموزش بزارم ولی انگار  که این بار زود تر شروع شد. D:
 
در صوتی که سوالی داشتید در همین پست در قسمت نظرات مطرح کنید .
 
منبع کمکی جهت آموزش دادن بهتر :
  • وبسایتها

 

hossein201273 کاربر طلایی1
|
تعداد پست ها : 26938
|
تاریخ عضویت : مهر 1392 
hossein201273 کاربر طلایی1
|
تعداد پست ها : 26938
|
تاریخ عضویت : مهر 1392 

این کارگاه آموزشی به پایان رسید ،کارگاه آموزشی بعدی با مدیریت دیگر تالار آقای شیرانی ایجاد ومطالب آموزشیش گذاشته خواهد شد