آموزش های ویدیویی رایگان برنامه نویسی و وب

عناصر سودو سی اس اس ( CSS Pseudo Elements )

0

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

عناصر سودو سی اس اس ( CSS Pseudo Elements )  چه هستند؟

سودو المنت های CSS در واقع برای استایل دهی به قسمتی خاص از یک عنصر استفاده می شوند.شما با استفاده از سودو المنت ها می توانید رویداد سلکت شدن متن را تشخیص دهید یا قبل از دیگر عناصر یک عنصر مادر ٬ المنتی جدید ایجاد کنید بدون آنکه از اچ تی ام ال استفاده نمایید.

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

سینتکس سودو المنت های CSS

برای استفاده عناصر سودو سی اس اس ٬ شما باید ساختار خاصی از کدنویسی را رعایت کنید که ساختار آن را در تکه کد پایین مشاهده می کنید :

selector::pseudo-element{
    property:value;
}

همانطور که مشاهده می کنید ٬ نحوه استفاده از سودو المنت ها شباهت زیادی به عناصر عادی سی اس اس دارد.تنها تفاوتی که برای استفاده از سودو المنت ها وجود دارد ٬ استفاده از :: بعد از نام سلکتور عنصر مورد نظر است.

مثالی را از نحوه استفاده از عناصر سودو در سی اس اس را می توانید در زیر مشاهده نمایید :

h1::first-letter{
    font-size:48px;
    font-weight:bold;
}

در تکه کد بالا ٬ ما سودو المنت First-Letter مربوط به H1 های درون صفحه خود را صدا زدیم و به خصوصیات آن مقدار هایی را نسبت دادیم.نحوه استفاده از دیگر سودو المنت ها نیز همینگونه است.

عناصر سودو سی اس اس ٬ ::First-letter

از این عنصر سودو در CSS برای تغییر خصوصیات حرف اول یک عبارت استفاده می شود.شما می توانید بصورت زیر خصوصیات خاصی را به حرف اول عبارت خود نسبت دهید :

p::first-letter{
    font-size:48px;
    font-weight:bold;
}

در نظر داشته باشید که تنها خصوصیات زیر را با استفاده از ::First-letter می توانید تغییر دهید :

  • خصوصیات فونت
  • خصوصیات رنگ
  • خصوصیات پس زمینه
  • خصوصیات Margin
  • خصوصیات Padding
  • خصوصیات Border
  • Text-Decoration
  • Text-Transform
  • Line-Height
  • Float
  • Clear

عناصر سودو سی اس اس ٬ ::First-Line

از این عنصر سودو در سی اس اس برای تغییر خصوصیات خط اول یک متن استفاده می شود.سینتکس آن را با مثال در پایین مشاهده می کنید :

p::first-line{
  color:#000;
}

خصوصیاتی که می توانید با استفاده از ::First-Line تغییر دهید :

  • خصوصیات فونت
  • خصوصیات رنگ
  • خصوصیات پس زمینه
  • Word-Spacing
  • Letter-Spacing
  • Text-Decoration
  • Vertical-Align
  • Text-Transform
  • Line-Height
  • Clear

سودو المنت های سی اس اس ٬ ::Before

::Before و ::After جزو پر کاربردترین سودو المنت های سی اس اس به شمار می روند.پایین تر در مورد ::After نیز توضیح می دهیم.سودو المنت ::Before قبل از تمام فرزند های یک عنصر ٬ عنصری تازه ایجاد می کند که می توانید به آن خصوصیات مورد نظر خود را نسبت دهید.مثال آن را در پایین مشاهده می کنید :

div::before{
  content:'';
  display:block;
  width:25px;
  height:25px;
  border-radius:50%;
  background:#000;
}

سودو المنت های سی اس اس ٬ ::After

در بالا در مورد ::Before صحبت کردیم و فهمیدیم که چگونه کار می کند.سودو المنت ::After بر عکس ::Before ٬ بعد از تمام فرزند های یک عنصر ٬ عنصری جدید به آن اضافه می کند.سینتکس آن نیز مانند ::Before می باشد.

div::after{
  content:'';
  display:block;
  width:25px;
  height:25px;
  border-radius:50%;
  background:#000;
}

سودو المنت ::Selection

این عنصر سودو در سی اس اس ٬ مشخص می کند هنگامی که قسمتی از یک عنصر انتخاب شد ٬ چه رفتاری داشته خصوصیاتی داشته باشد.به عنوان مثال p::selection مشخص می کند هنگامی که کاربر متن های موجود در تگ p را انتخاب ( سلکت ) کرد ٬ چه خصوصیاتی داشته باشد.مثال آن را در پایین مشاهده می کنید :

p::selection{
  color:#444;
  background:#fff;
}

خصوصیاتی که به هنگام استفاده از سودو المنت ::Selection می توانید تغییر دهید را در پایین مشاهده می کنید :

  • Color
  • Background
  • Cursor
  • Outline

کلاس های سودو در سی اس اس

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

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

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.