ویژگی سبک HTML برای افزودن سبک به یک عنصر مانند رنگ، فونت، اندازه و موارد دیگر استفاده می شود.
آبی
قرمز
تنظیم سبک یک عنصر HTML را می توان با ویژگی style انجام داد.
این ویژگی یک ویژگی CSS است. مقدار یک مقدار CSS است.
<tagname style="property:value;">
ویژگی CSS background-color رنگ پس زمینه یک عنصر HTML را مشخص می کند.
<body style="background-color:powderblue;">
<h1>عنوان</h1>
<p>پاراگراف</p>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/webshift.ir\/wp-admin\/admin-ajax.php","nonce":"99720840ff","url":"https:\/\/webshift.ir\/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-html-%d8%ac%d9%84%d8%b3%d9%87-%d9%87%d9%81%d8%aa%d9%85-%d8%a7%d8%b3%d8%aa%d8%a7%db%8c%d9%84-%d8%af%d9%87%db%8c-%d8%af%d8%b1-html","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://webshift.ir/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script><script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
<body>
<h1 style="background-color:powderblue;">عنوان</h1>
<p style="background-color:tomato;">پاراگراف</p>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/webshift.ir\/wp-admin\/admin-ajax.php","nonce":"99720840ff","url":"https:\/\/webshift.ir\/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-html-%d8%ac%d9%84%d8%b3%d9%87-%d9%87%d9%81%d8%aa%d9%85-%d8%a7%d8%b3%d8%aa%d8%a7%db%8c%d9%84-%d8%af%d9%87%db%8c-%d8%af%d8%b1-html","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://webshift.ir/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
ویژگی color CSS رنگ متن را برای یک عنصر HTML تعریف می کند:
<h1 style="color:blue;">عنوان</h1>
<p style="color:red;">پاراگراف</p>
ویژگی CSS font-family فونت مورد استفاده برای یک عنصر HTML را تعریف می کند:
<h1 style="font-family:verdana;">heading</h1>
<p style="font-family:courier;">paragraph.</p>
ویژگی CSS font-size اندازه متن را برای یک عنصر HTML تعریف می کند:
<h1 style="font-size:300%;">عنوان</h1>
<p style="font-size:160%;">پاراگراف</p>
ویژگی CSS text-align تراز افقی متن را برای یک عنصر HTML تعریف می کند:
<h1 style="text-align:center;">عنوان وسط</h1>
<p style="text-align:center;">پاراگراف وسط</p>
خلاصه ی فصل
از ویژگی style برای استایل دادن به عناصر HTML استفاده کنید
از background-color برای رنگ پس زمینه استفاده کنید
از color برای رنگ های متن استفاده کنید
از font-family برای فونت های متنی استفاده کنید
از font-size برای اندازه متن استفاده کنید
از text-align برای تراز کردن متن استفاده کنید
سورس کدهای وب شیفت
طراحی انواع سایت در وب شیفت
