مقالات این سری آموزشی :
- آشنایی با CSS و شروع کار با آن
- آموزش انتخابگر ها (Selectors) در CSS
- روش های اضافه کردن CSS به سایت
- آموزش قرار دادن تصویر پس زمینه در CSS
سلام دوستان
یه مدت فتولیا خوابیده بود به علت مشکلات سرور که با تعویض سرور مرتفع شده فعلا . بعد از این سعی می کنیم به صورت جدی تر مطالب خوبی رو آماده کنیم که یکی اش همین آموزش css هست . امیدوارم مورد استفاده تون قرار بگیره
قبل از شروع این مبحث لازم هست که اطلاعاتی در مورد HTML داشته باشید
CSS چیست ؟
- CSS مخفف Cascading Style Sheets
- استایل ها مشخص می کنند که عناصر HTML به چه شکلی نمایش داده شوند
- استایل ها به HTML 4.0 برای حل یک مشکل اضافه شدند
- با استایل ها خارجی می توان صرفه جویی زیادی در زمان و انرژی هنگام طراحی صفحات وب کرد
- استایل های خارجی داخل یک فایل CSS ذخیره می شوند
استایل ها یک مشکل بزرگ را حل می کنند
HTML در ابتدا هرگز در نظر نداشت تگ هایی برای قالب بندی و شکل دهی عناصر صفحه ارائه کند
نحوه نمایش محتویات در HTML به این صورت تعریف شده بود :
<h1>This is a heading</h1> <p>This is a paragraph.</p>
هنگامی که تگ هایی نظیر <font> به HTML 3.2 اضافه شدند کابوس توسعه دهندگان وب شروع شد.اضافه کردن رنگ و فونت در توسعه وب سایت های بزرگ به هر بخش کوچکی از صفحه وب ، پروسه ای زمانبر و پر هزینه بود
برای حل همین مشکل بود که کنسرسیوم جهانی وب (W3C) پروژه CSS را شروع کرد
در HTML 4 تمام بخش های مربوط به قالب بندی صفحه بایستی در یک فایل جداگانه CSS قرار بگیرند (در استایل خارجی)
خوشبختانه امروزه همه مرورگر ها حتی IE مخوف هم از CSS پشتیبانی خوبی به عمل می آورند
CSS در عمر شما صرفه جویی می کند !
همونطور که در بالا گفته شد ، قبل از CSS برای زیباتر کردن و رنگ و لعابی به صفحه وب دادن مجبور بودند از تگ های مثل font,b,i و … استفاده کنند و این کار رو باید برای تک تک عناصر سایت تکرار می کردند.حالا تا به اینجا هم اگر مشکل خاصی به نظر نیاید فرض کنید مشتری تصمیم می گرفت رنگ یک بخش از سایت را که در همه صفحات هم وجود دارد عوض کند . باید همه صفحات رو باز کنه و تغییر رو اعمال کنه .
ولی در صورت استفاده از CSS فقط کافیست یک خط کد را ادیت کنین تا تغییر اعمال شود. فکر می کنم به اندازه کافی در مورد لزوم استفاده از CSS توضیح دادیم . اگه موافق باشین شروع کنیم به یاد گرفتن CSS . بزن بریم …
ساختار CSS
یادگیری CSS یکی از مفرح ترین بخش های طراحی وب هست و همچنین یکی از آسون ترین ها بخش ها .
هر دستور CSS از یک انتخابگر (Selector) و تعدادی تعریف (Declaration) تشکیل شده است که با علامت ; از هم جدا می شوند(مثل شکل فوق)
انتخابگر در کل آن عنصری از صفحه وب را مشخص می کنه که می خواهیم به آن استایل بدهیم
هر تعریف نیز از یک مشخصه (property) و یک مقدار (Value) تشکیل شده است
مثال
هر تعریف CSS با سمی کولن ; به پایان می رسد و همه تعریف ها یکجا داخل کروشه {} قرار می گیرند
p {color:red;text-align:center;}
برای اینکه خوانایی کدهامون بهتر باشه سعی کنید به این صورت بنویسید
p { color:red; text-align:center; }
کامنت گذاری
کامنت ها برای گذاشتن توضیح در بین کدهای CSS بکار می روند و می توانند هنگام ویرایش کدها در آینده کمک کننده باشند.البته هر چیزی که بین توضیحات قرار دهید توسط مرورگر نادیده گرفته می شود . برای همین جهت غیرفعال کردن موقتی کدهای css هم می شود از کامنت استفاده کرد
کامنت با /* شروع می شود و با */ پایان می یابد.مثل این :
/*This is a comment*/ p { text-align:center; /*This is another comment*/ color:black; font-family:arial; }
هم وبسایت جذاب و خوبی دارید هم مطالبتون فوق العادست
شدیدا استفاده کردیم 🙂
ممنون برا شروع خوب بود
بسیار عالی بود
سایت با قالبش تو حلفم :دی
لطفا از ما هم حمایت کنید
http://designerz.ir
انصافا این مشکلات سرور غیرقابل جبرانه
و یک روز سایت آنلاین نباشه همه چیز بهم میریزه
ناراحت نشی ولی یخ کرده سایت!
مثل قبل نیست.
http://paste.fotolia.ir/
http://webcam.fotolia.ir/
اینا هم واقا جالب نیست.
دیدم سفارش طراحی قبول می کردی،لینکش کجاست؟
تبلیغ میذاری؟
سلام،
آموزش CSS از همین منبع،تا قسمت 30 فکر کنم آماده موجوده با ترجمه روان و خودمونی،اگه نیازت بود بگو وردشو بهت بدم.
که شما ادامه شو بنویسی،کار دوباره نشه.
سلام
خوبین ؟ حتما ، ممنون تون میشم
ارادتمندم
سلام،
مال دوران جوونیه!سال 90
امیدوارم به کار بیاد.
http://goback.persiangig.com/document/CSS%20%20-public.doc/download
با سلام… مطلب خوبی بود استفاده کردم … ممنون
مرسی عالی . قدم های بعدی رو کی میذارید ؟
وای پسر فکرشم نمی کردم اینجا هنوز سرپا باشه
خدا شکر
علی جان ایشالا موفق باشی من مردانی هستم قبلا براتون می نوشتم
سلام محمد جان
خوبی ؟ ممنونم 🙂 همینطور شما
ممنون خیلی خوب بود.
مرسی واقعا عالی…
سایت و مطالب فوق العادست..
راهتون همسشه پایدار..
قربان شما . مرسی