آموزش جامع و کامل زبان css

**Bad Sector** · 26th December 2013 03:49 PM

سلام به دوستان گلم

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

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

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

**Bad Sector** · 26th December 2013 04:21 PM

پیش نیاز:
خوب دوستان عزیز در ابتدای یادگیری این زبان باید بگم که این زبان هم مثل بقیه زبان ها نیاز به پیش نیاز دارد که پیش نیاز این زبان یاد داشتن html می باشد. پس اگر هنوز این زبان را یاد نگرفته اید پیشنهاد می کنم که اول آنرا فرا گرفته و بعد با ما همراه شوید.

css چیست ؟
در واقع باید بگم که زبان css زبانی هست که شما با اون می تونین تمام شکل و ظاهر و خصوصیات وب سایت خودتون رو درست کنین و هر طوری که دوست دارین اونو پیاده سازی کنین.

حالا چرا باید css رو یاد بگیریم؟
ما با یاد گرفتن این زبان می تونیم در وقتمون صرفه جویی کنیم و از حجم کد های سایتمون کم کنیم تا سایتی سبک و زیبا و از همه مهمتر اینکه سرعت لود صفحه تون رو زیاد کنین و فقط و فقط با یادگیری این زبان بسیار ساده و در عین حال کارآمد.

**Bad Sector** · 26th December 2013 10:36 PM

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

Style.css فایل ما می باشد که ما کد های خود را در آن قرار داده ایم و می خواهیم یک ارتباط با فایل اصلی که نام آن index.html هست ایجاد کنیم .
برای این کار با این کد:

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

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

"href="c:\newfolder\stayle.css

در قسمت type نوع فایل رو مشخص می کنه که در اینجا فایل ما یک فایل css متنی هست.

"type="text/css

و در قمست پایانی rel می باشد که مشخص کننده این است که فایل شما یک فایل css می باشد.

"rel="stylesheet

و این بود روشی که با اون شما می نونین یک ارتباط بین این دو فایل برقرار کنین.
روش دیگری هم وجود دارد که شما بصورت مستقیم در درون تگ style که در درون خود فایل html تعریف می کنین قرار می گیرد ولی بخاطر بالا بردن حجم کد نویسی فایل html من این روش رو توضیح نمی دم و توصیه نمی کنم.

دانلود فایل آموزشی در قالب pdf

**Bad Sector** · 28th December 2013 04:23 PM

سلام به دوستان عزیزم

در این قسمت می خوام در مورد اصول کلی زبان css حرف بزنم.

بطور کلی هر سبک css دو بخش کلی داره که شامل :

1- Selector (سلکتورها)

2- Property (خصوصیات)

تشکیل شده که هر کدوم خودشون به قسمت های مختلفی تقسیم میشن.

سلکتورها به پنج قسمت :

1- سلکتورهای برچسب

2- سلکتورهای کلاس کاذب

3- سلکتورهای کلاس

4- سلکتورهای مفهومی

5- سلکتورهای خصوصی

و در این قسمت من می خوام در مورد سلکتورهای برچسب براتون بگم و در کل ساده ترین نوع سلکتورها همین نوع هست .

تو این روش یک تگ یا برچسب از زبان html انتخاب می کنیم و با استفاده از این روش خصوصیات خاصی رو به اون تگ یا برچسب میدیم.

پس با هم میریم تا ببینیم که این قسمت شامل چه دستوراتی هست.

برای مثال این صفحه html ما اگر باشد:

کد PHP:



<html>

<head>
<title>Njavan</title>
<link rel="stylesheet" type="text/css" href="stayle.css">

</head>

<body>
<h1> عنوان صفحه </h1>
<p>به سایت نسل جوان خوش آمدید</p>
<div/>این قسمت مربوط به کلاس می باشد<"div class="header>
</body>
</html>

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

خوب برای ادامه ما در صفحه CSS خودمون که داریم و اگر ندارید همان طور که گفتم می تونید خودتون تولید کنید. برای این کار هم کافیه در صفحه Notpad آنرا با نام

دلخواه مثلا : style.css ذخیره کنید و در کنار فایل html خود قرار بدین و یا هر مسیر که دوست دارید ولی در جلسه قبل گفتیم که می تونین مسیر اونو هم تغییر بدین.

خوب حالا که تگ body رو انتخاب کردیم و می خواهیم به اون خصوصیاتی رو نصبت بدیم.

صفحه css خودتون رو باز کنین و اینگونه بنویسین:

کد PHP:



} body 

;background-color: #000000
;font-family: tahoma
;font-size: 14pt
;color: #ffffff

{

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

بودی که من یک کلاس دیگه براتون تعریف کردم که نشون بدم که می تونیم حتی در داخل تگ body باز هم با سکلتور تغییراتی دوباره بدیم . یعنی ما می تونیم به

کلاس header که اضافه کردیم هم تغییراتی رو اضافه کنیم . پس هیچ محدودیتی ما نداریم و می تونیم هر تگی رو در هر موقعیتی یکسری خصوصیات روش اعمال کنیم.

که تگ header رو که مربوط به جلسات بعدی میشه رو براتون در آینده خواهم گفت .

**Bad Sector** · 2nd January 2014 04:10 PM

خوب دوستان عزیز در این قسمت در مورد سلکتورهای کلاس می خواهیم صحبت کنیم و ببینیم که عملکردهای این دستور به چه صورت هست.

خوب شما با استفاده از این دستور می تونین قسمت های کوچکتری از سایتتون رو برای اعمال تغییرات انتخاب کنین.

حالا میریم برای ادامه اموزشمون.

با توجه به مثال جلسه قبلمون :

کد PHP:



<html>

<head>
<title>Njavan</title>
<link rel="stylesheet" type="text/css" href="stayle.css">

</head>

<body>
<h1> عنوان صفحه </h1>
<p>به سایت نسل جوان خوش آمدید</p>
<div/>این یک متن آزمایشی هست<"div class="header></body>

</html>

در اینجا ما یک کلاس برای هدر سایتمون تعریف کردیم و می خواهیم که روی اون تعغییراتی رو اعمال کنیم.

خوب ما بازم وارد صفحه CSS خودمون میشیم و مثل قبل میریم که این کلاس رو تعریف کنیم تا تغییرات روی اون اعمال بشه.

نکته :
در تعریف کلاس ها باید به این نکته توجه کنیم که همیشه برای تعریف این کلاس ما به اول این دستور یک نقطه اضافه می کنیم و بعد کلاسمون رو می نویسیم . به عنوان مثال :

کد PHP:


.header {

دستورات و خصوصیات

{

در واقع اینو هم بگم که ما در خصوصیاتی که به body داده بودیم باعث شده بود که تمام خصوصیات صفحه ما تغییر کنه ولی با کلاس ها شما این

کارو می تونین به قسمت خاصی از صفحه خودتون تغییرات بدین.

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

کد PHP:



.header {

background-color: #000000;
width: 600 px;
height: 100px;
color: #ff0000;
direction: rtl; 

}

خوب ما در اینجا مشخص کردیم که کلاس هدر ما این خصوصیات رو داشته باشه. یعنی رنگ بگراندمون رو سفید و طول رو 600 پیکسل و عرض 100 پیکسل و رنگ متنمون رو قرمز و نوع راست چین چپ چین رو هم روی rtl

که مشخص کننده راست به چپ هست قرار دادیم.

اینم دستورات کلاس که به همین آسونی بود .

دوستان اگه تو ترتیب کدها مشکلی بود دیگه ببخشید . هر کاری می کنم خوب نمی شن . شاید مجبور بشم از این به بعد با عکس کدها رو بذارم.

موفق باشین

موضوع: آموزش جامع و کامل زبان css

ابزارهای موضوع

نحوه نمایش موضوع

آموزش جامع و کامل زبان css

2 کاربر از پست مفید Bad Sector سپاس کرده اند .

پاسخ : آموزش جامع و کامل زبان css

3 کاربر از پست مفید Bad Sector سپاس کرده اند .

پاسخ : آموزش جامع و کامل زبان css

5 کاربر از پست مفید Bad Sector سپاس کرده اند .

پاسخ : آموزش جامع و کامل زبان css

3 کاربر از پست مفید Bad Sector سپاس کرده اند .

پاسخ : آموزش جامع و کامل زبان css

3 کاربر از پست مفید Bad Sector سپاس کرده اند .

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

موضوعات مشابه

آموزش توتال استیشن های South و آموزش مقدماتی Land

استرس مادر، حتي پيش از لقاح، ممکن است بر مرگ و مير نوزادش اثر بگذارد يک بررسي جديد نشان مي‌دهد احتمال زنده ماندن نوزاد مادراني که در ماه‌

اطلاعيه: حمايت بنياد ملي نخبگان از برگزيدگان مسابقات علمي دانش آموزي مورد تاييد وزارت آموزش و پرورش

توصيه‌هاي وزارت بهداشت، درمان و آموزش پزشكي به عزاداران حسيني

حاجي‌بابايي گزينه اصلي رئيس جمهور براي تصدي وزارت آموزش و پرورش است

کلمات کلیدی این موضوع

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش