طرح بندی یک طرح یک ستونی

فایلی را بنام one_col_style.css پیدا کنید. آن را در پوشه CSS خود کپی کنید. سپس ، در بخش HEAD HTML خود ، خط زیر را وارد کنید:

<LINK REL=Stylesheet TYPE ="text/css" HREF="../css/one_col_style.css">

این البته پیوندی به صفحه سبکی است که قصد استفاده از آن را داریم.
پس از وارد کردن پیوند ، کار خود را ذخیره کرده و نتایج را در مرورگر خود مشاهده کنید. صفحه HTML ساده باید به این شکل تبدیل شود: (رنگهایی که ما انتخاب کرده ایم به همین راحتی هستند تا بتوانید بخشهای مختلف را مشاهده کنید - کمی جذاب هستند!)

CSS added to the HTML 5 layout

اگر هنوز یک صفحه HTML ساده است ، مطمئن شوید که مرجع HREF شما در کد LINK بالا صحیح است. آیا پرونده ما را در مکان صحیح کپی کردید؟
اکنون CSS را مرور خواهیم کرد و نحوه کار آن را خواهیم دید. بنابراین کد CSS را باز کرده و نگاهی به آن بیندازید.
اولین چیزی که باید بررسی شود این است:

header, footer, section, nav, article {
display: block;
}

ما در حال تنظیم قانونی هستیم که برای هر پنج مورد موجود در کد HTML اعمال خواهد شد. توجه کنید که چگونه هر پنج مورد با ویرگول از هم جدا می شوند. این کار را می توانید برای سایر انتخاب کنندگان CSS نیز انجام دهید. به عنوان مثال ، اگر می خواهید CSS را به طور پیش فرض مرورگر تنظیم کنید ، می توانید این کار را انجام دهید:

body, h1, h2, h3, p, ul, li, {
border:0;
margin:0;
padding:0;
}

دلیل این که می خواهید اینطور تنظیم کنید این است که مرورگرهای مختلف مقادیر پیش فرض مختلفی دارند. سپس می توانید مقادیر خود را تنظیم کنید که پیش فرض ها را لغو می کند. برای کسب اطلاعات بیشتر ، در جستجوی "تنظیم مجدد شیوه نامه" در Google جستجو کنید.
اما در کد ما ، ما فقط مطمئن می شویم که مرورگرهای قدیمی با عناصر جدیدتر HTML5 ما به درستی برخورد می کنند.
بعد در کد CSS ، برخی از قوانین کلی را برای هر دو برچسب BODY تنظیم می کنیم:

BODY {
margin: 0 auto;
width: 940px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}

 

خط اول با حاشیه ها روبرو می شود و آنها را صفر می کند ، اما به قسمت خودکار توجه کنید. کاری که این کار انجام می دهد این است که همه چیز را در صفحه قرار دهد.


تمرین
خودکار را از کد CSS خود در انتخابگر BODY حذف کنید. صفحه را در مرورگر خود ذخیره و تازه سازی کنید. بعد از اتمام کار خودکار را دوباره وارد کنید.
ما سه کار دیگر برای برچسب BODY انجام می دهیم: تنظیم عرض 940 پیکسل ، تنظیم خانواده قلم و تنظیم اندازه قلم. با این مقادیر بازی کنید و ببینید چه اتفاقی می افتد.


اندازه ثابت در برابر اندازه سیال
ما اندازه ثابت 940 پیکسل را در کد خود مشخص کرده ایم. با این وجود مشکلی وجود دارد. فرض کنید می خواهید سایت شما نه تنها از طریق مانیتور متصل به کامپیوتر بلکه از طریق تلفن همراه نیز مشاهده شود. اندازه ثابت به این معنی است که روی تلفن بیش از حد گسترده خواهد بود. گزینه جایگزین اندازه سیالات است.
با اندازه گیری سیال ، مقادیر بر حسب پیکسل نیستند بلکه بر حسب درصد هستند. به عنوان مثال ، به جای تعیین مقدار 940 پیکسل ، می توانستیم چیزی در حدود 80٪ را بنویسیم. اگر بیش از یک سیستم عامل را هدف قرار داده اید ، درصدهای مربوط به مقادیر خود را انتخاب کنید ، به ویژه برای عرض ها (اگرچه ارتفاع ها می توانند روی پیکسل ها بمانند).

در درس بعدی ، ما به سبک سازی برچسب های HTML5 خواهیم پرداخت.