برای نوشتن یادداش یا comment در css از /**/ استفاده میکنیم

/* This is
a multi-line
comment */

p {
  color: red; /*  This is comment  */ 
}

 

CSS Colors

برای تغییر رنگ متن یک تگ html از color="رنگ"  استفاده میکنیم

برای تغییر پس زمینه یک تگ از background-color:"رنگ" استفاده میکنیم

<p style="background-color:red;">Lorem ipsum...</p> 
 <h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

 

CSS Backgrounds

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

خصوصیات این ویژگی به شرح زیر است

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background (shorthand property)

کد زیر به پس زمینه کل صفحه رنگ سبز میدهد

body {
  background-color: lightblue;
}

 

 

CSS Border Color

میتوانیم برای تگ های HTML حاشیه دلخواه ایجاد کنیم همینطور میتوانیم رنگ آنها را تعیین کنیم.

در کد   border:2px solid redیک حاشیه به ضخامت 2px و به صورت خطی و رنگ قرمز طراحی کرده ایم

 <h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

خط های border میتوانند خصوصیات زیر را بگیرند

  • dotted - Defines a dotted border
  • dashed - Defines a dashed border
  • solid - Defines a solid border
  • double - Defines a double border
  • groove - Defines a 3D grooved border. The effect depends on the border-color value
  • ridge - Defines a 3D ridged border. The effect depends on the border-color value
  • inset - Defines a 3D inset border. The effect depends on the border-color value
  • outset - Defines a 3D outset border. The effect depends on the border-color value
  • none - Defines no border
  • hidden - Defines a hidden border
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>

<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>

<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>

</body>
</html>

 

 

 

class-ها-در-css (جلسه قبل)
CSS Margins,Padding (جلسه بعد)

دوره های اخیر