امتیاز موضوع:
  • 3 رأی - میانگین امتیازات: 3.67
  • 1
  • 2
  • 3
  • 4
  • 5

آموزش نحوه استفاده از CSS در HTML

#1
سی اس اس یا 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>
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
ناشناس
پاسخ
 سپاس شده توسط shghyegh ، ᴀʀмɪss ، شـــقآیــق
آگهی


[-]
به اشتراک گذاری/بوکمارک (نمایش همه)
google Facebook cloob Twitter
برای ارسال نظر وارد حساب کاربری خود شوید یا ثبت نام کنید
شما جهت ارسال نظر در مطلب نیازمند عضویت در این انجمن هستید
ایجاد حساب کاربری
ساخت یک حساب کاربری شخصی در انجمن ما. این کار بسیار آسان است!
یا
ورود
از قبل حساب کاربری دارید? از اینجا وارد شوید.

موضوعات مرتبط با این موضوع...
  آموزش سئو سایت
  آموزش جامع تولید محتوا در اینستاگرام
  نحوه تشخیص سایت نیم بها با LinkIrani.ir
  آموزش ساخت اکانت تیک تاک
  محدود کردن استفاده کاربران مهمان از WiFi
Thumbsdown آموزش روش خالی کردن Cache گوشى،تلگرام_فعال سازی امضای پیام تلگرام
  آموزش ریست اپل
  آموزش مخفی کردن آخرین بازدید اینستاگرام
  نحوه ایجاد چراغ اعلان گوشیت
  استفاده از گیف در استوری اینستاگرام

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان