المان style، استایل یک سند یا بخشی از آن را در خود دارد. درون این تگ CSS نوشته میشود. این استایل ها تنها برروی صفحه ای که المان style در آن قرار دارد تاثیر دارند.
المان style باید درون المان head سند نوشته شود. بطورکلی بهتر است استایل های شما درون فایل جداگانه ای نوشته شود و توسط المان link به صفحه اعمال شود.
اگر شما چند المان style و link دارید، براساس ترتیبی که در صفحه فراخوانی شده اند می آید. بنابراین مهم است آنها را به ترتیب درست فراخوانی کنید تا استایل صفحه شما بهم نریزد.
اتریبیوت ها
این المان از اتریبیوت های جهانی استفاده میکنند.
code>type
این اتریبیوت زبان استایل را بصورت MIME تعریف میکند. استفاده از این اتریبیوت اجباری نیست و مقدار آن بصورت پیشفرض text/css میباشد. مقادیری به جز استرینگ خالی و یا text/css استفاده نمیشود. توجه داشته باشید که در حال حاضر دلایلی که از این اتریبیوت استفاده میشود بسیار کم است.
code>media
این اتریبیوت مشخص میکند در جه مدیایی استایل ها باید اعمال شوند. مقدار این اتریبیوت مدیا کوری است. اگر این اتریبیوت تعریف نشود مقدار پیش فرض آن all خواهد بود.
code>nonce
اتریبیوت رمزنگاری شده nonce زمانی استفاده میشود که استایل های اینلاین style-src Content-Security-Policy باشد.
code>title
این اتریبیوت استایل شیت های جایگزین را معرفی میکند.
مثال
<!doctype html> <html> <head> <style> p { color: red; } </style> </head> <body> <p>This is my paragraph.</p> </body> </html>
در مثال زیر دو المان style وجود دارد:
<!doctype html> <html> <head> <style> p { color: white; background-color: blue; padding: 5px; border: 1px solid black; } </style> <style> p { color: blue; background-color: yellow; } </style> </head> <body> <p>This is my paragraph.</p> </body> </html>
خروجی مثال بالا بصورت زیر میباشد:
This is my paragraph.
استایل بکگراند و رنگ المان style بالایی توسط المان style پایینی اورراید شده است.
در مثال زیر از اتریبیوت media استفاده شده است:
<!doctype html> <html> <head> <style> p { color: white; background-color: blue; padding: 5px; border: 1px solid black; } </style> <style media="all and (max-width: 500px)"> p { color: blue; background-color: yellow; } </style> </head> <body> <p>This is my paragraph.</p> </body> </html>
در مثال بالا استایل المان style دوم زمانی اعمال میشود که اندازه تصویر کمتر از 500px باشد