CSS

جلسه 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

 

نکته: در نوشتن دستورات سعی کنید تا حد ممکن از استایل درونی استفاده نکنید، استایل درونی باعث شلوغی و بهم ریختگی دستورات می شود، علاوه بر این می تواند سرعت خوانایی دستورات را کاهش دهد.

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

 

جلسه بعد 

جلسه قبل

کتاب الکترونیکی با زود انزالی خداحافظی کنید

تنها برنامه جامع آموزشی برای درمان زود انزالی

۱۴,۸۰۰ تومان ۹,۷۰۰ تومان

ضمانت بازگشت 100 درصدی وجه در صورت عدم رضایت از محصول

احتمالا تابحال شعار هایی همچون: درمان زود انزالی در یک هفته!!! درمان زود انزالی در یک ساعت!!! درمان زود انزالی با قرص، آمپول و غیره زیاد به گوشتان خورده است، اما نشنیده ایم کسی با این موارد به صورت کامل درمان شده باشد. ما در کتابی که مشاهده می کنید، برنامه آموزشی و تمرینی را بوجود آورده ایم که مشکل زود انزالی شما را طی یک ماه و به صورت صد درصدی درمان خواهد نمود. این محصول ضمانت بازگشت وجه دارد و در صورت عدم رضایت شما، مبلغ پرداختی به صورت کامل به شما عودت داده خواهد شد...

اطلاعات بیشتر

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد.

دکمه بازگشت به بالا