ثبت آنلاین هاست و دامنه

ثبت آنلاین هاست و دامنه کمتر از 60 ثانیه

ثبت آنلاین هاست و دامنه

ثبت آنلاین هاست و دامنه کمتر از 60 ثانیه

شیوه های مختلف استفاده از CSS در صفحات HTML

در این پست قصد داریم در مورد شیوه های مختلف استفاده از CSS در درون صفحات HTML صحبت کنیم .
به طور کلی به ۳ شکل می تونید از CSS برای تعیین شیوه نمایش تگها ، در میان کدهای HTML استفاده کنید :
  ۱- استفاده از CSS در درون تگها (inline CSS)
  ۲- نوشتن تمامی تنظیمات CSS درون تگ Style در header صفحه اچ تی ام ال
  ۳-نوشتن سلکتورهای CSS در فایل جداگانه و الصاق آن به صفحه HTML

1- استفاده از CSS در درون تگها (inline CSS) :

شما می تونید تنظیمات و ویژگی های CSS رو در درون هر کدوم از تگ های Html بیارید تا اون تنظیمات روی تگ مربوطه اعمال بشه . برای اینکار باید ویژگی های CSS مورد نظر رو که می خواید روی تگ خاصی اعمال بشه درون ویژگی style اون تگ بیارید .
ویژگی Style برای همه تگ های Html قابل تعریفه و به عنوان مقدار ، در درون خود میتونه چندین تا از ویژگی های CSS رو که با علامت ; از هم جدا شدند بیاره !
برای درک بیشتر از چگونگی استفاده CSS در درون تگها ، چند تا مثال براتون میارم :

● مثال ۱)  فرض کنید می خواید فقط یکی از پاراگراف های توی صفحتون رنگ متنش قرمز بشه .
- تگ داشتن یک پاراگراف معمولی به شکل زیره :

<p>3ervice.com</p>

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

<p style=”color:red>3ervice.com</p>

می بینید که فقط ویژگی style به این تگ اضافه شده و به عنوان مقدار  یکی از ویژگیهای CSS که رنگ متنو مشخص می کنه آورده شده !
● مثال ۲)  همون پاراگراف بالا رو می خوایم نوع فونتش رو Tahoma و اندازه فونت رو ۱۶ پیکسل کنیم . کدش مثل زیر میشه :

<p style=”font-face:tahoma;font-size:12px;>3ervice.com</p>

ملاحظه می کنید که همه ی تنظیمات CSS مورد نظر رو درون خود تگ و به عنوان مقدار ویژگی style میاریم . استفاده ی به این شکل خیلی کار درستی نیست . مگر اینکه فقط در تگ خاصی بخواید تنظیمات رو اعمال کنید و این تنظیمات در تگهای دیگه به اشتراک گذاشته نشده باشن .
:: صفحه html ی که شامل دو پاراگراف فوق باشه به شکل زیر میشه :

<html>
<head>
<title>3ervice.com Css Learning</title>
</head><body>
<p style=”
color:red>3ervice.com</p>
<p style=”font-face:tahoma;font-size:12px;>3ervice
.com</p>
</body>
</html>
نظرات 0 + ارسال نظر
برای نمایش آواتار خود در این وبلاگ در سایت Gravatar.com ثبت نام کنید. (راهنما)
ایمیل شما بعد از ثبت نمایش داده نخواهد شد