مقدمه و آشنایی با CSS

1396/3/26 علیرضا حاتمی نیا 8478

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

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

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

CSS چیست ؟
قبل از سال 1995 زبان HTML یک زبان بسیار ساده بود که فقط با هدف نمایش متون و گاها تصاویر به صورت منظم ارائه شده بود. با گسترش اینترنت و محبوبیت استفاده از صفحات وب زبان HTML قادر به پاسخگویی به نیاز کاربران را نبود. مرورگرهای قدرتمندی ظهور کردند که به دلایل ضعف های HTML صفحات وب را به صورت متفاوت به کاربران نمایش می دادند.
تگ هایی چون <font> در HTML و یا خواص تگ های HTML کار پردازش را سخت تر می کردند و قادر به پاسخگویی نیاز طراحان در صفحه وب را نبودند. همچنین طراحان برای حفظ ساختار عناصر در صفحه مجبور به استفاده از جدول ها در صفحه میشدند.
تا اینکه کنسرسیوم جهانی وب  W3C در سال 1995 استاندارد CSS را جهت تعریف ساختار ظاهری صفحات وب ارائه کرد. اولین وبسایتی که از CSS برای طراحی وب خود استفاده کرد وبسایت ورزشی ESPN بود.

اولین وبسایتی که اقدام به استفاده از css کرد


اولین وبسایتی که اقدام به استفاده از CSS در طراحی  کرد

عبارت CSS مخفف Cascading Style Sheets می باشد که جهت تعریف ساختار ظاهری صفحات وب به کار می رود.
اگر یک ساختمان مسکونی را در نظر بگیرید می توان اسکلت بندی این ساختمان را HTML و نمای ساختمان را CSS در نظر گرفت.

html در مقابل  css


ساختار HTML در مقابل CSS

نگارش (syntax) CSS :
سینتکس CSS از دو بخش selector یا انتخابگر و Declaration یا اعلان تشکیل شده است.
به شکل زیر توجه کنید :

ساختار Css


سینتکس CSS

نکته: selector می تواند یکی ازتگ های HTML یا نام یک کلاس class و یا نام یک شناسه ID باشد. (در آینده درباره ID  و class بیشتر خواهید دانست)
هر Declaration شامل یک Property و هر Property شامل یک  Value یا مقدار است.
خب توضیح روندی که طی شد به این صورت است که برای تغییر خصوصیات ظاهری یک تگ ابتدا نام تگ را آورده سپس ویژگی هایی از قبیل رنگ متن، اندازه فونت، نوع فونت ، نحوه قرارگیری و ... را می نویسید و بعد مقدار هر ویژگی را (value) جلوی هر ویژگی و بعد دونقطه (:) قرار می دهیم.
در مثال بالا برای تغییر رنگ و اندازه متنهای قرار گرفته در تگ p ابتدا تگ p نوشته شده و سپس ویژگی color و مقدار blue به آن نسبت داده شده است و بعد برای تعریف ویژگی font-size برای تغییر اندازه متن ابتدا یک سمی کالن (;) و بعد از آن ویژگی دوم را نوشته ایم.
نگران نباشید در آینده مثال های فراوانی را برای تفهیم بهتر مطلب عنوان می کنیم.


روش های استفاده از Css در HTML :
سه روش برای استفاده از استایل های CSS در HTML  وجود دارد:

1- روش خطی inline stylesheets
در این روش استایل مورد نظر مستقیم در خصوصیت style آن تگ مقدار دهی می شود:
در مثال بالا برای تغییر رنگ صفحه به صورت خطی به این شکل عمل می کنیم:

 

<html>
<head>
<title> Css Styles </title>
<body style= "background-color:red; ">
</body>
</html>

2- روش درونی Internal Stylesheet
در این روش کلیه دستورات CSS بین دو تگ <style></style> واقع در تگ <head> قرار می گیرند.
مثلا برای تغییر رنگ زمینه صفحه به صورت زیر عمل می کنیم:

 

<html>
<head>
<title> Css Styles </title>
<style>
Body {
Background-color : red;
}
</style>
<body>
</body>
</html>


3- روش خارجی external stylesheets
در این روش کلیه استایل های مورد نظر درون فایلی جداگانه ای نوشته شده و با پسوند .css  ذخیره میشود و  سپس توسط برچسب <link> طبق اصول زیر به صفحه اضافه می شود :

 

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


دقت کنید که آدرس فایل file.css در href نوشته می شود.

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

دانلود ویدیو

دانلود PDF قسمت یازدهم آموزش طراحی وب

کلمات کلیدی

علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت