مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. در بخش قبلی ما شما را با مفاهیم کلی CSS آشنا کرده و کاربردها و ضرورت استفاده از CSS در صفحات وب را نیز بررسی کردیم. همچنین به ساختار کلی CSS نیز اشاره کردیم. بعد از تعریف کدهای CSS باید با روش های ارائه شده، CSS نوشته شده را به تگ های HTML صفحه وب خود اعمال کنید، برای این منظور راه های مختلفی وجود دارد از جمله می توانید CSS را در قالب هر یک از تگ های HTML اعمال کنید و یا تمام کدهای CSS را در ابتدای HTML قرار دهید ، همچنین می توانید CSS را در یک فایل جداگانه قرار دهید، برای آشنایی با هر یک از این روشها و طرز استفاده از CSS در ادامه ی این مبحث با ما همراه باشید.
طرز استفاده از CSS
در ادامه این آموزش طرز استفاده از CSS را به همراه روش ها و مثال هایی از هر یک ارائه داده ایم.
هنگامی که یک مرورگر یک style sheet را می خواند، سند HTML را با توجه به اطلاعات موجود در صفحه style قالب بندی می کند.
سه روش درج CSS در HTML
برای درج و استفاده از CSS در HTML سه روش کلی وجود دارد:
- External style sheet
- Internal style sheet
- Inline style
External style sheet
در این روش کدهای CSS در یک فایل جداگانه با پسوند CSS. ذخیره شده و با استفاده از تگ <Link> در html به آن دسترسی پیدا می کنیم.
تگ های <Link> در بخش <head> هر صفحه وب تعریف می شوند:
مثال : فایل CSS خارجی
| <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> |
یک فایل خارجی style sheet را می توان با یک ویرایشگر متن ساده نوشت و سپس با پسوند CSS. ذخیره کرد.
به عنوان فایل mystyle.css :
مثال :
| body { background-color: lightblue; } h1 { color: navy; margin-left: 20px; } |
Internal style sheet
در این روش کدهای CSS در قالب یک تگ <style> در ابتدای HTML و در بخش head تعریف می شود.
مثال : فایل CSS داخلی
| <head> <style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head> |
inline style
در این روش style مربوط به هر تگ و عنصر html را داخل همان عنصر و در صفت style تعریف می کنیم.
مثال : کدهای CSS داخلی
| <h1 style="color:blue;margin-left:30px;">This is a heading</h1> |
style sheet چندگانه
فرض کنید که یک style sheet خارجی دارای style زیر برای عنصر <h1> است:
سپس، فرض کنید که یک جدول style sheet خارجی نیز دارای سبک زیر برای عنصر <h1> است:
اگر style داخلی پس از پیوند به صفحه style خارجی تعریف شود، عناصر <h1> “نارنجی” خواهند بود:
مثال : حالت های چندگانه از CSS
| <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> <style> h1 { color: orange; } </style> </head> |
با این حال، اگر style داخلی قبل از پیوند به style sheet خارجی تعریف شده باشد، عناصر <h1> به صورت “navy” خواهند بود:
مثال : حالت دیگر مثال قبلی
| <head> <style> h1 { color: orange; } </style> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> |
ترتیب اولویت CSS
کدام Style زمانی که بیش از یک Style مشخص شده برای یک عنصر HTML وجود دارد انتخاب می شود؟
ترتیب اولویت Style ها بصورت زیر است.
۱- Inline style (درون عناصر HTML)
۲- style sheets خارجی و داخلی (در بخش head)
۳- پیش فرض مرورگر
بنابراین، Inline style (تعریف شده در داخل عناصر html) دارای بالاترین اولویت است.
مثال : نمونه ای از ترتتیب اولویت CSS
| <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> <style> body {background-color: linen;} </style> </head> <body style="background-color: lightcyan"> <h1>Multiple Styles Will Cascade into One</h1> <p>In this example, the background color is set inline, in an internal stylesheet, and in an external stylesheet.</p> <p>Try experimenting by removing styles to see how the cascading stylesheets work. (try removing the inline first, then the internal, then the external)</p> </body> </html> |
کلام آخر
یکی از اولین مواردی که باید قبل از شروع کار با CSS مشخص کنید طرز استفاده از CSS و نحوه ی درج آن در HTML است. همچنین باید اولویت های هر کدام از این روش ها را نیز در نظر داشته باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
محسن آستانه
مرسی
galaxy
خسته نباشید
بسیار عالی
galaxy
این قسمت کد مربوط به چی هست!
data-rsssl=1