استفاده از سبکهای در خط راه سریعی است برای اینکه کاری کنید که وبسایتتان ظاهری که شما میخواهید را داشته باشد. اما اگر که وبسایت شما چند صفحه داشته باشد و بخواهید که ظاهر برخی عناصر صفحات را به صورت واحد تغییر دهید، مثلاً رنگ تمام پیوندهای صفحات وبسایتتان را از رنگ نارنجی به سبز تغییر دهید، باید برای تکتک این عناصر این کار را انجام دهید. مطمئنم که خیلی لذتبخش نیست.
برای این مشکل دو راه وجود دارد. در هر دو روش، تمام اطلاعات سبکها به صورت متمرکز نوشته میشوند. به این ترتیب تغییر دادن سبکها کار سادهتری خواهد بود. این مجموعه دستورالعملهای مرکزی Cascading Style Sheets نام دارند و اگر از آنها به درستی استفاده شود، کار طراحی صفحات وب را بسیار سادهتر میکنند.
اولین راه برای متمرکز کردن این سبکها این است که تمام آنها را در قسمت head صفحه قرار دهیم. این کار در کُد HTML صفحه انجام میشود. NvU این کار را برای شما انجام میدهد، اما ایدهٔ خوبی است که به کُد HTML نگاهی بیاندازیم و ببینیم که NvU برای ما چه کار میکند.
برای این قسمت از راهنما، من بیشتر روی صفحهٔ دوم وبسایت Tutorial_Site تمرکز میکنم.
وقتی به این روش سبکها را به عناصر صفحه تخصیص میدهیم، دو اتفاق باید بیافتد. اول باید برای تمام عناصر صفحه که قرار است از یک سبک به خصوصی پیروی کنند، یک «نام» انتخاب کنید. این نام میتواند هر چه که شما میخواهید باشد. تنها در نظر داشته باشید که بسته به سبکی که شما اعمال میکنید، هر عنصر میتواند ظاهری کاملاًمتمایز داشته باشد. بنابراین معمولاًبهتر است نام عناصر را طوری انتخاب کنید که فعالیت یا محتوای هر عنصر را مشخص کند، تا اینکه مشخصات ظاهری آن را بازگو کند. NvU به این اسامی class (کلاس) میگوید.
در HTML عناصری هستند که از قبل نامگذاری شدهاند و میتوانید با استفاده از این نامها برای آنها سبک تعریف کنید. اینها Tag (برچسب) نام دارند و بهترین محل برای دیدن آنها خود کُد HTML است.
زمان آن است که چند class برای صفحهٔ دوم Tutorial_Site بسازیم. این کار را با استقاده از CSS editor برنامهٔ NvU انجام میدهیم که میتوانید آن را در Tools > CSS editor در نوار منوی اصلی پیدا کنید.
یک پنجره نمایش داده میشود. روی دکمهٔ «.Style elt» کلیک کنید. یک محاوره در سمت راست ظاهر میشود. قسمت Media list را خالی بگذارید، اما کار خوبی است که برای برگهسبک خود یک نام انتخاب کنید. در این مثال من نام My_stylesheet را انتخاب کردم (به نویسهٔ «_» دقت کنید). بعد از وارد کردن نام، روی دکمهٔ «Create stylesheet» کلیک کنید.
حالا زمان اضافه کردن چند دستور به برگهسبک است. دو راه برای اینکار وجود دارد. میتوانید classهای خودتان را بسازید و یا میتوانید از tagهای HTML که وجود دارند استفاده کنید. همچنین میتوانید بنا به تشخیص از ترکیب این دو روش استفاده کنید. هیچ درست و اشتباهی در این کار نیست و بهترین کار این است که آن را کمی تجربه کنید. ما با ایجاد یک class جدید کار را شروع میکنیم، بعدتر من روش دیگر را به شما نشان خواهم داد. ایجاد یک قانون در NvU تنها کار کلیک کردن روی دکمهٔ Rule، مشخص کردن نام classهایی که این قانون در مورد آنها اعمال میشود، و تعیین کردن برخی جزئیات دربارهٔ نحوهٔ نمایش اجزا است. در ابتدا ممکن است کمی مشکل به نظر برسد، اما واقعاًبه این سختی نیست.
روی دکمهٔ «Rule» کلیک کنید. در زبانهٔ General بخشی میبینید به نام New Style Rule با سه گزینه. گزینهٔ اول (Named Style) را انتخاب کنید و برای سبک خود یک نام وارد کنید. ایدهٔ خوبی است که نام سبک را طوری قرار دهید که محتوای classها را توضیح دهد، تا اینکه شکل ظاهری را نشان دهد. فعلاًبه این سبک یک نام سادهٔ «important_text» میدهیم.
همانطور که میبینید قانون نامگذاری شده در زیر Internal Stylesheet در قسمت سمت چپ پنجرهٔ CSS Stylesheet دیده میشود. حالا تنها کاری که مانده است این است که به NvU بگوییم عناصری که این class به آنها تخصیص داده شده است، چهطور باید دیده شوند. گزینههای زیادی برای این قسمت وجود دارد. از آنچه که ما بخواهیم در این راهنما توضیح دهیم بسیار بیشتر. من تنها موارد پایهای را در اینجا توضیح میدهم. تمام گزینهها در زبانههای پنجرهٔ CSS Editor هستند. از آنجایی که این سبک important_text نام دارد، بهتر از تنظیمات متن شروع کنیم. زبانهٔ Text را با کلیک کردن روی آن انتخاب کنید. با تعداد زیادی از روشها برای قالببندی متن روبرو میشوید.
بیشتر این تنظیمات شبیه آنچه است که در یک برنامهٔ پردازشگر متن، یا چیدمان صفحه میبینید. اما تفاوتهایی وجود دارد که باید از آنها آگاه باشید. نمایش نهایی یک صفحهٔ وب، نتیجهٔ مذاکرات میان HTML و CSS یک صفحهٔ وب و مرورگر وب است. در کل، برای اینکه متن در یک صفحهٔ وب با یک قلم نمایش داده شود، مرورگر باید به آن قلم دسترسی داشته باشد. اگر مرورگر به آن قلم دسترسی نداشته باشد، آنگاه متن مطابق با تنظیمات پیشفرض مرورگر نمایش داده میشود (که ممکن است چیزی باشد که باعث شود صفحهٔ شما بسیار زشت به نظر بیاید). برای حل این مشکل، طراحان وب از خانوادههای قلمها به جای مشخص کردن یک قلم استفاده میکنند. NvU سه تا از معروفترین خانوادههای قلم را دارد که ما نیز از همانها استفاده میکنیم. اندازهٔ قلمها هم در کار وب کمی متفاوت است. از آنجایی که صفحات وب در یک نمایشگر دیده میشوند، واحد اندازهگیری پیشفرض اندازهها نقطه است. با این وجود در مورد CSS گزینههای دیگر زیادی وجود دارد (این به این علت است که شما میتوانید از CSS برای کارهای دیگر بهجز وب استفاده کنید). بحثهای دیگری در مورد استفاده کردن از واحدهای مطلق در صفحات وب وجود دارد. همچنین این مسئله را باید در نظر داشت که مرورگری که صفحهٔ وب در آن دیده میشود، صفحه را طوری نمایش میدهد که با آخرین سخن هماهنگ باشد. میتوانید یک قلم را طوری تنظیم کنید که دقیقاً۲۳ نقطه باشد، اما اگر بعدتر مشخص کنید که متن صفحات به صورت پیشفرض با اندازهٔ ۵۰ نقطه نمایش داده شوند، تمام متنهایی که کلاس important_text به آنها نسبت داده شده است، در ظاهر با دیگر متنها تفاوتی نخواهند داشت. این یک مشکل عام است و بهترین راه برای رفع کردن آن استفاده از اندازههای نسبی است. این کار با استفاده از کلمات کلیدی larger و smaller انجام میشود. در تمامی موارد، هنگامی که شما از CSS Editor استفاده میکنید و مقداری را مشخص نمیکنید، از مقدار پیشفرض مرورگر استفاده میشود. ادامه دهید و مقادیر را طوری وارد کنید که شبیه تصویر زیر باشد:
روی دکمهٔ «Close» در پنجرهٔ CSS Editor کلیک کنید.
مطمئن شوید که صفحهٔ second_page.htlm را در پنجرهٔ اصلی باز کردهاید. در زیر متنی که در این مثال استفاده میشود آورده شده است. اگر حوصله ندارید آن را وارد کنید، از این متن نسخهبرداری کنید و آن را در صفحهٔ خود بچسبانید:
این صفحهٔ دوم وبسایت راهنما است.
اگر همهچیز مطابق نقشه پیش رفته باشد، یک پیوند از صفحهٔ اصلی وبسایتتان باید به این صفحه وجود داشته باشد. پیوند نسبی است، نه مطلق، زیرا این کار معمولاً بهتر است. چون بعدها اگر ساختار وبسایت تغییر کرد، در میزان زحمات بهروز کردن وبسایت صرفهجویی میکند. این صفحه یک برگهسبک در قسمت header خود دارد و پاراگرافها و متنهای زیر هر کدام کلاسهای گوناگونی خواهند داشت که به آنها تخصیص داده میشوند.
این پاراگراف یک پاراگراف عادی است که هیچ کلاسی به آن تخصیص داده نشده است، و باید مانند بقیهٔ متنهای صفحه به نظر بیاید.
این خط برچسب <H1> دارد.
این یکی برچسب <H2> دارد.
و این یکی <H3>
این پاراگرافی است که کلاس important_text به آن تخصیص داده شده است. این به معنی است که ما میتوانیم به این متن یک قلم دیگر، یا موقعیت دیگر و یا هر دو را نسبت دهیم تا باقی متن صفحه متفاوت باشد.
به این پاراگراف کلاس quote تخصیص داده شده است. هر عنصر دیگری از صفحه که همین کلاس به آنها تخصیص داده شده است، باید مانند این پاراگراف دیده شوند. بعدتر من یک qoute در صفحه قرار میدهم که این مطلب را نشان دهد.
بسیاری کارهای دیگر هم میتوان با استفاده از سبکها انجام داد، ولی فعلاً برای اینکه راه بیافتید در همین حد کافی است. برای اطلاعات بیشتر میتوانید به قسمت پیوندهای راهنما مراجعه کنید.
هر متنی که در صفحهٔ second_page.html است را با این متن جایگزین کنید (فراموش نکنید که صفحه را ذخیره کنید).
پاراگرافی را که میگوید کلاس improtant_text به آن تخصیص داده شده است را انتخاب کنید. در قسمت بالا و سمت چپ پنجرهٔ NvU یک منوی واشو است که در آن نوشته شده (no class). روی آن کلیک کنید و باید در فهرست آن important_text را ببینید.
حالا متن باید طوری شبیه این به نظر برسد:
حالا زمان خوبی است که به کُد HTML نگاهی بیندازم، فقط برای اینکه ببینیم این ماجرا چگونه دیده میشود. روی زبانهٔ source در پایین پنجره کلیک کنید. ابتدا نگاهی به بالای صفحه بیاندازید. باید چیزی شبیه این ببینید:
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>The second page</title>
<style title="My_style sheet" type="text/css">
.important_text { font-family: Arial,Helvetica,sans-serif;
color: rgb(204, 0, 0);
font-weight: bold;
text-transform: capitalize;
text-decoration: underline overline;
font-size: larger;
} </style>
</head>
این برگهسبکی است که در head صفحه قرار دارد. به قسمتی که شامل important_text. میشود دقت کنید. تمام تنظیماتی که در CSS Editor وارد کردید داخل آکولادها دیده میشوند. وقتی که یک کلاس دیگر تعریف میکنید، ویژگیهای مربوط به خودش را در یک جفت آکولاد مربوط به خود دارد. وقتی که کار را با استفاده از برگهسبکهای خارجی ادامه دادیم، دوباره به این قسمت از کُد نگاهی میاندازیم.
حالا به قسمتهای پایینتر صفحه، اطراف خط شمارهٔ ۳۹، نگاهی بیاندازید. چنین چیزی را میبینید:
<span>
این پاراگرافی است که کلاس important_text به آن تخصیص داده شده است. این به معنی است که ما میتوانیم به این متن یک قلم دیگر، یا موقعیت دیگر و یا هر دو را نسبت دهیم تا باقی متن صفحه متفاوت باشد.
</span>
این قسمتی از کُد است که به مرورگر میگوید کدام قسمت از متن باید از کلاس important_text استفاده کند. به قسمتهایی که میان <> احاطه شدهاند دقت کنید. اینها برچسب (Tag) نام دارند. هر قسمتی از کُد HTML به یک برچسب تعلق دارد و میتوان به هر برچسب یک قانون سبک تخصیص داد. در مثال بالا NvU از برچسب <span> استفاده کرد که به زبان HTML چیزی شبیه «بین این دو نقطه» است. این زمانی کاربرد دارد که NvU بخواهد به قسمتی از متن سبک خاصی را تخصیص دهد. شما مجبور نیستید که برای اعمال سبکها یک کلاس را به چیزی تخصیص بدهید. میتوانید برای هر برچسب سبک تعریف کنید. استفاده کردن از سبکها برای برچسبها به این معنی است که هر چیزی که بین آن برچسب قرار میگیرد، به صورت خودکار از قوانین سبک مربوط به آن برچسب تأثیر میپذیرد. به صورت خاص برچسبهای سرتیترها به این طریق بسیار مورد استفاده قرار میگیرند، که این مثال هم از آن نوع است. فقط به یاد داشته باشید که از این تکنیک میتوانید تقریباً برای هر برچسبی استفاده کنید.
بسیار خوب، میتوانید به نگاه کردن به آن کُد خاتمه دهید. روی زبانهٔ Normal در پایین پنجره کلیک کنید.
بیایید برای سرتیترها یک جفت سبک بسازیم.
ابتدا باید قسمتی از متن را میان برچسبهای سرتیتر قرار دهیم. این خط از متن را انتخاب کنید:
این خط برچسب <H1> دارد.
ما میخواهیم به این متن برچسب H1 را تخصیص دهیم. در قسمت بالا و سمت چپ پنجرهٔ NvU یک منوی واشو وجود دارد که در حال حاضر در آن نوشته شده است «Body Text». روی آن کلیک کنید و آن را به Heading 1 تغییر دهید. متوجه میشوید که اندازهٔ قلم بزرگتر و فاصلهٔ خطها بیشتر شد.
با وجود اینکه هنوز برای برچسب سرتیتر قانون سبکی تعریف نکردهایم، اما ظاهر متن تغییر کرد. این به این علت است که NvU از تنظیماتی استفاده کرد که بیشتر مرورگرها از آن استفاده میکنند و هر مرورگری برای نمایش دادن سرتیترها تنظیماتی دارد. کمی دیگر همهچیز را طوری تغییر میدهیم که آنگونه که ما میخواهیم بشود. قبل از آنکه این کار را بکنیم، به سراغ خطهای بعدی بروید و برچسب آنها را نیز آنگونه که باید تغییر دهید. وقتی کارتان تمام شد، صفحه باید شبیه این تصویر باشد:
فقط برای اینکه مطمئن شویم که نام برچسبها را درست تنظیم کردهایم، نگاهی به کُد HTML میاندازیم که هیچوقت دروغ نمیگوید. روی زبانهٔ source در پایین پنجره کلیک کنید، و به دنبال چیزی شبیه این بگردید.
<H1>این خط برچسب <H1> دارد.<H1/>
<H2>این یکی برچسب <H2>دارد. <H2/>
<H3>و این یکی <H3><H3/>
نگران «<»های عجیب نباشید. تمام کاری که ما باید بکنیم این است که مطمئن بشویم تمام برچسبها به ترتیب مناسب واقعاً <H1> و <H2> و <H3> هستند. زمان آن است که چند سبک به این برچسبها تخصیص دهیم. روی زبانهٔ Normal در پایین پنجره کلیک کنید تا به کارمان برسیم. CSS Editor را با کلیک کردن روی Tools > CSS Editor اجرا کنید. مطمئن شوید که internal stylesheet از سمت چپ پنجره انتخاب شده است.
همان گامهای قبلی را تکرار کنید. روی دکمهٔ «Rule» کلیک کنید تا محاورهٔ New Style Rule بالا بیاید. به جای انتخاب کردن named style که قبلاً انتخاب کرده بودید، اینبار مورد style applied to all elements matching the following selector را انتخاب کنید. مقدار H1 را در فیلد وارد کنید و روی دکمهٔ «Create Style Rule» کلیک کنید. حالا میتوانید سبکهایی که میخواهید را برای تمام متنهایی از صفحه که میان برچسبهای H1 قرار دارند تعریف کنید (همان heading 1 در منوی واشوی بالای صفحه). توجه داشته باشید که باید مقدار h1 را در فیلد وارد کنید و نه <h1>.
ادامه دهید و در زبانههای پنجرهٔ CSS Editor بچرخید. با تعدادی از گزینههای سبک در موضوعات مختلف مواجه میشوید که میتوانید آنها را به هر سبک تخصیص دهید. بهترین کار برای اینکه ببینید هر کدام از اینها چه کار میکنند، امتحان کردن آنها و دیدن نتیجه است. در این مثال، من از تنظیمات زیر استفاده کردم:
که نتیجهٔ آن به صورت زیر است:
ادامه دهید و برای دو سرتیتر دیگر نیز سبکهای خود را اعمال کنید. ببینید میتوانید سبکها را طوری تعریف کنید که نتیجهٔ کار چیزی شبیه شکل زیر باشد:
اگر به مشکل برخوردید تصویر زیر شاید کمی کمک کند:
یک نکتهٔ مهم در مورد تصویر فوق وجود دارد که باید بدانید. پنجرهٔ «Sheets and Rules» فهرست تمام سبکها و قوانینی که در مورد صفحهٔ جاری اعمال شدهاند را نمایش میدهد. همانطور که میبینید هیچیک از سبکهای مربوط به برچسبهای سرتیتر با نقطه شروع نمیشوند، ولی سبک important_text با نقطه شروع میشود. این نقطه به این معنی است که این قانون روی یک کلاس نامگذاری شده اجرا میشود (اولین مثال این بخش). عدم وجود آن نقطه به معنای این است که قانون سبک در مورد تمام عناصری که میان یک برچسب HTML خاص قرار دارند اعمال میشود. اگر با اعمال سبکها هنوز در دستیابی به نتیجهٔ دلخواه مشکل دارید، این موضوع میتواند جای مناسبی برای جستجوی کردن راهحل باشد.
برای اینکه تفاوت این دو راه حل اعمال کردن قوانین سبک را نمایش دهیم، بیایید یک قانون و یک کلاس برای متنی که نقل قول است بسازیم. دیگر تمام مراحل را با جزئیات ذکر نمیکنیم. اگر به راهنما احتیاج داشتید از این تصاویر کمک بگیرید:
در نهایت صفحه باید اینطور بهنظر بیاید:
همچنین میتوانید سبکها را همانطور که به متن اعمال میکنید، بر روی تصاویر نیز اعمال کنید. با وجود اینکه معمولاً از سبکها برای تغییر نحوهٔ نمایش تصاویر استفاده نمیشود، اما برای تعیین نحوهٔ چیدمان تصاویر در کنار متون کاربرد دارند. در حالی که این کار را میتوانید با استفاده از پنجرهٔ Image properties انجام دهید، اگر وبگاه شما تعداد زیادی تصویر داشته باشد، استفاده از سبکها میتواند زمان زیادی را صرفهجویی کند.
ابتدا باید چند تصویر به صفحه اضافه کنید. برای اینکار گامهایی که قبلتر در این راهنما یادگرفتید را تکرار کنید. در این مورد، تصاویر طوری در صفحه قرار خواهند گرفت که متن در اطراف آنها پیچیده است، یا سمت راست یا سمت چپ، با یک فاصله از اطراف. این به این معنی است که تصاویر باید مقداری کوچکتر باشند. من پیشنهاد میکنم از تصاویری با ابعاد ۲۴۰×۳۲۰ استفاده کنید. دو تصویر در پوشهٔ images وبگاه Tutorial_Site وجود دارند که میتوانید از آنها استفاده کنید.
برای آنکه بهتر ببینید که این پیچیدن متن چگونه کار میکند به کمی متن بیشتر احتیاج دارید. در زیر پاراگرافی وجود دارد که میتوانید از آن نسخهبرداری کنید و در صفحهٔ خود بچسبانید.
این یک پاراگراف بلندتر است، تنها برای اینکه نشان دهد چگونه متن با استفاده از سبکها در اطراف تصاویر میپیچد. به جز این هیچ علت دیگری برای وجود این متن وجود ندارد (مانند بقیهٔ این صفحه البته). اگر هنوز دارید این را میخوانید، شدیداً توصیه میکنم که این کار را نکنید. هیچ کاری به جز اتلاف وقت نمیکنید. اگر هنوز دارید ادامه میدهید، باید به خاطر تعهدتان نسبت به خواندن تمام جزئیات این راهنما، از خودتان تقدیر به عمل بیاورید. اگر واقعاً دوست دارید مطلبی بخوانید، راهنمای اصلی NvU به نظر مناسبتر میآید. تنها چند خط دیگر لازم است که بتوانیم به راحتی تأثیر CSS را که با استفاده از CSS Editor برنامهٔ NvU وارد میشود، بر نحوهٔ قرارگیری و نمایش تصاویر در صفحات وب ببینیم. در حقیقت شما این تنظیمات را میتوانید به هر عنصر «جعبهای»، شامل متن نیز بدهید. اگر میخواهید تغییرات را در عمل ببینید، کافی است به این متن یک نام بدهید و بعد با استفاده از تنظیمات پنجرهٔ CSS Editor تغییرات روی این متن را مشاهده کنید. البته این توضیحات در خود متن این راهنما آورده شده بود، در نتیجه نیازی نبود که این قسمت از متن را بخوانید.
حداقل دو بار وارد کردن متن بالا باید کافی باشد. بعد تصاویر را وارد کنید، در نتیجه صفحه اینگونه دیده میشود:
برای آنکه این تصاویر را آنگونه که میخواهیم نمایش دهیم به دو کلاس احتیاج داریم. یکی برای تصاویری که سمت چپ نمایش داده میشوند و دیگری برای سمت راست. این کار مانند درست کردن هر کلاس دیگری در CSS Editor است. با نامگذاری یک کلاس برای تصاویری که در سمت چپ صفحه قرار خواهند گرفت به طوری که متنها در اطراف آنها خواهند پیچید. کار را شروع کنید.
در تصویر فوق ملاحظه میکنید که زبانهٔ Box مورد استفاده است. جعبهها نحوهٔ تشریح کردن انفصال میان عناصر صفحه در CSS هستند. در کل هر عنصری که با یک سبک صدا زده میشود، در جعبهٔ خود قرار دارد. زبانهٔ Box به شما اجازه میدهد که نحوهٔ نمایش باكسها و نحوهٔ ارتباط بین باكسها را دستکاری کنید. باكسها ابزارهای قدرتمند و پیچیدهٔ چیدمان صفحه هستند، اما از آنها میتوان برای چیدمان سادهٔصفحات استفاده کرد. برای حالا مهم این است که بدانید هر قسمت باكسها در CSS چه کار میکند. به نمودار زیر نگاهی بیاندازید:
این تشریح میکند که چگونه عناصر مختلف یک جعبه چیده میشوند. CSS به شما این امکان را میدهد که هر عنصر را به صورت جداگانه کنترل کنید؛ بالا، پایین، چپ، راست. در تصویر بالا من فاصلهٔ ۱۰ نقطه را در اطراف متن فاصله انداختهام و به اندازهٔ ۱۰ نقطه نیز حاشیه برای آن تنظیم کردهام. من این کار را به این دلیل کردم که بعداًتصمیم گرفتم به اندازهٔ ۱۰ نقطه نیز در اطراف تصویر کناره (خط مرز) بکشم (با وجود این حاشیه دیگر هیچ عنصری به کنارهها مماس نمیشود). همچنین به دقت داشته باشید که من گزینهٔ «Float» را به مقدار «Left» تنظیم کردهام تا تصویر در سمت چپ صفحه بیافتد و متن و دیگر عناصر در اطراف آن بپیچند.
حالا یک کلاس دیگر به نام rightfloat بسازید. از همان تنظیمات استفاده کنید به جز اینکه مقدار float را به right تغییر دهید.
حالا تنها کاری که مانده است این است که هر کلاس را به یکی از تصاویر نسبت دهیم. روی تصویر یکبار کلیک کنید. یک جعبهٔ باریک در اطراف تصویر مشاهده میکنید که مربعهای کوچک سفیدرنگ دارد. در حالی که تصویر انتخاب شده است، از منوی واشوی بالا و سمت چپ پنجرهٔ NvU کلاس مورد leftfloat را انتخاب کنید.
نتیجه اینگونه خواهد بود:
کلاس rightfloat را به همین ترتیب به تصویر دیگر نسبت دهید. اگر همهچیز به درستی پیش برود باید چیزی شبیه این را مشاهده کنید:
این اساس کار کردن با برگهسبکهای داخلی برای چیدمان یک صفحهٔ وب بود. با وجود اینکه نسبت به روش نوشتن سبکها برای هر عضو به صورت مجزی بسیار کاراتر است، اما هنوز اگر بخواهید برای هر یک صفحات باكسها این سبکها را پیادهسازی کنید کمی کار دارد. برای اینکار باید با استفاده از CSS Editor تنظیمات مناسب را برای هر صفحه انجام دهید، یا اینکه مستقیماً کُد CSS تولید شده در قسمت head هر صفحه را نسخهبرداری کنید و در تمام صفحات دیگر وبسایت بچسبانید. راه دیگری نیز هست. این امکان وجود دارد که شما کُد CSS را از صفحه جدا کنید و آن را در یک پرونده مستقل قرار دهید و بعد آن را به تمام صفحاتی که بخواهیم آن CSS روی آنها اعمال شود، پیوند دهیم. این روش امتیازات خود را دارد. بزرگترین آنها این است که تنها کافی است یکبار صفحهٔ CSS خود را بسازید، بدون در نظر گرفتن اینکه وبسایت شما چند صفحه دارد. همچنین اگر بعدتر خواستید تغییری در سبکهای خود بدهید، کافی است که این تغییرات را در یک محل متمرکز انجام دهید و تغییرات در تمام صفحاتی که از این برگهسبک استفاده میکنند اعمال خواهد شد. انجام دادن این کار راحت است، البته در نسخهٔ جاری NvU یک اشکال وجود دارد که وقتی که از این روش استفاده میکنید باید به آن توجه شود.
