جلسه 2: طریقه نوشتن دستورات CSS
در این جلسه قراره نحوه قرارگیری و طریقه نوشتن کدهای CSS رو به شما دوستان عزیز آموزش بدیم. برای نوشتن کدهای CSS دست شما باز است، دستورات CSS را به سه روش می توان نوشت:
- External Style Sheet (سبک استایل خارجی)
- Internal Style Sheet (سبک استایل داخلی)
- Inline Styles (سبک استایل درونی)
1. External Style Sheet (سبک استایل خارجی)
برای نظم دهی بیشتر به دستورات و تفکیک دستورات HTML از CSS، سبک استایل خارجی بهترین گزینه است، این راهکار نه تنها به دستورات نظم می دهد بلکه سرعت خوانایی و اجرای دستورات را نیز افزایش می دهد. در استایل خارجی، شما می توانید تمام دستورات CSS را درون یک فایل خارجی بنویسید، سپس فایل HTML خود را به این فایل خارجی لینک دهید.
در استایل خارجی، ابتدا یک فایل با فرمت CSS ایجاد کنید، برای لینک دادن و اتصال پرونده HTML به این فایل کافیست داخل فایل HTML خود، از تگ <link> در بخش <head> استفاده کنید.
به دستورات زیر دقت کنید، همونطور که می بینید فایل mystyle.css را به فایل HTML، توسط تگ <link> متصل کرده ایم.
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> </body> </html>
توجه داشته باشید که استایل خارجی بایستی فقط حاوی دستورات CSS باشد.
2. Internal Style Sheet (سبک استایل داخلی)
سبک استایل داخلی بیشتر مناسب صفحات سبک است، صفحاتی که حجم کدنویسی پایینی دارند، و نوشتن این نوع سبک تاثیر چندانی بر سرعت خوانایی دستورات ندارد.
برای استفاده از این سبک، کافیست دستورات CSS خود را درون تگ <style> در بخش <head> بنویسید.
به مثال زیر دقت کنید تا به خوبی متوجه شوید:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
</body>
</html>
3. Inline Styles (سبک استایل درونی)
سبک استایل درونی تقریبا همانند سبک استایل داخلی هستش، با این تفاوت که شما این بار به جای اینکه دستورات رو در قسمت <head> بنویسید، درون عناصر HTML می نویسید.
در این سبک، کافیست درون عنصری که قصد دارید به آن استایل دهید یک تگ <style> باز کنید و دستورات CSS را درون آن وارد نمائید.
دستورات زیر، رنگ متن عنصر <h1> را تغییر خواهند داد:
<!DOCTYPE html> <html> <body> <h2 style="color:blue">مثبت 1 - آموزش پیشرفته CSS</h1> </body> </html>
نتیجه دستورات فوق به صورت زیر است:
مثبت 1 – آموزش پیشرفته CSS
نکته: در نوشتن دستورات سعی کنید تا حد ممکن از استایل درونی استفاده نکنید، استایل درونی باعث شلوغی و بهم ریختگی دستورات می شود، علاوه بر این می تواند سرعت خوانایی دستورات را کاهش دهد.
امروزه بیشتر استایل نویسی ها در طراحی صفحات وب به سبک خارجی است، این نوع سبک استایل نویسی، به دستورات و محتوا نظم یشتری میدهد و سرعت خوانایی و بارگذاری دستورات را افزایش می دهد.
