آموزش کامل CSS – قسمت 13: شناور کردن المان ها

توسط با بدون دیدگاه آموزش کامل CSS

شناور کردن المان ها در css

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

دستور float

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

 html code:

<div class=”matn”><img src=”آدرس عکس دلخواه“/> در اینجا یک متن دلخواه می نویسیم </div>

css code:

img {

float: right;

margin: 0 0 10px 10px; }

بدین صورت عکس در سمت راست متن شما و در یک سطر قرار می گیرد.

دستور clear

زمانی که شما یک المان را به حالت شناور در می آورید به بقیه المان ها اجازه می دهید که در کنار این المان قرار بگیرند. حال اگر بخواهید که المان های کنار دستی را به خط بعدی بفرستید و هیچ چیز مزاحم کار شما نشود باید از دستور clear یا تخلیه استفاده کنید. هر سمتی که این دستور را بدهید المان های آن سمت به خط بعدی منتقل خواهند شد. همچنین می توانید با مقدار both در این دستور المان های هر دو سمت را تخلیه کنید. به مثال زیر دقت کنید:

html code:

<h2> بدون استفاده از دستور تخلیه </h2>

<div class=”div1″>div1</div>

<div class=”div2″>div2 – در این حالت دیویژن دوم چون دستور تخلیه ندارد بر روی دیویژن اول که در حالت شناور در سمت چپ قرار دارد، قرار می‌گیرد </div>

<h2> با استفاده از دستور تخلیه </h2>

<div class=”div3″>div3</div>

div class=”div4″>div4 –  با استفاده از دستور تخلیه المان‌های شناور در طرف تخلیه شده به خط بعدی هول داده می‌شوند </div>

css code:

.div1 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #8AC007;
}

.div2 {
border: 1px solid red;
}


.div3 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #8AC007;
}

.div4 {
border: 1px solid red;
clear: left;
}

مثال را انجام دهید و نتیجه آن را مشاهده کنید. خواهید دید که div1 در div2 و div3 بالای div4 سمت چپ قرار می گیرد.

آموزش کامل CSS – قسمت 12: موقعیت المان ها 2

توسط با بدون دیدگاه آموزش کامل CSS

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

المان ها فیکس شده

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

برای استفاده از این حالت خاصیت fixed را در مقابل position قرار می دهیم و سپس مقادیر راست، چپ، بالا و پایین را مشخص می کنیم. از این حالت می توانیم برای تبلیغات، چت آنلاین و موارد دیگر استفاده کنیم.

<div class=fixed”> <p>المان فیکس شده</p> </div>

div.fixed {
    position: fixed;
    bottom:  0;
     right:  0;
     width:  300px;
     border:  3px solid #8AC007;
}

حالت بعدی absolute نام دارد

موقعیت قطعی زمانی است که شما می‌گویید این المان باید در این نقطه قرار بگیرد. در این حالت المان شما نسبت به المان مادر خود که موقعیت relative دارد، موقعیتش را تنظیم می‌کند. اگر هیچ المان مادری با موقعیت relative وجود نداشته باشد، این المان خود را نسبت به body یا همان کل صفحه تنظیم می‌کند.

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

<div class=”relative”> <p>المان مادر که دارای موقعیت رلتیو است</p>

<div class=”absolute”> <p>المان ابسولوت که موقعیتش بر اساس موقعیت المان مادر تنظیم می‌شود </p>

</div> </div>

div.relative {
    position: relative;
    width:  400px;
     height:  200px;
     border:  3px solid #8AC007;
} 

div.absolute  {
    position:  absolute;
     top:  80px;
     right:  0;
     width:  200px;
     height:  100px;
     border: 3px solid #8AC007;
}

آموزش کامل CSS – قسمت یازدهم: موقعیت المان ها

توسط با بدون دیدگاه آموزش کامل CSS

در این قسمت از آموزش css با امکان جابجا کردن المان ها در صفحات وب به وسیله css آشنا می شویم. این کار را به کمک دستور position انجام می دهیم.

دستور position

همان طوری که از نام آن پیداست این دستور موقعیت المان ها را مشخص می کند. دستور position چهار حالت مختلف دارد.

اولین حالت، موقعیت static است که در واقع همان حالت پیش فرض این دستور است و تاثیری در موقعیت المان ندارد.

حالت دوم relative است. در این حالت 4 مقدار right , left , top و bottom را می توانیم برای آن مشخص کنیم.

html code:

<div class=”default”>متن المان اول</div>
<div class=”relative”>متن المان دوم</div>

css code:

.default {

position: static;

} .relative {

position: relative;

top: -20px;

left: 20px;

background-color: white;

width: 500px;

}

همان طور که در مثال فوق مشاهده می کنید ما به div اول موقعیت پیش فرض داده ایم.

معنی عدد منفی در موقعیت

در حالت عادی زمانی که شما مثلا ۲۰ پیکسل را بروی فاصله از بالا بنویسید، سی‌اس‌اس‌ از بالاترین نقطه، ۲۰ پیکسل پایین می‌آید تا بین بالاترین سطح و المان شما ۲۰ پیکسل فاصله باشد. اما زمانی که شما به جای ۲۰ عدد ۲۰- را بنویسید، سی اس اس المان شما را در جهت خلاف بالا می‌برد؛ یعنی به جای حرکت به سمت پایین به اندازه‌ی ۲۰ پیکسل به بالا حرکت می‌کند.

حالت های سوم و چهارم را در جلسه بعدی خواهیم گفت.

آموزش کامل CSS – قسمت نهم: فاصله های داخلی

توسط با بدون دیدگاه آموزش کامل CSS

در قسمت قبلی با فاصله بین دو المان در css آشنا شدیم که به آن margin گفته می شد. در این جلسه در مورد فاصله های داخلی المان ها صحبت خواهیم کرد که به آن padding گفته می شود.

خاصیت padding در css

فرض کنید یک div رنگی دارید که نوشته ای در آن گذاشته اید. فاصله ای که بین نوشته و div قرار دارد همان padding یا فاصله از داخل می باشد. پدینگ در واقع فاصله بین border المان تا محتوای داخلی آن است که در قسمت هفتم آموزش به صورت تصویری آن را نشان دادیم.

این فاصله می تواند از هر 4 جهت راست، چپ، بالا و پایین اعمال شود. در مقابل padding فاصله مورد نظر را برحسب پیکسل می نویسیم. نمونه نوشتن پدینگ به این صورت می باشد ;padding:10px

در نوشتن padding چند حالت پیش می آید:

حالت اول:

در واقع همان حالتی است که در نمونه فوق نوشتیم. در این حالت فاصله به اندازه مساوی از هر 4 جهت اعمال می شود. مثلا فاصله از داخل المان از هر 4 جهت 10 پیکسل است. در مثال زیر ما به المان box که دور تا دور پاراگراف قرار گرفته فاصله 10 پیکسلی داده ایم.

// -- html code: --

<div class="box"> 

<p  class=" element">متن</p>

</div>

// -- css code: --

p.element {

color: red;

}

div.box {

padding: 10px;

background-color: orange;

}

حالت دوم:

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

p.element {

color: red;

}

div.box {

padding-top: 20px;

padding-right: 30px;

padding-bottom: 20px;

padding-left: 10px;

background-color: orange;

}

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

حالت سوم:

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

p {
    padding: 25px 50px 20px 50px;
}

در این حالت اگر هر کدام از اعداد را ننویسید صفر در نظر گرفته می شود.

آموزش کامل CSS – قسمت هشتم: فاصله بین المان ها

توسط با یک دیدگاه آموزش کامل CSS

همان طور که در قسمت های قبلی آموزش css گفتیم المان های html دارای فاصله ای نامرئی از یکدیگر هستند. این فاصله ها از طریق مارجین اندازه گیری و استفاده می شوند.

مارجین

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

تعریف مارجین: فاصله ای است بین بیرونی ترین سطح هر المان با خارجی ترین سطح المان دیگر.

نحوه اضافه کردن مارجین به المان ها

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

مثال زیر مارجین از 4 طرف برای یک پاراگراف را مشخص می کند:

p {

margin-top: 100px;

margin-right: 50px;

margin-bottom: 120px;

margin-left: 70px;

}

یک میانبر ساده

کد زیر معادل مثال فوق است:

p {

margin: 100px 50px 120px 70px;

}

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

نکته: مارجین را می توانیم به تمام المان های html اعمال کنیم.

به عنوان تمرین دو متن و دو جعبه‌ی مستطیلی ایجاد کنید و بین دو جعبه فاصله ۱۰۰ پیکسلی و بین متن‌ها فاصله ۲۰۰ پیکسلی بگذارید.

آموزش کامل CSS – قسمت هفتم: قاب و جعبه

توسط با بدون دیدگاه آموزش کامل CSS

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

مدل لایه های قاب

نحوه استفاده از قاب ها

برای نمایش قاب ها در CSS از خاصیت border استفاده می کنیم. ویژگی های قاب ها به صورت های زیر می باشد:

  • border-style : نوع قاب
  • border-size : اندازه یا ضخامت قاب
  • border-color : رنگ قاب
  • border-top-style : نوع ضلع بالایی قاب
  • border-bottom-style : نوع ضلع پایینی قاب
  • border-right-style : نوع ضلع راست قاب
  • border-left-style : نوع ضلع چپ قاب

p{

border-top-style: dashed;

border-bottom-style: solid;

border-right-style: dotted;

border-left-style: dotted;

}

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

border: 5px solid red;

آموزش کامل CSS – قسمت ششم: فونت ها در css

توسط با بدون دیدگاه آموزش کامل CSS

در قسمت پنجم آموزش css با نحوه تغییر دادن متن ها در سی اس اس آشنا شدیم. در این قسمت از آموزش روش کار کردن با فونت ها در css را خواهیم گفت.

تغییر فونت ها در css

ابتدا به یکی از روش های انتخاب متن که در جلسات قبلی آموزش یاد گرفتیم متن مورد نظر خود را انتخاب می کنیم. برای مثال ما می خواهیم المان های پاراگراف که دارای کلاس text هستند را با اندازه بزرگ نمایش بدهیم. برای این کار:

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

<p class=”text”>متن مورد نظر</p>

.text {

font-size: 14px; }

تغییر نوع فونت

برای تغییر نوع فونت نیز بعد از انتخاب المان مورد نظر از خاصیت font-family استفاده می کنیم.

<p>متن موردنظر</p>

p {

font-family: tahoma; }

نکته: در مقابل font-family می توان چند فونت را نوشت و با کاما از هم جدا کرد که اگر فونتی در سیستم نبود بعدی اعمال شود.

حالت فونت

برای تغییر در استایل فونت می توانیم از خاصیت font-style استفاده کرد. استایل فونت شامل حالت های italic , oblique و normal می باشد. مثال:

<p class= "normal">متن معمولی</p>

<p class= "italic">متن ایتالیک</p>

p.normal {

font-style: normal; }

p.italic {

font-style: italic; }

 پایان قسمت ششم

آموزش کامل CSS – قسمت پنجم: تغییر استایل متن

توسط با بدون دیدگاه آموزش کامل CSS

در قسمت چهارم آموزش css با تصویر و رنگ پس زمینه صفحات آشنا شدیم. در این قسمت به استایل متون html خواهیم پرداخت.

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

رنگ متن color

شما می توانید با انتخاب هر المان رنگ آن را تغییر بدهید. به مثال زیر توجه کنید:

html: ———————————

<h2>عنوان با رنگ نارنجی</h2>

<p>متن با رنگ آبی</p>

css: ————————————

h2{

color: orange;

}

p{

color: blue;

}

موقعیت متن text-align

با کمک این ویژگی می توان راستچین، چپ چین یا وسط چین بودن متن را مشخص کرد. مثال:

html: ——————————————–

<h2 class = “center”>وسط چین</h2>

<p class = “right”>راست چین</p>

<p class = “left”>چپ چین</p>

css: ———————————————–

center{

text-align: center;

}

p.right{

text-align: right;

}

p.left{

text-align: left;

}

نوع نوشته text-decoration

گاهی المان های html استایل مخصوص دارند. مثلا لینک ها با رنگ آبی و زیر خط دار نمایش داده می شوند. حال اگر بخواهیم آن ها را به صورت ساده در آوریم از دستور زیر استفاده می کنیم:

a{

text-decoration: none;

}

برای تغییر یک المان سه روش برای انتخاب وجود دارد. مانند قبل المان مورد نظر را انتخاب می‌کنیم. مثلا اگر ما قصد تغییر فونت تمامی پاراگراف‌ها را داشته باشیم، باید المان p را انتخاب کنیم. اما اگر بخواهیم یک یا چند المان خاص را تغییر دهیم بهتر است از کلاس استفاده کنیم. یعنی ابتدا در صفحه‌ی اچ تی ام ال به المان مورد نظر اتریبیوت “class = “classname اضافه کنیم و سپس درسی اس اس نام این کلاس را بنویسیم و در جلوی آن تغییرات مورد نظر را اعمال کنیم.

آموزش کامل CSS – قسمت چهارم: پس زمینه

توسط با بدون دیدگاه آموزش کامل CSS

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

پس زمینه در CSS

پس زمینه یکی از پر استفاده ترین موارد زیبا سازی در صفحات وب است که به کمک کدهای css می توانیم رنگ، تصویر یا کادر دلخواهی به آن بدهیم.

اضافه کردن رنگ

برای رنگ آمیزی در css از 3 روش استفاده می کنیم:

روش اول 

در این روش از کد HEX به شکل زیر استفاده می کنیم و کد رنگ را همراه با علامت # به کار می بریم. کد هگزادسیمال رنگ یک مقدار کاراکتری ترکیبی از اعداد 0 تا 9 و حروف a تا f می باشد.

مثال: “#c91021”

روش دوم 

در این روش از کد RGB رنگ به صورت زیر استفاده می کنیم. ابتدا کلمه rgb را می نویسیم سپس یک پرانتز باز می کنیم و رنگ را به صورت کد آر جی بی در آن می نویسیم.

مثال: “rgb (255,0,0)”

روش سوم

در این روش نام رنگ را در یک جفت دابل کوتیشن به کار می بریم. انتخاب رنگ ها در این روش محدود است.

رنگ پس زمینه

این ویژگی background-color نام دارد و رنگ مورد نظر به هر سه شکل فوق در جلوی آن قابل استفاده است. روش استفاده از آن به صورت زیر است:

backgroud-color: blue;

backgroud-color: #c91021;

background-color: rgb (255,0,0);

عکس پس زمینه

این ویژگی background-image نام دارد و تصویر پس زمینه المان های اچ تی ام ال را تغییر می دهد. آدرس عکس به صورت زیر در مقابل آن قرار می گیرد:

background-image: url(“image address”);

توجه داشته باشید که در ذکر آدرس عکس فرمت آن را مانند زیر حتما بنویسید:

background-image: url(“http://pardiswp.com/image.jpg”);

تکرار تصویر پس زمینه

شما می توانید تصویر پس زمینه را به صورت افقی یا عمودی تکرار کنید مثلا زمانی که اندازه تصویر کوچک است.

  • تکرار افقی: در این حالت عکس به صورت افقی تا زمانی که پس زمینه را پر کند تکرار می شود.

background-image: url(“http://pardiswp.com/image.jpg”);

background-repeat: repeat-x;

  • تکرار عمودی: در این حالت عکس به صورت عمودی تا زمانی که پس زمینه را پر کند تکرار می شود.

background-image: url(“http://pardiswp.com/image.jpg”);

background-repeat: repeat-y;

برای جلوگیری از تکرار تصویر دستور زیر را وارد می کنیم:

background-repeat: no repeat;

پایان قسمت چهارم

آموزش کامل CSS – قسمت سوم: انتخاب و نام گذاری المان ها

توسط با بدون دیدگاه آموزش کامل CSS

در قسمت دوم آموزش css با قوانین نوشتن آشنا شدیم. در این قسمت انجام تغییراتی در المان ها آشنا خواهیم شد و نحوه انتخاب و نام گذاری آن ها را بررسی می کنیم.

انتخابگر CSS

نحوه انتخاب یک المان html یکی از مهمترین قوانین css است. برای این که یک المان اچ تی ام ال را در سی اس اس تغییر بدهیم باید آن را فراخوانی کنیم. به این کار (صدا زدن المان) انتخاب کردن css می گوییم که توسط انتخابگر انجام می شود.

برای فراخوانی یک المان لازم است که اسم آن را صدا بزنیم. المان های html هر کدام دارای یک نام عمومی و اختصاصی هستند. مثلا متون با تگ p و لینک ها با تگ a شناخته می شوند. در واقع این ها همان نام های عمومی المان ها هستند. اگر ما در css تگ p را صدا بزنیم با تمام متون روبرو هستیم. در مثال زیر رنگ تمام پارگراف های موجود در متن تغییر می کند.

p{

color: red;

}

حال اگر ما قصد تغییر تمام پاراگراف ها را نداشته باشیم و فقط بخواهیم یکی از المان ها مثلا پاراگراف دوم را تغییر بدهیم باید چه کار کنیم؟ در این جا از class و id استفاده می کنیم که در واقع بهترین راه انتخاب المان ها است.

برای درک بهترکلاس و آی‌دی مثالی می‌زنیم. فرض کنید در یک خیابان شلوغ که ده‌ها نفر با نام یکسانی مثل “محمد” حضور دارند، نام محمد را صدا بزنید. در این صورت تمامی محمد ها مخاطب شما خواهند شد و به حرف  شما گوش خواهند داد. در سی‌اس‌اس هم همین طور است و اگر شما مثلا بگویید p انگار تمامی پاراگراف‌های اچ‌تی‌ام‌ال را مخاطب قرار داده‌اید و تمامی پاراگراف‌ها مطابق دستورات شما عمل می‌کنند.

آی‌دی همانند شماره شناسنامه برای افراد است. در واقع شما در همان مثال خیابان شلوغ اگر یک محمد خاص را در نظر داشته باشید می‌توانید از طریق گفتن شماره شناسنامه او را مستقیما صدا بزنید بدون آنکه کس دیگری را مورد خطاب قرار دهید.

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

افزودن id به المان های html

برای اضاف کردن آی دی به هر المان کلمه id را به عنوان صفت در تگ اول المان مورد نظر قرار می دهیم و نام آی دی را به آن انتساب می دهیم.

id = “نام مورد نظر”

حال باید با css آن را انتخاب کنیم. برای این کار باید علامت # و نام آی دی که دادیم را کنار آن بنویسیم.

#نام مورد نظر

مثال:

<p id= "hi">پاراگراف مورد نظر با آی دی</p>

#hi{

text-align: center;

color: red;

}

انتخاب از طریق کلاس

کلاس مانند فامیلی در مثال فوق است و ممکن است که چند نفر نام فامیلی یکسان داشته باشند. با اضاف کردن اتربیوت کلاس به المان ها می توانیم به صورت همزمان به آن ها استایل بدهیم.

روش کار بدین صورت است که در ابتدا به المان هایی که میخواهیم تغییر بدهیم یک کلاس اضافه می کنیم. مثلا می خواهیم تمام هدر های متن به رنگ قرمز در بیایند. به صورت زیر عمل می کنیم:

<h2 class="ghermez">عنوان</h2>

.ghermez{

color: red;

}

روش های فوق روش های کلی انتخاب المان های html در css هستند اما اگر بخواهید می توانید به صورت ترکیبی از آن ها استفاده کنید. مثلا انتخاب تمام تگ های پاراگراف که دارای کلاس abi هستند به رنگ سبز تغییر کنند:

p.abi{

color: green;

}

بدین ترتیب تگ‌هایی h1 یا دیگر تگ‌هایی که دارای همین کلاس abi هستند مخاطب شما نخواهند بود و تنها المان‌های پاراگراف مورد تغییر قرار خواهند گرفت.

شما می‌توانید با انتخاب هر المان، رنگ متن درون آن را تغییر دهید. در واقع این کار یکی از سریع‌ترین روش‌ها برای تغییرات کلی در صفحه است.

نکته: با انتخاب المان body تمامی تغییرات گفته شده در کل المان‌ها اعمال می‌شود. چون المان body مادر تمامی المان‌های درون صفحه است. پس اگرقصد تغییری در کل المان‌ها دارید استفاده از تگ body یا html توصیه می‌شود.

پایان قسمت سوم