استایل (CSS) چیست؟ - CSS مخفف کلمه Cascading Style Sheets میباشند. - اولین ورژن استایلها در سال ۱۹۹۶ ساخته شد. که اولین ورژن آن CSS1 بود. - دیگر وژن آن CSS2 می باشد که در سال ۱۹۹۸ ساخته شد که بیشتر برای ویرایش صفحات، نحوه نمایشها تگها و … کاربرد دارد. - فایل استایلها با فرمت CSS ذخیره میشوند. - جدا کردن ظاهر صفحات اعم از طرح بندی و رنگ بندی و… از محتوای صفحات مانند کد های HTML و … انواع استایلها: همانطوری که قبلا نوشتم استایلها بر سه نوع میباشند: این نوع استایل در داخل تگهای HTML به کار گرفته میشوند، و این استایل فقط بروی همان تگ به خصوص تاثیر خواهد گذاشت و به صورت زیر نوشته خواهد شد. نمایش ساده جهت کپی کد ۱. Inline Style: 2. </p> , , 1. <p ,style="font-family: ,Tahoma;">This ,is ,a ,paragraph , , استایل (CSS) چیست؟ - CSS مخفف کلمه Cascading Style Sheets میباشند. - اولین ورژن استایلها در سال ۱۹۹۶ ساخته شد. که اولین ورژن آن CSS1 بود. - دیگر وژن آن CSS2 می باشد که در سال ۱۹۹۸ ساخته شد که بیشتر برای ویرایش صفحات، نحوه نمایشها تگها و ... کاربرد دارد. - فایل استایلها با فرمت CSS ذخیره میشوند. انواع استایلها: همانطوری که قبلا نوشتم استایلها بر سه نوع میباشند: میشوند، و این استایل فقط بروی همان تگ به خصوص تاثیر خواهد گذاشت و به صورت زیر نوشته خواهد شد. ۱. Inline Style: این نوع استایل در داخل تگهای HTML به كار گرفته <tag style="Style Declarations"> Example: style="font-family: Tahoma">This is a paragraph در مثال بالا با استفاده از حالتهای مختلف در استایلها نوع فونت آنرا تغییر دادیم و همانطوری که در تعریف این نوع استایل نوشتم این استایل فقط و فقط تغییرات را بروی همین پاراگراف اعمال خواهد کرد. ۲. Embedded or Global Style: در این نوع، استایل نوشته شده در تمامی صفحه تاثیر خواهد گذاشت، اینرا بین دو تگ (<head></head>) به صورت زیر نوشته خواهد شد. <style> </style> Example: <head> <style type="text/css"> </style> </head> این نوع حالت از تغییرات تعریف شده بروی تمامی تگها پاراگراف اعمال خواهد شد که رنگ متن: قرمز، جهت متن: چپ، و اندازه فونت ۸ پوینت خواهد بود. توجه داشته باشید در این مثال سه حالت مختلف یک استایل را برای تگ پاراگراف تعریف کردیم که با استفاده از ( حالتهای مختلف آن از هم جدا شدند. اگر بخواهید این حالت نوشته شده را برای چند تگ دیگر اعمال کنید می توانید تگها را بااستفاده از کاما (,) از هم جدا کنید برای مثال: font-family: sans-serif } h1, h2, h3, h4 ** color: gold; Linked or External style sheet ۳. : نوع آخر هم معروف به استایلهای خارجی هستند كه به صورت لینك فایل استایل را به صفحات خود لینك میدهید. فایلهای استایل با فرمت CSS ذخیره میشوند و به صورت زیر به صفحات لینك داده میشود. <head> Example: </head> در این نوع از استایلها بعد از اینکه فایل استایل خود را آماده کردید آنرا با فرمت CSS ذخیره کرده و آنرا همانند بالا فایل استایل را به قالب لینک می کنیم. برای راحت بود در کار می توانید ابتدا استایلها را به صورت Internal استفاده کرده و بعد از اینکه کارتان تمام شد کدهای نوشته شده بین دو تگ (<style></style>) را در نت پد کپی کرده و آنرا با فرمت CSS دخیره کرده و سپس با استفاده از فرمول بالا آن فایل را به قالب لینک دهید. یکی از مزیتهای این نوع استایل این میباشد که می توانید با داشتن یک فایل استایل برای چندین صفحه استفاده کنید و از دیگر مزیت های آن با این کار کدهای قالب را به چند فایل تقسیم کرده و قالب را منظم تر میشود. CSS و كاربرد آن در طرح های امروزی بنابراین ، طراحان باید از مشخصات آن آگاه باشند . متاسفانه ، حتی اگر از قوانین پیروی كنید ، خطاهای آشكاری در پیاده سازی مرورگرهای پیشرفته وجود دارد . چیزهای زیادی وجود دارد كه باید درباره ی CSS بدانید ، و امكانات جدید هر لحظه اضافه می شود . CSS1 تعیین اولین شیوه نامه ، بیش از 50 خاصیت را تعریف می كند ، و CSS2 بیش از 50 خاصیت دیگر را . CSS2 تسهیلات تغییر مكان كه CSS-P نامیده می شود را به وجود آورده است . نگارش جدید كه CSS3 نام دارد قصد دارد امكانات ارائه بیشتری را به وجود آورد ، و با فناوری های دیگر ، نطیر اسكریپت و گرافیك های برداری ، بیشتر یكپارچه شود . مهم است CSS جایگزینی برای نمایش مبتنی بر HTML پیشنهاد می كند و اكنون به وسیله ی انجمن طراحی وب پذیرفته شده است . سازگاری css نیازمند برخی تغییرات از سوی تولید كنندگان وب است . css بسیار حساس به نحو دستوری است ، و اشتباهات كوچك می توند باعث شكست كامل یك قانون css شود . به خاطر داشته باشید كه HTML اساس و پایه ی یك صفحه وب است . CSS در واقع ، به طور مستقیم به استفاده صحیح از عناصر HTML یا XHTML استناد می كند . ولی ، اگر به كد ناهنجاری محدود شده باشند لزوما به طور قابل پیش بینی ای كار نمی كنند . هر چند واضح است كه می خواهیم به برچسب های منطقی معنی بدهیم ، ولی مواظب باشید كه این به شما مجوز نمی دهد از CSS به جای كد HTML استفاده كنید . قوانینی كه ارائه محدود برخی برچسب ها را تغییر می دهند نباید به كار روند . برای مثال در اینجا باعث می شویم كه برچسب های به طور غیر معمولی عمل كنند و تمام اشكال تزئینی پیوندها را حذف نمایند : a **text-decoration:none; color: black; } b {font-style:italic; font-weight:normal;} ( اگر به دلیل خاصی این قوانین را بازنویسی كرده اید ، حتما باید آن ها را توضیح گذاری كنید ) به خاطر مشكل معنای پیش فرض در HTML ، شاید برچسب های و فوق العاده مفید باشند . هم چنین برچسب یك برچسب بلوكی است كه هیچ نمایش پیش فرضی ندارد ، بنابراین در حالت دهی به بخش های بزرگ یك سند مفید است . برای مثال : <div style="background: lightblue; font-weight: bold; color: black;"> <p>This Paragraph is highlighted inblue.</p> </div> به طور مشابه برچسپ هیچ معنی یا نمایش از پیش تعریف شده ایی ندارد ، ولی وقتی یك برچسب هیچ كاراكتر بازگشت به ابتدای خط ( carriage return ) را نداشته باشد ، هنگام الصاق اطلاعات سبك به چند كلمه یا حرف ، مفید به نظر می آید ، مانند مثال زیر : <p>Calling out<spanstyle="background-color:#99CC00; font-weight:bold; color:#000000"></span>isn't hard withSPAN</p> روش های متفاوتی برای اضافه كردن CSS به سند HTML وجود دارد ، و همه آن ها داری مزایا و معایبی است كه قبل از اینكه روشی در نظر گرفته شود باید به دقت سبك و سنگین شود . ابتدا می توانید در بخش سر صفحه ی یك سند HTML با مشخص ساختن رابطه پیوندی به یك شیوه نامه ی خارجی ، به آن متصل شوید . برای مثال : rel="stylesheet" href="styles/global.css" media="screen" /> روش دوم برای اضافه كردن CSS ، نهفته كردن آن است . وقتی یك شیوه نامه نهفته می شود ، قوانین شیوه نامه را به طور مستقیم درون سند HTML بنویسید . شیوه نامه ی گسترده شدن درون سند ( document-wide style ) یك راه بسیار ساده برای شروع استفاده از CSS است . یك برچسب <style> درون سر صفحه ی سند HTML قرار دهید . به دلیل اینكه چند شكل از شیوه نامه ها ممكن است اضافه شود ( فراتر از شكل استاندارد CSS) باید هنوز هم صفت type را اضافه كنید تا نشان دهید كه كدام شكل از شیوه نامه را به كار می برید ، البته صرفنظر از پشتیبانی پیش فرض مرورگر از فناوری های شیوه نامه ها . به مثال های زیر توجه كنید : شیوه نامه گستردهدرون برجسب استایل <style type="text/css"> body **background-color:#666666; font-size:9px; } h1 **color:#990000;} </style> شیوه نامه پیوندی درون برجسب استایل <style type="text/css"> @import url( wp-layout.css ); </style> یك نگرانی در مورد شیوه نامه ها ی گنجانده شده این است كه همه ی مرورگرها اطلاعات شیوه نامه را به درستی درك نمی كنند . برای اجتناب از مشكلات ، اطلاعات شیوه نامه ها را با استفاده از روش توضیح گذاری HTML ، تبدیل به توضیحات كنید . به طوری كه این توضیحات روی صفحه نمایش نشان داده نمی شوند یا توسط مرورگرهای قدیمی تر ، به طور نادرستی تفسیر نمی گردند . ( نمی دانم نویسنده این مطلب را برای چه عصری از مرورگرها نوشته ! اما احتیاط شرط عقل است ! مهم تر از اون این یك استاندارد است ! پس طراحان موظف به انجام آن هستند ) CSS گسترده شده درون سند در مقایسه با CSS پیوندشده دارای معایب قابل ملاحظه ای است زیرا باید در هر صفحه كه استقاده می شود یك نسخه از آن كپی شود . این كار باعث سخت تر شدن این گونه سایت ها می شود و از حافظه نهائی محلی مرورگر نیز به شكل بهینه استفاده نمی شود . آخرین روش به كار بردن CSS اعمال آن درون مولفه های ویژه با استفاده از صفت رایج style است . نیازی نیست كه این گونه اطلاعات مربوط به شیوه نامه ها از مرورگرهایی كه نسبت به شیوه نامه ها اطلاعی ندارند مخفی شود ، زیرا مرورگرها صفاتی كه نمی فهمند را در نظر نمی گیرند . به مثال زیر توجه كنید : <p style="color:#3366FF; font-size:12px;">This isred blue text!</p> ولی بسیاری از مزایای اصلی استفاده از CSS به این روش به دست نمی آید . زیرا CSS خیلی به برچسب وابسته هستند . در واقع ، همه توافق دارند كه این شیوه خیلی بهتر از به كاربردن برچسب های جدید جهت تشریح ظاهر صفحه نمی باشد . ولی برخی از طراحان از CSS به این روش استفاده می كنند تا از كد HTML قدیمی به CSS پلی بزنند . منبع: ایران فروم
