CSSمخففCascading Style Sheets است .با آن ميتوان كارهاي زيادي را ذخيره كرد،وميتوان طرح چندين صفحه وب را همزمان كنترل نمود.
CSSبراي قالب بندي وشكل دهي برگه هاي سبك آبشاري صفحه وب استفاده مي شود .
با امكاناتCSS ميتوان رنگ، فونت، انداره متن، فاصله بين عناصر، نحوي استقرار وچيدمان عناصر، تصاوير پس زمينه يا رنگ هاي پس زمينه مورد استفاده، نمايشگرهاي مختلف براي دستگاه ها وانداره هاي صفحه نمايش مختلف وخيلي موارد ديگررا كنترل نمود.
نكته ـ كلمهcascsding باين معني است كه اگر عنصر والدي داراي ويژگي باشد، آن ويژگي به اولادانش منتقل ميشود، مگر اينكه براي آنها چيز ديگري مشخص شود .بعنوان نمونه اگر براي متنbody رنگ آبي انتخاب شود، تمام پارگرافها، برچسب ها وبقيه عناصر متن دار رنگ آبي منظور ميشود، مگر اينكه چيز ديگري انتخاب گردد.
امكاناتCSS به سه روش ميتواندباسناد HTML اضافه گردد .
استفاده از فا يلCSS رايج ترين راه براي افزودن آنها به عناصر HTML ميباشد .بااين حال براي ارائه مطالب و جنبه آموزشي ساده تر آن از دو روش ديگر بيشتر استفاده ميكنيم.
در روش درون خطي امكاناتCSS در ويژگيstyle براي عنصري از HTML تعريف ميشوند.
در مثال زير براي عنصر<h1> رنگ متن آن قرمز معرفي شده و براي عنصر <p>هم قرمز
<h1 style="color:blue;">A Blue Heading</h1> <p style="color:red;">A red paragraph.</p>
مثال ـ اسكريپت كامل مثال
<!DOCTYPE html> <html> <body> <h1 style="color:blue;">A Blue Heading</h1> <p style="color:red;">A red paragraph.</p> </body> </html>
اين روش براي تعريف امكاناتCSS براي استفاده در همان صفحه است .دراين روش عنا صر صفحه ميتوانند از ويژگيهاي آن مشتركا استفاده كنند.
در اين روش از عنصر<style> براي تعريف امكاناتCSS استفاده ميشود .اين عنصر در بخش<head> قرار داده ميشود.
در مثال زير رنگ متن تمام عناصر<h1>آبي ميباشد .وتمام عناصر<p> قرمز است .همچنين صفحه با رنگ پس زمينه"powderblue"نمايش داده ميشود.
مثال ـ استفاده ازinternal CSS
<!DOCTYPE html> <html> <head> <style>body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style></head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
با روش خارجي يك فايلCSS مطابق فرمت آن ساخته ميشود .اين فايل ميتواند بوسيله عنصر <link>در صفحات مختلف، استفاده شود . پيوند لينك بايد در بخش <head>قرار داشته باشد.
مثال ـ اين مثال در استفاده ازCSS ازفايل خارجيstyles.css استفاده گرديده است.
<!DOCTYPE html> <html> <head> <link>rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
فايلCSS را باهر اديتوري ميتوان نوشت .نبايد در آن هيچ عنصرhtml باشد .اين فايل بايد ازنوع cssباشد.
دراين مثال فايل استفاده شده"style.css"مطابق زيراست .
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
توجه ـ با تغيير دادن يك فايل استايل شيت، ميتواند اثرش دريك وبسايت باشد.
در اين مبحث بعضي ازويژگي هاي رايج مطرح ميشود، ودر آينده راجع به آنها بيشتر بحث خواهدشد
ويژگيCSS color براي تعريف رنگ متن ، مورد استفاده قرار ميگيرد .
ويژگيCSS font-family براي تعريف فونت استفاده ميشود .
ويژگيCSS font-size براي تعريف اندازه متن استفاده ميگردد .
مثال ـ نمونه استفاده ازويژگيهاي رنگ ، فونت واندازه
<!DOCTYPE html> <html> <head> <style>h1 { color: blue; font-family: verdana; font-size: 300%; } p { color: red; font-family: courier; font-size: 160%; } </style></head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
با ويژگيCSS border حاشيه اطراف يك عنصرHTML تعريف ميشود.
با ويژگي فوق ميتوان تقريبا براي تمام عناصرHTML حاشيه تعريف نمود.
نمونه براي تعريف حاشيه عناصرمثال -
<!DOCTYPE html> <html> <head> <style>p { border: 2px solid powderblue; } </style></head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </body> </html>
با ويژگيCSS padding ميتوان فاصله بين متن وحا شيه تعريف نمود .
مثال ـ نمونه استفاده ازCSS padding
<!DOCTYPE html> <html> <head> <style>p { border: 2px solid powderblue; padding: 30px; } </style></head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </body> </html>
با ويژگيCSS Margin فاصله بيروني تعريف ميشود .
مثال ـ نمونه استفاده ازCSS margin
<!DOCTYPE html> <html> <head> <style>p { border: 2px solid powderblue; margin: 50px; } </style></head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </body> </html>
براي لينك بفايل خارجيcss بدو روش انجام ميشود .يكي بصورت آدرس URL و ديگري بصورت آدرس نسبي .براي هركدام مثالي ارائه ميشود.
مثال ـ در مثال زير آدرس كاملURL استفاده شده است
<link>rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
مثال ـ نمونه لينك با آدرس نسبي كه بايد در وبسايت جاري باشد.
<link>rel="stylesheet" href="/html/styles.css">
مثال ـ لينك بفايل در محل جاري
<!DOCTYPE html> <html> <head> <link>rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
نكته ـ در اين مثالهاي لينك، پارامترrel="stylesheet"نشان دهنده نوع لينك بوده كه دراين مثال ها به فايلCSS ميباشد .