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

شروع کار با CSS

فهرست عناوین

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

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

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

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

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

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

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

سبک های خطی

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

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

مثال:

    <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>

<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/> قرار گیرند. مثال زیر را ببینیم:

مثال:

    <!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>

<!DOCTYPE html>

<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>

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

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

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

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

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

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

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

مثال:

    body {

    background: lightyellow;

    font: 18px Arial, sans-serif;

    }

    h1 {

    color: orange;

    }

body {

background: lightyellow;

font: 18px Arial, sans-serif;

}

h1 {

color: orange;

}

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

    <!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>

<!DOCTYPE html>

<head>

<title>My HTML Document</title>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph of text.</p>

</body>

</html>

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

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

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

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

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

    <style>

    @import url(“css/style.css”);

    p {

    color: blue;

    font-size: 16px;

    }

    </style>

<style>

@import url(“css/style.css”);

p {

color: blue;

font-size: 16px;

}

</style>

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

    @import url(“css/layout.css”);

    @import url(“css/color.css”);

    body {

    color: blue;

    font-size: 14px;

    }

@import url(“css/layout.css”);

@import url(“css/color.css”);

body {

color: blue;

font-size: 14px;

}

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

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

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

شروع کار با CSS

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

سبک های خطی

مثال:

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

مثال:

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

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

مثال:

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

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

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

شروع کار با CSS

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

سبک های خطی

مثال:

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

مثال:

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

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

مثال:

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

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

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

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

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

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

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

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

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