سلام دوستان عزیز وب سایت آموزشی پی وی لرن و وقت بخیر به علاقمندان آموزش تکنولوژی های اینترنتی. CSS چیست؟ چه کاربردی دارد؟ این بخش رو با این موضوع آغاز می کنیم.
CSS مخفف Cascading Style Sheets است. این کمک می کند تا ارائه عناصر HTML را به عنوان یک فایل جداگانه معروف به فایل CSS با پسوند css. تعریف کنید.
CSS با ایجاد تغییر در یک مکان به تغییر قالب بندی هر عنصر HTML کمک می کند. تمام تغییرات ایجاد شده به طور خودکار به تمام صفحات وب وب سایت که در آن عنصر ظاهر می شود ، منعکس می شوند.
قوانین CSS استایل هایی هستند که ما برای ایجاد استایل شیت ها باید ایجاد کنیم. این ها قوانین ظاهری مرتبط با عنصر HTML را تعریف می کنند. شکل کلی سینتکس CSS به شرح زیر است:
1 | Selector {property: value;} |
در زیر نمونه هایی از قوانین CSS آورده شده است:
ويژگي مشخصه هایی را که می خواهید تغییر دهید مربوط به Selector مشخص می کند.
1 2 3 4 5 | P { color : red;} h1 (color : green; font-style : italic } body { color : cyan; font-family : Arial; font- style : 16pt} |
در زیر چهار روش برای افزودن CSS به اسناد HTML وجود دارد.
با روش Inline Style Sheets می توان کدهای css را در بین تگ های HTML گنجاند، برای افزودن inline CSS ، باید ویژگی استایلی را اعلام کنیم که می تواند حاوی هر CSS property باشد.
1 | <Tagname STYLE = “ Declaration1 ; Declaration2 “> …. </Tagname> |
بیایید مثال زیر را با استفاده از روش Inline Style در نظر بگیریم:
1 2 3 4 | <p style="color: blue; text-align: left; font-size: 15pt"> Inline Style Sheets are included with HTML element i.e. they are placed inline with the element. To add inline CSS, we have to declare style attribute which can contain any CSS property. </p> |
خروجی:
روش Embedded Style Sheets برای ظاهر یکسان در همه وقایع یک عنصر خاص استفاده می شود. این ها با استفاده از عنصر <style> در عنصر <head> تعریف می شوند.
1 2 3 4 5 | <head> <title> …. </title> <style type =”text/css”> …….CSS Rules/Styles…. </style> </head> |
بیایید مثال زیر را با استفاده از Embedded Style Sheets در نظر بگیریم:
1 2 3 4 | <style type="text/css"> p {color:green; text-align: left; font-size: 10pt} h1 { color: red; font-weight: bold} </style> |
با روش External Style Sheets ، می توان صفحه جداگانه ای با پسوند css. ایجاد کرد و سپس کدهای CSS را در آن نوشت. سپس این فایل ها را می توان با استفاده از تگ <link> به هر سند HTML متصل کرد. در روش External Style Sheets فایل صفحه css را در اتریبیوت rel تگ link باید نوشت.
1 2 | <head> <link rel= “stylesheet” type=”text/css” href= “url of css file”> </head> |
به منظور ایجاد external css و پیوند دادن آن به سند HTML ، مراحل زیر را دنبال کنید:
اول از همه یک فایل CSS ایجاد کنید و کلیه قوانین CSS را برای چندین عنصر HTML تعریف کنید. بیایید این فایل را با عنوان external.css نامگذاری کنیم.
1 2 3 4 5 6 | p{ Color: orange; text-align: left; font-size: 10pt; } h1{ Color: orange; font-weight: bold; } |
اکنون سند HTML را ایجاد کرده و آن را به عنوان externaldemo.html بنامید.
1 2 3 4 5 6 7 8 9 10 | <html> <head> <title> External Style Sheets Demo </title> <link rel="stylesheet" type="text/css" href="external.css"> </head> <body> <h1> External Style Sheets</h1> <p>External Style Sheets are the separate .css files that contain the CSS rules.</p> </body> </html> |
Imported Style Sheets به ما این امکان را می دهد که قوانین استایل را از دیگر style sheets وارد کنیم. برای وارد کردن قوانین CSS ، ما باید قبل از همه قوانین در style sheet از import@ استفاده کنیم.
1 2 3 4 5 6 | <head><title> Title Information </title> <style type=”text/css”> @import URL (cssfilepath) … CSS rules… </style> </head> |
بیایید مثال زیر را با استفاده از Inline Style Sheets در نظر بگیریم:
1 2 3 4 5 6 7 8 9 10 11 12 | <html> <head> <title> External Style Sheets Demo </title> <style> @import url(external.css); </style> </head> <body> <h1> External Style Sheets</h1> <p>External Style Sheets are the separate .css files that contain the CSS rules.</p> </body> </html> |
با css و روش های اضافه کردن CSS به صفحه HTML در این بخش از آموزش تکنولوژی اینترنت آشنا شدیم. در بخش بعدی به JavaScript می پردازیم.