+- انجمن های تخصصی فلش خور (http://www.flashkhor.com/forum)
+-- انجمن: رایانه (http://www.flashkhor.com/forum/forumdisplay.php?fid=27)
+--- انجمن: آموزش رایانه و اینترنت (http://www.flashkhor.com/forum/forumdisplay.php?fid=60)
+--- موضوع: آموزش نحوه استفاده از CSS در HTML (/showthread.php?tid=296910)
آموزش نحوه استفاده از CSS در HTML - Mohlek - 13-05-2021
سی اس اس یا CSS که مخفف Cascading Style Sheets می باشد، یکی دیگر از هسته های اصلی در طراحی وب یا یک فناوری بسیار جذاب می باشد که ما از طریق اون میتونیم به صفحات وبمون استایل یا شکل و شمایل جذاب و متفاوتی را بدهیم.
ما با استفاده از CSS میتونیم نحوه نمایش یا شکل نمایش عناصر را در یک صفحه ی وب (HTML) مشخص نماییم، بطور کلی میشه گفت فایل CSS هر سایتی یعنی قلب اون سایت که به تمامی بخشهای اون سایت از نظر استایل داره نفس برای زنده بودن میده و اگر کوچکترین مشکلی برای این فایل به وجود بیاید کل استایل و شکل شمایل اون سایت بهم خواهد ریخت.
خب بنظره شما چگونه و چجوری شده که منوی اصلی سایت فری لرن در بالای وبسایت قرار دارد و یکسری لینک در سمت چپ صفحه و دیگر موارد …
خب مطمعنا همه ی اینها تنها توسط CSS انجام شده و اگر مشکلی برای این فایل به وجود بیاید تمام استایل و شکل و شمایل وبسایت فری لرن خراب و از بین خواهد رفت.
بطور کلی ما در HTML از ۳ روش میتونیم از CSS استفاده نماییم:
استایل خطی یا Inline
استایل داخلی یا Internal
استایل خارجی یا External
اینلاین یا درون خطی یا Inline یکی از روش های اضافه کردن CSS به عناصر موجود در HTML می باشد، که در این روش ما باید از صفت Style درون هر یک از عناصر HTML که میخواهیم براش استایل تعریف نماییم، استفاده نماییم.
آموزش کار با صفت Style بصورت جداگانه در بخش های قبلی از آموزش HTML ارئه شده است که در صورت تمایل میتوانید آن بخش را نیز مشاهده نمایید.
لطفا به مثال زیر برای نحوه استفاده از سی اس اس بصورت خطی توجه نمایید :
کد:
<body>
<p style="color:green;">Salam Khobi?</p>
<p style="color:blue;">Man Sadegh</p>
<p style="color:red;">Hastam</p>
</body>در ادامه ی آموزش نحوه استفاده از CSS در HTML میخواهیم با روش داخلی آشنا شویم ، همونطور که از اسم این روش مشخصه ما میتونیم دستورات CSS رو درون یک فایل HTML قرار دهیم که بهش میگیم اینترنال یا Internal ، شکل کلی برای استفاده از این روش بصورت زیر می باشد.
مثال :
کد:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #2196F3;
}
h3 {
color: yellow;
}
p {
color: white;
}
</style>
</head>
<body>
<h3>Www.Free-Learn.Ir</h3>
<p>My WebSite Is Free</p>
</body>
</html>