با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. در بخش قبلی ما شما را با مفاهیم کلی CSS آشنا کرده و کاربردها و ضرورت استفاده از CSS در صفحات وب را نیز بررسی کردیم. همچنین به ساختار کلی CSS نیز اشاره کردیم. بعد از تعریف کدهای CSS باید با روش های ارائه شده، CSS نوشته شده را به تگ های HTML صفحه وب خود اعمال کنید، برای این منظور راه های مختلفی وجود دارد از جمله می توانید CSS را در قالب هر یک از تگ های HTML اعمال کنید و یا تمام کدهای CSS را در ابتدای HTML قرار دهید ، همچنین می توانید CSS را در یک فایل جداگانه قرار دهید، برای آشنایی با هر یک از این روشها و طرز استفاده از CSS در ادامه ی این مبحث با ما همراه باشید.
در ادامه این آموزش طرز استفاده از CSS را به همراه روش ها و مثال هایی از هر یک ارائه داده ایم.
هنگامی که یک مرورگر یک style sheet را می خواند، سند HTML را با توجه به اطلاعات موجود در صفحه style قالب بندی می کند.
برای درج و استفاده از CSS در HTML سه روش کلی وجود دارد:
در این روش کدهای CSS در یک فایل جداگانه با پسوند CSS. ذخیره شده و با استفاده از تگ <Link> در html به آن دسترسی پیدا می کنیم.
تگ های <Link> در بخش <head> هر صفحه وب تعریف می شوند:
1 2 3 | <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> |
یک فایل خارجی style sheet را می توان با یک ویرایشگر متن ساده نوشت و سپس با پسوند CSS. ذخیره کرد.
به عنوان فایل mystyle.css :
1 2 3 4 5 6 7 8 | body { background-color: lightblue; } h1 { color: navy; margin-left: 20px; } |
Internal style sheet
در این روش کدهای CSS در قالب یک تگ <style> در ابتدای HTML و در بخش head تعریف می شود.
1 2 3 4 5 6 7 8 9 10 11 12 | <head> <style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head> |
در این روش style مربوط به هر تگ و عنصر html را داخل همان عنصر و در صفت style
تعریف می کنیم.
1 | <h1 style="color:blue;margin-left:30px;">This is a heading</h1> |
فرض کنید که یک style sheet خارجی دارای style زیر برای عنصر <h1> است:
1 2 3 | h1 { color: navy; } |
سپس، فرض کنید که یک جدول style sheet خارجی نیز دارای سبک زیر برای عنصر <h1> است:
1 2 3 | h1 { color: orange; } |
اگر style داخلی پس از پیوند به صفحه style خارجی تعریف شود، عناصر <h1> “نارنجی” خواهند بود:
1 2 3 4 5 6 7 8 | <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> <style> h1 { color: orange; } </style> </head> |
با این حال، اگر style داخلی قبل از پیوند به style sheet خارجی تعریف شده باشد، عناصر <h1> به صورت “navy” خواهند بود:
1 2 3 4 5 6 7 8 | <head> <style> h1 { color: orange; } </style> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> |
کدام Style زمانی که بیش از یک Style مشخص شده برای یک عنصر HTML وجود دارد انتخاب می شود؟
ترتیب اولویت Style ها بصورت زیر است.
۱- Inline style (درون عناصر HTML)
۲- style sheets خارجی و داخلی (در بخش head)
۳- پیش فرض مرورگر
بنابراین، Inline style (تعریف شده در داخل عناصر html) دارای بالاترین اولویت است.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!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