خانه/آموزش طراحی سایت/آموزش HTML‌ برای طراحی صفحات سایت
معرفی کاربرد سبک‌های CSS در کدهای HTML
 

معرفی کاربرد سبک‌های CSS در کدهای HTML

در این مقاله به طور کامل با مفهومی CSS و نحوه استفاده و کاربرد آن در طراحی صفحات وب با HTML آشنا می‌شوید. در این مقاله مثال‌های متعددی همراه با تست آنلاین کدهای CSS همراه شما خواهیم بود.
شنبه، 18 دی 1400 | Article Rating

CSS مخفف عبارت Cascading Style Sheets (برگه‌های سبک‌دهی آبشاری) است.

CSS مقدار قابل توجهی از کار کدنویسی ساخت ظاهر صفحات وب را کاهش می‌دهد. CSS می تواند طرح بندی چندین صفحه وب را به طور هم‌زمان نیز کنترل کند.

CSS چیست؟

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

  • مثال برای درک بهتر آموزش اسناد HTML:

    CSS = استایل و رنگ

    دستکاری نوشته‌ها
    رنگ‌ها و باکس‌ها

نکته:

کلمه cascading به این معنی است که سبکی که برای یک عنصر والد اعمال می‌شود، برای همه عناصر داخل آن عنصر که فرزند درون والد نام دارند نیز اعمال می شود. بنابراین، اگر رنگ متن بدنه اصلی html‌ یا همان body را روی "آبی" تنظیم کنید، همه سرفصل‌ها، پاراگراف‌ها و سایر عناصر متن داخل تگ body نیز یک رنگ و به همان رنگ "آبی" خواهند شد. (مگر این که در سطوح پایین تر به فرزندان درون تگ والد، ویژگی‌های دیگری را تعریف کنید.)!

نحوه استفاده از CSS

CSS را می توان به ۳ روش به اسناد HTML اضافه کرد:

  • درون خطی اختصاصی هر تگ (Inline) - با استفاده از ویژگی style به عنوان ویژگی تگ HTML کدهای css مختص آن تگ درج می‌شوند.
  • داخلی (Internal) - با استفاده از تگ مستقل <style> در بخش <head> مجموعه دستورات مورد نیاز CSS قرار داده می‌شود.
  • خارجی (External) - با استفاده از عنصر <link> برای پیوند به یک فایل با پسوند CSS خارج از سند html دستورات را خوانده و از آن استفاده می‌کند.

رایج‌ترین راه برای افزودن CSS، نگه داشتن استایل‌ها و دستورات CSS در یک فایل جدا با پسوند CSS و سپس با استفاده از تگ <link> فراخوانی کردن آن فایل (External) درون کدهای html می‌باشد. با این حال، در این آموزش ما از سبک‌های درون خطی اختصاصی هر تگ (Inline) و روش داخلی (Internal) استفاده خواهیم کرد، زیرا نشان دادن و تست آنلاین کدها برای شما در حال حاضر به این روش ساده‌تر است. همچنین برای شما نیز آموزش و یادگیری کدها راحت‌تر است تا خودتان با استفاده از برنامه تست کدهای HTML و CSS ما آن را امتحان کنید.

CSS به روش درون خطی (Inline CSS)

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

مثال زیر رنگ متن تگ <h1> را آبی و رنگ متن تگ <p> را قرمز تنظیم می کند:

  • </>

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

    <h1 style="color:blue;">سرفصل نوع ۱ با رنگ آبی</h1>

    <p style="color:red;">یک متن پاراگراف با رنگ قرمز.</p>
    کد HTML را آزمایش کنید

    تنها کافی است روی گزینه "کد HTML را آزمایش کنید " کلیک کنید تا ویرایشگر متنی ما همان لحظه باز شود و شما کدهایی را که یاد گرفتید در پنجره سمت چپ وارد کنید و با زدن گزینه "مشاهده نتیجه"، نتیجه کد خود را به صورت زنده مشاهده نمایید!


CSS به روش ٔداخلی (Internal CSS)

استفاده از روش CSS داخلی برای تعریف یک مجموعه از سبک‌های ظاهری برای کل عناصر داخل یک صفحه HTML استفاده می‌شود. یک CSS داخلی در بخش <head> یک صفحه HTML درون عنصر یا تگ <style> تعریف می‌شود. البته علاوه بر تعریف کدهای CSS در قسمت <head> سند HTML، می‌توانید دستورات CSS را در قسمت <body> سند HTML خود نیز تعریف کنید و مانعی ندارد.

مثال زیر رنگ متن همه تگ‌های <h1> موجود در صفحه را آبی و رنگ متن همه تگ‌های <p> را قرمز تنظیم می‌کند. علاوه بر این، صفحه با رنگ پس زمینه "آبی پودری روشن" نمایش داده می‌شود:

  • </>

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

    <!DOCTYPE html>
    <html>

    <head>
    <style>
    body {background-color: powderblue;}
    h1    {color: blue;}
    p      {color: red;}
    </style>
    </head>

    <body>

    <h1>یک نمونه سرفصل نوع ۱</h1>
    <p>یک نمونه پاراگراف متن.</p>

    </body>

    </html>
    کد HTML را آزمایش کنید

    تنها کافی است روی گزینه "کد HTML را آزمایش کنید " کلیک کنید تا ویرایشگر متنی ما همان لحظه باز شود و شما کدهایی را که یاد گرفتید در پنجره سمت چپ وارد کنید و با زدن گزینه "مشاهده نتیجه"، نتیجه کد خود را به صورت زنده مشاهده نمایید!


CSS به روش فراخوانی فایل خارجی (External CSS)

در این روش فایلی دیگر با پسوند css را با استفاده از تگ <link> در سند html فراخوانی می‌کنند. به این روش که یک شیوه نامه خارجی برای تعریف سبک برای بسیاری از صفحات HTML استفاده می شود CSS به روش خارجی یا External CSS می‌گویند.

برای استفاده از یک شیوه نامه خارجی، یک پیوند به آن در بخش <head> هر صفحه HTML اضافه می‌کنیم. به مثال زیر توجه کنید:

  • </>

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

    <!DOCTYPE html>
    <html>

    <head>
    <link rel="stylesheet" href="/style.css">
    </head>

    <body>

    <h1>یک نمونه سرفصل نوع ۱</h1>
    <p>یک نمونه پاراگراف متن.</p>

    </body>

    </html>
    کد HTML را آزمایش کنید

    تنها کافی است روی گزینه "کد HTML را آزمایش کنید " کلیک کنید تا ویرایشگر متنی ما همان لحظه باز شود و شما کدهایی را که یاد گرفتید در پنجره سمت چپ وارد کنید و با زدن گزینه "مشاهده نتیجه"، نتیجه کد خود را به صورت زنده مشاهده نمایید!


شیوه نامه خارجی را می‌توان در هر ویرایشگر متنی مثل برنامه NopePad++ یا VSC (Visual Studio Code) یا حتی یک Notepad‌ ساده ویندوز یا Mac خود بنویسید. توجه کنید که فایل CSS شما نباید حاوی هیچ کد HTML باشد در غیر این صورت روی صفحه وب شما اجرا می‌شود. همچنین دقت کنید که با پسوند css. فایل را ذخیره نمایید.

در اینجا می‌توانید محتوای CSS فایلی که در مثال بالا با نام "styles.css" استفاده شده بود را مشاهده نمایید:

  • </>

    محتوای داخل فایل style.css که در سند HTML فراخوانی شده بود:

    body {background-color: powderblue;}
    h1    {color: blue;}
    p      {color: red;}
    دانلود فایل

    تنها کافی است روی گزینه "کد HTML را آزمایش کنید " کلیک کنید تا ویرایشگر متنی ما همان لحظه باز شود و شما کدهایی را که یاد گرفتید در پنجره سمت چپ وارد کنید و با زدن گزینه "مشاهده نتیجه"، نتیجه کد خود را به صورت زنده مشاهده نمایید!


نکته:

با روش استفاده از شیوه‌نامه خارجی، می‌توانید ظاهر کل یک وب سایت را تنها با تغییر سبک‌های یک فایل CSS تغییر دهید!

رنگ‌ها، فونت‌ها و اندازه‌ها جهت نوشتار متن در CSS

در اینجا، به برخی از ویژگی‌های رایج در CSS خواهیم پرداخت. ولی تعداد این ویژگی‌ها بسیار زیاد است و در قسمت آموزش CSS در مورد آنها بیشتر خواهید آموخت.

ویژگی direction در CSS جهت نوشتن متن از راست به چپ مثل فارسی و از چپ به راست مثل انگلیسی را مشخص می‌کند.

ویژگی color در CSS رنگ متن مورد استفاده را مشخص می‌کند.

ویژگی font-family در CSS فونت مورد استفاده را تعریف می‌کند.

ویژگی font-size در CSS اندازه متن مورد استفاده را مشخص می‌کند.

  • </>

    استفاده از direction، color، font-family و font-size ‌در CSS

    <!DOCTYPE html>
    <html>

    <head>
    <style>
    body {
         direction: rtl;
    }
    h1    {
         color: blue;
         font-family: courier;
         font-size: 300%;
    }
    p      {
         color: red;
         font-family: tahoma;
         font-size: 200%;
    }
    </style>
    </head>

    <body>

    <h1>یک نمونه سرفصل نوع ۱</h1>
    <p>یک نمونه پاراگراف متن.</p>

    </body>

    </html>
    کد HTML را آزمایش کنید

    تنها کافی است روی گزینه "کد HTML را آزمایش کنید " کلیک کنید تا ویرایشگر متنی ما همان لحظه باز شود و شما کدهایی را که یاد گرفتید در پنجره سمت چپ وارد کنید و با زدن گزینه "مشاهده نتیجه"، نتیجه کد خود را به صورت زنده مشاهده نمایید!


حاشیه (border) در CSS

ویژگی حاشیه یا border در دستورات CSS یک نوار مرزی را در اطراف یک تگ HTML تعریف می‌کند.

نکته: شما می‌توانید برای تقریباً همه تگ‌های HTML حاشیه تعریف کنید.

  • </>

    استفاده از ویژگی border در CSS:

    p {
         border: 2px solid powderblue;
    }
    کد HTML را آزمایش کنید

    تنها کافی است روی گزینه "کد HTML را آزمایش کنید " کلیک کنید تا ویرایشگر متنی ما همان لحظه باز شود و شما کدهایی را که یاد گرفتید در پنجره سمت چپ وارد کنید و با زدن گزینه "مشاهده نتیجه"، نتیجه کد خود را به صورت زنده مشاهده نمایید!


فضای داخلی (padding) در CSS

ویژگی padding در CSS یک فضای خالی رو به داخل از حاشیه تگ تا متن یا محتوای داخل تگ را تعریف می‌کند.

  • </>

    استفاده از ویژگی border و padding در CSS:

    p {
         border: 2px solid powderblue;
         padding: 25px;
    }
    کد HTML را آزمایش کنید

    تنها کافی است روی گزینه "کد HTML را آزمایش کنید " کلیک کنید تا ویرایشگر متنی ما همان لحظه باز شود و شما کدهایی را که یاد گرفتید در پنجره سمت چپ وارد کنید و با زدن گزینه "مشاهده نتیجه"، نتیجه کد خود را به صورت زنده مشاهده نمایید!


فضا یا حاشیه بیرونی (margin) در CSS

ویژگی margin در CSS یک فضای خالی رو به بیرون از حاشیه تگ تعریف می‌کند. برای مثال اگر چند تگ در کنار هم قرار گرفته باشند همگی بدون هیچ فاصله‌ای به هم می‌چسبند. ویژگی margin موجب می‌شود به مقدار دلخواه که بر اساس پیکسل (Pixel) با اختصار px و یا درصد % از هم فاصله بگیرند.

  • </>

    استفاده از ویژگی border و margin در CSS:

    p {
         border: 2px solid powderblue;
         margin: 50px;
    }
    کد HTML را آزمایش کنید

    تنها کافی است روی گزینه "کد HTML را آزمایش کنید " کلیک کنید تا ویرایشگر متنی ما همان لحظه باز شود و شما کدهایی را که یاد گرفتید در پنجره سمت چپ وارد کنید و با زدن گزینه "مشاهده نتیجه"، نتیجه کد خود را به صورت زنده مشاهده نمایید!


لینک به فایل CSS خارجی در HTML

برگه‌های سبک‌دهی خارجی که یک فایل با پسوند CSS و حاوی کدهای ویژگی CSS برای تگ‌ها و غیره هستند، را می توان با یک URL کامل یا با یک مسیر نسبی به صفحه وب فعلی ارجاع داد و آن را در HTML فراخوانی کرد تا مرورگر از دستورات داخل آن برای سبک‌دهی به تگ‌های HTML استفاده نماید.

  • </>

    استفاده از URL کامل فایل CSS خارجی در HTML

    <link rel="stylesheet" href="https://www.ecb.ir/Portals/0/style-course14.css">
    کد HTML را آزمایش کنید

    تنها کافی است روی گزینه "کد HTML را آزمایش کنید " کلیک کنید تا ویرایشگر متنی ما همان لحظه باز شود و شما کدهایی را که یاد گرفتید در پنجره سمت چپ وارد کنید و با زدن گزینه "مشاهده نتیجه"، نتیجه کد خود را به صورت زنده مشاهده نمایید!


  • </>

    استفاده از URL نسبی (دامنه پیش‌فرض) فایل CSS خارجی در HTML

    <link rel="stylesheet" href="/Portals/0/style-course14.css">
    کد HTML را آزمایش کنید

    تنها کافی است روی گزینه "کد HTML را آزمایش کنید " کلیک کنید تا ویرایشگر متنی ما همان لحظه باز شود و شما کدهایی را که یاد گرفتید در پنجره سمت چپ وارد کنید و با زدن گزینه "مشاهده نتیجه"، نتیجه کد خود را به صورت زنده مشاهده نمایید!


  • </>

    استفاده از نام فایل CSS خارجی بدون اسلش (هم پوشه با فایل HTML) به تنهایی در HTML

    <link rel="stylesheet" href="style-course14.css">

خلاصه این فصل درباره آشنایی با CSS

  • از ویژگی style درون تگ‌های HTML برای استایل بندی درون خطی (Inline) استفاده کنید.
  • از تگ <style> برای تعریف CSS داخلی در اسناد HTML استفاده کنید.
  • از تگ <link> برای فراخوانی یک فایل CSS خارجی در اسناد HTML‌ استفاده کنید.
  • از تگ <head> برای قرار دادن دو تگ بالا درون آن یعنی <style> و <link> استفاده کنید.
  • از ویژگی color در CSS برای تعیین رنگ‌های متن استفاده کنید.
  • از ویژگی direction در CSS برای تغییر جهت نوشتن متن فارسی (RTL) و انگلیسی (LTR) استفاده کنید.
  • از ویژگی font-family در CSS برای تعیین خانواده یا نوع قلم (فونت‌های متن) استفاده کنید.
  • از ویژگی font-size در CSS برای تعیین اندازه متن استفاده کنید.
  • از ویژگی border در CSS برای مشخص کردن رنگ و ضخامت و نوع حاشیه دور تگ‌های HTML استفاده کنید.
  • از ویژگی padding در CSS برای ایجاد یک فضای خالی (فاصله) از حاشیه تا محتوای درون تگ HTML استفاده کنید.
  • از ویژگی margin در CSS برای ایجاد یک فضای خالی (فاصله) از حاشیه تگ HTML به سمت بیرون تگ استفاده کنید.

نکته:

شما می‌توانید تمام ویژگی‌های CSS را از صفحه مخصوص آموزش ویژگی‌ها در CSS را یاد بگیرید.

درس بعد
 
درس قبل

معرفی برخی خدمات مرتبط با راه اندازی کسب و کار آنلاین کارگزاران تجارت الکترونیک ایران

در صورتی که مایل به معرفی خدمات طراحی سایت ما به دوستان خود هستید لطفا این صفحه را برای ایشان به اشتراک بگذارید. همچنین می‌توانید اطلاعات بیشتری درباره خدمات ما در زمینه طراحی سایت فروشگاهی همچون طراحی سایت عطر، طراحی سایت شخصی، طراحی سایت شرکتی، طراحی سایت سازمانی با ورود به این صفحات به دست آورید. این که وب سایت مورد نظر شما از چه نوعی باشد را به ما بسپارید. بسته به امکانات و نیاز شما بهترین را برای شما انتخاب می‌کنیم. چه از نوع طراحی سایت با دی ان ان DNN (دات نت نیوک) باشد و چه از نوع طراحی سایت با وردپرس Wordpress می‌توانید از طریق صفحات مربوط به آن اطلاعات بیشتری کسب کرده و همه خدمات خود را از میزبانی وب و خرید هاست گرفته تا طراحی اپلیکیشن موبایل و آموزش طراحی سایت و سئو سایت SEO، آن را با خیال راحت به ما بسپارید. نکته قابل توجه این است که ما با هدف افزایش درآمد و رساندن شما به اهدافی که مد نظر دارید این کار را انجام می‌دهیم و این موضوع بسیار متفاوت است با این که بخواهید فقط یک سایت داشته باشید! چون هر طراحی سایتی شما را به اهداف‌تان نمی‌رساند. تخصص ما تجارت الکترونیک و راه اندازی کسب و کار آنلاین است و طراحی سایت تنها بخشی از این خدمات محسوب می‌شود. عکاسی 360 درجه از محصول و طراحی سیستم اختصاصی یکپارچه ERP و راهبری و چگونگی انجام کار برای رسیدن به درآمد آنلاین چیزی است که بسیاری از طراحان سایت نمی‌دانند. این در حالی است که هدف ما از طراحی سایت تمرکز روی به نتیجه رسیدن اهداف شما است نه طراحی سایت! کارگزار خدمات فناوری اطلاعات خود را به درستی و با دقت انتخاب کنید.

بازگشت
تصاویر
ثبت امتیاز
اشتراک گذاری
نظر جدید

تصویر امنیتی
کد امنیتی را وارد نمایید:

این صفحه را به دوستان خود معرفی کنید

با به اشتراک گذاری این صفحه، یک فرصت خوب به دوستان خود هدیه می‌دهید