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

آموزش css

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

خب اصلا css یعنی چی؟ Css  مخفف عبارت Cascading Style Sheets و به معنی «برگه های پشت سر هم و مشبک» می باشد. در واقع شما با ستفاده از اون  می تونید به صفحات طراحی شده شکل زیباتری بدین. اگه با زبان HTML آشنایی داشته باشید می دونید که هر کدوم از عناصر موجود در صفحه (هر چیزی که در HTML تعریف می کنین مثل جدول ها، دکمه ها، لیست ها و ...) دارای خصوصیاتی (Properties) هستن که نحوه نمایش اون عناصر رو در مرورگرها مشخص میکنه. مثل خصوصیت (رنگ، اندازه، فاصله از عناصر دیگه و ...) خوب بریم یر اصل موضوع، برای شروع به کار باید ابزارهای مورد نیاز رو تهیه کنیم. می تونید کدهای مورد نظر رو داخل هر ویرایشگری (Notpad, Notepad++, sublime text, Dreamweaver و ...) بنویسین و فقط پسوند فایل رو CSS تعیین کنین و بعد فایل مورد نظر رو داخل صفحه سایت بارگذاری کنین. به همین راحتی!! قالب دستوری CSS: هر دستور css از سه بخش تشکیل میشه که شامل ۱- انتخابگر یا selector 2- خصوصیت یا property و ۳- مقدار یا value یه مثال: Selector {property: Value} انتخابگر در واقع همون عناصر موجود در داخل صفحه هستن که شما با css می تونین بهشون استایل بدین این عناصر مثل (تگ ها، لینک ها، دکمه ها، کادر ها، لیست ها و ...) خصوصیات یا property ویژگی های مخصوص هر  عنصر رو تعیین می کنه مثل رنگ، اندازه، کادر دور عنصر، موقعیت قرارگیری در صفحه و .... و مقدار یا value مقادیری هستن که شما برای هر خصوصیت در نظر میگیرین مثال:

body { margin: 0 }

خب یه مثال عملی بزنیم و یه پروژه رو با هم انجام بدیم: اول از همه  notepad رو باز کنین و کد زیر رو توش کپی کنین:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>عنوان صفحه</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>First CSS Example!</p>
</body>
</html>

این صفحه رو با نام index.html ذخیره کنین (دقت کنین که پسوند فایل حتما html باشه) یه توضیح مختصر برا کد های بالا بدم: هر صفحه وب برای نمایش تو مرورگر باید حداقل این کدها رو داشته باشه تا اجرا شه خط چهارم به مرورگر میگه که شما از زبان فارسی دارین استفاده می کنین خط ششم هم آدرس فایل css طراحی شده توسط شماست که در ادامه با هم آماده می کنیم خط نهم یه پاراگراف میسازه که میتونید هر متنی داخلش بنویسین خب حالا اگه این فایل رو اجرا کنین می بینین یه صفحه باز شده که یه متن (First CSS Example) رو به شما نشون میده مرحله بعدی اینه که یه صفحه دیگه تو notpad باز کنین و کد زیر که مربوط به css میشه رو توش کپی کنین:

p{
            color: #0e0b9c;
            font-size: 18px;
            font-style: italic;
            background-color: #deacac;
            text-align: center;
}

این فایل رو هم با نام style.css ذخیره کنین خب حالا کافیه فایل index.html رو اجرا کنین تا ببینین نتیجه تغییرات چی بوده و این که css به چه دردی می خوره امیدوارم خوشتون اومده باشه جلسه بعدی در مورد این که چطور میشه به عناصر دسترسی داشت و این که چه مقادیری میشه بهشون داد صحبت می کنیم   دانلود فایل پیوست تا آموزش بعدی...

آموزش ساده و کاربردی CSS قسمت اول - 4.2 از 5 بر اساس 150 رای

امتیاز کاربران

آموزش ساده و کاربردی CSS قسمت اول
دیدگاه ها

دیدگاهی وجود ندارد

2017 © Copyright کليه حقوق مادی و معنوی براي چسبون محفوظ است و هرگونه کپی برداری پیگرد قانونی دارد.