آموزش سی اس اس

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

by with No Comment آموزش کامل 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 – قسمت پنجم: تغییر استایل متن

by with No Comment آموزش کامل 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 – قسمت چهارم: پس زمینه

by with No Comment آموزش کامل 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(“https://pardiswp.com/image.jpg”);

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

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

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

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

background-repeat: repeat-x;

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

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

background-repeat: repeat-y;

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

background-repeat: no repeat;

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