آموزش مقدماتی CSS و استایل دهی
آموزش مقدماتی CSS: با توجه به رشد روز افزون طراحی سایت و گسترش دنیای مجازی، لزوم یادگیری طراحی سایت و دیگر علوم در این حیطه بیش از پیش حس میشود. یکی از این علوم که بسیار در حوزه ی طراحی سایت پر کاربرد است CSS است. امروزه کمتر کسی وجود دارد که حتی کم از طراحی سایت سر رشته داشته باشد اما با لغاتی همچون استایل دهی، یا CSS روبرو نشده باشد.
مقدمه ای بر آموزش CSS
اگر شما از آن دسته افراد هستید که این کلمات به گوشتان نخورده یا مشتاق به یادگیری هستید نگران نباشید. زیرا در این مقاله میخواهیم به این مهم بپردازیم. همینطور اگر بیشتر برای یادگیری طراحی سایت مشتاق هستید میتوانید مطالب زیر را مطالعه نمایید: آموزش گام به گام طراحی سایت و آموزش گام به گام طراحی سایت جلسه دوم . CSS مخفف کلمات Cascading Style Sheets است به معنای شیوه نامه که با نام CSS در تمام کتاب ها و رفرنس های این علوم بکار گرفته شده است. CSS در برخی منابع با نام استایل دهی هم یاد شده است. همانطور که از نامش پیداست با استفاده از این سری دستورات میتوانید به آیتم ها و اشیاء تشکیل دهنده ی وب سایتتان شکل و ظاهری منظم بدهید.
ملزومات یادگیری CSS یا استایل دهی
همانند HTML، CSS هم ابزار یا نرم افزار بخصوصی برای برنامه نویسی نمیخواهد. شما میتوانید با بازکردن یک فایل Notepade ساده که در هر کامپیوتری وجود دارد و در دسترس است. و با ذخیره سازی با پسوند html. کار خود را به راحتی شروع نمایید. در این زمینه تنها چیزی که به آن احتیاج پیدا خواهید نمود علم و دانشتان است!
کاربردهای CSS
اگر بخواهیم به معنای واقعی کاربرد CSS را بگوییم میتوانید نقاشی کردن را تصور نمایید. Html بدون CSS همانند نقاشی اولیه است بدون هیچ رنگی. این نقاشی ناقص است و بی روح، ولی با استفاده از کمی مداد رنگی و ذوق و سلیقه از همان نقوش بی روح میتوان اثار بی سابقه ی هنری آفرید. شما با Html می توانید مثلا در فرم ها جعبه های متنی و دکمه های رادیویی را با ترتیبی که میخواهید قرار دهید. اما اینکه دقیق این آیتم ها در زیر هم قرار بگیرند یا به طور مثال در فرم های فارسی از سمت راست نمایش داده شوند یا در فرم های لاتین در سمت چپ قرار بگیرند این ها همه از CSS بر می آید. اگر از آن دسته افراد هستید که همیشه میخواهید نیم نگاهی به بهینه سازی وب سایتتان داشته باشید میتوانید مطلب استفاده ی درست از تگ های عنوان و تاثیر آن در سئو سایت را مطالعه نمایید.
شروع آموزش استایل دهی
تگ های استایل دهی یا CSS در تگ <header> قرار می گیرند و آیتم ها ی صفحه ی وب در تگ <body> قرار میگیرند. البته میتوان از این تگ ها در ساختار برنامه هم استفاده نمود. اما برای جلوگیری از به اصطلاح سنگین شدن صفحات وبمان بهتر است که تگ های CSS را در تگ <head> قرار دهیم. و المان های داخل صفحه را در تگ <body> قرار دهیم. برای اطلاع بیشتر از تگ های دیگر HTML و نحوه ی استفاده از آن ها میتوانید مطالب زیر را مطالعه نمایید: لذت قرار دادن فایل‌های ویدیویی در طراحی سایت با تگ video و روش استفاده از تگ های H در طراحی وب سایت
مثالی از استایل دهی
این توضیحات را با مثالی به شما نشان خواهم داد، دستورات و تگ های زیر را در یک صفحه ی Notepade بنویسید و همانگونه که گفته شد ذخیره نمایید، تا تغییرات را مشاهده نمایید:
<html>
<head>
<style>
body {
; background-color: lightblue
}
h1 {
; color: white
; text-align: center
}
p {
; font-family: verdana
; font-size: 20px
}
<style/>
<head/>
<body>
<h1/>این الین تمرین من است<h1>
<p/>این یک پاراگراف است<p>
<body/>
<html/>