روش های استایل دهی CSS در سند HTML

می تونیم بگیم کمتر توسعه دهنده یا طراح وبی هست که از کار با html و css لذت نبره.

به همین خاطر سعی می کنم نکات و نوشته هایی در این زمینه داشته باشم .

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

  • Inline - by using the style attribute in HTML elements
  • Internal - by using a <style> element in the <head> section
  • External - by using an external CSS file


روش اول : Inline هستش که این روش به صورت مستقیم روی تگ مربوطه اعمال می شه.

مثال :

<h1 style="color:blue;">This is a Blue Heading</h1>

روش دوم : Internal

این روش به صورتی است که شما داخل تگ <Style> که در قسمت <head> کُد استایل مورد نظرتون رو می نویسید و هر جا لازم شد فراخوانی می کنید .

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

و روش آخر : External

این روش ، روشی است که شما برای استفاده از استایل های css، تمامی کدهای css را داخل یک فایلی به اسم Stylesheet.css نوشته و با استفاده از تگ زیر فراخوانی و استفاده می شود.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

رضا دهقان

سوم تیر 1397