خوب اکنون شما فایل را دارید. همیشه طراحی css را خلاقانه باید انجام داد تا همیشه علاوه بر القا صحیح منظورم هر المان به مخاطب، برای وی تازگی نیز داشته باشد و البته نظم خاصی را در کار شما نیز حس کند. این احساس در بیننده تنها زمانی القا میشود که شما زمان طراحی خود با همین حس کار کنید. یعنی سعی نکنید چیزی را از جای دیگر تقلید کنید و البته سعی کنید همه خصوصیات یک المان متناسب با کاربرد و اهمیت آن المان باشد.
در مثال بالا، قظعاً باید عنوان از متن تمیز داده شود، اما بر خلاف تصور خیلی ها، الزاماً عنون نباید با قلم درشت تر یا پر رنگ تری نوشته شود. این قسمت همان تقلید نکردن است. شما خلاق باشید، شاید
ایتالیک نوشتن یا روش های دیگر هر یک مناسب باشند برای تفکیک عنوان از موضوع.
ما از بالا به سمت پایین میایم، ابتدا به عنوان و شناسه title می پردازیم.
برای شروع باید اندازه قلم، نوع قلم، حالت نوشته و البته کلی خصوصیت دیگر را تعیین کنیم. همیشه از فونت شروع کنید، چرا که پس از روشن شدن سایز نوشته است که میتوانید فاصله مناسب با حاشیه جدول و دیگر مشخصات را تنظیم کنید. طبق آموخته های بالا کدهای زیر را اضاف میکنیم.
کد:
#title {
font-family: Arial; font-size: 15px; text-decoration: none; color: #FF0000; font-weight: bold
}
و خروجی ما اینطور خواهد شد:
اما در زبان فارسی همه چیز باید از راست به چپ باشد، این بزرگترین نکته در فارسی سازی قالب های وبلاگ ها و سایت ها نیز می باشد. اما بسیاری از افراد به اشتباه چیدمان پارگراف را با چیدمان المان اشتباه می گیرند.
به عنوان مثال در اینجا متن انگلیسی ما به عنوان یک المان در سمت چپ می باشد، اما چیدمان پارگراف آن راست به چپ است و این باعث میشود نقطه جای آخر جمله ابتدای خط بیوفتد!
Direction is not alignment.
اما میتوان چیدمان یک پارگراف را از راست به چپ کرد، در حالی که به عنوان یک المان در سمت راست قرار دارد، در این زمان مثلا در زبان انگلیسی نقطه درست سر جای خودش خواهد بود:
Direction is not alignment.از این رو، اگر ما از کارکتر های انشایی مانند "،"، "."، "!" و ... استفاده میکنیم، باید دقت کنیم که قراردادن متن به عنوان یک المان در سمت راست یا چپ کافی نیست وما باید چیدمان پارگراف را نیز تغییر دهیم. انجام این کار از طریق css باید باشد چرا که باز یک خصیصه مطرح است. بنابراین ما به شناسه title خود، یک خصوصیت دیگر را نیز خواهیم افزود بدین شرح:
کد:
direction: rtl;
مقدار
rtl به معنای
right to left می باشد. اگر بخواهیم برای زبان های انگلیسی یا مشابه که از چپ به راست هستند بنویسمی میشود
left to right که ما به طور خلاصه مقدار خصیصه
direction را برای آن زبان ها
ltr قرار میدهیم.
البته میتوان از
dir هم استفاده کرد، اما استفاده از
direction همزمان هم جایگاه المان را روشن میکند ( راست یا چپ) هم چیدمان پارگراف آن را. اما اگر ما بخواهی مدر قسمت خاصی یک متن راست چین باشد اما در سمت چپ نمایش داده شود، باید از
dir برای چیدمان پارگراف و از خصیصه
align برای جایگاه راست، وسط، چپ استفاده کرد.
نکته مهم اینجاست برخی از افراد در تگ
html یا
body تعریف میکنند که کل این صفحه اساساً از چپ به راست (یا برعکس) خوانده شود. این کار چند اشکال دارد. از جمله اینکه اسکرول مرورگرها (برخی از آنها) را نیز جا به جا میکند و این به مزاج کاربران خوشایند نیست. از این رو بهتر است موردی راست چین یا چپ چین را تعریف کرد.
اکنون خروجی ما بدین شکل است:
در مرحله بعد، ما می خواهیم یک پشت زمینه به این سطر از جدول اختصاص دهیم. برای این کار چند راه وجود دارد:
- استفاده از یک تصویر بدون تکرار
- استفاده از تصویر تکرار شونده افقی
- استاده از تصویر تکرار شونده عمودی
- استفاده از تصویر تکرار شونده ترکیبی
در مواردی که ما با سطر روبروه باشیم، بیشتر تصاویر تکرار شونده افقی استفاده میشوند. در مطلب بعد به شرح کامل خصیصه های مربوط به تصویر پشت زمین هو نحوه کار آنها را شرح خواهم داد.
مهمان ها امکان مشاهده را ندارد، لطفاً عضو شوید، اگر عضو هستید وارد حساب خود شوید
