استفاده از css در html

هدایت عباسی آموزش HTML

آموزش ویدئویی استفاده از CSS در html

در این فیلم و آموزش ویدئویی با استفاده از CSS در html و روش های مختلف آن با ذکر مثال آشنا می شوید.

چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.

مشاهده یا دانلود فیلم بالا

آموزش چندین روش استفاده از css از جمله inline , internal , external همراه با مثال و توضیح کامل . اموزش کامل استفاده از کلاس و id . کدها تست شده میباشد می توانید ان را در یک فایل html ذخیره و اجرا نمایید.

این آموزش متعلق به تاپ سایت 98 میباشد.

Css چیست

در این بخش از آموزش html به سراغ css می رویم. Css چیست و چه کاربردی دارد؟

استایل یا css برای زیباسازی صفحات وب و html بکار می رود.

صفحات html در حالت عادی هیچ زیبایی ندارد. اگر فقط از تگ های html استفاده کنیم هیچ جذابیتی برای کاربر ندارد.

پس چاره چیست؟ چاره استفاده از استایل یا css در html است.

تعریف css

حال به سراغ تعریف css برویم.

سی اس اس (css) مخفف Cascading Style Sheets است.

استایل یا css دارای دستوراتی است که هر دستور کار خاضی را انجام می دهد.

مثلا دستور background-color برای تغییر پس زمینه استفاده می شود.

یا برای تغییر رنگ هر تگ html می توانیم از دستور color در css استفاده کنیم.

شیوه های مختلف استفاده از css در صفحات html

اکنون شیوه های مختلف استفاده از css در صفحات html را توضیح می دهیم.

ما برای استفاده از css در html ، سه روش را پیشنهاد می کنیم.

روش inline :

در روش inline ما در همان تگ html کد css را می نویسیم.

در زیر یک مثال را مشاهده می کنید. در تگ a ما با استفاده از style سایز فونت را تغییر داده ایم.

در اینجا ما فقط یک دستور css را استفاده کرده ایم . اما می توانیم همزمان چندین دستور را استفاده کنیم.

<!DOCTYPE html>
<html>
<body>
<a href="https://topsite98.com/" style="font-size: 50px">TopSite98.com</a>
</body>
</html>

در مثال زیر ما از چندین دستور css در تگ html استفاده کرده ایم.

برای این کار می توانیم از سیمی کالن استفاده نماییم.

<!DOCTYPE html>
<html>
<body>
<a href="https://topsite98.com/" style="font-size: 50px; background-color: #2ab27b;color: #fff">TopSite98.com</a>
</body>
</html>

روش internal :

روش بعدی css که بررسی می کنیم روش internal یا اینترنال است.

در روش internal دستورات css را در یک قسمت head و در تگ style می نویسیم.

در مثال زیر برای تگ a دستورات مختلفی را نوشته ایم. از جمله تغییر سایز و رنگ و میزان توپری متن . همچنین برای تگ a یک هاور هم تعریف کرده ایم یعنی وقتی کاربر روی لینک قرار بگیرد رنگ متن تغییر کرده و خط زیر آن حذف می شود.

<!DOCTYPE html>
<html>
<head>
<style>
a{
font-size: 60px;
color:#333;
font-weight: bold;
}
a:hover{
color: #ff9900;
text-decoration: none;
}
</style>
</head>
<body>
<a href="https://topsite98.com/" >TopSite98.com</a>
</body>
</html>

روش external :

روش external آخرین روش استفاده از css در html می باشد.

در روش اکسترنال ما یک فایل css ایجاد می کنیم مثلا style.css.

سپس آن را به صفحه html لینک می کنیم به این صورت ارتباط css با html برقرار می شود.

حال هر کدی که در صفحه اکسترنال یا style.css بنویسیم روی تگ ها یا کدهای html اعمال می شود.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>TopSite98</h1>
<a href="https://topsite98.com/" >TopSite98.com</a>
</body>
</html>

برای فهم بهتر یک فایل style.css را ایجاد میکنیم و کدهایی در آن می نویسیم.

فایل html و style.css در کنارهم باشند در غیر این صورت ارتباط css با html برقرار نمی شود.

h1{
color: #f0fafb;
background-color: #1d75b3;
}
a{
font-size: 30px;
color:red;
}
a:hover{
font-size: 50px;
}

ارتباط css با html

برای ارتباط css با html در روش اینلاین و اینترنال فقط کافی است که کدها را صحیحی بنویسید.

اما در روش اکسترنال اگر مسیر و یا نام فایل style.css درست نباشد ارتباط css با html برقرار نمی شود.

ترکیب css با html

ترکیب css با html باعث زیبایی صفحات وب و html می شود.

اگر بخواهید یک قالب سایت را طراحی کنید و از css یا استایل ها استفاده نکنید قالب سایت شما هیچ جذابیتی ندارد.

تمام زیبایی صفحات وب به css و جی کوئری مرتبط است.

بگذاریم مثالی بزنیم. ما یک جدول را بدون css و با css ایجاد می کنیم. خودتان مقایسه کنید.

کافی است کد زیر را در یک فایل با پسوند html قرار داده و تست نمایید.

ابتدا ساخت یک جدول بدون css را مشاهده میکنید.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>TopSite98</h2>
<table border="1">
<tr>
<th>Firstname</th>
<th>city</th>
<th>Age</th>
</tr>
<tr>
<td>ali</td>
<td>shiraz</td>
<td>38</td>
</tr>
<tr>
<td>reza</td>
<td>esfahan</td>
<td>24</td>
</tr>
<tr>
<td>mohsen</td>
<td>yazd</td>
<td>65</td>
</tr>
</table>
</body>
</html>

حال همین جدول را با css یا استایل ها زیبا می کنیم. تفاوت را ببینید.

در نظر داشته باشید می توانیم حتی جدول های بسیار زیبا تر هم ایجاد کنیم.

<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 70%;
}
th{
background-color: limegreen;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>TopSite98</h2>
<table border="1">
<tr>
<th>Firstname</th>
<th>city</th>
<th>Age</th>
</tr>
<tr>
<td>ali</td>
<td>shiraz</td>
<td>38</td>
</tr>
<tr>
<td>reza</td>
<td>esfahan</td>
<td>24</td>
</tr>
<tr><td>mohsen</td><td>yazd</td><td>65</td>
</tr>
</table>
</body>
</html>

استفاده از کلاس در css

در این بخش به سراغ استفاده از کلاس در css می رویم.

یکی از موارد مهم در تمام پروژه ها استفاده از کلاس ها در css است.

با استفاده از کلاس (class) کدنویسی بسیار کمتر و استانداردتر می شود.

ما یک بار می توانیم یک کلاس را تعریف کنیم و بارها از آن استفاده کنیم.

در مثال زیر ما یک کلاس با نام top در css معرفی کرده ایم و در تمام پاراگراف ها استفاده کرده ایم.

برای استفاده از کلاس در html میبایست از class و نام دلخواه استفاده کرد.

ابتدا در html به تگ html یک نام می دهیم مانند top و سپس در بخش head و در تگ style ، کدهای css یا استایل را می نویسیم.

<!DOCTYPE html>
<html>
<head>
<style>
.top{
background-color: #ff9900;
color: #fff;
font-size: 25px;
font-weight: bold;
}
</style>
</head>
<body>
<p class="top">TopSite98.com</p>
<p class="top">TopSite98.com</p>
<p class="top">TopSite98.com</p>
<p class="top">TopSite98.com</p>
</body>
</html>

در یک تگ html می توان از چندین کلاس استفاده کرد.

مثال زیر را ببینید.

<!DOCTYPE html>
<html>
<head>
<style>
.t1{
background-color: #333;
color: #fff;
}
.t2{
font-size: 20px;
font-weight: bold;
padding: 20px;
}
</style>
</head>
<body>
<p class="t1 t2">TopSite98.com</p>
<p class="t1 t2">TopSite98.com</p>
</body>
</html>

همچنین می توانیم یک کلاس را به چندین تگ html داد.

مثال زیر را ببینید ما یک کلاس بنام abbasi تعریف کرده ایم و آن را به h2, p,a نسبت می دهیم.

<!DOCTYPE html>
<html>
<head>
<style>
.t5{
background-color: #333;
color: #fff;
font-size: 20px;
display: block;
}
</style>
</head>
<body>
<h2 class="t5">TopSite98.com</h2>
<p class="t5">TopSite98.com</p>
<a href="https://topsite98.com/" class="t5">TopSite98.com</a>
</body>
</html>

استفاده از id در css

استفاده از id در css در بیشتر پروژه ها مرسوم است.

تنها تفاوت کلاس و id در این است که یک کلاس را می توان به چندین تگ html نسبت می دهیم اما id فقط یک بار قابل استفاده است.

برای استفاده از id در css می بایست از علامت # استفاده کرد.

مثال زیر را ببینید.

<!DOCTYPE html>
<html>
<head>
<style>
#t3{
font-size: 45px;
color: red;
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<a id="t3" href="https://topsite98.com/">TopSite98.com</a>
</body>
</html>

امیدواریم این آموزش برای شما مفید باشد.

یا حق

اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید