HTML
CSS مخفف آبشارهای سبک است
CSS نحوه نمایش عناصر HTML را توصیف می کند
مثال CSS
<style>
بدن {پس زمینه-رنگ: نور لامپ؛ متن-تراز: مرکز؛}
h1 {رنگ: آبی؛ اندازه قلم: 40px؛}
p {font-family: verdana؛ اندازه قلم: 20px؛
</style>
برای دیدن نحوه عملکرد آن ، روی دکمه “سعی کنید خودتان” کلیک کنید.
نحو CSS
یک قانون CSS شامل یک انتخاب کننده و یک اعلامیه است:
انتخابگر CSS
انتخاب کننده به عنصر HTML به سبک (h1) اشاره می کند.
بخش اعلامیه (در پرانتزهای مجعد) حاوی یک یا چند اعلامیه است که توسط تک رنگ ها جدا شده است.
هر اظهارنامه شامل یک نام خاصیت CSS و یک مقدار است که توسط یک روده بزرگ از هم جدا می شود.
در مثال زیر ، همه عناصر <p> با عرض 32 پیکسل ، وسط و با رنگ قرمز:
مثال
<style>
p {font-size: 32px؛ رنگ: قرمز؛ متن-تراز: مرکز؛}
</style>
مثال مشابهی را نیز می توان به صورت زیر نوشت:
<style>
پ {
اندازه قلم: 32px؛
رنگ: قرمز؛
متن-تراز: مرکز؛
}
</style>
برگه سبک خارجی
یک برگه سبک CSS می تواند در یک پرونده خارجی ذخیره شود:
mystyle.css
بدن پس زمینه-رنگ: نارنجی؛ font-family: verdana
h1 {رنگ: سفید ؛}
p {font-size: 20px؛
برگه های سبک خارجی با برچسب های <link> به صفحات HTML پیوند دارند:
مثال
<! DOCTYPE html>
<html>
<link rel = “stylesheet” href = “mystyle.css”>
<body>
<h1> اولین نمونه CSS من </h1>
<p> این یک پاراگراف است. </p>
</body>
</html>
سبک درون خطی
مثال
<! DOCTYPE html>
<html>
<link rel = “stylesheet” href = “mystyle.css”>
<body>
<h1> اولین نمونه CSS من </h1>
<p> این یک پاراگراف است. </p>
<p style = “font-size: 25px”> این یک پاراگراف است. </p>
<p style = “font-size: 30px”> این یک پاراگراف است. </p>
</body>
</html>
سفارش آبشار
اگر سبک های مختلفی برای عناصر HTML مشخص شده باشد ، سبک ها با اولویت زیر به سبک های جدید تبدیل می شوند:
اولویت 1: سبک های درون خطی
اولویت 2: برگه های سبک بیرونی و داخلی
اولویت 3: پیش فرض مرورگر
اگر سبک های مختلف در همان سطح اولویت یکسان تعریف شوند ، آخرین حالت دارای بالاترین اولویت است.
مثال
<! DOCTYPE html>
<html>
<link rel = “stylesheet” href = “mystyle.css”>
<style>
بدن {پس زمینه-رنگ: لایتنینگ ؛}
</style>
<body style = “background-color: olivedrab”>
<h1> آبشارهای چند سبک به یک </ h1>
<p> سعی کنید با از بین بردن سبک ها ، نحوه عملکرد شیوه نامه های آبشار را آزمایش کنید. </p>
<p> ابتدا خط داخلی ، سپس داخلی ، سپس خارجی را حذف کنید. </p>
</body>
نسخه ی نمایشی CSS – یک صفحه HTML – سبک های چندگانه!
در اینجا ما یک صفحه HTML نمایش داده شده با 4 شیوه نامه مختلف را نشان می دهیم.
رنگ و چرخه رنگ