تا اینجای کار چند تا تگ HTML یاد گرفتیم و مختصری درباره استایل ها توضیح دادیم. تو این جلسه بیشتر وارد مبحث استایل میشیم ولی در کل توی دوره CSS بطور کامل همه موارد رو توضیح میدیم براتون .
ویژگی استایل برای افزودن قیافه ! به المان مورد نظرمون استفاده میشه . قیافه یعنی خیلی از موارد که بعضی از اون ها میشه رنگ و سایز و فونت و جایگاه و … مثال زیر در مورد نوشتن استایل در HTML میشه استفاده کرد و خروجی هم در زیر مثال براتون آوردیم که ببینید چجوری میشه !
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
I am normal
I am red
I am blue
I am big
نحوه نوشتن ویژگی استایل
برای اینکه بتونیم از ویژگی استایل در HTML و تگ هامون استفاده کنیم فقط کافیه مثل ویژگی های دیگه style رو به المان معرفی کنیم . داخل استایل حالا باید بیایم اون خصوصیت که لازم داریم المان داشته باشه رو بهش وصل کنیم . فرمت نوشتن استایل در HTML هم از مثال زیر تبعیت میکنه همیشه :
<tagname style="property:value;">
تو مثال بالا ویژگی استایل style برای المان تعریف میشه و داخل اون ویژگی باید خصوصیت ها رو بنویسیم . یعنی مثلا اگه میخوایم رنگ المان ما قرمز باشه فقط کافی هستش که بنویسیم : color:red
رنگ پس زمینه یا همون رنگ Background
توضیح دادنش خیلی بیشتر طول میکشه تا اینکه بیایم ببینیم چه خبره ! خیلی راحت میتونید با این خصوصیت به المانی که دارید مینویسید رنگ پس زمینه بدید بهش . همین ! توی مثال زیر به المان body اومدیم رنگ پس زمینه دادیم که اگر یادتون باشه body همه صفحه رو شامل میشد.
<body data-rsssl=1 style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<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 data-rsssl=1>
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body>
رنگ متن در HTML یا همون text color
این هم توضیحش خیلی سخت تره یا انجام دادنش . خیلی ساده میتونید با این خصوصیت توی استایل به اون المانی که دارین تعریف میکنین رنگ بدید به متنش . همین !
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
فقط حواستون باشه برای رنگ متن فقط از خصوصیت color خالی استفاده میکنیم و برای رنگ پس زمینه میشه background-color
فونت در HTML
از خصوصیت font-family برای اختصاص دادن یک فونت خاص به المان میتونیم استفاده کنیم . یعنی مثلا یه قسمت از وب سایتمون قراره یک فونت خاصی داشته باشه و یک قسمت دیگه یه فونت دیگه . به هر کدوم از المان هامون یه فونت میدیم و طبق فونت ما اون المان لود میشه توی صفحه. حالا اینکه این فونت ها از کجا میان !؟ یه سری از فونت ها داخل همه سیستم ها هست و تقریبا میشه گفت فونت های دیفالت هستن. ولی یه سری از فونت ها داخل هر سیستمی نیست و ما باید اون فونت رو به وب سایتمون اضافه کنیم . بعدا بهتون توضیح کامل میدیم که چجوری بتونین فونت دلخواهتون رو به سیستم وب سایت اضافه کنین.
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
سایز متن در HTML
خصوصیت font-size برای این مورد استفاده میشه . حواستون باشه font-size نه text-size ! به فونت یه سایز مخصوص میدیم و میگیم توی این اندازه متن المان رو برای وب سایت نشون بده !
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
الان هنوز توی دوره HTML هستیم و در همین حد بدونید که واحدهای زیادی برای تعیین اندازه متن المان وجود داره و یکی از اون ها که توی مثال بالا اومده درصد هستش و بر اساس درصد مشخص میکنه که اندازه فونت چقدر باشه . میتونین خودتون فعلا تست کنین تا بعدا کامل توضیح بدیم .
چینش متن در HTML
خصوصیت text-align برای تعیین کردن چینش متن در المان ها بکار میره . دقت کنید این ویژگی فقط مثل استفاده از نرم افزار ورد آفیس که میزنیم راست چین یا چپ چین بشه و … هستش و دقیقا همون کار رو با متن المان ما انجام میده.
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
جمع بندی
توی آموزش HTML ما هنوز نمیتونیم بصورت عمیق وارد قضیه استایل نویسی بشیم . ابتدا باید کامل دوره HTML رو بریم و بعد به توضیح کامل CSS نویسی بپردازیم . ویژگی استایل برای نوشتن CSS داخل کدهای HTML استفاده میشه . توی این جلسه ما اومدیم توضیح مختصری درباره برخی خصوصیت های استایل المان های HTML توضیح دادیم. در کل میشه از استایل برای قیافه دادن به المان استفاده کنیم و هر جوری که دلمون میخواد اون المان رو توی خروجی نشون بدیم .
