دات نت نیوک
استفاده از CSS در HTML

CSS = رنگ ها و سبک ها

دستکاری متن ها
رنگ ها,  کادرها

مثال

<!DOCTYPE html>
<html>

<head>
<style>
  body {background-color:lightgray}
  h1   {color:blue}
  p    {color:green}
</style>
</head>

<body>
  <h1>این یک عنوان است</h1>
  <p>این یک پاراگراف است.</p>
</body>

</html>

خودتان آزمایش کنید »

ساخت ظاهر گرافیکی HTML با استفاده از CSS

اصطلاح CSS در واقع مخفف عبارت (Cascading Style Sheets) به معنای شیوه نامه های آبشاری است.

برای خواباندن حروف متن از تگ <i> استفاده می شود. این تگ خصوصیت خوابانده کردن (Italic) را تعریف می کند بدون آن که اهمیت مضاعفی از لحاظ رتبه بندی در متن به آن بدهد.

دستورات مربوط به ساخت ظاهر محتوای صفحه را می توان به سه روش به سند HTML افزود:

  • در خط (Inline) - در این روش از ویژگی style در تگ های HTML استفاده می شود.
  • داخلی (Internal) - در این روش از تگ <style> برای افزودن دستورات در المان <head> سند HTML استفاده می شود.
  • خارجی (External) - در این روش از فراخوانی یک فایل دیگر به داخل سند HTML استفاده می شود.

رایج ترین و درست ترین روش استفاده از دستورات CSS برای حفظ حالت آبشاری دستورات، استفاده از روش سوم یعنی فراخوانی یک فایل CSS خارجی است که دستورات CSS قبلا در آن یک جا نوشته شده باشد. ولی در این دوره آموزشی ما از دو روش اول و دوم یعنی روش داخلی و در خط استفاده می کنیم، چون تشخیص و درک آن برای شروع کار برای شما راحت تر است و خودتان می توانید به صورت آنلاین نتایج را آزمایش کنید.

Note شما می توانید اطلاعات بیشتری در قسمت آموزش CSS همین وب سایت بیاموزید. در این قسمت تنها برای آشنا کردن شما با مفهوم و کاربرد CSS در HTML آن را به صورت مختصر و ب چند مثال آشنا می کنیم.

نحوه ی نوشتن CSS

ساختار و روش نوشتن یک کد CSS که برای تغییر ظاهر کد های HTML استفاد می شود به شکل زیر است:

مقدار : خصوصیت ;مقدار:خصوصیت } المان }

در مثال بالا منظور از المان تگ HTML است. منظور از خصوصیت ویژگی های CSS هستند و مقدار نیز ارزش ها و مقادیر ویژگی است که برای هر خصوصیت نسبت به نیاز طراح صفحه وب باید قرار داد.

در صورتی که بیش از یک خصوصیت را بخواهید برای یک المان تغییر دهید باید از سمیکالن (;) برای جدا سازی خصوصیات (دستورات CSS) استفاده نمایید.


ظاهرسازی در خط (Inline CSS)

تغییر ظاهر به روش ظاهرسازی در خط تنها برای مواردی باید استفاده شود که بخواهید یک المان (تگ) HTML خاص را به صورت مستقل و بدون وابستگی به سایر تگ ها تغییر شکل و ظاهر دهید.

برای تغییر ظاهر به روش ظاهرسازی در خط از ویژگی style درون المان (تگ) استفاده می شود.

در مثال زیر تگ عنوان به تنهایی با استفاده از ویژگی style تغییر رنگ داده می شود:

مثال

<h1 style="color:blue">این یک عنوان با رنگ آبی است</h1>

خودتان آزمایش کنید »

ظاهرسازی داخلی (Internal CSS)

استفاده از CSS داخلی می تواند باعث ایجاد یک سبک کلی برای تمام المان های داخل صفحه شود و یا به یک الان خاص اشاره کرده و تنها موجب تغییر ظاهر آن تگ شود.

برای نوشتن CSS داخلی از تگ <style> استفاده می کنیم. این تگ را می توان داخل المان <head> سند HTML قرار داد:

مثال

<!DOCTYPE html>
<html>

<head>
<style>
  body {background-color:lightgray}
  h1   {color:blue}
  p    {color:green}
</style>
</head>

<body>
  <h1>این یک عنوان است</h1>
  <p>این یک پاراگراف است.</p>
</body>

</html>

خودتان آزمایش کنید »

ظاهرسازی خارجی (External CSS)

ظاهرسازی به روش خارجی بسیار ایده آل است چون از کدهای CSS بارگذاری شده در تمام صفحات HTML استفاده می شود و نیازی نیست برای هر صفحه و یا برای هر المان از هر صفحه جداگانه ظاهرسازی با نوشتن کدهای تکراری هر بار بازنویسی شود.

در این روش که اصل معنای شیوه نامه آبشاری (CSS) را ادا می کند، می توانید برای تغییر ظاهری یک نوع المان (تگ) خاص در تمام صفحات سایت تنها با تغییر یک فایل خارجی CSS، ظاهر تمام تگ های مورد نظر در تمام صفحات سایت را تغییر داد.

برای فراخوانی فایل CSS خارجی درون سند HTML از تگ تنهای <link> استفاده می کنیم. این تگ را می توان داخل المان <head> سند HTML قرار داد:

مثال

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="http://schools.ecb.ir/Portals/0/CSS-Files/styles.css">
</head>

<body>
  <h1>این یک عنوان است</h1>
  <p>این یک پاراگراف است.</p>
</body>

</html>

خودتان آزمایش کنید »

فونت ها (قلم ها) در CSS

خاصیت رنگ (Color) در CSS رنگ متنی که در المان های HTML را تعریف می کند.

خاصیت خانواده قلم (Font-Family) در CSS نوع قلم متن نوشته شده با استفاده از المان های HTML را تعریف می کند.

خاصیت اندازه قلم (Font-Size) در CSS اندازه قلم متن نوشته شده با استفاده از المان های HTML را تعریف می کند.

مثال

<!DOCTYPE html>
<html>

<head>
<style>
h1 {
    color:blue;
    font-family:verdana;
    font-size:300%;
}
p  {
    color:red;
    font-family:courier;
    font-size:160%;
}
</style>
</head>

<body>
  <h1>این یک عنوان است</h1>
  <p>این یک پاراگراف متن است.</p>
</body>

</html>

خودتان آزمایش کنید »
Note پیس از این می توانستید از تگی به نام <font> برای تعریف نوع قلم استفاده کنید که این تگ در نسخه های قدیمی HTML استفاده می شد. ولی امروزه از این تگ در نسخه HTML5 استفاده نمی شود و منسوخ شده است.

مدل بسته CSS

خاصیت رنگ (Color) در CSS رنگ متنی که در المان های HTML را تعریف می کند.

نظر و پرسش و پاسخ کاربران
  نظرات مثبت درباره این.
نمایش 0 نظر ترتیب نمایش

در صفحه "آشنایی با روش استفاده از CSS در HTML": نخستین نظر دهنده باشید
مشاهده نظرات
نام

نظرات خود را مطرح کنید
*
*
*
*
*
Captcha:
آخرین اخبار و مقالات

آگهی ها
کارگزاران تجارت الکترونیک ایران
گرافیک پوسته وب سایت در کامپیوتر
گرافیک پوسته وب سایت در تبلت
گرافیک پوسته وب سایت در موبایل
طراحی واکنشگرا (Responsive)
پنل مدیریتی پیشرفته و کاربر پسند
قابل توسعه و ارتقاء و 100% داینامیک
امکانات کامل SEO برای موتورهای جستجو