همان طور که در جلسه استایل ها گفتیم دنیای وب بدون سی اس اس (Cascading Style Sheets) یک محیط مرده محسوب میشود! ما در جلسه استایل ها نحوه نوشتن استایل درون خطی یا ترتیبی را آموختیم اما در این جلسه میخواهیم انواع دیگر نحوه نوشتن استایل را به شما یاد دهیم پس با ما همراه شوید.
استایل نویسی HTML با سی اس اس
با سه روش میتوانیم اچ تی ام المان را استایل نویسی کنیم:
- درون خطی (Inline) – استایل نویسی درون تگ های عناصر به وسیله خاصیت style (که قبلا آموختیم!)
- درونی (Internal) – استایل نویسی درون تگ <style> در بخش <head> سند (این جلسه می آموزیم!)
- خارجی (External) – استفاده از یک یا چند فایل سی اس اس مثلا filename.css (بزودی در جلسه دیگر می آموزیم!)
خب ابتدا یک مثال میزنم که از همه روش های استایل نویس در آن موجود است.
<!DOCTYPE html>
<html>
<head>
<title>Articka Editor</title>
<!--روش خارجی-->
<link href="style.css" rel="stylesheet" />
<!--/روش خارجی-->
<!--روش درونی-->
<style>
p{
background-color:red;
}
</style>
<!--/روش درونی-->
</head>
<body>
<!--روش درون خطی-->
<p style="background-color:red;">This is paragraph</p>
<!--/روش درون خطی-->
</body>
</html>
توجه: در این جلسه تنها روش درنی را آموزش میدهیم!
نحوه نوشتن سی اس اس در روش درونی
خب ابتدا درون تگ <head> یک تگ <style></style> باز میکنیم، سپس استایل نویسی را درون این تگ انجام میدهیم.
<!DOCTYPE html>
<html>
<head>
<title>Articka Editor</title>
<style>
کد های سی اس اس در اینجا
</style>
</head>
<body>
</body>
</html>
خب حال میخواهیم عنصری از اچ تی ام المان را به وسیله استایل ها تغییر دهیم، مثلا میخواهیم رنگ زمینه تمامی پاراگراف ها را قرمز کنیم.
<!DOCTYPE html>
<html>
<head>
<title>Articka Editor</title>
<style>
p {background-color:red;}
</style>
</head>
<body>
<p>لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته میشود. طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. معمولا طراحان گرافیک برای صفحه‌آرایی، نخست از متن‌های آزمایشی و بی‌معنی استفاده می‌کنند تا صرفا به مشتری یا صاحب کار خود نشان دهند که صفحه طراحی یا صفحه بندی شده بعد از اینکه متن در آن قرار گیرد چگونه به نظر می‌رسد و قلم‌ها و اندازه‌بندی‌ها چگونه در نظر گرفته شده‌است. از آنجایی که طراحان عموما نویسنده متن نیستند و وظیفه رعایت حق تکثیر متون را ندارند</p>
<p>لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته میشود. طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. معمولا طراحان گرافیک برای صفحه‌آرایی، نخست از متن‌های آزمایشی و بی‌معنی استفاده می‌کنند تا صرفا به مشتری یا صاحب کار خود نشان دهند که صفحه طراحی یا صفحه بندی شده بعد از اینکه متن در آن قرار گیرد چگونه به نظر می‌رسد و قلم‌ها و اندازه‌بندی‌ها چگونه در نظر گرفته شده‌است. از آنجایی که طراحان عموما نویسنده متن نیستند و وظیفه رعایت حق تکثیر متون را ندارند</p>
</body>
</html>
ابتدا علامت . را میگذاریم سپس اسمی دلخواه مینویسیم و در اچ تی ام ال خاصیت class را مینویسیم و اسمی که قبلا انتخاب کردیم را مانند مثال بالا درون کلاس مینویسیم.
خب جلسه امروز رو هم همینجا به پایان میرسونم، امید وارم از آموزشمان راضی باشید!
در این جلسه آموختیم:
- هر سه روش استایل نویسی
- آموزش کامل روش درونی استایل نویسی
- آشنایی با ID و Clas