مهندس امنیت اطلاعات | طراح و توسعه دهنده وب https://securitydev.ir
روش های استایل دهی 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
مطلبی دیگر از این انتشارات
تغییرناپذیر (Immutable) کردن آبجکتها در جاوااسکریپت
مطلبی دیگر از این انتشارات
همه چیز درباره آرایه ها در زبان جاوا اسکریپت - قسمت 4
مطلبی دیگر از این انتشارات
داستان Prototypal Inheritance در جاوااسکرپیت به زبان خیلی ساده