آموزش مقدماتی CSS و استایل دهی

  • آبان ۲۳, ۱۳۹۵

آموزش مقدماتی CSS: با توجه به رشد روز افزون طراحی سایت و گسترش دنیای مجازی، لزوم یادگیری طراحی سایت و دیگر علوم در این حیطه بیش از پیش حس میشود. یکی از این علوم که بسیار در حوزه ی طراحی سایت پر کاربرد است CSS است. امروزه کمتر کسی وجود دارد که حتی کم از طراحی سایت سر رشته داشته باشد اما با لغاتی همچون استایل دهی، یا CSS روبرو نشده باشد.

مقدمه ای بر آموزش CSS

اگر شما از آن دسته افراد هستید که این کلمات به گوشتان نخورده یا مشتاق به یادگیری هستید نگران نباشید. زیرا در این مقاله میخواهیم به این مهم بپردازیم. همینطور اگر بیشتر برای یادگیری طراحی سایت مشتاق هستید میتوانید مطالب زیر را مطالعه نمایید: آموزش گام به گام طراحی سایت و آموزش گام به گام طراحی سایت جلسه دوم . CSS مخفف کلمات Cascading Style Sheets است به معنای شیوه نامه که با نام CSS در تمام کتاب ها و رفرنس های این علوم بکار گرفته شده است. CSS در برخی منابع با نام استایل دهی هم یاد شده است. همانطور که از نامش پیداست با استفاده از این سری دستورات میتوانید به آیتم ها و اشیاء تشکیل دهنده ی وب سایتتان شکل و ظاهری منظم بدهید.

آموزش مقدماتی CSS و استایل دهی

ملزومات یادگیری CSS یا استایل دهی

همانند HTML، CSS هم ابزار یا نرم افزار بخصوصی برای برنامه نویسی نمیخواهد. شما میتوانید با بازکردن یک فایل Notepade ساده که در هر کامپیوتری وجود دارد و در دسترس است. و با ذخیره سازی با پسوند html. کار خود را به راحتی شروع نمایید. در این زمینه تنها چیزی که به آن احتیاج پیدا خواهید نمود علم و دانشتان است!

کاربردهای CSS

اگر بخواهیم به معنای واقعی کاربرد CSS را بگوییم میتوانید نقاشی کردن را تصور نمایید. Html بدون CSS همانند نقاشی اولیه است بدون هیچ رنگی. این نقاشی ناقص است و بی روح، ولی با استفاده از کمی مداد رنگی و ذوق و سلیقه از همان نقوش بی روح میتوان اثار بی سابقه ی هنری آفرید. شما با Html می توانید مثلا در فرم ها جعبه های متنی و دکمه های رادیویی را با ترتیبی که میخواهید قرار دهید. اما اینکه دقیق این آیتم ها در زیر هم قرار بگیرند یا به طور مثال در فرم های فارسی از سمت راست نمایش داده شوند یا در فرم های لاتین در سمت چپ قرار بگیرند این ها همه از CSS بر می آید. اگر از آن دسته افراد هستید که همیشه میخواهید نیم نگاهی به بهینه سازی وب سایتتان داشته باشید میتوانید مطلب استفاده ی درست از تگ های عنوان و تاثیر آن در سئو سایت را مطالعه نمایید.

styling
شروع آموزش استایل دهی

تگ های استایل دهی یا CSS در تگ <header> قرار می گیرند و آیتم ها ی صفحه ی وب در تگ <body> قرار میگیرند. البته میتوان از این تگ ها در ساختار برنامه هم استفاده نمود. اما برای جلوگیری از به اصطلاح سنگین شدن صفحات وبمان بهتر است که تگ های CSS را در تگ <head> قرار دهیم. و المان های داخل صفحه را در تگ <body> قرار دهیم. برای اطلاع بیشتر از تگ های دیگر HTML و نحوه ی استفاده از آن ها میتوانید مطالب زیر را مطالعه نمایید: لذت قرار دادن فایل‌های ویدیویی در طراحی سایت با تگ video و روش استفاده از تگ های H در طراحی وب سایت

stylingonsites_1
مثالی از استایل دهی

این توضیحات را با مثالی به شما نشان خواهم داد، دستورات و تگ های زیر را در یک صفحه ی 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/>

 

مشاوره رایگان طراحی سایت

مشاوره طراحی سایت

در صورتی که به دنبال راه اندازی کسب و کار خود در دنیای اینترنت هستید . عدد 21 را به شماره 09107585955 پیامک نمایید یا در لینک زیر فرم درخواست مشاوره را پر نمایید تا مشاوران اینتن با شما در تماس باشند . با اینتن بروز باشید.

بدون نظر
 

پیام بگذارید

(No Ratings Yet)
Loading...