طراحی سایت ساناتک
0
استفاده از چند فایل CSS در طراحی سایت

بیایید ظاهر سایت خود را اندکی دیگر تغییر دهیم؛ برای این کار style های دیگری به body اضافه می کنیم. کدِ CSS زیر را درون فایل style1.css اضافه کنید؛

/*
CSS for Bubble Under site
*/
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #e2edff;
line-height: 125%;
padding: 15px;
}
h1 {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: x-large;
}
li {
font-size: small;
}
h2 {
color: blue;
font-size: medium;
font-weight: normal;
}
li {
font-size: small;
}
p {
font-size: small;
color: navy;
}

فایل CSS جدید را ذخیره کرده و تغییرات را در مرورگر مشاهده کنید. پس از اعمال تغییرات باید با چیزی مشابه با عکس 3.7 مواجه شوید.

نتیجه فایل css در صفحه وب

عکس 3.7: پس از اعمال تغییرات جزئیِ بالا باید سایت ما به این صورت در آمده باشد.

نگاهی به تغییرات جدید

تعداد اندکی تغییرات جدید به فایل CSS اضافه شد، بیایید با هم به این تغییرات آن هم به ترتیب نمایش آن ها در سایت نگاهی کامل تر بیاندازیم.

body {
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #e2edff;
padding: 15px;
line-height: 125%;
}

مشخصه background-color به اکثر المان های یک صفحه وب قابل اعمال است، و اینکه رنگ های زیاد و متفاوتی در تخصیص یک پس زمینه دلخواه به یک صفحه وب وجود دارد. یکی از این راه ها انتخاب و استفاده از رنگ های آشنا می باشد، مانند navy، blue، red، yellow و ... . به خاطر سپردن این رنگ ها ساده است مشکل رِنجِ متغییر آن ها می باشد. راه دیگر استفاده از یک hexadecimal برای رنگ مورد نظر است، کلمه ترسناکی به کار برده شد نه؟! نترسید، توضیح آن در ادامه ارائه خواهد شد؛

background-color: #e2edff;

درک کد آورده شده سخت است نه؟! این کد درهم و برهم و بی معنی در واقع نوعی آبیِ روشن است. شما به عنوان یک طراح سایت مبتدی نیازی نیست این کدها را از بر باشید، خوشبختانه امکانات متعددی در اینترنت برای دریافت کد hexadecimal رنگ مورد نظر شما وجود دارد و در حال حاضر نیازی نیست با یک نگاه به ظاهر کد متوجه شوید این کد مربوط به چه رنگی است و درصد روشنی آن چقدر است.

تعداد بازدید: 777
مطالب دیگر آموزش طراحی سایت
باگ‌ های شناخته شده مرورگرهاراستی‌ آزمایی کدهای CSS و HTML بعد از طراحی سایترفع خطاهای احتمالی هنگام طراحی سایتدقیق‌ تر شدن در استفاده از jQueryنمایش کپشن‌ های تصاویر درون گالری سایت
verification
@

با عضویت در خبرنامه در جریان آخرین اخبار و مطالب سایت قرار بگیرید