01 از 10
CSS Style Sheet را ایجاد کنید
همانطور که ما یک فایل متنی جداگانه برای HTML ایجاد کردیم، شما یک فایل متنی برای CSS ایجاد خواهید کرد. اگر برای این فرایند به تصاویری نیاز دارید، لطفا اولین آموزش را ببینید. در اینجا مراحل ایجاد CSS Style Sheet را در Notepad انجام می دهید:
- برای دریافت یک پنجره خالی، File> New in Notepad را انتخاب کنید
- ذخیره فایل به عنوان CSS با کلیک کردن بر روی فایل <ذخیره به عنوان ...
- به پوشه my_website در هارد دیسک خود بروید
- تغییر "ذخیره به عنوان نوع:" به "همه فایل ها" را تغییر دهید
- نام فایل خود را "styles.css" (ترک نقل قول ها) و روی ذخیره کلیک کنید
02 از 10
CSS Style Sheet را به HTML اضافه کنید
هنگامی که شما یک صفحه سبک برای وب سایت خود دارید، باید آن را به صفحه وب مرتبط کنید. برای این کار از تگ لینک استفاده می کنید. برچسب پیوند زیر را در هر نقطه در برچسب
سند pets.htm خود قرار دهید:03 از 10
رفع Page Margins
وقتی XHTML را برای مرورگرهای مختلف بنویسید، چیزی که یاد خواهید گرفت این است که همه آنها حاشیه های مختلف و قوانین چگونگی نمایش آنها را دارند. بهترین روش برای اطمینان از این که سایت شما در اکثر مرورگرها یکسان به نظر می رسد، این است که اجازه ندهید چیزهایی مانند حاشیه به طور پیش فرض به انتخاب مرورگر اجازه نمی دهد.
من ترجیح می دهم صفحات من را در گوشه بالا سمت چپ، بدون حاشیه یا حاشیه اطراف متن، شروع کنم. حتی اگر قصد داشته باشم محتویاتش را بگذارم، حاشیه ها را به صفر می رسانم، بنابراین شروع کردم با همان صفحه خالی. برای انجام این کار، زیر را به سند styles.css خود اضافه کنید:
html، body {
حاشیه: 0px؛
padding: 0px؛
مرز: 0px؛
چپ: 0px؛
بالا: 0px؛
}
04 از 10
تغییر فونت در صفحه
فونت اغلب اولین چیزی است که شما می خواهید در یک صفحه وب تغییر دهید. فونت پیش فرض در یک صفحه وب می تواند زشت باشد و عملا تا مرورگر وب خود است، بنابراین اگر فونت را تعریف نکنید، واقعا نمی دانید که صفحه شما چه ظاهر خواهد شد.
به طور معمول، شما می توانید فونت را در پاراگراف ها یا گاهی در تمام سند خود تغییر دهید. برای این سایت فونت را در سطح هدر و پاراگراف تعریف می کنیم. زیر را به سند styles.css خود اضافه کنید:
p، li {
فونت: 1em Arial، Helvetica، sans-serif؛
}
h1 {
فونت: 2em Arial، Helvetica، sans-serif؛
}
h2 {
فونت: 1.5em Arial، Helvetica، sans-serif؛
}
h3 {
فونت: 1.25em Arial، Helvetica، sans-serif؛
}
من با استفاده از 1em به عنوان اندازه پایه برای پاراگراف ها و آیتم های لیست شروع کردم و سپس آن را برای تنظیم اندازه برای سرفصل هایم استفاده کردم. من انتظار ندارم از یک عنوان عمیق تر از h4 استفاده کنم، اما اگر شما قصد دارید که بخواهید آن را نیز سبک کنید.
05 از 10
ساخت لینک های شما جالب تر
رنگ های پیش فرض برای پیوندهای آبی و بنفش برای پیوندهای بازدید شده و بازدید شده به ترتیب است. در حالی که این استاندارد است، ممکن است طرح رنگ صفحات شما را متناسب نباشد، بنابراین اجازه دهید آن را تغییر دهید. در فایل stiyles.css خود، موارد زیر را اضافه کنید:
a: link {
فونت خانواده: Arial، Helvetica، sans-serif؛
رنگ: # FF9900؛
متن دکوراسیون: زیر خط دار؛
}
a: بازدید {
رنگ: # FFCC66؛
}
a: شناور {
پس زمینه: #FFFFCC؛
font-weight: bold؛
}
من سه سبک پیوند ایجاد کردم، پیوند a: به عنوان پیشفرض، a: بازدید شده زمانی که بازدید شده است، رنگ را تغییر میدهم، و یک: شناور. با استفاده از: hover من یک لینک دریافت یک رنگ پس زمینه و bold برای تأکید بر این است که لینک کلیک می شود.
06 از 10
طراحی بخش ناوبری
از آنجایی که ابتدا بخش navigation (id = "nav") را در HTML قرار می دهیم، ابتدا آن را سبک کنیم. ما باید نشان دهیم که چقدر باید آن را داشته باشیم و حاشیه گسترده تر را در سمت راست قرار دهیم تا متن اصلی بر علیه آن ضربه نزند. من هم یک مرز در اطراف آن گذاشتم
CSS زیر را به سند styles.css اضافه کنید:
#nav {
عرض: 225 پیکسل؛
حاشیه سمت راست: 15 پیکسل؛
مرز: متوسط جامد 000000؛
}
#nav li {
لیست سبک: هیچ؛
}
.footer {
فونت اندازه: .75em؛
روشن: هر دو؛
عرض: 100٪؛
متن تراز: مرکز؛
}
اموال سبک لیست، لیستی را در داخل بخش ناوبری ایجاد می کند تا هیچ عدد و گلوله ای نداشته باشد، و عنصر .footer بخش کپی رایت را کوچکتر کرده و درون بخش مرکزی قرار می گیرد.
07 از 10
موقعیت بخش اصلی
با قرار دادن بخش اصلی خود با موقعیت مطلق شما می توانید مطمئن باشید که دقیقا همان جایی است که می خواهید آن را در صفحه وب خود بمانید. من 800 پیکسل عرضی را برای اندازه گیری مانیتورهای بزرگ ساختم، اما اگر شما یک مانیتور کوچکتر دارید، ممکن است بخواهید آن را باریک تر کنید.
در سند styles.css زیر را قرار دهید:
#main {
عرض: 800px؛
بالا: 0px؛
موقعیت: مطلق؛
چپ: 250 پیکسل؛
}
08 از 10
تفسیر پاراگرافهای شما
از آنجایی که قبلا فونت پاراگراف را در بالا تنظیم کردم، می خواستم هر پاراگراف را کمی "kick" اضافه کنم تا آن را بهتر بیان کنم. من این کار را با قرار دادن یک مرز در بالای صفحه انجام دادم که پاراگراف را بیش از تصویر فقط برجسته کرده است.
در سند styles.css زیر را قرار دهید:
.خط بالایی {
border-top: ضخامت جامد # FFCC00؛
}
من تصمیم گرفتم این کار را به عنوان یک کلاس به نام "toppline" انجام دهم تا فقط تمام پاراگراف ها را به این صورت تعریف کنم. به این ترتیب، اگر تصمیم بگیرم می خواهم یک پاراگراف بدون خط زرد بالا داشته باشم، می توانم به راحتی کلاس = "topline" را در برچسب پاراگراف ترک کنم و مرز بالا را نخواهم داشت.
09 از 10
یک ظاهر طراحی شده
تصاویر معمولا حاشیه ای در اطراف آنها هستند، این همیشه همیشه قابل رویت است، مگر اینکه تصویر یک لینک است، اما من دوست دارم یک کلاس در شیوه CSS من داشته باشم که به طور خودکار مرز را خاموش کند. برای این شیوه، من کلاس "noborder" را ایجاد کردم و بیشتر تصاویر در سند بخشی از این کلاس است.
بخش دیگر این تصاویر محل سکونت آنها در صفحه است. من می خواستم آنها را بخشی از پاراگراف آنها در بدون استفاده از جداول برای تراز آنها. ساده ترین راه این کار این است که از ویژگی CSS شناور استفاده کنید.
در سند styles.css زیر را قرار دهید:
#main img {
شناور به سمت چپ؛
حاشیه سمت راست: 5 پیکسل؛
حاشیه پایین: 15 پیکسل؛
}
.noborder {
مرز: 0px هیچ؛
}
همانطور که می بینید، خواص حاشیهای روی تصاویر نیز وجود دارد تا اطمینان حاصل شود که آنها در برابر متن شناور که در کنار آنها در پاراگراف ها قرار دارد، شکست نخورده اند.
10 از 10
اکنون به صفحه تکمیل شده خود نگاهی بیندازید
هنگامی که CSS خود را ذخیره کرده اید می توانید صفحه pets.htm را در مرورگر وب خود بارگیری کنید. صفحه شما باید شبیه به تصویری که در این تصویر نشان داده شده، شبیه به تصویر باشد و صفحه به درستی در سمت چپ صفحه قرار گیرد.
این مراحل را برای تمام صفحات داخلی خود برای این سایت دنبال کنید. شما می خواهید یک صفحه برای هر صفحه در ناوبری خود داشته باشید.