Anticom >> آموزشهای حیرت انگیز!!

..:: The Best Way to Learn ::..

Anticom >> آموزشهای حیرت انگیز!!

..:: The Best Way to Learn ::..

آموزش CSS - قسمت 1

بعد از HTML  وارد قسمت هیجانی و بسیار کاربردی تر دنیای وب می شیم ، یعنی آموزش  CSS ، پس با ما باشید.

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

در این آموزش تو  یاد می گیری که چگونه با  CSS میتونی style  ها و لایه های مختلف یک صفحه وب چند گانه را همگی با هم تحت  کنترل خود قرار دهی.


برای شروع چه چیزهایی را باید بدونم ؟


لازمه قبل از شروع CSS  ، آموزش HTML  را که قبلا در سایت ارائه داده بودیم را مطالعه کنید.

اگر می خواهی  به آموزش HTML  بری ، کلیک کن .


CSS چیست ؟


CSS stands for Cascading Style Sheets

Style  به شما میگه که چگونه  عناصر HTML را نمایش دهید ، که در آموزش HTML مفصل به style ها پرداختیم.

Styleها معمولا در Style Sheets  ها ذخیره می شوند.

اگر یادتون باشه گفتیم که به 3 طریق می تونیم  style ها را تعریف کنیم  .

خوبه یک یادآوری هم درباره  Style ها بکنیم .

با یک مثال  :

در این مثال ما یک پاراگراف با استفاده از تگ <p>  تعریف می کنیم .

کد زیر را من در notepad نوشتم شما می تونید در هر ویرایشگر متن کدهای HTML  تون را بنویسید.

<html>

<head>

<body>

<p>AntiCom...The Best Way to Learn</p>

</body>

<head/>

</html>

ساختار کدهای HTML  همیشه به همین صورت هست ، یعنی با تگ <html> شروع  میشه ، و دارای دو قسمت  header و body می باشد.

ما پاراگرافمون را در قسمت بدنه با استفاده از تگ <p> کردیم .

حالا می خوایم ببینیم این  پاراگراف ما در یک مرورگر اینترنت چگونه به نمایش در می آید ، برای این کار  فایل بالا را با پسوند .html  ذخیره می کنیم.

و اما  Style .....

حالا می خوایم برای این پاراگراف یک سری خصوصیات بذاریم ، که همه این ها با Style ممکن میشه.

خصوصیت اول : برای پارگرافمون یک فونت تعریف کنیم :

<html>

<body>

<p style="font: Tahoma">AntiCom...The Best Way to Learn</p>

</body>

</html>

اگر به قسمت قرمز رنگ توجه کنید  ، ما به کمک   Inline Styles برای  تگ پاراگرافمون ، نوع فونتش را مشخص کردیم .

و :

<html>

<body>

<p style="font: Tahoma; text-align: center">AntiCom...The Best Way to Learn</p>

</body>

</html>

یک ویژگی دیگر هم به پاراگرافمون اضافه کردیم  ، با این ویژگی پاراگراف ما وسط چین می شود .

به مثال های بالا توجه کردید در این نوع روش تعریف ، یعنی روش Inline Style  ما باید هر ویژگی ای که نیاز داریم را به طور جدا جدا برای هر قسمت تعریف کنیم که این بسیار وقت گیر است  و کدنویسی ما حالتی مبتدی به خود می گیرد .

دو روش دیگر برای تعریف Style ها ، روش External Style Sheets , Internal Style Sheets  است .

پای CSS  از این جا به بعد وارد ماجرا می شود .

External Style Sheets , Internal Style Sheets   در فایل های CSS نگه داری می شوند

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

ولی در روش Internal  کدها داخل فایل CSS  ، و فابل CSS به کدهای HTML پیوست می شود.

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

نظرات 0 + ارسال نظر
برای نمایش آواتار خود در این وبلاگ در سایت Gravatar.com ثبت نام کنید. (راهنما)
ایمیل شما بعد از ثبت نمایش داده نخواهد شد