آموزش css

آموزش css 757 683 نویسنده

از آموزش css چه می دانید؟

در مقالات قبلی در مورد پیکره بندی و استفاده از html برای شما گفته بودیم. در این مقاله نیز می‌ خواهیم بدانیم پس از این که یک صفحه ی وب را پیکره بندی نمودیم، باید دیگر چه کنیم؟ در حقیقت در این مقاله می‌ خواهیم به آموزش css بپردازیم. آموزش css زیادی در سطح وب وجود دارد. اما ما در این مقاله سعی داریم به زبان کاملاً ساده آن را بیان نماییم.  قبل از هر چیزی بیاید ببینیم که خود سی اس اس چیست؟ به طور کلی  همان وسیله‌ ای است که پس از استفاده از html می توانیم اسناد را با استفاده از این وسیله به زبان بهتر نشان بدهیم. چنان که خود تان هم می دانید.

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

تست

تست

<!DOCTYPE html>

<html>

<head>

<style>

body {

    background-color: lightblue;

}




h1 {

    color: yellow;

    text-align: center;

}




p {

    font-family: verdana;

    font-size: 20px;

}

</style>

</head>

<body>




<h1>اولین امتحان من</h1>

<p>به وب سایت http://oap-it.comخوش آمدید</p>




</body>

</html>

آموزش css و مخفف آن

شاید ندانید. اما سی اس اس مخفف سه کلمه ی Cascading Style Sheets می باشد. در حقیقت ما آن را یک نوع زبان برنامه‌ نویسی مجزا می دانیم. چون تا آن زمان html به تنهایی جوابگوی تمامی نیاز های یک صفحه ی وب نبود. بنابر این کنسرسیوم بین المللی شبکه ی جهانی وب یا w3c برای اینکه بتواند چنین مشکلاتی را از میان بردارد. این زبان برنامه نویسی جدید را که نامش سی اس اس بود پیشنهاد داد. در آن زمان css آمده بود که تمام نا توانایی های html را برطرف کند. و الحق والانصاف که چه قدر خوب توانسته بود که این کار را انجام بدهد. بنابر این روز به روز مردم استقبال بیشتری از آن کردند و بیشتر از آن استفاده می کردند.

تا خود کنسرسیوم و افرادی که مربوط به پروژه ی توسعه آن بودند مجبور شدند هر روز آن را بیشتر و بیشتر توسعه بدهند. در حقیقت هر جا خلائی را در html احساس کردید، می توانید آن را با css پر کنید. از طرفی به کمک سی اس اس می توانیم خودمان تعیین کنیم که تک تک تگ های درون پیکره ی وب یا همان html چگونه نمایش داده شوند؟ تا برای مخاطب خوشایند تر باشد. به عنوان مثال می‌ توان از رنگ و اندازه فونت و حتی نوع فونت نام برد. با کمک اچ تی‌ ام‌ ال ما تنها می توانستیم تعیین کنیم که چه چیزی بنویسیم؟ و یا پاراگراف بندی کنیم.

اما با کمک css حتی می‌ توانیم نوع دست خط ها و فونت ها و اندازه و رنگ های پس زمینه و یا خود نوشته را هم تعیین کنیم. که این کار بدون سی اس اس و تنها با html هیچ گاه امکان پذیر نیست.

حل کردن مشکلات بزرگی که فکرش را هم نمی کردید

 همان طور که در قسمت‌ های گذشته اشاره نمودیم html از همان اول هم برای استایل دادن و شکل‌ دهی به یک صفحه ی وب طراحی نشده بود. بنابر این باید زبان دیگری برای این کار طراحی می‌ شد. تا مکمل خود html باشد. ما در بهترین حالت می توانستیم با html بزرگی و اندازه ی نوشته ها و محتوا ها را آن هم تا حدی تعیین بکنیم. مثلاً با تگ عنوان می‌ توانستیم بزرگی آن را از ۱ تا ۶ تعیین کنیم. اما دیگر این امکان برای ما وجود نداشت که بتوانیم رنگ چیزی را هم تغییر بدهیم. و یا در دخل و تصرفی در نوع فونت آن بکنیم. نا گفته نماند که پس از مدتی که از نگارش اولین نسخه های html می‌ گذشت.

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

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

به نظر شما منظور از استایل چیست؟

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

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

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

کمی بیشتر از استایل بندی بدانیم

 گفتیم که استایل تنها ظاهر یک عنصر را در صفحات اینترنتی نشان می دهد. و در واقع به مرورگر می گوید که فلان محتوا را چه طور نمایش بدهد. این محتوا می تواند شامل متن و عکس و یا فیلم باشد. مهم این است که استایل نمایش آن و نحوه ی نمایش و دیدن آن توسط بیننده چه طور باشد؟ باید گفت استایل ها از دو قسمت تشکیل می شوند. که به یک قسمت آن selector و به قسمت دیگر آن declaration block می گویند. حال ما به عنصری که قصد  اعمال تغییرات در آن را داریم selector  می گوییم. مترادف یا هم معنی فارسی selector درفارسی می‌ تواند ” انتخاب کننده” باشد. اگر می خواهید آموزش css را شروع کنید.

 باید حتماً به این دو قسمت نیز توجه ویژه ای داشته باشید. ما به مجموعه ی دستورالعمل ها و فرمت بندی هایی که بر روی یک محتوا انجام می دهیم declaration block می گوییم. خب ما چنین گفتیم که به قسمتی از محتوا که قصد اعمال تغییرات در آن داریم سلکتور می گوییم. این سلکتور می تواند شامل هر چیزی باشد. اعم از متن و فیلم یا عکس. ما بلاک های اعلان یا همان declaration block را می توانیم به چند طریق تعریف کنیم. گاهی اوقات با علامت نقطه ویرگول از هم جدا می کنیم. گاهی اوقات هم با استفاده از علامت دو نقطه. راستی از سلکتور ها برای نمایاندن و پیدا نمودن یک ویژگی و عنصیر نیز می توان استفاده نمود.

مثال های روشن

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

<!DOCTYPE html>

<html>

<head>

<style>

p {

    color: red;

    text-align: center;

}

</style>

</head>

<body>




<p>Hello World!</p>

<p>These paragraphs are styled with CSS.</p>




</body>

</html>