پاسخ به:کارگاه آموزشی مقدماتی css
پنج شنبه 29 اسفند 1392 6:08 PM
با اجازه دوست عزیز من هم این رو بک توضیحی میدم
لازم به ذکر است قبل از شروع CSS باید حتماً Html رو یاد بگیرید ، یادگیری Html خیلی سخت نیست و در مدت کوتاهی می توانید به آن مسلط شوید. Html زبانی است که تمامی عناصر موجود در صفحات وب مانند جعبه های متن، دکمه ها و غیره توسط آن ساخته می شود و با ترکیب آن با کدهای CSS ظاهر صفحه شکل می گیرد.
CSS چیست؟
CSS یا همان مخفف Cascading Style Sheet (شیوه نامه ی آبشاری) یک زبان برنامه نویسی تحت وب جهت شکل دهی، موقعیت سازی و زیبا سازی صفحات وب است. در واقع CSS همان سندیست که مرورگر از روی آن می فهمد که کد های HTML را باید با چه ویژگی هایی به نمایش بگذارد و هر عنصر در صفحه چه خصوصیاتی دارد.
تا به حال بالاترین ورژن Css3 , Cssاست که با آمدن آن و HTML5 ، به زودی J-Query از بین خواهد رفت چرا که این ورژن دارای انیمیشن و ... و زیبا سازی های جدیدی نیز هست.
چراباید از CSS استفاده کنیم؟
CSS می تواند در بسیاری از کارهای تکراری ، زمان طراحی و حجم کدهای سایت صرفه جویی کند. شما میتوانید یکبار خصوصیات ظاهری عناصر را در وب سایت توسط دستورات CSS مشخص کنید، سپس هرکجا در وب سایت از عنصر مورد نظر استفاده کردید، خصوصیات مشخص شده را به آن عنصر اعمال کنید. همچنین هر زمان نیز تصمیم بگیرید ظاهر وب سایت را تغییر دهید، کافیست به محلی که دستورات CSS را نوشته اید مراجعه کرده و آنها را تغییر دهید تا ظاهر عنصر مورد نظر در تمام صفحات وب سایت تغییر کند و نیازی به تغییر تمام صفحات سایت نیست. بنابراین حجم صفحات وب سایت شما نیز کمتر خواهد شد و در نتیجه سرعت بارگزاری صفحه وب شما افزایش خواهد یافت. همچنین دستورات CSS می تواند در یک فایل جداگانه از کدهای HTML شما نوشته شود و این تفکیک تمیزی و پیچیدگی کمتر کدها را در تمامی وب سایت برای شما به ارمغان می آورد. خوب است بدانید گوگل در رتبه بندی وب سایت ها، سرعت بارگزاری و کیفیت کدها را نیز مدنظر قرار میدهد و وب سایت هایی را که سرعت بارگذاری آنها مناسب نباشد، کمتر به جستجو کنندگان معرفی خواهد کرد.
روش های استفاده از CSS در کد های HTML ؟
CSSرا به 3 روش می توان مورد استفاده قرار داد که در زیر می بینید:
1. میان تگ Head ، در تگ Style :
<html>
<head>
<style type=”text/css”>
CSS CODES
</style>
</head>
</html>2. استفاده در هر تگ:
<div style=”CSS CODES”> CODE </div>3. استفاده در تگ Head و فراخوانی سند CSS:
<html>
<head>
<link href=”../CSS-FILE-ADDRESS.css” type=”text/css” rel=”StyleShreet”/>
</head>
</html>در بین 3 مدلی که در بالا گفته شد ، سومین حالت معمول تر است ولی سرعت کمتری نسبت به بقیه ی حالات دارد. یعنی باعث سنگین تر شدن قالب می شود ، چرا که در این حالت مرورگر باید فایل را در آدرسی دیگر بخواند ولی در حالات دیگر ، مرورگر کد ها را در کد قالب پیدا می کند.