آموزش سی اس اس CSS

آموزش طراحی وب سایت با استفاده از سی اس اس CSS

مرورگر HTML را بر اساس اطلاعات موجود در استایل شیت شکل میدهد. سه راه برای وارد کردن سی اس اس داخل سند HTML وجود دارد.

  • استایل شیت خارجی
  • استایل شیت داخلی
  • استایل خطی

استایل شیت خارجی

در این روش، میتوانید تنها با تغییر در یک فایل ظاهر کل سایت را تغییر دهید!

در هر صفحه آدرس فایل استایل شیت باید داده شده باشد. آدرس فایل استایل شیت باید داخل المان link داخل بخش head باشد.

مثال

 
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
 

نکاتی که باید در ذهن داشته باشید

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

II.هرگز داخل فایل های استایل شیت تگ های HTML ننویسید

III. فایل های استایل شیت باید با فورمت .css نوشته شود.

استایل شیت داخلی

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

نحوه نگارش سی اس اس داخلی به این صورت است که شما المان style را داخل بخش head مینویسید.

مثال


<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>

استایل خطی

استایل اینلاین زمانی استفاده میشود که شما بخواهید به یک المان استایل خاص بدهید.

برای استفاده از استایل اینلاین اتریبیوت style را به المانی که میخواهید به آن استایل بدهید اضافه کنید. اتریبیوت استایل میتواند همه پراپرتی های CSS را بگیرد.

مثال

 
<h1 style="color:blue; margin-left: 30px;">This is a heading</h1>
 

استفاده همزمان از چند استایل شیت

اگر شما چند پراپرتی برای یک سلکتور در یک استایل شیت تعریف کرده باشید، ولیوهای آخرین استایل شیت اعمال خواهد شد.

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

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

با این حال اگر شما برای یکی از h1 های صفحه استایل خطی تعریف کرده باشید و به آن رنگ قرمز بدهید آن المان قرمز خواهد بود.

مثال

فایل سی اس اس شما شامل این پراپرتی ها می باشد:

 
h1 {
    color: green;
}
p {
    margin: 0;
}
h1 {
    color: blue;
}
 

فایل اچ تی ام ال شما نیز شامل این کدها می باشد:

 
<!DOCTYPE html>
<html>
<head>
<title>Multiple Style Sheets</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style>
    h1 {
        color: orange;
    }
</style>
</head>
<body>
    <h1>This is orange!</h1>
    <p>This paragraph has no margin!</p>
    <h1 style="color: red;">This is red!</p>
</body>
</html>
 

چیدمان آبشاری

آبشاری بودن استایل شیت یعنی تمام استایل های موجود در یک صفحه به شکل آبشار داخل یک استایل شیت "مجازی" ریخته میشود که قوانین آن به شرح زیر است:

  1. استایل خطی
  2. استایل شیت های داخلی و خارجی (که در بخش head نوشته شده است
  3. پیش فرض مرورگر

که شماره یک بیشترین و شماره سه کمترین اولویت را دارد.

البته شما در بخش استفاده همزمان از چند استایل شیت تا حدودی با این مفهوم آشنا شدید.

زمانی که میگوییم استایل خطی بیشترین اولویت را دارد بدین معناست که استایل های داخلی تعریف شده در تگ head، یا استایل شیت های خارجی، یا پیش فرض مرورگر را باطل (override) میکند.

نوشتن دیدگاه

جستجو در سایت

  • تاریخچه سی اس اس (CSS) +

    تاریخ CSS از سال 1994 آغاز شد. هاکون ویم لی در دهم اکتبر 1994 آنرا پیشنهاد داد. وی در CERN

    Read More

  • معرفی سی اس اس (CSS) +

    سی اس اس زبانی است که ظاهر صفحه HTML را تعریف میکند و تعیین میکند هر المان HTML به چه

    Read More

  • نحوه نگارش سی اس اس و سلکتورها +

    نحوه نگارش سی اس اس (CSS) مجموعه قوانین سی اس اس (CSS) شامل یک سلکتور و یک بلوک توصیفی است.

    Read More

  • نحوه استفاده از سی اس اس +

    مرورگر HTML را بر اساس اطلاعات موجود در استایل شیت شکل میدهد. سه راه برای وارد کردن سی اس اس

    Read More

  • رنگها در سی اس اس (CSS) +

    رنگها را میتوان با استفاده از اسمهای از پیش تعریف شده آنها، یا مقادیر آنها مانند RGB، HEX، HSL، RGBA،

    Read More

  • CSS Backgrounds | آموزش سی اس اس +

    پراپرتی بک گراند برای تعریف پس زمینه برای المان ها استفاده میشود.

    Read More

  • 1
  • 2
  • 3
  • 4

افراد آنلاین

ما 1268 مهمان و بدون عضو آنلاین داریم