طراحی وب

شروع کار css

شروع کار css چگونه است؟

آموزش css درس سوم

شروع کار css : هنگامی که یک مرورگر یک style sheet (برگه طراحی ظاهر) را می خواند، سند HTML را با توجه به اطلاعات موجود در style sheet  قالب بندی می کند.

سینتکس و انتخابگرهای css  را بخوانید

شروع کار css : سه راه برای وارد کردن CSS

سه روش برای قرار دادن یک style sheet وجود دارد:

External style sheet

Internal style sheet

Inline style

style sheet خارجی

با یک style sheet خارجی، می توانید یک وب سایت را به طور  کامل فقط با تغییر یک فایل تغییر دهید!

هر صفحه باید شامل یک رفرنس به فایلstyle sheet خارجی درون   یک عنصر <link>  باشد. عنصر  <link> داخل بخش     <head> قرار دارد:

مثال

 &lt;head&gt;
&lt;link rel="stylesheet" type="text/css" href="mystyle.css"&gt;
&lt;/head&gt; 

یک style sheet خارجی را می توان در هر ویرایشگر متن نوشت. این فایل نباید حاوی تگ های HTML باشد. فایل style sheet باید با یک پسوند .css ذخیره شود.

در اینجاکد مربوط به  mystyle.css” ” را ببینید:

body {
    background-color: lightblue;
}

h1 {
    color: navy;
    margin-left: 20px;
}

توجه: بین value و unit  به هیچ وجه مثل (such as margin-left: 20 px;) فاصله نگذارید. روش درست به این صورت است : margin-left: 20px;

شروع کار css
شروع کار css

style sheet داخلی

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

استایل های  داخلی درون عنصر <style>، داخل بخش  <head> یک صفحه HTML تعریف می شوند:

مثال

 &lt;head&gt;

&lt;img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0Abody%20%7B%0A%20%20%20%20background-color%3A%20linen%3B%0A%7D%0A%0Ah1%20%7B%0A%20%20%20%20color%3A%20maroon%3B%0A%20%20%20%20margin-left%3A%2040px%3B%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&amp;lt;style&amp;gt;" title="&amp;lt;style&amp;gt;" /&gt;

&lt;/head&gt; 

شروع کار css : استایل های  درونی

یک استایل  درونی می تواند برای اعمال یک استایل منحصر به فرد برای یک عنصرتنها استفاده شود.

برای استفاده از استایل های  درونی ، ویژگی استایل  را به عنصر مربوطه اضافه کنید. ویژگی استایل  می تواند شامل هر ویژگی CSS  باشد.

مثال زیر نشان می دهد که چگونه رنگ و حاشیه چپ یک عنصر <h1>  را تغییر دهید:

مثال

 

&lt;h1 style="color:blue;margin-left:30px;"&gt;This is a heading&lt;/h1&gt;


 

نکته: یک استایل  درونی بسیاری از مزایای یک style sheet را از بین می برد (با مخلوط کردن محتوا و ارائه)  از این روش کمتر استفاده  کنید.

style sheet  چندگانه

اگر برخی از ویژگی ها  برای همان انتخابگر  (عنصر) در style sheets  های مختلف تعریف شده باشد، مقدار  آخرین style sheets استفاده خواهد شد.
مثال

فرض کنید که یک style sheet  خارجی دارای استایل  زیر برای عنصر  <h1> است:

h1 {
    color: navy;
}

سپس، فرض کنید که یک style sheet  داخلی نیز دارای استایل زیر برای عنصر  <h1> است:

h1 {
    color: orange;   
}

اگر استایل  داخلی پس از لینک شدن  به style sheet  خارجی تعریف شود، عناصر <h1> “نارنجی” خواهند بود:

مثال

 &lt;head&gt;
&lt;link rel="stylesheet" type="text/css" href="mystyle.css"&gt;

&lt;img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0Ah1%20%7B%0A%20%20%20%20color%3A%20orange%3B%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&amp;lt;style&amp;gt;" title="&amp;lt;style&amp;gt;" /&gt;

&lt;/head&gt; 

با این حال، اگر استایل  داخلی قبل از لینک  به style sheet  خارجی تعریف شده باشد، عناصر <h1>  به صورت “navy” خواهند بود:

مثال

 &lt;head&gt;

&lt;img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0Ah1%20%7B%0A%20%20%20%20color%3A%20orange%3B%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&amp;lt;style&amp;gt;" title="&amp;lt;style&amp;gt;" /&gt;

&lt;link rel="stylesheet" type="text/css" href="mystyle.css"&gt;
&lt;/head&gt; 

شروع کار css : آبشاری

زمانی که بیش از یک استایل  برای یک عنصر HTML وجود دارد چه استایلی استفاده می شود؟

به طور کلی ما می توانیم بگوییم که تمام استایل ها به صورت یک الگوی جدید “مجازی” به وسیله قوانین زیر به صورت “آبشار” به کار می روند: شماره اول دارای بالاترین اولویت است:

استایل  درونی (درون عنصر HTML)
style sheets  خارجی و داخلی (در بخش head
مرورگر به طور پیش فرض

بنابراین،  در استایل درونی  (درون یک عنصر HTML خاص) دارای بالاترین اولویت است، به این معنی که آن در داخل برچسب <head> تعریف شده است ، یا در یک style sheet  خارجی یا یک مقدار پیش فرض مرورگر تعریف استایل را نادیده می گیرد.

بیشتر بخوانید:

استارت‌آپ پولساز
برچسب ها

1 دیدگاه

  1. سلام و خسته نباشید

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

    با سپاس از تیم بهترین ایده

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دوره رایگان کسب و کار اینترنتی

10 جلسه به همراه فایل صوتی و ویدیویی
همین حالا شروع کنید
تا امروز بیش از 4000 نفر در این دوره شرکت کرده‌اند
بستن پیام
بستن