معرفی CSS و Selector های CSS جلسه ۳

0 دیدگاه 2,322 آموزش HTML5 و CSS3

معرفی CSS و Selector های CSS

فهرست موضوعات در این آموزش

بنام خدا ,

در خدمت شما هستم با یکی دیگه از آموزش های وب سایت پاسخ وردپرس در خدمت شما هستم با جلسه ۳ آموزش HTML5 و CSS3.

توی این جلسه از آموزش HTML و CSS میخواهیم CSS خدمت شما معرفی کنیم انواع Selector ها و نوع لینک دهی فایل CSS پس با من همراه باشید.

در این جلسه از آموزش چی می آموزید

css چیست
انواع استایل ها
تعریف استایل
Element Selector

آموزش HTML5 و CSS3 جلسه ۳ معرفی CSS و Selector های CSS

آموزش HTML5 و CSS3

CSS چیست ؟

۱ CSS مخفف کلمه Cascading Style Sheets ميباشند.
۲ اولين ورژن CSS در سال ۱۹۹۶ ساخته شد. که اولين ورژن آن CSS1 بود.
۳ ديگر وژن آن CSS2 مي باشد که در سال ۱۹۹۸ ساخته شد که بیشتر براي ويرايش صفحات، نحوه نمایشها تگ ها و … کاربرد دارد.
۴ فایل استایل ها با فرمت CSS ذخیره می شوند.

انواع استایلها :

آموزش HTML5 و CSS3

۱. Inline Style: اين نوع استايل در داخل تگهاي HTML به كار گرفته ميشوند، و اين استايل فقط بروي همان تگ به خصوص تاثير خواهد گذاشت و به صورت زير نوشته خواهد شد.

<p style="background: #000">تست متن با پس زمینه سیاه</p>

1	<p style="background: #000">تست متن با پس زمینه سیاه</p>

در مثال بالا با استفاده از استایل داخل پاراگراف پس زمینه را سیاه کردیم .

نوع دوم تعریف استایل

۲. Embedded or Global Style: در اين نوع، استايل نوشته شده در تمامي صفحه تاثير خواهد گذاشت، اينرا بين دو تگ (<head></head>) به صورت زير نوشته خواهد شد.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
        <style>
            p{ background: #000}
        </style>
</head>
<body>
<p style="background: #000">تست متن با پس زمینه سیاه</p>
</body>
</html>

<!doctype html>

<head>

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<title>Document</title>

<style>

p{ background: #000}

</style>

</head>

<body>

<p style="background: #000">تست متن با پس زمینه سیاه</p>

</body>

</html>

در مثال بالا هم می بینید که پس زمینه p سیاه است .

نوع سوم تعریف استایل

۳. Linked or External style sheet: نوع آخر هم معروف به استايلهاي خارجي هستند كه به صورت لينك فايل استايل را به صفحات خود لينك ميدهيد. فايلهاي استايل با فرمت CSS ذخيره ميشوند و به صورت زير به صفحات لينك داده ميشود.

    <link rel="stylesheet" href="آدرس فایل شما " type="text/css">

1	<link rel="stylesheet" href="آدرس فایل شما " type="text/css">

در مثال بالا ما فایل CSS را که توی یک جای مشخص ساختیم آدرس میدیم داخل hret.

Element Selector

آموزش html و css

اولین و رایج ترین نوع Selector ها در زبان سی اس اس (CSS) تحت عنوان Element Selector شناخته می شوند.
منظور از Element تگ های اچ تی ام ال (HTML) به همراه محتوای داخل آنها است. به طور مثال برای تگ h1 باید از یک Element Selector ای تحت عنوان {} h1 استفاده کرد.
همانطور که می بینیم علامت های <> که در زبان اچ تی ام ال (HTML) مورد استفاده قرار می گیرند در سی اس اس حذف می شوند و نیازی به ذکر آنها نمی باشد.

به طور کلی این نوع از Selector ها بسیار گسترده هستند یعنی اگر از Selector ای مانند p{} استفاده کنیم،
این Selector کلیه تگ های p که در صفحه ما قرار دارند را تحت تاثیر قرار خواهد داد و با استفاده از آن می توانیم برای کلیه پاراگراف های خود یک استایل عمومی تعریف کنیم.

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

p { color:red;
	font-size:20px;
}
div {
	background:grey;
}

p { color:red;

font-size:20px;

}

div {

background:grey;

}

class Selector

نوع دوم از Selector ها تحت عنوان class Selector شناخته می شوند. به طور کلی یکی از Attribute های عمومی در زبان HTML که تمام تگ ها می توانند آن را دارا باشند تحت عنوان class شناخته می شود.
نحوه نام گذاری class ها به این شکل است که هر نامی که بخواهیم می توانیم برای آن ها در نظر بگیریم
(البته باید قواعدی را رعایت کنیم که در انتهای مقاله به انها اشاره خواهیم کرد)،علاوه بر این،
class مد نظر خود را به هر تعداد و برای هر تعداد تگ که نیاز داشته باشیم می توانیم مورد استفاده قرار دهیم.
برای روشن شدن این مطلب کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر متن خود می کنیم:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>پاسخ وردپرس - آموزش html و css </title>
    <link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<p class="myClass">آشنایی با سلکتورهای زبان سی اس اس</p>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>پاسخ وردپرس - آموزش html و css </title>

</head>

<body>

<p class="myClass">آشنایی با سلکتورهای زبان سی اس اس</p>

</body>

</html>

همانطور که در کد فوق مشاهده می کنید،داخل تگ body یک تگ p قرار داده و داخل تگ آغازین پاراگراف از Attribute ای به نام class استفاده کرده
و نامی دلخواه همچون myClass برای آن در نظر گرفته ایم (نحوه نوشتن myClass به این شکل است که حرف اول به صورت کوچک نوشته شده سپس اولین حرف کلمه دوم با حرف بزرگ نوشته شده است.
این نوع نامگذاری اصطلاحاً camelCase گفته می شود. واژه camel به معنی “شتر” است و از آنجا که این طور نامگذاری شبیه به کوهان شتر است camelCase نامیده می شود.
البته این نوع نامگذاری اجباری نبوده و صرفا برای خوانایی بیشتر مورد استفاده قرار می گیرد(.

نکته : توجه داشته باشید که همیشه برای استفاده از کلاس ها داخل فایل CSS ،باید از علامت نقطه پیش از نام کلاس استفاده کنید به مثال زیر توجه داشته باشید .

.myClass {
	background-color:black;
	margin:0 auto;
	text-align:center;
	border-radius:5px;
	direction:rtl;
	font-weight:normal;
}

.myClass {

background-color:black;

margin:0 auto;

text-align:center;

border-radius:5px;

direction:rtl;

font-weight:normal;

}

همانطور که در کد فوق می بینیم، داخل فایل styles.css ابتدا یک نقطه قرار داده سپس نامی که برای class در نظر گرفتیم را می نویسیم و هر کدی که بخواهیم به این class اختصاص یابد را داخل دو علامت {} می نویسیم.

Id Selector

در بالا ما دو نوع Selector خدمت شما آموزش دادیم الان میریم سراغ نوع سوم Selector ها.

Selector دیگری که در استایل دهی های CSS بسیار پرکاربرد می باشد id Selector می باشد.
ویژگی id نیز جزو خاصیت های عمومی زبان HTML می باشد که هر عنصری می تواند این خاصیت را داشته باشد
اما یک تفاوت عمده با class Selector ها دارند و آن هم این است که id Selector ها فقط به یک آیتم در صفحات اچ تی ام ال (HTML) می توانند اختصاص داده می شوند.
برای روشن شدن این مطلب کد فوق را به صورت زیر بازنویسی می کنیم:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>پاسخ وردپرس - آموزش html و css </title>
    <link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<p id="myId">  آشنایی با ایدی سلکتور</p>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>پاسخ وردپرس - آموزش html و css </title>

</head>

<body>

<p id="myId"> آشنایی با ایدی سلکتور</p>

</body>

</html>

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

#myId {
	background-color:black;
	margin:0 auto;
	text-align:center;
	border-radius:5px;
	direction:rtl;
	font-weight:normal;
}

#myId {

background-color:black;

margin:0 auto;

text-align:center;

border-radius:5px;

direction:rtl;

font-weight:normal;

}

نکته : دقت کنید که در کدهای CSS برای استفاده از id Selector باید از علامت # استفاده کنید که اصطلاحاً Hash Mark نامیده می شود.

خوب دوستان عزیز به پایان جلسه سوم آموزش HTML5 و CSS3 شدیم که امید وارم که مورد توجه شما قرار گرفته باشه اگه این آموزش دوست داشتید به دوستان خود به اشتراک بزارید .

میانگین رتبه 5/5 تعداد رای : 1

معرفی CSS و Selector های CSS جلسه ۳