طراحی سایت
ساناتک
سه شنبه 30 شهريور 1395
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 رنگ مورد نظر شما وجود دارد و در حال حاضر نیازی نیست با یک نگاه به ظاهر کد متوجه شوید این کد مربوط به چه رنگی است و درصد روشنی آن چقدر است.

تعداد بازدید: 259
مطالب دیگر آموزش طراحی سایت
روش های انتخاب تگ با استفاده از classوضعیت های گوناگون یک لینک در یک صفحه وبstyle دهی گروهی به چندین تگانتخاب زمینه کاری در CSS با خصوصیت idکاربرد دستور em و italics در CSS
 
@

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