آموزش شبه عناصر در CSS

4 سال پیش

امتیاز دهید post

آموزش شبه عناصر در CSS

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش شبه عناصر در CSS خواهیم پرداخت.

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

selector:pseudo-element {property: value}

1	selector:pseudo-element {property: value}

کلاس های CSS را می توان با شبه عناصر نیز استفاده کرد –

selector.class:pseudo-element {property: value}

1	selector.class:pseudo-element {property: value}

شبه عناصر متداول به شرح زیر است –

	مقادیر و توضیحات
1	:first-line از این عنصر برای افزودن سبک های خاص به سطر اول متن در یک انتخابگر استفاده می شود
2	:first-letter از این عنصر برای افزودن سبک خاص به حرف اول متن در یک انتخابگر استفاده می شود.
3	:before از این عنصر برای درج برخی مطالب قبل از یک عنصر استفاده می شود.
4	:after از این عنصر برای درج برخی از مطالب بعد از یک عنصر استفاده می شود.

شبه عنصر first-line

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

Live Demo
&lt;html&gt;
   &lt;head&gt;
      &lt;style type = "text/css"&gt;
         p:first-line { text-decoration: underline; }
         p.noline:first-line { text-decoration: none; }
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;p class = "noline"&gt;
         This line would not have any underline because this belongs to nline class.
      &lt;/p&gt;
      
      &lt;p&gt;
         The first line of this paragraph will be underlined as defined in the 
         CSS rule above. Rest of the lines in this paragraph will remain normal. 
         This example shows how to use :first-line pseduo element to give effect 
         to the first line of any HTML element.
      &lt;/p&gt;
   &lt;/body&gt;
&lt;/html&gt;

Live Demo

<html>

<head>

p:first-line { text-decoration: underline; }

p.noline:first-line { text-decoration: none; }

</style>

</head>

<body>

This line would not have any underline because this belongs to nline class.

</p>

<p>

The first line of this paragraph will be underlined as defined in the

CSS rule above. Rest of the lines in this paragraph will remain normal.

This example shows how to use :first-line pseduo element to give effect

to the first line of any HTML element.

</p>

</body>

</html>

خروجی به صورت زیر می باشد:

This line would not have any underline because this belongs to nline class.

The first line of this paragraph will be underlined as defined in the CSS rule above. Rest of the lines in this paragraph will remain normal. This example shows how to use :first-line pseduo element to give effect to the first line of any HTML element.

This line would not have any underline because this belongs to nline class.

The first line of this paragraph will be underlined as defined in the CSS rule above. Rest of the lines in this paragraph will remain normal. This example shows how to use :first-line pseduo element to give effect to the first line of any HTML element.

شبه عنصر first-letter

مثال زیر نحوه استفاده از عنصر حرف اول را برای افزودن جلوه های ویژه به حرف اول عناصر در سند نشان می دهد.

&lt;html&gt;
   &lt;head&gt;
      &lt;style type = "text/css"&gt;
         p:first-letter { font-size: 5em; }
         p.normal:first-letter { font-size: 10px; }
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;p class = "normal"&gt;
         First character of this paragraph will be normal and will have font size 10 px;
      &lt;/p&gt;
      
      &lt;p&gt;
         The first character of this paragraph will be 5em big as defined in the 
         CSS rule above. Rest of the characters in this paragraph will remain 
         normal. This example shows how to use :first-letter pseduo element 
         to give effect to the first characters  of any HTML element.
      &lt;/p&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

p:first-letter { font-size: 5em; }

p.normal:first-letter { font-size: 10px; }

</style>

</head>

<body>

First character of this paragraph will be normal and will have font size 10 px;

</p>

<p>

The first character of this paragraph will be 5em big as defined in the

CSS rule above. Rest of the characters in this paragraph will remain

normal. This example shows how to use :first-letter pseduo element

to give effect to the first characters of any HTML element.

</p>

</body>

</html>

خروجی به صورت زیر می باشد:

First character of this paragraph will be normal and will have font size 10 px;

The first character of this paragraph will be 5em big and in red color as defined in the CSS rule above. Rest of the characters in this paragraph will remain normal. This example shows how to use :first-letter pseduo element to give effect to the first characters of any HTML element.

First character of this paragraph will be normal and will have font size 10 px;

The first character of this paragraph will be 5em big and in red color as defined in the CSS rule above. Rest of the characters in this paragraph will remain normal. This example shows how to use :first-letter pseduo element to give effect to the first characters of any HTML element.

شبه عنصر Before

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

Live Demo
&lt;html&gt;
   &lt;head&gt;
      &lt;style type = "text/css"&gt;
         p:before {
            content: url(/images/bullet.gif)
         }
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;p&gt; This line will be preceded by a bullet.&lt;/p&gt;
      &lt;p&gt; This line will be preceded by a bullet.&lt;/p&gt;
      &lt;p&gt; This line will be preceded by a bullet.&lt;/p&gt;
   &lt;/body&gt;
&lt;/html&gt;

Live Demo

<html>

<head>

p:before {

content: url(/images/bullet.gif)

}

</style>

</head>

<body>

<p> This line will be preceded by a bullet.</p>

</body>

</html>

خروجی به صورت زیر می باشد:

This line will be preceded by a bullet.

This line will be preceded by a bullet.

This line will be preceded by a bullet.

This line will be preceded by a bullet.

شبه عنصر after

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

&lt;html&gt;
   &lt;head&gt;
      &lt;style type = "text/css"&gt;
         p:after {
            content: url(/images/bullet.gif)
         }
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;p&gt; This line will be succeeded by a bullet.&lt;/p&gt;
      &lt;p&gt; This line will be succeeded by a bullet.&lt;/p&gt;
      &lt;p&gt; This line will be succeeded by a bullet.&lt;/p&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

p:after {

content: url(/images/bullet.gif)

}

</style>

</head>

<body>

<p> This line will be succeeded by a bullet.</p>

</body>

</html>

خروجی به صورت زیر می باشد:

This line will be succeeded by a bullet.

This line will be succeeded by a bullet.

This line will be succeeded by a bullet.

This line will be succeeded by a bullet.

منبع.

لیست جلسات قبل آموزش CSS

امتیاز دهید post

برچسب ها : آموزش CSS

نویسنده مطلب saber

آموزش شبه عناصر در CSS

آموزش شبه عناصر در CSS

شبه عنصر first-line

شبه عنصر first-letter

شبه عنصر Before

شبه عنصر after

لیست جلسات قبل آموزش CSS

دیدگاه شما

بدون دیدگاه

آموزش شبه عناصر در CSS

شبه عنصر first-line

شبه عنصر first-letter

شبه عنصر Before

شبه عنصر after

لیست جلسات قبل آموزش CSS

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه