دوشنبه, ۶ اسفند, ۱۴۰۳ / 24 February, 2025
استفاده از CSS در برنامه های وب

ایجاد خروجی مناسب و با فرمت مطلوب ، از جمله اهداف مهم در تمامی برنامه های کامپیوتری است. برنامه های وب نیز از ایـن قاعده مستثنی نبوده و طراحان و پیاده کنندگان این نوع از برنامه ها ، با بهره گیری از امکانات و تکنولوژی های متفاوت سعی در ارائه خروجی مناسب و با فرمت قابل قبول برای مخاطبان خود می نمایند. خروجی یک برنامه وب ، در سطح سرویس گیرندگان ارائه می گردد ، بدیهی است بمنظور فرمت مناسب خروجی برنامه های وب ، می بایست بر تکنولوژی هائی متمرکز گردید که امکان بکارگیری آنان در سطح سرویس گیرنده و از طریق مرورگر کاربران ، میسر می باشد . مسئولیت میزبان نمودن بخش رابط کاربر برنامه های وب برعهده مرورگر بوده و لازم است تمامی تلاش های انجام شده در این خصوص با تاکید بر اهمیت و جایگاه مرورگر ها ، سازماندهی و مدیریت گردد . ASP.NET ( پلات فرم دات نت برای ایجاد برنامه های وب ) ، از دو روش عمده در ارتباط با ایجاد فرمت مناسب خروجی ( Formatting) برای برنامه های وب ، استفاده می نماید :
●استفاده از CSS
از تکنولوژی CSS)Cascading style sheet) ، بمنظور کنترل شکل ظاهری عناصر موجود بر روی یک فرم وب استفاده می گردد . از امکانات CSS ، می توان در جهت تنظیم رنگ ، اندازه ، فونت و رفتار عناصر HTML موجود بر روی یک صفحه وب استفاده نمود .
●استفاده از XSLT
از تکنولوژی XSLT)Extensible Stylesheet Language Transformation ) ، بمنظور تبدیل اطلاعات یک فایل XML به خروجی HTML و استقرار اطلاعات فوق بر روی یک فرم وب ، استفاده می گردد . XSLT ، داده مورد نیاز را از فایل XML دریافت و پس از تبدیل آنان به عناصر HTML ، سبک های ( Styles ) مشخص شده را در رابطه با هر یک از عناصر بکار می گیرد .
در این مقاله قصد داریم به بررسی نحوه استفاده از CSS ، بمنظور تعریف فرمت خروجی برنامه های وب پرداخته و در مقاله ای جداگانه با نحوه استفاده از XSLT ، آشنا شویم .
CSS ، مسئولیت جمع آوری و سازماندهی تمامی اطلاعات مرتبط با فرمت بکارگرفته شده در ارتباط با عناصر HTML موجود بر روی یک فرم وب را برعهده دارد . با توجه به ذخیره سازی اطلاعات فوق در یک مکان ، مدیریت و اعمال سیاست های جدید در رابطه با شکل ظاهری یک برنامه وب ، بسادگی انجام خواهد شد . ویژوال استودیو دات نت ، ابزارهای لازم بمنظور ایجاد و ویرایش Style را ارائه نموده است. در زمان ایجاد یک برنامه وب با استفاده از ویژوال استودیو دات نت ، یک Style sheet پیش فرض نیز ایجاد می گردد .( بعنوان بخشی از یک پروژه جدید برنامه وب ، ) . لازم است به این نکته اشاره گردد که فقط برای پروژه های ویژوال بیسک دات نت ، بصورت اتوماتیک یک Style sheet پیش فرض ، ایجاد می گردد. برای پروژه های ویژوال سی شارپ ، می بایست یک style sheet ، ایجاد نمود.
●بمنظور اعمال فرمت دلخواه در رابطه با خروجی یک برنامه وب ، می توان در سه سطح متفاوت این کار راا انجام داد :
۱ ـ Global
سبک های تعریف شده دریک فایل جداگانه ذخیره و تمامی صفحات می توانند از آن استفاده نمایند .
۲ ـ Page
سبک های موردنظر در بخش Head یک صفحه تعریف و تمامی عناصر موجود بر روی صفحه قادر به استفاده از آنان خواهند بود.
۳ ـ Inline
سبک های مورد نظربعنوان خصلت یک عنصر HTML تعریف و صرفا" همان عنصر قادربه استفاده از آنان خواهد بود .
اولویت هر یک از سطوح فوق ، مشابه تعریف یک متغیر و محدوده ( Scoping ) استفاده از آن می باشد. سبک های تعریف شده Inline دارای اولویت بیشتر نسبت به Page بوده و سبک های Page دارای اولویت بیشتری نسبت به Global می باشند . مثلا" در صورتیکه با استفاده از هر یک از روش های فوق ، سبک خاصی بمنظورنحوه نمایش یک پاراگراف ، تعریف شده باشد ، سبک تعریف شده inline دارای اولویت بیشتری خواهد بود.با توجه به اولویت مجموعه قوانین تعریف شده مربوط به سبک نمایش ، از Style Sheet ها ، بعنوان Cascading نیز یاد می گردد .
● کد زیر ، نحوه استفاده از سه روش فوق را بمنظور تعریف Style ، نشان می دهد .
<HTML> <HEAD> <title> WebForm۱ </title> <!-- (۱) Style Sheet reference . ---> <LINK REL="StyleSheet" Type="text/css" HREF="Test.css"> <!-- (۲) Page-Level style definition --> <Style> p font -family :Times New Romans , Thoma , font-size:medium </Style> </HEAD> <Body> <P> The Alignment is from the style sheet . </p> <P> The font is from the style in the pages head element . </P> <!-- (۳) Inline style definition --> <P style="FONT-SIZE : large ; FONT - STYLE : italic " > the italic is from the inline style . </P> </Body> </HTML> Test.css file <!-- (۱) From Styles.css sheet referenced in HEAD element . --> P { font-size : small ; text - align : center ; }
ایران مسعود پزشکیان دولت چهاردهم پزشکیان مجلس شورای اسلامی محمدرضا عارف دولت مجلس کابینه دولت چهاردهم اسماعیل هنیه کابینه پزشکیان محمدجواد ظریف
پیاده روی اربعین تهران عراق پلیس تصادف هواشناسی شهرداری تهران سرقت بازنشستگان قتل آموزش و پرورش دستگیری
ایران خودرو خودرو وام قیمت طلا قیمت دلار قیمت خودرو بانک مرکزی برق بازار خودرو بورس بازار سرمایه قیمت سکه
میراث فرهنگی میدان آزادی سینما رهبر انقلاب بیتا فرهی وزارت فرهنگ و ارشاد اسلامی سینمای ایران تلویزیون کتاب تئاتر موسیقی
وزارت علوم تحقیقات و فناوری آزمون
رژیم صهیونیستی غزه روسیه حماس آمریکا فلسطین جنگ غزه اوکراین حزب الله لبنان دونالد ترامپ طوفان الاقصی ترکیه
پرسپولیس فوتبال ذوب آهن لیگ برتر استقلال لیگ برتر ایران المپیک المپیک 2024 پاریس رئال مادرید لیگ برتر فوتبال ایران مهدی تاج باشگاه پرسپولیس
هوش مصنوعی فناوری سامسونگ ایلان ماسک گوگل تلگرام گوشی ستار هاشمی مریخ روزنامه
فشار خون آلزایمر رژیم غذایی مغز دیابت چاقی افسردگی سلامت پوست