جستجو برای:
  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت
 
  • 02144824488
  • info@myhamyar.com
  • بلاگ
  • تماس با ما
  • درباره ما
همیارِمَن  | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیک
دسترسی سریع
  • پشتیبان سایت
0

ورود و ثبت نام

  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت

بلاگ

همیارِمَن | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیکبلاگدوره های رایگانآموزش رایگان CSS مقدماتی تا پیشرفته

آموزش رایگان CSS مقدماتی تا پیشرفته

20 آبان 1400
ارسال شده توسط همیار من
دوره های رایگان
327 بازدید

شروع کار با CSS

فهرست عناوین

  • شروع کار با CSS
  • اضافه کردن CSS در اسناد HTML
  • سبک های خطی
      • مثال:
  • برگه های سبک جاسازی شده
      • مثال:
  • برگه های سبک خارجی
    • لینک دادن به برگه های سبک خارجی
      • مثال:
    • وارد کردن برگه های سبک خارجی

در این آموزش یاد می گیرید که اضافه کردن اطلاعات سبک و قالب بندی به صفحات وب با استفاده از CSS چقدر آسان است. اما قبل از شروع، اطمینان حاصل کنید که دانش کار با HTML را دارید.

برای یادگیری تمامی محبث های HTML میتوانید اینجا کلیک کنید.

اضافه کردن CSS در اسناد HTML

CSS می تواند به عنوان یک سند جداگانه پیوست شود یا در خود سند HTML جایگذاری شود. سه روش برای اضافه کردن CSS به یک سند HTML وجود دارد:

  • سبک های خطی – استفاده از صفت style در تگ شروع HTML.
  • سبک های جاسازی شده – استفاده از عنصر <style> در عنصر head در سند.
  • برگه های سبک (یا شیوه نامه های) خارجی – با استفاده از عنصر <link> به یک فایل CSS خارجی اشاره کنید.

در این آموزش این سه روش را برای قرارگیری CSS پوشش خواهیم داد.

توجه: سبک های خطی بالاترین اولویت و صفحه های سبک خارجی کمترین اولویت را دارند. این بدان معناست که اگر شما یک عنصر را در هر دو شیوه نامه خارجی و جاسازی شده سبک دهی کنید، قوانین سبک متناقض در شیوه نامه جاسازی شده بر روی شیوه نامه خارجی بازنویسی می شوند.

سبک های خطی

از سبک های خطی برای اعمال قوانین سبک منحصربه فرد به یک عنصر استفاده می شود، به صورتیکه قوانین CSS به طور مستقیم در تگ شروع قرار می گیرند. می توان این قوانین را با استفاده از صفت style به یک عنصر اعمال کرد.

صفت style شامل یک سری جفت ویژگی و مقدار CSS است. هر جفت ” مقدار : ویژگی ” با یک سیمی کالون (؛) از یکدیگر جدا می شوند، دقیقاً به همان صورت که در یک شیوه نامه جاسازی شده یا خارجی نوشته می شوند. اما لازم است که همه در یک خط باشند، یعنی بدون شکست خط بعد از سیمی کالون، همانطور که در مثال زیر نشان داده شده است:

مثال:

1
2
3
4
5
    <h1 style=”color:red; font-size:30px;”>This is a heading</h1>
 
    <p style=”color:green; font-size:22px;”>This is a paragraph.</p>
 
    <div style=”color:blue; font-size:14px;”>This is some text content.</div>

استفاده از سبک های خطی معمولاً به عنوان یک شیوه بد در نظر گرفته می شود. به این دلیل که قوانین سبک به طور مستقیم در تگ HTML قرار می گیرند، این باعث می شود که نمایش با محتوای سند ترکیب شود. در نتیجه نگهداری کد سخت می شود و هدف استفاده از CSS را نفی می کند.

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

برگه های سبک جاسازی شده

برگه های سبک داخلی یا جاسازی شده فقط روی سندی تأثیر می گذارد که در آن جاسازی شده اند.

برگه های سبک جاسازی شده در بخش <head> یک سند HTML با استفاده از عنصر <style> تعریف می شوند. می توانید هر تعداد عنصر <style> در یک سند HTML تعریف کنید اما آنها باید بین تگ های <head> و <head/> قرار گیرند. مثال زیر را ببینیم:

مثال:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
    <!DOCTYPE html>
 
    <html lang=”en”>
 
    <head>
 
    <title>My HTML Document</title>
 
    <style>
 
    body { background-color: YellowGreen; }
 
    p { color: #fff; }
 
    </style>
 
    </head>
 
    <body>
 
    <h1>This is a heading</h1>
 
    <p>This is a paragraph of text.</p>
 
    </body>
 
    </html>

نکته: صفت type در تگ های

<style>

و

<link> (type=”text/css”)

زبان شیوه نامه را تعریف می کند. این صفت صرفا جهت آگاهی است. می توانید این مورد را حذف کنید زیرا CSS زبان استاندارد و پیش فرض شیوه سبک در HTML5 است.

برگه های سبک خارجی

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

یک شیوه نامه خارجی تمام قوانین سبک را در یک سند جداگانه نگه می دارد که می توانید به هر فایل HTMLای در سایت خود لینک دهید. برگه های سبک خارجی انعطاف پذیرترین هستند زیرا با یک صفحه سبک خارجی، می توانید تنها با تغییر یک فایل، کل ظاهر یک وب سایت را تغییر دهید.

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

لینک دادن به برگه های سبک خارجی

قبل از لینک دادن، ابتدا باید یک شیوه نامه ایجاد کنیم. ویرایشگر کد مورد علاقه خود را باز و یک فایل جدید ایجاد کنید. اکنون کد CSS زیر را درون این فایل تایپ کرده و آن را با نام “style.css” ذخیره کنید.

مثال:

1
2
3
4
5
6
7
8
9
10
11
12
13
    body {
 
    background: lightyellow;
 
    font: 18px Arial, sans-serif;
 
    }
 
    h1 {
 
    color: orange;
 
    }

یک برگه سبک خارجی با استفاده از تگ <link> می تواند به یک سند HTML مرتبط شود. همانطور که در مثال زیر مشاهده می کنید، تگ <link> در قسمت <head> قرار می گیرد:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    <!DOCTYPE html>
 
    <html lang=”en”>
 
    <head>
 
    <title>My HTML Document</title>
 
    <link rel=”stylesheet” href=”css/style.css”>
 
    </head>
 
    <body>
 
    <h1>This is a heading</h1>
 
    <p>This is a paragraph of text.</p>
 
    </body>
 
    </html>

نکته: بین این سه روش، استفاده از شیوه نامه خارجی بهترین روش برای تعریف و استفاده از سبک ها در اسناد HTML است. همانطور که به وضوح در مثال برگه های سبک خارجی مشاهده می کنید، در نشانه گذاری فایل HTML حداقل تغییرات رخ می دهد.

وارد کردن برگه های سبک خارجی

قانون import@  روش دیگری برای بارگیری یک شیوه نامه خارجی است. جمله import@ به مرورگر دستور می دهد تا یک برگه ​​سبک خارجی را بارگیری و از سبک های آن استفاده کند.

می توانید از دو روش استفاده کنید. ساده ترین آن اضافه کردن در قسمت سرآیند است.

توجه داشته باشید که سایر قوانین CSS هنوز هم می توانند در عنصر <style> گنجانده شوند. در اینجا مثالی آورده شده است:

1
2
3
4
5
6
7
8
9
10
11
12
13
    <style>
 
    @import url(“css/style.css”);
 
    p {
 
    color: blue;
 
    font-size: 16px;
 
    }
 
    </style>

به همین ترتیب ، می توانید از قانون import@ برای وارد کردن یک شیوه نامه در یک شیوه نامه دیگر استفاده کنید.

1
2
3
4
5
6
7
8
9
10
11
    @import url(“css/layout.css”);
 
    @import url(“css/color.css”);
 
    body {
 
    color: blue;
 
    font-size: 14px;
 
    }

توجه: کلیه قوانین import@ باید در شروع شیوه نامه قرار گیرند. هر قانون سبک تعریف شده در شیوه نامه، بر روی قوانین متناض در برگه های سبک ورودی بازنویسی می شود. با این وجود، اضافه کردن یک شیوه نامه در یک شیوه نامه دیگر به دلیل مسئله کارایی توصیه نمی شود.

بیشتر بخوانید:

  • آموزش رایگان HTML مقدماتی تا پیشرفته بخش تگ ها
  • آموزش رایگان HTML مقدماتی تا پیشرفته بخش دوم
  • آموزش افزونه دکان | Dokan افزونه چند فروشندگی ووکامرس
  • آموزش افزونه Meta Slider و ساخت اسلایدرهای زیبا در وردپرس
اشتراک گذاری:
برچسب ها: آموزش رایگان CSSآموزش رایگان css gridآموزش رایگان css و htmlآموزش رایگان css3آموزش رایگان html cssآموزش رایگان html و css مقدماتیآموزش رایگان html5 و css3آموزش رایگان html5 و css3 pdfآموزش کامل css رایگاندانلود آموزش رایگان css
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!

مطالب زیر را حتما مطالعه کنید

لوگو ادمین سایت

آموزش انیمیشن‌سازی با CSS

در این قسمت از آموزش انیمشن‌سازی در CSS قصد داریم به طور کلی به آموزش...
همیارمن

نحوه اضافه کردن کد PHP در وردپرس

اگر به دنبال اضافه کردن کد php در وردپرس به صفحات در وردپرس هستید به...

دوره رایگان طراحی فروشگاه اینترنتی!

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

آموزش ایجاد لیست کشویی وابسته به هم در HTML

در این مقاله در همیار من قصد داریم یکی از مطالب بسیار مهم و کاربردی...
ترفندهای عکاسی حرفه‌ای با موبایل (ساده و بدون هزینه!)

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

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

DOM چیست و چه کاربردی دارد؟

DOM عبارتی است که بیشتر آنرا در زبان جاوا اسکریپت می‌شنویم. در این مقاله در...

دیدگاهتان را بنویسید لغو پاسخ

جستجو در همیارمَن
جستجو برای:
  • آموزش مجازی
  • اخبار سینما
  • افزونه وردپرس
    • آموزش افزونه وردپرس
  • بازی
  • پیشنهادی
  • دسته‌بندی نشده
  • دوره های رایگان
  • سریال
  • فناوری
  • فیلم
    • اکشن
    • تاریخی
    • ترسناک
    • جنایی
    • کمدی
    • مستند
    • معمایی
    • هیجان انگیز
    • ورزشی
  • قالب HTML
  • قالب وردپرس
    • قالب خبری و وبلاگ
    • قالب شرکتی
    • قالب نمونه کار
    • قالب های چند منظوره
  • مقالات
    • بازایابی دیجیتال
    • برنامه نویسی
    • تولید و بازاریابی محتوا
    • طراحی و گرافیک
آخرین مطالب سایت
  • آموزش انیمیشن‌سازی با CSS
  • بهترین فیلم های اسلشر تاریخ سینما
  • نقد فیلم Cure – یک فیلم هیپنوتیزم کننده
  • نقد فیلم یتیم Orphan: First Kill
  • کسب درآمد از آموزش آنلاین چگونه است؟
برچسب‌ها
CSS HTML آموزش آموزش CSS آموزش css3 آموزش css3 pdf آموزش css3 رایگان آموزش css3 پیشرفته آموزش css pdf آموزش css حرفه ای آموزش css و html آموزش css پروژه محور آموزش css پیشرفته آموزش افزونه وردپرس آموزش تولید محتوا آموزش رایگان html همیارمن آموزش رایگان زبان html آموزش وب سایت افزونه وردپرس بازاریابی بازاریابی دیجیتال بازی بررسی بررسی بازی تولید محتوا دانلود افزونه وردپرس دانلود قالب وردپرس دوره دوره رایگان دیجیتال مارکتینگ سایت فناوری فیلم قالب قالب سایت قالب وب سایت قالب وردپرس نقد نقد بازی نقد فیلم نقد و بررسی نقد و بررسی بازی نقد و بررسی فیلم وردپرس ووکامرس

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت