استایل دهی برچسب های HTML5

دادن استایل به برچسب های HTML5 HEADER

سبک برای اولین برچسب HEADER ما این است:

HEADER#Banner {
width: 940px;
height: 100px;
margin: 5px auto;
border: 1px solid #000000;
text-align: center;
background-color: blue;
}


به خط اول توجه کنید:
HEADER#Banner
این به شناسه بنر در برچسب HEADER مراجعه می کند. یک علامت هش / پوند این دو را جدا می کند ، و هیچ فاصله ای بین آنها وجود ندارد. اگرچه می توانید HEADER را در ابتدای خط از دست دهید و کد همچنان کار می کند. با این وجود ترک آن باعث خوانایی بیشتر آن می شود.
همچنین خواهید دید که HEADER دارای یک مجموعه رنگ پس زمینه است:
background-color: blue;
با مقادیر رنگ در اینجا بازی کنید. همچنین می توانید تصاویر را به عنوان برترین آگهی خود آزمایش کنید. فقط رنگ را با تصویر جایگزین کنید. کد این است:
background-image: url(../backgrounds/gradient_1.jpg);
در کد بالا ما یک مسیر به فایل تصویر خود داریم که بین پرانتزهای دور تصویر-پس زمینه قرار دارد. عرض و عرض خود تصویر برابر با همانهایی است که در HEADER # بنر وجود دارد

کد CSS برای جفت دوم برچسب های HEADER این بود:


HEADER#Header_Article_1 {
width: 900px;
height: 60px;
background-color: #DCDCDC;
}


این HEADER دوم شناسه متفاوتی با شناسه اول دارد. این واقعاً بیشتر یک زیرعنوان است ، بنابراین باید سبک دیگری ارائه شود.
یک ظاهر طراحی شده برچسب های HTML5 FOOTER
برای ناحیه FOOTER ، کد مشابه HEADER است:


FOOTER {
width: 940px;
height: 40px;
margin: 5px auto;
border: 1px solid #000000;
text-align: center;
background-color: yellow;
}


توجه داشته باشید که هم با HEADER و هم با FOOTER نیازی به استفاده از ویژگی ID یا CLASS نیستیم - آنها دقیقاً مانند یک انتخابگر HTML عمل می کنند. ما فقط وقتی یک شناسه یا کلاس را اضافه می کنیم که بخواهیم یک HEADER را از دیگری یا یک SECTION را از بخش دیگر متمایز کنیم.

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

نوار Nav
شما قبلاً در آخرین بخش بارکد NAV را ملاقات کرده اید - این فقط یک لیست HTML با برخی قالب بندی های CSS اعمال شده است. کمی متفاوت است ، بنابراین این مورد را از آخرین نوار پیمایشی افقی که اضافه کرده اید مقایسه کنید. توجه داشته باشید که این مورد به هیچ برچسب DIV احتیاج ندارد - فقط می توانید از برچسب های NAV در HTML5 برای انجام همان کار استفاده کنید.
یک ظاهر طراحی شده برچسب های بخش HTML5
اولین برچسب SECTION ما برای نگهداری محتوای صفحه استفاده می شود - فقط به عنوان لفاف استفاده می شود. تنها کدی که در اینجا وجود دارد این است:


SECTION#Wrapper {
margin-top: 100px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 50px;
}


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


بخش دوم دارای CSS زیر است:


SECTION#Section_Article_1 {
width: 850px;
height: 400px;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
background-color: #F8EBEB;
}


این بخش عرض و ارتفاع را تعیین می کند و محتوای یک مقاله یا هر محتوایی را واقعاً در خود نگه می دارد. ما در اینجا برخی از حاشیه ها را نیز تعیین کرده ایم تا فضایی ایجاد کنیم. رنگ پس زمینه فقط برای این است که بتوانید آن قسمت خاص را ببینید. اصلا لازم نیست آنجا باشد.

 
سبک کردن برچسب های ARTICLE HTML5
برچسب ARTICLE در کد HTML ما دوباره به عنوان یک بسته بندی برای سایر مطالب عمل می کند. ایده این است که شما برای هر مقاله (یا هر محتوایی که دارید) یک جفت برچسب ARTICLE داشته باشید.


ARTICLE#Article_1 {
width: 900px;
height: 500px;
background-color: #ADAAAA;
}

باز هم ، هیچ ID یا CLASS لازم نیست تنظیم شود - برچسب ARTICLE مانند یک انتخابگر HTML عمل می کند. با این حال ، شناسه را اضافه کرده ایم تا آن را از سایر برچسب های ARTICLE که ممکن است در صفحه وجود داشته باشد ، متمایز کنیم. به این ترتیب ، در صورت تمایل می توانید هر مقاله را متفاوت فرمت کنید. ما فقط یک مقاله داریم بنابراین شناسه کاملاً ضروری نیست.

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

در درس بعدی ، شما می آموزید که چگونه با استفاده از HTML5 و CSS یک طرح دو ستونی ایجاد کنید.