بهترین سایت برای توسعه دهندگان وب

دروس HTML5

شروع HTML مقدمه HTML ویرایشگران HTML مثالهای اساسی HTML المان های HTML ویژگی های HTML عناوین HTML بندهای HTML سبک های HTML قالب بندی HTML نقل قول های HTML نظرات HTML رنگهای HTML HTML و CSS پیوندهای HTML تصاویر HTML جداول HTML لیست های HTML بلوک های HTML کلاس های HTML شناسه های HTML فریم های HTML HTML و JavaScript مسیرهای پرونده HTML HTML قسمت هدینگ چیدمان های HTML HTML پاسخگو کد رایانه HTML موجودیت HTML نمادهای HTML رمزگذاری HTML رمزگذاری URL HTML HTML و XHTML

HTML فرم ها

فرم های HTML عناصر فرم HTML انواع ورودی HTML صفات ورودی HTML

HTML5

مقدمه HTML5 پشتیبانی HTML5 عناصر جدید HTML5 عناصر معنایی HTML5 مهاجرت از HTML4 راهنمای سبک HTML5

HTML گرافیک

HTML Canvas HTML SVG

HTML رسانه

HTML ویدیوی HTML صوت HTML افزونه های HTML یوتیوب HTML

HTML API

مکان جغرافیایی HTML کشیدن / رها کردن HTML HTML ذخیره وب HTML کارهای وب HTML و SSE

HTML مثال

مثالهای HTML آزمون ها HTML تمرینات HTML گواهی HTML خلاصه HTML قابلیت دسترسی به HTML

HTML منابع

لیست برچسب های HTML صفات HTML صفات جهانی HTML رویدادهای HTML رنگهای HTML کانواس HTML صوتی / تصویری HTML نسخه معتبر HTML مجموعه نویسه های HTML رمزگذاری URL HTML رمزگذاری زبان HTML پیام های HTTP روشهای HTTP مبدل PX به EM میانبرهای صفحه کلید

HTML5 درسهایی برای مبتدیان

سبک های HTML - CSS


CSS = سبک ها و رنگ ها

دستکاری کردن متن
رنگها,  بلوک ها



 Css آموزش

سبک دادن HTML با CSS ورق های سبک آبشار

Css چیست ؟

با CSS می توانید رنگ ، قلم ، اندازه متن ، فاصله بین عناصر ، نحوه قرارگیری و چیدمان عناصر ، تصاویر پس زمینه یا رنگ پس زمینه ، نمایش های مختلف برای دستگاه های مختلف و اندازه صفحه و سایر موارد را کنترل کنید. خیلی بیشتر!

نکته: کلمه آبشار به معنای این است که سبکی که برای عنصر والدین اعمال می شود ، برای همه عناصر فرزندان درون والدین نیز اعمال خواهد شد. بنابراین ، اگر رنگ متن را روی "آبی" تنظیم کنید ، تمام عناوین ، پاراگراف ها و سایر عناصر متن درون بدنه نیز به همان رنگ در می آیند (مگر اینکه چیز دیگری را مشخص کنید)!

CSS مخفف C ascading S tyle S heets - صفحه سبک آبشار.

CSS توضیح می دهد نحوه نمایش المان HTML بر روی صفحه ، کاغذ یا موارد دیگر .

CSS باعث صرفه جویی در وقت زیادی می شود. این می تواند طرح چندین صفحه وب را کنترل کند در همان زمان.

استفاده از CSS

CSS را می توان به سه روش به المان HTML اضافه کرد:

  • Inline (درون خطی) - درون خطی برای اعمال یک سبک منحصر به فرد به یک المان HTML استفاده می شود. style
  • Internal (داخلی) - با استفاده از <style> در بخش <head> یک HTML استفاده می شود
  • External (خارجی) - با استفاده از یک لینک<link> در HTML استفاده می شود

متداول ترین روش برای افزودن CSS ، نگهداری سبک ها در فایل های CSS خارجی است. با این حال ، در این آموزش ما از سبک های داخلی و درون خطی استفاده خواهیم کرد ، زیرا نشان دادن آن راحت تر است ، و خودتان نیز سعی کنید آن را آسان تر کنید.

نکته: می توانید درباره CSS به CSS بیشتر بدانید مراجعه کنید


Inline CSS - سبک درون خطی

CSS درون خطی برای اعمال یک سبک منحصر به فرد به یک المان HTML استفاده می شود.p>

یک CSS درون خطی از ویژگی سبک style المان HTML استفاده می کند.

مثال زیر رنگ متن المان <h1> را به آبی و رنگ متن المان <p> را به قرمز تنظیم می کند:

مثال

<h1 style="color:blue;">این سربرگ آبی است</h1>

این سربرگ آبی است

خودتان آزمایش کنید »

CSS Internal - سبک داخلی

از CSS داخلی برای تعریف سبک برای یک صفحه HTML استفاده می شود.

CSS داخلی در بخش <head> صفحه HTML در داخل عنصر <style> تعریف می شود.

مثال زیر رنگ متن همه المان <h1> (در آن صفحه) را به آبی و رنگ متن همه المان <p> را به قرمز تنظیم می کند. علاوه بر این ، صفحه با رنگ زمینه "آبی رنگ پودری" نمایش داده می شود:

مثال

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>این عنوان است </h1>
<p>این یک بند است</p>

</body>
</html>
خودتان آزمایش کنید »

External CSS - سبک خارجی

برای تعریف سبک بسیاری از صفحات HTML از یک صفحه سبک خارجی استفاده می شود.

با استفاده از یک شیوه نامه خارجی ، فقط با تغییر می توانید ظاهر کل وب سایت خود را تغییر دهید

برای استفاده از یک شیوه نامه خارجی ، در قسمت <head> هر صفحه HTML پیوندی به آن اضافه کنید:

مثال

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>این عنوان است</h1>
<p>این یک بند است</p>

</body>
</html>
خودتان آزمایش کنید »

سبک خارجی را می توان در هر ویرایشگر متن نوشت. این پرونده نباید حاوی کد HTML باشد و باید با پسوند .css ذخیره شود.

در اینجا فایل "styles.css" به نظر می رسد:

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

توجه داشته باشید: می توانید اطلاعات بیشتر در مورد ویرایشگران کد را در بخش ویرایشگران HTML در وب سایت ما مشاهده کنید

نکته: با استفاده از یک شیوه نامه خارجی ، با تغییر یک پرونده می توانید ظاهر کل وب سایت را تغییر دهید!


رنگها ، قلم ها و اندازه های CSS

در اینجا ، برخی از خصوصیات CSS که معمولاً مورد استفاده قرار می گیرند را نشان خواهیم داد. بعداً درباره آنها بیشتر خواهید آموخت.

color خاصیت رنگ CSS رنگ متن مورد استفاده را تعریف می کند.

ویژگی 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>این یک عنوان است</h1>
<p> این یک بند است</p>

</body>
</html>
خودتان آزمایش کنید »

 حاشیه ، Margin - Border - Padding

CSS Border - حاشیه

ویژگی border حاشیه در المان HTML را تعریف می کند

مثال

p {
  border: 1px solid powderblue;
}
خودتان آزمایش کنید »

CSS Padding -فاصله / حاشیه ی درونی عناصر

ویژگی CSS padding یک padding (فاصله) بین متن و حاشیه را تعریف می کند.

مثال

p {
  border: 1px solid powderblue;
  padding: 30px;
}
خودتان آزمایش کنید »

CSS Margin - حاشیه CSS

ویژگی CSS margin یک حاشیه (فضای) خارج از مرز را تعریف می کند.

مثال

p {
  border: 1px solid powderblue;
  margin: 50px;
}
خودتان آزمایش کنید »

ویژگی شناسه - ID

برای تعیین یک سبک خاص برای یک المان خاص ، ویژگیid را اضافه میکنیم

<p id="p01">من متفاوتم</p>

سپس المان را با یک id خاص سبک دهید:

مثال

#p01 {
  color: blue;
}
خودتان آزمایش کنید »

شناسه id با استفاده از نویسه # (تیز ، هش) و نام در css مشخص شده است .

توجه: شناسه المان باید در صفحه منحصر به فرد باشد ، بنابراین از ID برای انتخاب یک المان منحصر به فرد استفاده می شود!


ویژگی کلاس - class

برای تعیین سبک برای انواع خاصی از المان ، ویژگی را class اضافه کنید

<p class="error">من متفاوتم</p>

سپس المان را با یک کلاس خاص سبک کنید:

مثال

p.error {
  color: red;
}
خودتان آزمایش کنید »

کلاس class با علامت . (نقطه) و نام کلاس نوشته می شود


ورق های سبک خارجی

صفحه های خارجی را می توان با URL کامل یا با یک مسیر نسبت به صفحه مورد نظر ارجاع داد .

این مثال از URL کامل برای پیوند دادن به صفحه سبک استفاده می کند:

مثال

<link rel="stylesheet" href="https://www.farsiw3.ir/html/styles.css">

خودتان آزمایش کنید »

این مثال به یک صفحه سبک واقع در پوشه html در وب سایت فعلی پیوند دارد:

مثال

<link rel="stylesheet" href="/html/styles.css">

خودتان آزمایش کنید »

این مثال به یک صفحه سبک پیوند دارد که در همان پوشه صفحه فعلی قرار دارد:

مثال

<link rel="stylesheet" href="styles.css">

خودتان آزمایش کنید »

می توانید اطلاعات بیشتر در مورد مسیرهای فایل را در مسیرهای HTML مطالعه کنید. .


خلاصه درس

  • styleاز ویژگی سبک HTML برای یک ظاهر طراحی داخلی استفاده کنید
  • از المان <style> برای تعریف داخلی استفاده کنید
  • از المان <link> در HTML برای طراحی خارجی استفاده کنید
  • از <head> برای نگه داشتن استناد <style> یا <link> استفاده کنید
  • از ویژگی color در CSS برای تعریف رنگ متن استفاده کنید
  • از ویژگی font-family در CSS برای تعیین نوع فونت یا همان قلم استفاده کنید
  • از ویژگی font-sizeدر CSS برای اندازه فونت استفاده کنید
  • از ویژگی border برای تنظیم حاشیه استفاده کنید
  • از ویژگی padding برای فاصله بین حاشیه و حد استفاده کنید
  • از ویژگی margin برای فضای خارج از حاشیه استفاده کنید

تمرینات HTML

خود را امتحان کنید

تمرین:

از CSS برای تنظیم رنگ پس زمینه سند (بدنه) به زرد استفاده کنید.

<!DOCTYPE html>
<html>
<head>
<style>

  :yellow;

</style>
</head>
<body>

<h1>صفحه خانه من</h1>

</body>
</html>

تمرین را شروع کنید


برچسب های سبک HTML

برچسب توضیحات
<style> اطلاعات سبک را برای یک سند HTML مشخص می کند
<link> پیوندی بین یک سند و یک منبع خارجی را تعریف می کند





این سایت برای آموزش ، آزمایش و یادگیری بهینه شده است. نمونه ها را می توان برای بهبود ساده کرد خواندن و درک اساسی. آموزشها ، پیوندها و مثالها مرتباً تجدید نظر می شوند تا از آنها جلوگیری شود خطاها ، اما ما نمی توانیم صحت و عملکرد کامل همه مطالب را تضمین کنیم. با استفاده از این سایت ، شما موافقت می کنید که مطالعه کرده اید و پذیرفته ایدمقررات استفاده , کوکی و سیاست های حفظ حریم خصوصی. کپی رایت 1999-2020 حق چاپ و .. محفوظ توسط احمد فرجی
سایت توسط چارچوب farsiw3.ir طراحی شده است.

Farsiw3.ir