این وب سایت با تمامی محتویات و دامین به فروش می رسد. لطفا جهت خریداری از طریق بخش ارتباط با ما در تماس باشید

جستجو ...


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

ثبت نام کنید

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


CSS مخفف عبارت Cascading Style Sheets است و به معنای «برگه های سبک آبشار» یا «برگه‌های آبشاری» است. این زبان، مشخص می‌کند که عناصر HTML چگونه بر روی صفحه نمایش داده شود. با استفاده از CSS، می‌توان آرایش چندین صفحه وب را به طور همزمان کنترل کرد. صفحات استایل خارجی در فایل‌هایی با پسوند .css ذخیره می‌شوند.

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

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

در ادامه، دو صفحه HTML را مشاهده می‌کنید که هر یک استایلی متفاوت از دیگری دارد. این تغییر در ظاهر صفحات HTML با استفاده از CSS ایجاد شده است.

css-sample1

 

css-sample2

چرا از CSS استفاده می‌کنیم؟

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

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

HTML چیست؟

CSS یک مساله بزرگ را حل می‌کند

HTML، تگ هایی ندارد که با استفاده از آن‌ها، صفحه را قالب بندی کنیم. به عبارت دیگر با استفاده از HTML، تنها می‌توان محتوای سند را تعریف کرد. به عنوان مثال:

<p> This is a paragraph </p>

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

برای حل این مشکل، کنسرسیوم جهانی وب (w3C)، زبان CSS را برای طراحی سایت ایجاد کرد که قالب بندی را از صفحات HTML، حذف می‌کند.

CSS، باعث صرفه جویی در زمان می‌شود

تعریف استایل صفحات HTML، عموما در فایل های خارجی با پسوند .css ذخیره می‌شود. با داشتن این فایل‌های خارجی، شما می‌توانید به راحتی با تغییر یک فایل، تنظیمات خاصی را در همه (یا چند) صفحه وب سایت اعمال کنید.

نحو CSS

هر مجموعه قانون CSS، شامل یک انتخابگر (Selector) و یک بلاک تعاریف است:

ساختار نحو CSS

Selector، به عنصری از HTML اشاره می‌کند که شما قصد دارید استایل آن را تعریف کنید. همچنین بلاک declaration، شامل مجموعه ای از زوج نام ویژگی CSS و مقدار آن است که با علامت «:» از سایر زوج‌ها جدا می‌شود.

هر تعریف با «;» از سایر تعاریف جدا می‌شود. مجموعه‌ای از تعاریف، یک بلاک تعاریف را تشکیل می‌دهد که درون {} قرار می‌گیرد. در نمونه مثال زیر، تمام عناصر، وسط چین خواهند بود و متون رنگ قرمز دارند:

p {
    color: red;
    text-align: center;
}

CSS Selector

از Selector برای پیدا کردن عنصر یا عناصری از HTML استفاده می‌شود. برای پیدا کردن یک عنصر در HTML ، از name، id، class، attribute و ... مربوط به آن عنصر استفاده می‌شود.

element Selector

این Selector، عنصر را برحسب name عنصر انتخاب می‌کند. در مثال زیر، تمام عناصر، استایلی مطابق با استایل تعریف شده در کد زیر (وسط چین و متون به رنگ قرمز) خواهند داشت:

p {
    color: red;
    text-align: center;
}

id Selector

این Selector، از ویژگی id برای انتخاب عنصر خاصی از سند HTML استفاده می‌کند.

اگر قصد دارید استایل منحصر به فردی برای یک عنصر خاص تعریف کنید، یک id منحصر به فرد برای آن عنصر تعریف کنید. برای نوشتن استایل این عنصر، یک نماد (#) پیش از id آن عنصر بنویسید.

به عنوان مثال، کد زیر استایل عنصری با id=”para1” را تعریف می‌کند:

#para1 {
    text-align: center;
    color: red;
}

نکته: id نمی‌تواند با عدد آغاز شود.

Class Selector

این Selector، عناصری را انتخاب می‌کند که در کلاس خاصی قرار دارند.

برای انتخاب این عناصر، یک کاراکتر «.» پیش از نام کلاس بنویسید. در کد زیر، عناصری با calss=”center” ، وسط چین و قرمز رنگ خواهند بود:

.center {
    text-align: center;
    color: red;
}

همچنین شما می‌توانید مشخص کنید که فقط عناصر خاصی از این کلاس، انتخاب شوند. مثلا در کد زیر، تنها پاراگراف هایی که در کلاس “center” قرار دارند، انتخاب می‌شوند:

p.center {
    text-align: center;
    color: red;
}

عناصر HTML، می‌توانند به بیش از یک کلاس ارجاع دهند. به عنوان مثال، در کد زیر، عنصر پاراگراف هم در کلاس “center” قرار دارد و هم در کلاس “large”:

<p class="center large">This paragraph refers to two classes.</p>

دسته‌ای از Selectorها

اگر عناصری دارید که استایل مشابهی دارند، بهتر است برای کمینه کردن کد، از Selectorهای جمعی استفاده کنید. به این منظور، هر Selector را با کاما از هم جدا کنید. در کد زیر، سه انتخابگر h1 ،h2 و p، استایل یکسانی دارند. به همین دلیل آن‌ها را با هم تجمیع کرده و در قالب یک انتخابگر جمعی نوشتیم:

h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}
h1, h2, p {
    text-align: center;
    color: red;
}

 کامنت در CSS

کامنت‌ها ، توضیحاتی درباره کد هستند که ممکن است در زمان ویرایش کد یا پس از اتمام کار کد نویسی برای طراحی سایت، به خواننده کد کمک کند. این توضیحات، توسط مرورگرها نادیده گرفته می‌شود.

یک کامنت با /* شروع می‌شود و با */ ختم می‌شود و می‌تواند چند خط هم باشد.

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

چگونه CSS را به فایل HTML اضافه کنیم؟

سه راه برای اعمال استایل به سند(های) HTML وجود دارد:

• فایل CSS خارجی

• CSS داخلی

• استایل درون یک خط

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

با فایل CSS خارجی، شما می‌توانید با تغییر تنها یک فایل، تغییرات موردنظر خود را به چند صفحه از صفحات سایت اعمال کنید. برای این کار، هر صفحه وب به یک فایل CSS خارجی ارجاع می‌کند. آدرس فایل خارجی درون تگ link قرار می‌گیرد و عنصر link درون بخش head.

برای تولید یک فایل CSS خارجی، می‌توانید از هر ویرایشگر متنی استفاده کنید. به خاطر داشته باشید که این فایل نباید هیچ تگ HTML داشته باشد.

فایل CSS را با پسوند css. ذخیره کنید. یک فایل css. می‌تواند به صورت زیر باشد:

p {
    color: red;
    /* This is a single-line comment */
    text-align: center;
}

/* This is
a multi-line
comment */

نکته: بین مقدار ویژگی و واحد آن، فاصله قرار ندهید. به عنوان مثال margin-left: 20 px; صحیح نیست بلکه شکل صحیح آن به صورت margin-left: 20px; است.

استایل دادن به HTML با فایل CSS داخلی

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

<head>
<style>
body {
    background-color: linen;
}

h1 {
    color: maroon;
    margin-left: 40px;
} 
</style>
</head>

استفاده از استایل خطی

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

برای مثال، در کد زیر رنگ و میزان حاشیه سمت چپ عنصر h1 مشخص شده است:

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

 سعی کنید از استایل خطی به ندرت استفاده کنید زیرا این نوع استایل، بسیاری از مزایای CSS را از دست می‌دهد.

چند صفحه CSS

اگر چند ویژگی در چند صفحه استایل متفاوت، برای یک عنصر تعریف شده باشد، آخرین استایل خوانده شده، اعمال خواهد شد. به عنوان مثال، فرض کنید که یک صفحه استایل بیرونی، استایل زیر را برای عنصرh1 تعریف کرده است. همچنین، فرض کنید که با استفاده از تگ style، یک  استایل درونی هم برای این عنصر تعریف شده است.

با اجرای کد زیر، عنصر h1 به رنگ نارنجی در می‌آید:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
    color: orange;
}
</style>
</head>

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

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

۱.استایل خطی (درون یک عنصر HTML)

۲.صفحات CSS داخلی و خارجی (در بخش head)

۳. پیش فرض مرورگر

بنابراین، استایل خطی بالاترین اولویت را دارد و این مطلب بدین معنی است که استایلی که به صورت خطی تعریف شده، می‌تواند تمام استایل های تعریف شده برای عنصر را بازنویسی کند.

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

منبع :

متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

برترین های