بیایید ظاهر سایت خود را اندکی دیگر تغییر دهیم؛ برای این کار 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 مواجه شوید.
عکس 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 برای رنگ مورد نظر است، کلمه ترسناکی به کار برده شد نه؟! نترسید، توضیح آن در ادامه ارائه خواهد شد؛
درک کد آورده شده سخت است نه؟! این کد درهم و برهم و بی معنی در واقع نوعی آبیِ روشن است. شما به عنوان یک طراح سایت مبتدی نیازی نیست این کدها را از بر باشید، خوشبختانه امکانات متعددی در اینترنت برای دریافت کد hexadecimal رنگ مورد نظر شما وجود دارد و در حال حاضر نیازی نیست با یک نگاه به ظاهر کد متوجه شوید این کد مربوط به چه رنگی است و درصد روشنی آن چقدر است.