طراحی وبسایتCss

۲۰
آبان

Css چیست:

 زبان برنامه نویسی Css  یکی از شیرین ترین  وساده ترین  زبان ها در سطح دنیا به حساب می‌اید این زبان بیشتر در طراحی وب مورد استفاده قرار میگیرد  که بیشتر در کنار زبان html قرار میگیرد، زبان html برای ساخت وب مورد استفاده قرارد میگیرد ولی زبان برنامه نویسی css درکنار html طراحی وب را به دست دارد و دارای دستوراتی بسیار ساده است،همانند color که برای تغییر رنگ متن استفاده می‌شود و انواع کد های دیگر  که به همین صورت میشود   که طی یک دوره از  آموزش میتوان آن ها را یاد گرفت و برنامه نویسی را آغاز کرد ما سعی داریم در این دوره از آموزش‌های رایگان css مجموعه‌ای از تمام کد های css را به شما اموزش دهیم و ما در این دوره میخواهیم شما را با چند روش کد نویسی css  در html  اشنا کنیم

 

دستور background-color در css:

از دستور background-colorبرای تغییر رنگ پس زمینه یک عنصر استفاده می شود. دستور background-color یکی از دستورات پرکاربرد در css می باشد.

 

معمولا در بیشتر پروژه های طراحی قالب سایت از این دستور استفاده می شود.

 

در هنگام استفاده از دستور background-color می توانیم از 3 حالت مختلف رنگ ها استفاده کنیم یعنی هم نام رنگ استفاده کنیم هم rgb و هم هگزا .

 

تغییر رنگ پس زمینه :

برای اینکه رنگ یک صفحه را بصورت کامل تغییر دهیم بایستی در CSS بنویسیم :

 

Body{ background-color: red;}

برای تغییر پس زمینه h1 ,p می توانیم بنویسیم :

 

h1 { background-color: green;}

p { background-color: yellow;}

در مثال پایین از سه روش تعیین رنگ استفاده کردیم.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>sh711.com</title>

</head>

<body>

<p style="background-color: blueviolet ">background-color name color -- SH711.COM</p>

<p style="background-color: rgb(100,100,100) ">background-color rgb -- SH711.COM</p>

<p style="background-color: #ffaa10 ">background-color hexa -- SH711.COM</p>

</body>

</html>

دستور border:

از دستور border برای حاشیه دادن است که با استفاده از ان میتوان لبه‌های یک کادر را حاشیه داد این دستورسه  ویژگی دیگر هم دارد که میتوان نوع حاشیه و رنگ حاشیه و ضخامت حاشیه را با ان تعیین کرد:

برای مثال:

<!DOCTYPE html>
<html>
<head>
<style>
.p1{
border-style: dashed;
border-width: 5px;
border-color: red;
}
.p2{
border: 4px solid blue;
}
</style>
</head>
<body>
<h2>SH711.COM</h2>
<p class="p1">BORDER STYLE + WIDTH + COLOR</p>
<p class="p2">border tarkibi</p>
</body>
</html>

از دستور border  هم میتوان در چهار جهت استفاده کرد 1-بال‌سمت‌چپ 2-بالا‌سمت‌راست 3-پایین‌سمت‌راست 4-پایین‌سمت‌چپ

برای مثال:

<!DOCTYPE html>
<html>
<head>
<style>
.p1{
border-left:8px solid green;
}
.p2{
border-bottom: 4px solid blue;
}
</style>
</head>
<body>
<h2>SH711.COM</h2>
<p class="p1">BORDER STYLE + WIDTH + COLOR</p>
<p class="p2">border tarkibi</p>
</body>
</html>

  • hasan morady