آموزش جامع HTML و CSS
- دسته بندی : برنامه نویسی
- تاریخ انتشار : ۶ مهر ۱۳۹۹
با عرض سلام خدمت تمام دوستان و علاقه‌مندان به آموزش HTML و CSS. در این آموزش قصد دارم تا آنجایی که ممکن است HTML و کدهای آن را به شما معرفی کنم و تا حدودی هم با CSS برای بهتر و جذاب‌تر کردن صفحه HTML خودمون آشنا می‌شویم. در ابتدا به تعریف HTML و برخی از کدهای HTML می‌پردازم و بعد از آن با طریقه استفاده از محیط‌هایی که می‌توان در آن کدهای HTML را وارد کرد آشنا می‌شویم و در انتها که بخش اصلی آموزش ما است با انواع کدهای HTML و CSS آشنا می‌شویم تا بتوانیم یک صفحه مثل انواع وب سایت‌های دیگر طراحی و پیداه‌سازی کنیم.
قبل از این که آموزش را شروع کنیم چند نکته حائز اهمیت هست که در زیر به آن‌ها اشاره می‌کنم و بعد از آن آموزش را شروع می‌کنیم.
- چون مطالب آموزشی بسیار متنوع هست و تا آن جایی که امکان داشت خواستم به صورت کامل باشد به همین دلیل از تعریف کردن یا مثال زدن در مورد تک تک جزئیات خود‌داری کردم و مثال و تمرین در آن زمینه را به شما دوستان واگذار می‌کنم. این به این معنا نیست که شما متوجه چگونگی استفاده از آن‌ها نشوید بلکه کاملا متوجه خواهید شد که چگونه از آن‌ها استفاده کنید فقط مثال در آن زمینه را به شما دوستان واگذار کردم.
- باز هم چون مطالب آموزشی بسیار گسترده و کامل هست و شیوه‌ی بیان و اولویت‌بندی کردن مطالب کمی برای من زمان‌گیر بود به همین دلیل برای سرعت بخشیدن به آماده کردن آن ، طبق یک مرجع آموزشی معتبر مطالب را فهرست بندی و چینش کردم.
- بیشتر مطالبی که در این آموزش بیان ، چینش و فهرست بندی شده از سایت معتبر w3schools.com گرفته شده است.
HTM : HTML مخفف Hyper Text Markup Language به معنی زبان نشانه گزاری فرامتنی است که میتوانید با آن صفحات وب خود را ایجاد کنید. HTML یک زبان برنامه نویسی نیست بلکه یک زبان نشانه گزاری است. یعنی شما نشان می‌دهید که یک متن یا یک عکس یا هر چیز دیگری در کجای صفحه‌ی وب سایت شما قرار بگیرد.
خوب حالا که با تعریف HTML آشنا شدیم بریم چند اصطلاح رو یاد بگیریم تا بتوانیم با HTML کار کنیم.
قبل از این که اصطلاحات را بخواهیم بخوانیم باید بگم اگر توضیحات را خوب متوجه نشده‌اید کاملا طبیعی است چون هنوز هیچ آشنایی با HTML ندارید و آن را به درستی درک و لمس نکرده‌اید. این تعریفات صرفا برای این است که شما فقط بدانید یک همچین چیزی وجود دارد تا در مثال‌ها این تعریفات کم‌کم برای شما جا بی‌افتد.
<DOCTYPE html!> : مخفف document type HTML به معنی این که سند ما از نوع HTML است می‌باشد.
نکته : عبارت <DOCTYPE html!> در HTML5 به صورت <DOCTYPE!> نوشته می‌شود.
تگ چیست : تگ یا برچسب اسامی یا بهتر است بگوییم عناصری هستند که در داخل علامت <Tag> در ابتدا و علامت <Tag/> در انتها قرار می‌گیرند.
به عنوان مثال (<p>…..</p>) در اینجا به <p> ، شروع تگ p یا تگ باز (opening tag) و به <p/> ، پایان تگ p یا تگ بسته (closing tag) می‌گوییم.
تگ <html> : ریشه اصلی در یک صفحه HTML است. تمامی کدهایی که شما در یک صفحه HTML می‌بینید زیرمجموعه‌ای از این کد است.
تگ <head> : در این تگ یا برچسب اطلاعاتی در مورد خود صفحه قرار می‌گیرد.
به عنوان مثال زمانیکه شما صفحه‌ای را در تب مرورگر اینترنت خود باز می‌کنید یک سری توضیحات و احتمالا در بعضی مواقع با یک عکس کوچک کنار آن می‌بینید. این اطلاعات در تگ <head> نوشته می‌شود.
تگ <title> : عنوانی را که می‌خواهیم برای سند HTML خودمان انتخاب کنیم در این تگ می‌نویسیم و این تگ در داخل تگ <head> قرار دارد. در واقع همان نامی است که ، زمانی که شما وب سایتی را باز می‌کنید در تب مرور گرتان مشاهده می‌کنید.
تگ <meta> : یک ابرداده مربوط به داده‌ها است که در صفحه نمایش نشان داده نمی‌شود. عناصر متا به طور معمول برای مشخص کردن توضیحات صفحه ، کلمات کلیدی ، نویسنده HTML ، آخرین اصلاح و سایر ابرداده‌ها استفاده می‌شوند.
تگ <body> : شامل تمام اطلاعاتی و یا محتوایی است که شما در یک صفحه وب سایت می‌بینید.
تگ <h> : برای نشان دادن سرتیترها یا عناوین از تگ h استفاده می‌کنیم که ۶ مقدار h1 , h2 , h3 , h4 , h5 , h6 دارد. که h1 بزرگترین و پر اهمیت‌ترین تگ و h6 کوچک‌ترین و کم اهمیت‌ترین تگ است.
نکته: بهتر است در هر صفحه از وب سایت تگ‌های پراهمیت کمتر استفاده شود. مثلا تگ h1 فقط یک بار و تگ h2 حداکثر سه بار استفاده شود. هرچه اهمیت تگها کمتر می‌شود تعداد تگها بیشتر می‌شود.
تگ <p> : برای نوشتن یک پراگراف از این تگ استفاده می‌شود.
تگ <br> : برای رفتن به سطر بعد در یک پراگراف از این تگ استفاده می‌کنند.
عنصر <hr> : برای جدا کردن محتواها در یک صفحه HTML استفاده می‌شود.( یک خط صاف مطالب رو از هم جدا می‌کند. )
تگ <pre> : برای حفظ فاصله و شکاف در بین چند سطر استفاده می شود. (مثلا استفاده از چندین فاصله در متن یا نوشتن دو نصفه خط در صفحه یا نوشتن اشعار در صفحه)
تگ <!–…–> : زمانی که بخواهیم در صفحه HTML خود که در آنجا کدها را وارد می‌کنیم در مورد یک کد یا هر چیز دیگر نظر یا توضیحی بگذارید از < — … –! > ( به جای … نظر یا توضیح خود را وارد می‌کنیم ) استفاده می‌کنیم.
شما برای این که بتوانید یک صفحه HTML تولید کنید یا آن را ویراش کنید نیاز به یک سری نرم افزار برای این کار دارید. برخی از این نرم افزارها عبارتند از :
Sublime Text , Bluefish , Komodo Edit , Dreamweaver , Kompozer ,…….
ولی برای شروع کار و یادگیری HTML ، از Notepad (PC) ، TextEdit (Mac) استفاده می‌کنیم.
خوب برای شروع کار ابتدا یک فایل Notpad یا TextEdit باز کنید و کدهای HTMLای که در زیر قرارداده‌ایم را در آن بنویسید یا در آن جا کپی کنید.
<!DOCTYPE html> <html lang="fa" dir="rtl"> <head> <meta charset="UTF-8"> <title> </title> </head> <body> <h1>این یک عنوان است</h1> <p>این یک پراگراف است</p> </body> </html>
نکته : چون سیستم عاملی که ما با آن برای آموزش به شما دوستان استفاده می‌کنیم ویندوز است بنابر این مراحل زیر برای دوستانی که سیستم عاملشون ویندوز است می‌باشد.
بعد از نوشتن یا کپی کردن کدهای بالا در Notepad آن را در کامپیوتر خود ذخیره کنید. برای ذخیره کردن فایل خود طبق مراحل زیر پیش برید.
از منو File گزینه Save as را انتخاب کنید. سپس در پنجره باز شده در File Name یک اسم دلخواه با پسوند html. وارد کنید (مثلindex.html ) و Save as type را برابر (*.*)All Files قرار دهید. در انتها گزینه encoding را بر روی UTF-8 انتخاب کنید که رمزگذاری ارجح برای پرونده‌های HTML است. در انتها بعد از ذخیره کردن فایل خود آن را در یک مرورگر باز کنید تا بتوانید فایل اجرا شده خود را ببینید.(چون هنوز کدی یا برچسبی وارد نکرده‌اید فقط یک صفحه سفید می‌بینید.)
در HTML تمام عناصر دارای یک سری ویژگی یا صفت (Attribute) هستند. که این صفت‌ها اطلاعات اضافی‌ای را در مورد عناصر HTML در اختیار ما می‌گذارند. خیلی ساده و کلی بخوام بگم ، تو HTML ما یه سری تگ داریم هر تگی هم یه سری ویژگی یا صفت داره به همین سادگی.
چند مثال ساده :
href : پیوندها در HTML در تگ a نوشته می‌شود و آدرس‌های پیوندی در صفت href نوشته می‌شود.
<a href="https://www.datadesign.ir">این یک آدرس پیوندی (لینک) به سایت دیتادیزاین است.</a>
src : تصاویر در HTML در تگ img نوشته می‌شوند و آدرس و نام فایل تصویری به همراه پسوندش در صفت src نوشته می‌شود.
<img src="https://www.datadesign.ir/wp-content/themes/datadesign/images/pic-slider.png">
alt : در تگ img صفت دیگری داریم به نام صفت alt که برای نوشتن متن جایگزین عکس (درصورتی که عکس نمایش داده نشود) استفاده می‌شود.
<img src="https://www.datadesign.ir/wp-content/pic-slider.png" alt="دیتا دیزاین مرجع متخصصان سئو و طراحی سایت">
lang : زبان فایل HTML را مشخص می‌کند. اعلام نوع زبان در فایل HTML برای موتورهای جست و جوگر و کاربران سایت از درجه اهمیت بالایی برخوردار است. مقادیر این صفت می‌تواند فارسی (fa) و انگلیسی (en) و انگلیسی-آمریکا (en-us) و هر زبان دیگری باشد.
dir : جهت (direction) نوشته را مشخص می‌کند که راست چین (rtl) باشد یا چپ چین (ltr) باشد.
<!DOCTYPE html> <html lang="fa" dir="ltr"> <body> ... </body> </html>
title در تگها : وقتی مووس را بر روی تگ مورد نظر می‌برید نوشته موجود در title را به شما نشان می‌دهد.
<p title="صفت عنوان ، اشاره به پاراگرافش دارد.">این یک پراگراف است</p>
صفت‌های تگ HTML a Tag Attributes) a) :
حالا که با صفت‌ها در HTML آشنا شدیم و فهمیدیم منظور از صفت چیست وقتشه بریم ببینیم تگ <a> چی هست و برخی از صفت‌های تگ a رو بررسی کنیم.
تگ <a> : برای لینک دادن یک مطلب به یک وب سایت از این تگ استفاده می‌شود. این تگ دارای چند صفت (attributes) است که عبارتند از :
href : برای پیوند دادن به آدرس یک وب سایت.
<a href="https://www.datadesign.ir"> وب سایت دیتادیزاین </a>
مثال زیر برای پیوند دادن به آدرس یک پوشه ، از محیط وب سایتی که این تگ در آن نوشته شده است استفاده می‌شود.
( مثلا تگ زیر در وب سایت دیتادیزاین نوشته شده است و حال ما می‌خواهیم به یکی از صفحه‌هات دیتادیزاین لینک کنیم. در واقع داریم یکی از پوشه‌های سایت خودمون را صدا می‌زنیم. )
<a href="about-us.html"> درباره ما </a>
برای پیوند دادن به یک آدرس ایمیل استفاده می‌شود.
<a href="mailto:datadesign@gmail.com"> ارسال ایمیل به ایمیل دیتادیزاین </a>
download : برای دانلود کردن یک دیتا ( عکس ، فیلم ، فایل فشرده ، ….) از این تگ استفاده می‌شود. اگر به این تگ نامی دهیم فایل دانلود شده با این نام ذخیره می‌شود.
<a href="https://datadesign.ir/wp-content/themes/datadesign/images/pic-slider.png " download> </a> <a href=" https://datadesign.ir/wp-content/themes/datadesign/images/pic-slider.png " download=" عکسی از صفحه اصلی دیتادیزاین "> عکس </a>
hreflang : زبان آدرس پیوندی را مشخص می‌کند. لازم به ذکر است که نوشتن یا ننوشتن آن تاثیری ندارد.
<a href="https://www.datadesign.ir" hreflang="fa"> وب سایت دیتادیزاین</a>
Target : یا هدف نشان دهنده این است که شما این آدرس پیوندی را در کجا می‌خواهید باز کنید. (مثلا در یک صفحه دیگر یا در همین صفحه) که مقادیر مختلفی می‌گیرد که در زیر آن‌ها را آورده‌ایم.
<a href="https://www.datadesign.ir" target="_blank"> وب سایت دیتادیزاین </a>
blank_ : آدرس پیوندی را در صفحه‌ای جدید باز می‌کند.
self_ : آدرس پیوندی را در همان صفحه‌ای که هستید باز می‌کند.
parent_ : صفحه پیوندی را در بدنه والد خود باز می‌کند.
top_ : صفحه پیوندی را در یک صفحه کامل باز می‌کند.
Framename : صفحه پیوندی را در یک بدنه جدید باز می‌کند.
نکته: از تمام موارد بالایی که ذکر شد بیشترین کاربرد و استفاده برای blank_ و self_ است و مابقی صرفا برای آشنایی ذکر شده است.
Type : نوع آدرس پیوندی را مشخص می‌کند. به عنوان مثال شما در بخش انواع ویرایشگرها طریقه ایجاد یک فایل HTML را یاد گرفتید. برای ایجاد یک فایل HTML یک notpad باز کرده و آن را به نوع html. تغییر دادید. این تغییر نوع فایل در Type نوشته می‌شود.
<a href="https://www.datadesign.ir" type="text/html"> وب سایت دیتادیزاین </a>
rel : ارتباط بین صفحه مبدا با صفحه مقصد را در تگ a نشان می‌دهد. یعنی این صفحه‌ای که ما در آن در حال کد نویسی هستیم با صفحه مقصد که در تگ a آدرس لینک پیوندی آن را مشخص کردیم از چه نوع است.
انواع مقادیر صفت rel عبارتند از :
alternate , author , bookmark , external , help , license , next , nofollow , noreferrer , noopener , prev , search
نکته : نوشتن یا ننوشتن این صفت از اهمیت بالایی برخوردار نیست و صرفا جهت آشنایی در این جا ذکر شده است.
خوب تا اینجا ما با بعضی از تگها و صفت‌ها در HTML آشنا شدیم. حالا وقتشه به این کدها شکل و نما بدیم تا صفحه HTML ما زیباتر و قشنگ‌تر بشود. اول از همه باید بدانید سه روش برای استایل دهی به کدها در HTML وجود دارد.
۱- استفاده از استایل در خود تگها (Inline) : یعنی من داخل خود تگ در بدنه body بیایم و استایلم را وارد کنم.
<pre style="font: 25px tahoma; ">
۲– استفاده از استایل در تگ Internal) head) : اگه یادتون باشه HTML چند تگ اصلی داشت که شامل html , head , body بود. حالا شما اون استایلی را که می‌خواهید به تگتون بدین را در بدنه head فراخوانی کرده و اون استایل را به آن بدید.
<head>
<meta charset="utf-8">
<title> HTML Styles </title>
<style >
pre{
color: green;
margin: 20px 300px ;
}
</style>
</head>
۳- استفاده از فایل استایل دهی (External) : در این حالت شما باید یک فایل مثل فایل HTML درست کنید با این تفاوت که پسوند فایل استایل دهی شما باید css. باشد. با این کار شما یک فایل استایل دهی درست کرده‌اید.
حالا باید این فایل استایل دهی را به فایل HTML بشناسانید. برای این کار در تگ head کد زیر را وارد کنید.
<link rel="stylesheet" href=" نام فایل استایل شما به همراه پسوند ">
حالا ما این کدی که نوشتیم صفت‌هاش چی هستن و چی دارن میگن؟
صفت rel : نوع ارتباط را دارد مشخص می‌کند. یعنی داره میگه یک صفحه استایل دهی‌ای وجود دارد و خواستار ارتباط با صفحه HTML است.
صفت type : نوع فایل تبدیل شده را دارد می‌گوید. یعنی ما یک فایل متنی داشتیم و آن را به فایل استایل دهی با پسوند css. تبدیل کردیم. که ننوشتن این صفت چندان اهمیتی ندارد.
صفت href : نام فایل استایل دهی با پسوند آن را در آن باید بنویسید.
حالا که ما با سه روش استایل دهی آشنا شدیم. وقتشه که بریم چند کد استایل دهی رو یاد بگیریم.
background-color Style : رنگ پس زمینه را برای یک عنصر از HTML تعریف می‌کند.
(inline) <body style="background-color: blue;">
Style background-image : یک عکس برای پس زمینه یک عنصر از HTML تعریف می‌کند. در این جا شما باید آدرس عکس خود را به این استایل دهید.
استایل دیگری که به این استایل مربوط می‌شود استایل background-repeat است. که در پایین آن را توضیح می‌دهم.
هنگامی که شما عکسی را به عنوان پس زمینه سایت خود قرار می‌دهید چند حالت برای عکس اتفاق می‌افتد.
- عکس فقط در محور افقی تکرار شود. (background-repeat: repeat-x)
- عکس فقط در محور عمودی تکرار شود. (background-repeat: repeat-y)
- عکس به هیچ وجه تکرار نشود. (background-repeat: no-repeat)
- عکس در راستای محور افقی و عمودی تکرار شود. (background-repeat: repeat) اگر این استایل را وراد نکنید باز هم به صورت پیش فرض عکس را تکرار می‌کند.
<head>
<meta charset="utf-8">
<title> HTML Styles</title>
<style>
body{
background-image: url("http://www.izriz.ir/wp-content/uploads/2017/12/859894e83d24aef31e792101aad06eaf-1.jpg");
background-repeat: repeat;
}
</style>
</head>
Style background-position : این ویژگی موقعیت پس زمینه را به شما نشان می‌دهد. یعنی شما یک عکسی دارید و می‌خواهید آن را فقط در یک نقطه از صفحه خود نشان دهید از این ویژگی استفاده می‌کنید. که نه مقدار زیر را می‌گیرد.
Right top , center top , left top , right center , center center , left center , right bottom , center bottom , left bottom
Style background-attachment : این ویژگی هم موقعیت پس زمینه را نشان می‌دهد با این تفاوت که آیا پس زمینه با اسکرول کردن صفحه جابه‌جا شود یا نه. به طور ساده یعنی یک تصویری داریم که نسبت به صفحه ما یک موقعیتی دارد حال با این ویژگی ، می‌گوییم که آیا تصویر در هر شرایطی این موقعیت را حفظ کند یا نه. مقادیری که این استایل می‌گیرند fixed و scroll است.
Style color : رنگ متن را برای یک عنصر از HTML تعریف می‌کند.
<h1 style="color:blue;"> این عنوان به رنگ آبی است.</h1>
Style font-family : نوع فونت متن را برای یک عنصر از HTML تعریف می‌کند.
<p style="font-family:tahoma;">این یک پراگراف با فونت اختصاصی است.</p>
Style font-size : اندازه فونت یک متن را برای یک عنصر از HTML تعریف می‌کند. که به دو صورت می‌توان اندازه فونت را عوض کرد. یکی به صورت درصدی (%) و دومی به صورت پیکسلی (px).
<h1 style="font-size:300%;">این یک عنوان است.</h1> <p style="font-size:15px;">این یک پراگراف است.</p>
Style text-align : تراز (Alignment) یک متن را برای یک عنصر از HTML تعریف می‌کند. که سه مقدار right , center , left دارد.
<h1 style="text-align:center;">این یک عنوان است.</h1>
شما برای نوشتن یک مطلب علاوه بر اندازه و نوع فونت متن انتخاب شده گزینه‌های دیگه‌ای هم در دست دارید تا بتوانید تغییرات بیشتری بر روی نوشته خود بدهید. قالب متن یک نمونه از آن‌ها است. مثلا شما میتوانید یک نوشته را پررنگ‌تر یا توپر کنید یا آن را مورب کنید یا نشانه‌دار کنید و ….. که در زیر از این تگها نام برده‌ایم.
تگ <b> : برای توپر کردن (Bold) یک متن استفاده می‌شود.
<p>این یک پراگراف <b>توپر</b> است</p>
تگ <i> : برای مورب کردن (Italic) متن استفاده می‌شود.
<p>این یک پراگراف <i> مورب </i> است</p>
تگ <small> : برا کوچک کردن یک متن قسمت از یک متن کلی‌تر استفاده می‌شود.
<p>این یک پراگراف <small> کوچک شده </small> است</p>
تگ‌های دیگر مربوط به این بخش عبارتند از :
<strong> , <em> , <mark> , <del> , <ins> , <sub> , <sup>
برای نوشتن مطلب در وب سایت خودتون شما باید مانند مقاله نویسی یا کتاب نویسی یکسری از موارد را رعایت کنید. مثل نوع فونت سرتیترها یا همان عناوین و سایز متن و …… که در بالا به بخشی از آن‌ها اشاره کردیم.
بخش دیگری که می‌خواهیم به شما آموزش دهیم ، برچسب‌های مربوط به نقل قول و منابع است. یعنی زمانی که شما از نقل قول یا این که بخواهید یک متنی را از منبعی ذکر کنید یا آدرسی را وارد کنید از چه تگ‌هایی باید استفاده کنید.
نکته : مطالبی که تا به حال گفته شد بسته به صلیقه شما است. یعنی شما میتوانید خیلی از موارد ذکر شده را رعایت کنید و خیلی‌ها را هم رعایت نکنید. این بستگی به شما دارد. ولی ما تا آن جایی که بتوانیم سعی می‌کنیم طبق اصول و چهار چوب استاندارد مطالب را به شما آموزش دهیم.
تگ <q> : مطلب یا مطالبی که می‌خواهیم از کسی نقل کنیم را در این تگ قرار می‌دهیم.
تگ <blockquote> : زمانی که مطلبی که ذکر می‌کنید از منبع دیگری باشد آن مطلب را در این برچسب قرار می‌دهیم.
تگ <abbr> : خیلی مواقع نام یک شرکتی یا چیزی به صورت خلاصه بیان می‌شود مثل HTML. زمانی که شما بخواهید نام کامل آن اختصار را بیان کنید از این برچسب استفاده می‌کنید. برای دیدن نام کامل آن اختصار باید با مووس بر روی آن کلمه اختصار بروید.
<p> <abbr title=" Hyper Text Markup Language ">HTML</abbr> مخفف زبان نشانه گزاری فرامتنی است. </p>
تگ <address> : اطلاعات مربوط به صاحب سند را مشخص می‌کند. یعنی صاحب یا نویسنده این متن یا مقاله چه کسی است.
تگ <cite> : عنوان یک سند را مشخص می‌کند. مثلا نام کتاب را با این تگ می‌نویسند.
تگ <bdo> : جهت کلمات را عوض می‌کند. یک زمانی هست که شما نوشته‌ای را راست چین یا چپ چین می‌کنید و یک زمانی هست که شما می‌خواهید جهت کلمات را عوض کنید. برای عوض کردن جهت کلمات از این تگ اسفاده می‌کنیم.
<bdo dir="ltr">دینتادیزاین</bdo>
در این صورت خروجی به صورت___نیازیداتنید___تبدیل می‌شود.
شما میتوانید رنگ متن یا کادر (border) یا پس زمینه یا هر چیز دیگری که بتوان از قابلیت رنگ در آن استفاده کرد را با ویژگی رنگ‌ها مشخص کنید. برای مشخص کردن رنگ یک عنصر یا تغییر رنگ یک عنصر در HTML روش‌های مختلفی وجود دارد که در زیر به آن‌ها می‌پردازیم.
۱– روش اول : استفاده از نام رنگ‌ها به زبان انگلیسی. ……. , White , black , green , blue , yellow
<p style="color: Blue;"> این یک پراگراف به رنگ آبی است. </p>
۲- روش دوم : استفاده از روش (rgb (Red , Green , Blue برای وارد کردن رنگ است. تمام رنگ‌هایی که شما می‌شناسید و یا با آن کار می‌کنید ترکیبی از سه رنگ قرمز و سبز و آبی است. بنابر این شما با روش rgb میتوانید هر رنگی را به صورت کد شده استفاده کنید.
روش استفاده از rgb به این صورت است که هر کدام از رنگ‌های قرمز و سبز و آبی مقداری از ۰ تا ۲۵۵ می‌گیرند و هرچه از ۰ به سمت ۲۵۵ حرکت کنیم رنگ ، به رنگ روشن‌تر و کامل‌تر مایل می‌شود. پس مقدار (۰ , ۰ , ۰) برابر مشکی و مقدار (۲۵۵ , ۲۵۵ , ۲۵۵) برابر رنگ سفید است.
شکل دیگری از این روش (rgba(red, green, blue, alpha است. در مثال دوم در روش rgba ، alfa نشان دهنده میزان شفافیت رنگ پس زمینه است. مقدار alfa بین ۰ تا ۱ تعریف می‌شود به طوری که هرچه از ۰ به سمت ۱ حرکت کنیم میزان شفافیت کمتر می‌شود.
<h1 style="background-color:rgb(255, 99, 71);">……….</h1> <h1 style="background-color:rgba(255, 99, 71, 0.5);">……....</h1>
۳- روش سوم : استفاده از روش (HEX (Hexadecimal برای وارد کردن کد رنگ است. در روش HEX باز هم به سه رنگ قرمز و سبز و آبی به صورت rrggbb# مقدار دهی می‌کنیم. چون این روش به صورت هگزادسیمال است این بار به جای ۲۵۵ مقدار معادل آن یعنی ff را وارد می‌کنیم.
<h1 style="background-color: #ff6347 ;">……..</h1>
نکته آموزشی : در هگزادسیمال مبنا بر ۲۵۶=۸^۲ است. و ارقام در هگزادسیمال از ۰ تا ۱۵ تعریف می‌شوند.(مجموعا ۱۶ عدد می‌شود.) اعدادی که ما می‌شناسیم ترکیبی از ۰ تا ۹ هستند. یعنی در روش هگزادسیمال ۱۰ نداریم. بنابراین برای جبران مابقی اعداد تا ۱۵ ، از الفبای انگلیسی استفاده می‌کنند.(a=10 , b=11 , c=12 , d=13 , e=14 , f=15).
پس ff=1111,1111 . هر f از چهار ۱ تشکیل شده است و مجموع آن‌ها هشت ۱ را تشکیل می‌دهد. مقدارهایی که ۱ ها در اعداد ده‌دهی می‌گیرند برابر است با مجموع اعداد ۲۵۵=(۲^۰)+(۲^۱)+(۲^۲)+………+(۲^۷).
۴- روش چهارم : استفاده از روش (HSL (Hue, Saturation, Lightness برای وارد کردن رنگ مورد نظر است.
hue : رنگ شما را مشخص می‌کند که از ۰ تا ۲۵۵ مقدار می‌گیرد.
Saturation : میزان اشباع شدگی رنگ را مشخص می‌کند که از ۰% تا ۱۰۰% مقدار می‌گیرد.
هر چه میزان اشباع شدگی کمتر باشد رنگ به طوسی متمایل می‌شود و هر چه میزان اشباع شدگی بیشتر باشد وضوح رنگ بیشتر می‌شود.
Lightness : میزان روشنایی رنگ را مشخص می‌کند که از ۰% تا ۱۰۰% مقدار می‌گیرد. هر چه روشنایی کمتر باشد به سیاهی و هرچه روشنایی بیشتر باشد به سفید متمایل می‌شود.
شکل دیگری از این روش (HSLA(Hue, Saturation, Lightness, Alpha است که Alfa میزان شفافیت رنگ پس زمینه را مشخص می‌کند.. مقدار Alfa بین ۰ تا ۱ تعریف می‌شود به طوری که هرچه از ۰ به سمت ۱ حرکت کنیم میزان شفافیت کمتر می‌شود.
<h1 style="background-color: hsl(240, 100%, 50%);">……..</h1> <h1 style="background-color: hsl(240, 100%, 50% , 0.5);">……..</h1>
CSS مخفف عبارت Cascading Style Sheets به معنای صفحه سبک‌دهی به صورت آبشاری است. اگر بخواهم معنای دقیق قابل فهمی برای آن بیان کنم می‌توان گفت یک صفحه شکل‌دهی به عناصر HTML است که تغییرات نوشته شده در آن بر روی عناصر HTML اعمال می‌شود.
در آموزش‌های قبل‌تر ما با سبک‌های HTML آشنا شدیم. این استایل‌دهی یا سبک‌دهی به عناصر HTML در واقع همان کاری است که به آن CSS می‌گوییم که سه روش اضافه کردن کدهای CSS به HTML را در قالب استایل دهی به عناصر HTML بیان کردیم.
در زیر بخش دیگری از کدهای مربوط به CSS را بیان می‌کنیم. مثال‌هایی که در زیر زده می‌شوند به صورت روش سوم یعنی External می‌باشد. (زمانی که کدهای HTML خود را نوشتید و آن را ذخیره کردید وارد فایل CSS خود شده و مطابق مثال با فراخوانی برچسب مورد نظر استایلی که می‌خواهید به آن بدهید را در آن جا وارد کنید.)
Border : تغییرات مربوط به حاشه را شامل می‌شود. ( مثل جدول که حاشیه مشخص برای هر خانه از خود دارد.)
p {
border: 1px solid powderblue;
}
قبل از بیان ویژگی دیگری از CSS لازم است سه ویژگی مرتبط به هم را توضیح دهم. درک این سه ویژگی شاید کمی دشوار باشد و نیاز به تمرین و تکرار برای درک بهتر آن باشد.
هر تگی مثلا تگ P از چهار بخش تشکیل شده است.
- داخلی‌ترین بخش که همان نوشته قرار دارد.
- قسمت بیرونی متن که padding نام دارد.
- حاشیه متن که border نام دارد.
- فاصله متن نسبت به بعقیه عناصر موجود در اطراف خودش که margin نام دارد.
تا یادم نرفته بگم جهت مقدار دهی به طرفین ابتدا بالا بعد راست بعد پایین بعد چپ است یعنی جهت دهی به صورت ساعت‌گرد می‌باشد.
این مطلب را در ذهن خود نگه دارید تا بعد به موقع‌اش بهتون بگم یعنی چی و کجا استفاده میشه.
Padding : نشان دهنده گسترش یک عنصر از طرفین است. ساده‌تر بخواهم بگویم یه باد کنک داریم آن را بیشتر باد می‌کنیم یعنی بادکنک ما به طرفین گسترش پیدا کرده یا همان به خودش حجم بیشتری را گرفته به همین سادگی.
Padding انواع مختلف دارد که در زیر به آن‌ها اشاره می‌کنیم.
- padding-top : المان مورد نظر را فقط از بالا گسترش می‌دهد.
- padding-right : المان مورد نظر را فقط از راست گسترش می‌دهد.
- padding-bottom : المان مورد نظر را فقط از پایین گسترش می‌دهد.
- padding-left : المان مورد نظر را فقط از چپ گسترش می‌دهد.
- padding : المان مورد نظر را از هر چهار طرف گسترش می‌هد.
p{ padding: 20px; }
Margin : نشان دهنده فاصله عنصر نسبت به عناصر اطراف خودش است. ساده‌تر بخواهم بگویم یه باد کنک داریم فاصله این باد کنک نسبت به باد کنک‌های اطراف خودش چه مقدار باشد.
Margin انواع مختلف دارد که در زیر به آن‌ها اشاره می‌کنیم.
- margin-top : فاصله المان را نسبت به المان بالای خودش مشخص می‌کند.
- margin-right : فاصله المان را نسبت به المان راست خودش مشخص می‌کند.
- margin-bottom : فاصله المان را نسبت به المان پایین خودش مشخص می‌کند.
- margin-left : فاصله المان را نسبت به المان چپ خودش مشخص می‌کند.
- margin : فاصله المان را نسبت به المان‌های چهار طرف خودش مشخص می‌کند.
p{ margin: 20px; }
نکته : مقدار padding هرگز منفی نمی‌شود و کم‌ترین مقدار آن به صورت پیش فرض برابر ۰ است. ولی مقدار margin منفی می‌شود ولی به صورت پیش فرض برابر ۰ است.
Border : حاشیه اطراف المان را مشخص می‌کند. ساده‌تر بخواهم بگویم یعنی همون بادکنکی که گفتیم ، ضخامت پوستش چه مقدار باشه. به صورت پیش فرض مقدار حاشیه ۰ است.
روش‌های مختلفی برای مقدار دهی به ضخامت یک حاشیه وجود دارد که عبارتند از :
px, pt, cm, em, etc یا بکار بردن کلمات thin (نازک) ، medium (متوسط) و یا thick (ضخیم)
اگر شما بخواهید به حاشیه یک عنصر مقدار دهید علاوه بر میزان ضخامت آن باید نوع حاشیه (خط ممتد یا نقته چین یا دوتایی و … ) و اگر مایل بودین رنگ آن را مشخص کنید. ; رنگ نوع حاشیه px ضخامت :border
انواع مقدار نوع حاشیه‌ها عبارتند از :
Dotted (خط چین) , dashed (نقطه چین) , solid (خط ممتد) , double (دو خط ممتد) , groove (شیار) , ridge , inset (فرورفته) , outset (بیرون زده) , none (بدون حاشیه) , hidden (حاشیه مخفی) , mix (ترکیبی)
p { border: 1px solid blue; }
روش دیگر استفاده از border به صورت جدا از هم است. یعنی هر کدام از مقدار‌های ضخامت و نوع و رنگ را به صورت جدا مقدار دهی کنیم. در زیر استایل‌های مربوطه بیان شده است.
border-width : ضخامت حاشیه را مشخص می‌کند. مقدار این استایل بر اساس px است. انواع مختلف border-widht عبارت است از :
border-top-width , border-right-width , border-bottom-width , border-left-width , border-width
border-style : نوع حاشیه را مشخص می‌کند که مقادیر خط چین ، نقطه چین ، خط ممتد و …. را به خود می‌گیرد. و دارای پنج نوع بالا ، راست ، پایین ، چپ و کلی است.
border-color : رنگ حاشیه را مشخص می‌کند و دارای پنج نوع بالا ، راست ، پایین ، چپ و کلی است.
border-radius : برای گرد کردن گوشه‌های حاشیه است. اگر دقت کنید می‌بینید حاشیه‌ها به صورت مستطیل هستند که با این خاصیت می‌توان گوشه‌های آن را از حالت تیز مانند به حالت قوسی تغییر داد. مقادیری که این استایل می‌گیرد بر اساس px, pt, cm, em, etc است.
نظرات کاربران