وب استند

دوره مقدماتی آموزش HTML و CSS | قسمت هفتم – مقدمه سی اس اس

  • موضوع : CSS
  • تاریخ : ۱۳۹۹/۱۲/۰۲
  • مجموع پسند شده : 0
  • بازدید : 957
دوره مقدماتی آموزش HTML و CSS | قسمت هفتم – مقدمه سی اس اس

خب در این جلسه از آموزش HTML و CSS ، رسیدیم به بحث مهم و کاربردی CSS و اینکه کلا چیه و واسه ما چیکار میکنه و نحوه استفاده اش چجوریه .

CSS ( Cascading Style Sheets ) چیست؟

میدانیم که html ساختار یک صفحه وب را شکل میدهد و CSS مسئول تغییر در سایز , فونت , رنگ ,مکان و… ، این ساختار میباشد .

به مثال جلسه اول نگاه دوباره ای بندازیم : گفتیم که html وظیفه استخوان بندی یک صفحه وب را برعهده دارد ولی CSS وظیفه ی زیبا سازی را بر دوش خود میکشد و عملا اپلیکیشن یا وبسایتی بدون کدهای سی اس اس تقریبا مرده و بی روح است.

نحوه اضافه کردن CSS به پروژه

برای اضافه کردن CSS به پروژه از سه روش میتوانیم استفاده کنیم :

۱- استایل دهی درون خطی (inline)

تگ یا المنتی که میخواهید به آن استایل دهید را انتخاب میکنید و مانند شکل زیر استایل مورد نظر را به آن اعمال میکنید.

توجه داشته باشید که این روش استایل دادن باید درون فایل html اتفاق بیوفتد :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body style="background-color: blue;">
    
</body>
</html>

نکته : این روش استایل دادن در حالت عادی ، روش های دیگر استایل دادن را خنثی می کند. یعنی شما اگر با نوع دیگری از استایل دادن مثل مورد دوم یا سوم , به تگ bodyرنگ قرمز دهید آن استایل برای این تگ اعمال نخواهد شد زیرا رنگ آبی به دلیل inline بودن اولویت بالاتری دارد ولی اگر استایل دیگری بدهید مثلا فونت آن را تغییر دهید هیچ مشکلی پیش نمی آید زیرا شما فونت را به صورت inline تغییر نداده اید.

توجه : این روش استایل دادن به هیچ وجه توصیه نمیشود زیرا نگهداری و توسعه پروژه را دشوار میکند و فقط هنگامی که مجبور بودید این کار را انجام دهید.

۲-استایل دهی داخلی (internal)

در اینجا میتوانید استایل های خودتان را درون تگ style بنویسید و شما باید این کار را درون صفحه html انجام دهید مانند زیر:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      p{
        font-size: 10px;
        line-height: 1.3;
      }
    </style>

</head>
<body>
    <p> وب استند مرجع آموزش برنامه نویسی </p>
</body>
</html>

نکته : شما میتوانید تگ style را هر جا درون تگ html بگذارید

نکته : استفاده از این روش هم توصیه نمیشود زیرا باعث شلوغی صفحه html شده و توسعه پذیری یا خطایابی را مشکل میکند ولی مزیتی که این نوع استایل دادن نسبت به inline دارد این است که شما میتانید یک استایل خاص را به چند تگ اعمال کنید.

توجه: از این روش بیشتر برای آزمایش کردن استایل های خود استفاده میکنیم

در جلسه آینده درباره نحوه انتخاب تگها صحبت خواهیم کرد نگران نحوه انتخاب و استایل دادن نباشید.

یکی از اصلی ترین مشکلات این نوع استایل دادن این است که نمیتوانیم از قابلیت کش کردن مرورگر برای استایل ها استفاده کنیم (یعنی هر بار که کاربر صفحه مرورگر را باز میکند استایل ها دوباره دانلود میشوند )

۳- استایل دهی خارجی (external )

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

در این روش شما یک فایل خارجی را که شامل کدهای CSS میباشد را به صفحه html خود پیوست میکنید.

اول یک فایل با هر نام دلخواهی ولی با پسوند CSS ساخته و کدهای سی اس اس خود را درون آن مینویسید.

نوشتن کدهای CSS بصورت External

سپس شما این فایلهای CSS را به صفحه html مانند زیر اضافه می کنید.

اضافه کردن فایل ساخته شده به صفحه html

افزودن فایل CSS به HTML

نکته : ویژگی href آدرس فایل و اسم آن را از شما میخواهد مانند ویژگی src در تگ img

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

روش دیگر که استفاده میشود ولی نمیتوان آن را در سه روش اصلی جای داد روش import کردن میباشد که برای پروژه های بزرگ بسیار کاربردی است.

مثلا شما در حال نوشتن یک وبسایت بزرگ هستید و این سایت سه بخش مهم header ,main و footer دارد بهتر است شما هر سه بخش را در فایلهای CSS جدا نوشته و داخل فایل CSS اصلی خود آن را import کنید و در آخر فایل CSS اصلی خود را به صفحه html اضافه کنید.

میتوانید از این روش در استایل دهی داخلی و خارجی استفاده کنید با روش زیر:

@import "آدرس فایل سی اس اس"

جهت آشنایی بیشتر با سی اس اس به لینک زیر مراجعه کنید:

CSS Introduction – w3schools

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

کلمات کلیدی

مهدی امیرخیزی

مهدی امیرخیزی

سلام من مهدی امیرخیزی ام حدود یه ساله که برنامه نویسی وب میکنم عاشق جاوااسکریپتم و علاقه مند به زبان پایتون

دیدگاه ها خود را با ما در میان بگذارید!

مشخصات شما از نظر ما محرمانه تلقی شده و در اختیار هیچ کس قرار داده نخواهد شد.

توصیه ما به شما