Omega Programming

css در html

هر عنصر html یک سبک پیش فرض دارد(رنگ پس زمینه سفید و رنگ متن مشکی). تغییر سبک پیش فرض عناصر می تواند با استفاده از css و به کمک خصیصه style انجام شود.

هنگامی که یک مرورگر CSS را می خواند، فایل را بر طبق آن قالب بندی خواهد کرد. 3 راه برای افزودن  CSS  به کدهای html وجود دارد:

 style درون خطی

style داخلی

style خارجی

قالب بندی بوسیله css دارای syntax زیر است:

 element { property:value; property:value }

در syntax بالا، element می تواند هر یک از عناصر html باشد و property نیز ویژگی های موجود در cssهستند که مقداردهی می شوند. اگر بخواهیم از چندین style استفاده کنیم با سمیکولن آنها را از هم جدا می کنیم.

style درون خطی

یک style درون خطی برای زمان هایی مناسب است که بخواهیم یک style را منحصرا به یک عنصر html نسبت دهیم. برای استفاده از style درون خطی شما از خصیصه های style در تگ های مناسب استفاده می کنید. خصیصه style می تواند حاوی هر ویژگی CSS باشد. مثال نشان می دهد که چگونه رنگ متن یک تیتر را تغییر دهید.
<h1 style="color:blue">This is a Blue Heading</h1>
مثال زیر نشان می دهد که چگونه رنگ متن و چپ چین بودن یک پاراگراف را تعیین کنید.

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

<p style="color:red">This is a paragraph.</p>
به این ترتیب شما می توانید در یک صفحه html، چندین پاراگراف داشنه باشید که هر کدام style مخصوص به خود را دارند و style های متفاوتی به آنها اختصاص داده شده است.
مثال زیر رنگ پس زمینه عنصر <body> را تغییر میدهد.
<body style="background-color:lightgrey">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

 

برای تغییر نوع و سایز فونت از ویژگی های font-family و font-size استفاده می شود. مثال:
<h1 style="font-family:verdana">This is a heading</h1>
<p style="font-family:courier">This is a paragraph.</p>
 
<h1 style="font-size:300%">This is a heading</h1>
<p style="font-size:160%">This is a paragraph.</p>


style داخلی:

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

<!DOCTYPE html>
<html>
<head>
<style type="text/css" >
body {background-color:lightgrey}
h1   {color:blue}
p    {color:green}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

 

style خارجی:

یک style خارجی زمانی ایده آل است که آن style در بیشتر صفحات استفاده شود. با یک CSS خارجی شما می توانید ظاهر یک سایت را با تغییر دادن یک فایل تغییر دهید.هر صفحه باید با استفاده از برچسب <link> به CSS پیوند داده شود. برچسب link در داخل بخش head قرار می گیرد.

 

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet"  type="text/css" href="/mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

در مثال زیر یک style داخلی تعریف شده و ویژگی های رنگ، نوع و سایز فونت تعریف شده است.

 

 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {
    color:blue;
    font-family:verdana;
    font-size:300%;
}
p  {
    color:red;
    font-family:courier;
    font-size:160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

شما اینجا هستید: صفحه ی اصلی آموزش ها آموزش HTML آموزش HTML css در html