Subtotal	0 تومان

آموزش HTML و CSS آموزش after:: و before:: در CSS | پاسخ وردپرس |

بدون دیدگاه 1 دقیقه

مطالب پیشنهادی برای شما مهمان عزیز

آموزش html و css آموزش طراحی بخش محتوا سایت بخش اول | پاسخ وردپرس |

آموزش html5 و css3 جلسه ۷ خصوصیات های css

بنام خدا سلام ,

درخدمت شما کابران عزیز هستم با یکی دیگه از آموزشهای وب سایت
پاسخ وردپرس با آموزش آموزش after:: و before:: در CSS

آموزش after:: و before:: در CSS

این دو انتخابگر از نوع pseudo element می باشند که در نگاه اول و در تعریف اولیه می توان گفت این امکان
را به ما می دهند تا از طریق CSS بتوانیم محتوا وارد صفحه کنیم بدون اینکه نیازی به انجام تغییری در HTML باشد.

در دنیای مرورگرها امروزه به جایی رسیده ایم که می توان از این دو عنصر در صورت نیاز استفاده کرد.
توجه داشته باشید که در مرورگرهای عزیز IE هم, از IE8 به بالا این دو عنصر پشتیبانی می شوند.
برای اطلاعات بیشتر در مورد پشتیبانی مرورگرها به این سایت سر بزنید.

وارد کردن محتوی از طریق CSS

نگاهی به گذشته در css2

/* CSS3 syntax */
::after

/* CSS2 syntax */
:after

/* CSS3 syntax */

::after

/* CSS2 syntax */

:after

فرض کنید عنصری با کلاس element در HTML وجود دارد. کاربرد این عناصر در ساده ترین حالت به طریق زیر است.

کد HTML

<p class="boring-text">Here is some plain old boring text.</p>
<p>Here is some normal text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.</p>

Here is some plain old boring text.

Here is some normal text that is neither boring nor exciting.

Contributing to MDN is easy and fun.

کدCSS

.exciting-text::after {
  content: " <- EXCITING!"; 
  color: green;
}
<div style="clear:both; margin-top:1.5em; margin-bottom:1.5em;"><a href="https://replywp.com/tutorial-designing-html-and-css-templates-part-6/" target="_blank" rel="nofollow" class="IRPP_ruby"><!-- INLINE RELATED POSTS 1/3 //--><style> .IRPP_ruby , .IRPP_ruby .postImageUrl , .IRPP_ruby .centered-text-area { height: 130px; position: relative; } .IRPP_ruby , .IRPP_ruby:hover , .IRPP_ruby:visited , .IRPP_ruby:active { border:0!important; } .IRPP_ruby .clearfix:after { content: ""; display: table; clear: both; } .IRPP_ruby { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #ECF0F1; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); } .IRPP_ruby:active , .IRPP_ruby:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #e6e6e6; } .IRPP_ruby .postImageUrl { background-position: center; background-size: cover; float: right; margin: 0; padding: 0; width: 31.59%; } .IRPP_ruby .centered-text-area { float: left; width: 65.65%; padding:0; margin:0; } .IRPP_ruby .centered-text { display: table; height: 130px; right: 0; top: 0; padding:0; margin:0;float: left;width: 100%; } .IRPP_ruby .IRPP_ruby-content { display: table-cell; margin: 0; padding: 0 0px 0 74px; position: relative; vertical-align: middle; width: 100%; } .IRPP_ruby .ctaText { border-bottom: 0 solid #fff; color: #2980B9; font-size: 13px; font-weight: bold; margin: 0; padding: 0; } .IRPP_ruby .postTitle { color: #000000; font-size: 16px; font-weight: 600; margin: 0; padding: 0; } .IRPP_ruby .ctaButton { background: url(https://replywp.com/wp-content/plugins/intelly-related-posts-pro/assets/images/next-arrow.png)no-repeat; display: inline-block; height: 130px; width: 54px; } .IRPP_ruby .ctaButton { background-color: #2980B9; margin-left: 10px; position: absolute; left: 0; top: 0; } .IRPP_ruby:after { content: ""; display: block; clear: both; } </style><div data-bg="https://replywp.com/wp-content/uploads/2018/06/how-tow-html-and-css-theme.jpg" class="postImageUrl rocket-lazyload" style=""></div><div class="centered-text-area"><div class="centered-text"><div class="IRPP_ruby-content"><div class="ctaText">بیشتر بخوانید :</div><div style="clear:both"></div><div class="postTitle">آموزش طراحی قالب html و css طراحی بخش سایدبار استایل خبرنامه | پاسخ وردپرس |</div></div></div><div class="ctaButton"></div></div></a></div>
.boring-text::after {
  content: " <- BORING";
  color: red;
}

.exciting-text::after {

content: " <- EXCITING!";

color: green;

}

.boring-text::after {

content: " <- BORING";

color: red;

}

نتیجه

یک مثال دیگه

ما می توانیم متن یا تصاویر را در contentاموال تقریبا به طریقی که می خواهیم، سبک کنیم.

کد HTML

<span class="ribbon">Look at the orange box after this text. </span>

1	<span class="ribbon">Look at the orange box after this text. </span>

کدCSS

.ribbon {
  background-color: #5BC8F7;
}

.ribbon::after {
  content: "This is a fancy orange box.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}

.ribbon {

background-color: #5BC8F7;

}

.ribbon::after {

content: "This is a fancy orange box.";

background-color: #FFBA10;

border-color: black;

border-style: dotted;

}

نتیجه

راهنما

این مثال با استفاده ::after، در رابطه با attr()بیان CSS و یک data-descr ویژگی داده های سفارشی ، برای ایجاد راهنمای ابزار. هیچ جاوا اسکریپتی لازم نیست!

کد HTML

<p>Here we have some
  <span data-descr="collection of words and punctuation">text</span> with a few
  <span data-descr="small popups that appear when hovering">tooltips</span>.
</p>

Here we have some

text with a few

tooltips.

کدCSS

span[data-descr] {
  position: relative;
  text-decoration: underline;
  color: #00F;
  cursor: help;
}
<div style="clear:both; margin-top:1.5em; margin-bottom:1.5em;"><a href="https://replywp.com/learn-html-and-css-free-block-level-inline-part-18/" target="_blank" rel="nofollow" class="IRPP_ruby"><!-- INLINE RELATED POSTS 2/3 //--><style> .IRPP_ruby , .IRPP_ruby .postImageUrl , .IRPP_ruby .centered-text-area { height: 130px; position: relative; } .IRPP_ruby , .IRPP_ruby:hover , .IRPP_ruby:visited , .IRPP_ruby:active { border:0!important; } .IRPP_ruby .clearfix:after { content: ""; display: table; clear: both; } .IRPP_ruby { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #ECF0F1; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); } .IRPP_ruby:active , .IRPP_ruby:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #e6e6e6; } .IRPP_ruby .postImageUrl { background-position: center; background-size: cover; float: right; margin: 0; padding: 0; width: 31.59%; } .IRPP_ruby .centered-text-area { float: left; width: 65.65%; padding:0; margin:0; } .IRPP_ruby .centered-text { display: table; height: 130px; right: 0; top: 0; padding:0; margin:0;float: left;width: 100%; } .IRPP_ruby .IRPP_ruby-content { display: table-cell; margin: 0; padding: 0 0px 0 74px; position: relative; vertical-align: middle; width: 100%; } .IRPP_ruby .ctaText { border-bottom: 0 solid #fff; color: #2980B9; font-size: 13px; font-weight: bold; margin: 0; padding: 0; } .IRPP_ruby .postTitle { color: #000000; font-size: 16px; font-weight: 600; margin: 0; padding: 0; } .IRPP_ruby .ctaButton { background: url(https://replywp.com/wp-content/plugins/intelly-related-posts-pro/assets/images/next-arrow.png)no-repeat; display: inline-block; height: 130px; width: 54px; } .IRPP_ruby .ctaButton { background-color: #2980B9; margin-left: 10px; position: absolute; left: 0; top: 0; } .IRPP_ruby:after { content: ""; display: block; clear: both; } </style><div data-bg="https://replywp.com/wp-content/uploads/2018/05/html-and-css.jpg" class="postImageUrl rocket-lazyload" style=""></div><div class="centered-text-area"><div class="centered-text"><div class="IRPP_ruby-content"><div class="ctaText">بیشتر بخوانید :</div><div style="clear:both"></div><div class="postTitle">آموزش html و css آموزش عناصر inline level و block level در HTML | پاسخ وردپرس |</div></div></div><div class="ctaButton"></div></div></a></div>
span[data-descr]:hover::after {
  content: attr(data-descr);
  position: absolute;
  left: 0;
  top: 24px;
  min-width: 200px;
  border: 1px #aaaaaa solid;
  border-radius: 10px;
  background-color: #ffffcc;
  padding: 12px;
  color: #000000;
  font-size: 14px;
  z-index: 1;
}

span[data-descr] {

position: relative;

text-decoration: underline;

color: #00F;

cursor: help;

}

span[data-descr]:hover::after {

content: attr(data-descr);

position: absolute;

left: ;

top: 24px;

min-width: 200px;

border: 1px #aaaaaa solid;

border-radius: 10px;

background-color: #ffffcc;

padding: 12px;

color: #000000;

font-size: 14px;

z-index: 1;

}

نتیجه

: یا ::؟

همه مرورگرها هر دو روش نوشتن را پشتیبانی می کنند اما IE8 فقط : را پشتیبانی می کند پس بهترین روش برای نوشتن در حال حاضر به قرار زیر است.

div:after
{
  content: 'Hoy!';
}

div:after

{

content: 'Hoy!';

}

توجه داشته باشید که استفاده از :: استاندارد امروزه می باشد.

توجه: این عناصر واقعی نیستند پس از قرار دادن محتوایی که برایتان اهمیت دارد و ضروری است در این عناصر خودداری کنید. به عنوان مثال محتوایی که می خواهید موتورهای جستجو ببینند در این عناصر قرار ندهید.

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

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

آموزش غیرفعال کردن آپدیت خودکار وردپرس

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

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام یا پیج یوتیوب پاسخ وردپرس عضو شوید.

زمان الله ابراهیمی

یک برنامه نویس آزاد که علاقه زیادی به اشتراک گذاری اطلاعات خود با دیگران داردم. همیشه به وردپرس فکر می کنم و عاشق وردپرس هستم. من یک web developer هستم و هدف من آسان کردن ورود سایر دوستان به این شغل جذاب هست. زبان برنامه نویسی محبوب من PHP هست.

آموزش after:: و before:: در CSS

وارد کردن محتوی از طریق CSS

کد HTML

کدCSS

نتیجه

یک مثال دیگه

کد HTML

کدCSS

نتیجه

راهنما

کد HTML

کدCSS

نتیجه

: یا ::؟

توجه داشته باشید که استفاده از :: استاندارد امروزه می باشد.

نظر شما در این‌باره چیست؟لغو پاسخ

نظر شما در این‌باره چیست؟
لغو پاسخ