طراحی وب سایت قدرتمند، امن و با کیفیت را با شرکت سایت سازان تجربه کنید !
02188471521 –– 02140881038 –– 09120199386

منو راهنما، منو کشویی، تولتیپ و انتخاب المان بر اساس خصیصه

منو راهنما، منو کشویی، تولتیپ و انتخاب المان بر اساس خصیصه

دوستان عزیز سلام؛ امروز هم در خدمت شما عزیزان هستم و در آموزش CSS – بخش نهم می خواهیم از ویژگی هایی که تاکنون آموخته ایم استفاده کنیم و چند مثال کاربردی و جالب را بررسی کنیم. عناوین مطالب این جلسه عبارتند از:

  • طراحی منو راهنما با CSS
  • طراحی منو کشویی با CSS
  • ساخت تولتیپ
  • انتخاب کردن عناصر بر اساس خصیصه های آن ها

خب بیایید با منوی راهنما شروع کنیم و ببینیم که چطور می توانیم یک منوی راهنمای کاربر را ایجاد کنیم. البته بهتره که مروری بر جلسه هشتم آموزش HTML داشته باشید.

طراحی منو راهنما با CSS

منوی راهنما کجای یک سایت قرار دارد؟ چرا این منو را می سازیم؟

بله دوستان، در هر وب سایت باید منویی برای راحتی کاربران داشته باشیم تا کاربر به راحتی به صفحات مختلف وب سایت ما دسترسی داشت باشد. این منو معمولا در قسمت هِدِر سایت قرار دارد و شامل لینک صفحات خانه، مقالات، تماس با ما، ارتباط با ما و … می باشد.

برای طراحی یک منوی راهنما، از لیست ها (معمولا لیست های نا مرتب) استفاده می کنیم. اما همانطور که میدانید موارد یک لیست به طور پیش فرض با دایره هایی توپر نشانه گذاری می شوند. پس باید در قدم اول نشانه گذاری موارد را حذف کنیم.

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

ul {

    list-style-type: none;

    margin: 0;

    padding: 0;

}

خب حالا می توانیم این لیست را به صورت عمودی و یا افقی طراحی کنیم که در ادامه با هم این کار را انجام می دهیم:

نوار راهنمای عمودی

قبل از توضیح ادامه مراحل به این سوال که: موارد این لیست ما که می خواهیم به یک نوار راهنما تبدیل کنیم، چی هستند؟

بله درست فرمودید (!) موارد این لیست عنصر <a> می باشد یعنی یک لینک که باید کاربر را به صفحه خاصی هدایت کند.

خب همانطور که می دانید، در یک لینک فقط متن لینک قابل کلیک می باشد. اگر بخواهیم اطراف متن هم قابل کلیک باشد، باید دستور display: block  را برای تگ <a>  بنویسیم.

حالا هر لینک تمام عرض مرورگر را در بر می گیرد، بنابراین در هر نقطه از عرض مرورگر که در امتداد لینک قرار دارد، قابل کلیک خواهد بود. پس چکار می کنیم؟

بله باز هم درست گفتید، عرض لینک ها را محدود می کنیم با استفاده از ویژگی width . حال می توانیم رنگ زمینه ای را برای تگ <a>  نیز انتخاب کنیم. مثال ساده زیر را ببینید:

/*style.css*/
body {
    font-family: "iran sans";
    direction: rtl;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
li a {
    display: block;
    width: 70px;
    background-color: #66ffcc;
}
<body>
 <ul>
  <li><a href="#">خانه</a></li>
  <li><a href="#">مقالات</a></li>
  <li><a href="#">در باره ما</a></li>
  <li><a href="#">تماس با ما</a></li>
 </ul>
</body>

آموزش CSS – بخش نهم

حال در دستورات CSS دستور width: 70px  را حذف کنید و نتیجه را مشاهده کنید.

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

/*style.css*/
ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100px;
	background-color: #f1f1f1;
}
li a {
	display: block;
	padding: 10px 5px;
	text-decoration: none;
}
li a:hover {
	background-color: #a0a0a0;
	color: white;
}
<body>
 <ul>
 	<li><a href="#">خانه</a></li>
 	<li><a href="#">مقالات</a></li>
 	<li><a href="#">در باره ما</a></li>
 	<li><a href="#">تماس با ما</a></li>
 </ul>
</body>

آموزش CSS – بخش نهم

فعال کردن لینک کلیک شده

حالا کاربر فرضا صفحه “درباره ما” را کلیک می کنید. یعنی این گزینه باید فعال باشد. برای این کار برای لینک درباره ما یک کلاس، مثلا active انتخاب می کنیم و به آن سبک دهی می کنیم. مثال زیر را بررسی کنید:

/*style.css*/
body {
    font-family: "iran sans";
    direction: rtl;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100px;
    background-color: #a0a0a0;
}
li a {
    display: block;
    padding: 10px 5px;
    text-decoration: none;
}
li a:hover {
    background-color: #aaaaaa;
    color: white;
}
li a.active {
    background-color: rgba(241, 241, 241, 0.9);
}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> page Title </title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <ul>
  <li><a href="#">خانه</a></li>
  <li><a href="#">مقالات</a></li>
  <li><a href="#" class="active">در باره ما</a></li>
  <li><a href="#">تماس با ما</a></li>
 </ul>
</body>
</html>

آموزش CSS – بخش نهم

حالا من فکر می کنم که موارد این منو اگر حاشیه داشته باشند و متن ها وسط چین شوند، منوی بهتری خواهیم داشت.

مثال زیر رو نگاه کنید:

/*style.css*/
ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100px;
	background-color: #a0a0a0;
	border: 1px solid black;
}
li a {
	display: block;
	padding: 10px 5px;
	text-decoration: none;
}
li {
	text-align: center;
	border-bottom: 1px solid black;
}
li:last-child {
	border-bottom: none;
}
li a:hover {
	background-color: #aaaaaa;
	color: black;
}
li a.active {
	background-color: rgba(241, 241, 241, 0.9);
	color: black;
}
li a:hover:not(.active) {
	background-color: rgba(241, 241, 241, 0.9);
}
<body>
 <ul>
 	<li><a href="#">خانه</a></li>
 	<li><a href="#">مقالات</a></li>
 	<li><a class="active" href="#">در باره ما</a></li>
 	<li><a href="#">تماس با ما</a></li>
 </ul>
</body>

آموزش CSS – بخش نهم

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

/*style.css*/
ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	background-color: #abcdef;
	width: 25%;
	position: fixed;
	height: 10000px;
	overflow: auto;
}
li a {
	display: block;
	padding: 10px 5px;
	text-decoration: none;
}
li {
	text-align: center;
}
li a:hover {
	background-color: #a0a0a0;
	color: black;
}
li a.active {
	background-color: rgba(241, 241, 241, 0.5);
	color: black;
}
li a:hover:not(.active) {
	background-color: rgba(241, 241, 241, 0.5);
}
div {
	width: 75%;
	height: 10000px;
	float: left;
}
p {
	padding: 5px;
}
<body>
  <div>
  	<p>در این دایو محتوای طولانی را می توانید قرار دهید و با اسکرول کردن صفحه منوی کناری ثابت خواهد ماند</p>
  </div>
 <ul>
 	<li><a class="active" href="#">خانه</a></li>
 	<li><a href="#">مقالات</a></li>
 	<li><a href="#">در باره ما</a></li>
 	<li><a href="#">تماس با ما</a></li>
 </ul>
</body>

آموزش CSS – بخش نهم

حال بیایید نحوه طراحی منوی راهنمای افقی را بررسی کنیم:

طراحی منوی راهنمای افقی

منوی راهنما را به دو صورت می توان ایجاد کرد. در روش اول می توانیم نحوه نمایش <li>  ها را به inline  تغییر دهیم و در روش دوم آنها را شناور می کنیم (با استفاده از ویژگی float ). به مثال زیر توجه کنید:

/*style.css*/
ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
li {
	display: inline;
}

آموزش CSS – بخش نهم

در مثال زیر میبینیم که با شناور کردن <li>  ها به راحتی می توان منوی افقی ایجاد کرد. اما هنگام استفاده از ویژگی float  باید نکاتی را رعایت کنیم:

نخست این که ابتدا لینک ها را چپ چین یا راست چین می کنیم. در ادامه باید نحوه نمایش لینک ها (یعنی <a>  ) را به block تغییر دهیم تا بتوانیم با استفاده از ویژگی padding ، ناحیه ای قابل کلیک را ایجاد کنیم (یعنی فقط متن لینک قابل کلیک نباشد.) همچنین فاصله ای را بین لینک ها قرار دهیم که این فاصله ها قابل کلیک خواهند بود.

/*style.css*/
ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
li {
	float: right;
}
li a {
	display: block;
	padding: 10px;
	background-color: #a0a0a0;
}
<body>
 <ul>
 	<li><a href="#">خانه</a></li>
 	<li><a href="#">مقالات</a></li>
 	<li><a href="#">در باره ما</a></li>
 	<li><a href="#">تماس با ما</a></li>
 </ul>
</body>

آموزش CSS – بخش نهم

و یک مثال بهتر:

/*style.css*/
ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #a0a0a0;
}
li {
	float: right;
}
li a {
	display: block;
	text-decoration: none;
	text-align: center;
	padding: 10px 15px;
}
li a:hover {
	background-color: rgba(191, 191, 191, 0.5);
	color: purple;
}
li a.active {
	background-color: rgb(191, 191, 191);
}
<body>
 <ul>
 	<li><a class="active" href="#">خانه</a></li>
 	<li><a href="#">مقالات</a></li>
 	<li><a href="#">در باره ما</a></li>
 	<li><a href="#">تماس با ما</a></li>
 </ul>
</body>
</html>

آموزش CSS – بخش نهم

اما چطور برای گزین های منو حاشیه ایجاد می کنیم؟

بله، درسته، با استفاده از ویژگی border-right/left  می توان سمت چپ یا راست li ها حاشیه را ایجاد کرد.

آموزش CSS – بخش نهم

حاشیه گزینه آخر را با کلاس مجازی last-child  از بین می بریم.

ul li:last-child {
	border-left: none;
}

آموزش CSS – بخش نهم

خب دوستان، حال می بینیم که با چه ویژگی هایی می توان منو را ثابت نگه داشت به طوری که با اسکرول صفحه، همواره در بالای صفحه قرار داشته باشد:

با استفاده از ویژگی position می توان ul  را در بالا یا پایین صفحه قرار داد. در مثال بالا برای ul ویژگی position و top را تنظیم می کنیم تا منوی ثابتی ایجاد شود و کاربر با اسکروا کردن صفحه، همچنان منو را در بالای صفحه مشاهده کند:

/*style.css*/
ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #a0a0a0;
	position: fixed;
	top: 0;
	width: 100%;
}
li {
	float: right;
	border-left: 1px solid white;
}
ul li:last-child {
	border-left: none;
}
li a {
	display: block;
	text-decoration: none;
	text-align: center;
	padding: 10px 15px;
}
li a:hover {
	background-color: rgba(191, 191, 191, 0.4);
	color: purple;
}
li a.active {
	background-color: rgba(191, 191, 191, 0.9);
}
div {
	width: 100%;
	height: 10000px;
	background-color: rgba(191, 191, 191, 0.3);
	margin-top: 40px;
}
<body>
 <ul>
 	<li><a class="active" href="#">خانه</a></li>
 	<li><a href="#">مقالات</a></li>
 	<li><a href="#">در باره ما</a></li>
 	<li><a href="#">تماس با ما</a></li>
 </ul>
 <div>
 	<p>با اسکرول کردن صفحه، منو در بالای صفحه ثابت خواهد ماند</p>
 </div>
</body>

آموزش CSS – بخش نهم

اگر <ul>  را با دستور bottom: 0;  سبک دهی کنیم، منو به پایین صفحه منتقل می شود:

آموزش CSS – بخش نهم

خب دوستان، حتما در بعضی سایت ها دیده اید که با قرار دادن موس بر روی یکی از گزینه های منو، لیستی کشویی باز می شود که شما می توانید روی گزینه های آن کلیک کنید. در ادامه می خواهم نحوه ایجاد همچین گزینه هایی را برای شما دوستان شرح دهم:

طراحی منو کشویی با CSS

با استفاده از CSS می توان جعبه هایی ایجاد کرد که با قرار دادن نشانگر موس روی المانی خاص، آن جعبه ها ظاهر شوند و محتوایی خاص (عکس، لیست، متن و …) را نمایش دهند.

برای طراحی چنین اجزایی به ترتیب زیر عمل می کنیم:

  • در قسمت کدهای HTML

در ابتدا یک المان دربرگیرنده را ایجاد می کنیم. مثلا یک دیو کلاس dropdown.

حال المانی که می خواهیم با قرار گیری موس بر روی آن جعبه کشویی باز شود را ایجاد می کنیم. این المان می تواند یک <span>  و یا یک <button>  باشد.

حال باید المان دیگری را ایجاد کنیم که نقش جعبه کشویی را ایفا کند. مثلا یک دیو کلاس dropdown-content  که درون این عنصر، محتوای مورد نظر ما قرار می گیرد.

  • در قسمت دستورات CSS

المان دربرگیرنده یعنی .dropdown  را با استفاده از دستور position: relative  تثبیت مکانی می کنیم و نحوه نمایش آن را به inline-block  تغییر می دهیم.

حال به سراغ المان .dropdown-content  می رویم. در ابتدا می خواهیم که این المان نمایش داده نشود. بنابراین دستور display: none  را برای آن می نویسیم. حال می خواهیم که این المان نسبت به پدر خود (یعنی .dropdown ) تثبیت مکانی شود. بنابراین دستور position: absolute  را برای آن می نویسیم. و در ادامه سبک های دلخواه را برای نمایش زیباتر به آن می دهیم.

در قدم بعدی تعیین می کنیم که با قرار گیری موس روی div.dropdown  نحوه ی نمایش المان dropdown.content  به صورت بلوکی باشد.

مراحل بالا را در مثال زیر با هم می بینیم:

/*style.css*/
div.dropdown {
	position: relative;
	display: inline-block;
}
div.dropdown-content {
	display: none;
	position: absolute;
 min-width: 70px;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	padding: 10px 15px;
	background-color: #f9f9f9;
}
div.dropdown:hover div.dropdown-content {
	display: block;
}
<body>
 <div class="dropdown">
  <span>نشانگر موس را بر روی این قسمت قرار دهید</span>
  <div class="dropdown-content">
	<p>محتوایی که می خواهیم به کاربر نمایش دهیم!!</p>
  </div>
 </div>
</body>

آموزش CSS – بخش نهم

یک مثال بهتر در این زمینه را ببینید:

/*style.css*/
div.dropdown {
	position: absolute;
	display: inline-block;

}
button.dropbtn {
	background-color: #a0a0a0;
	color: white;
	border: none;
	padding: 20px;
	width: 150px;
	cursor: pointer;
}
div.dropdown-content {
	display: none;
	position: relative;
	background-color: #f1f1f1;
	width: 100%;
	overflow: auto;
	box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.5);
}
div.dropdown:hover div.dropdown-content {
	display: block;
}
div.dropdown-content a {
	text-decoration: none;
	display: block;
	padding: 5px;
}
<body>
	<div class="dropdown">
		<button class="dropbtn" type="button" name="button">دکمه </button>
		<div class="dropdown-content">
		 <a href="#">لینک 1</a>
		 <a href="#">لینک 2</a>
		 <a href="#">لینک 3</a>
		 <a href="#">لینک 4</a>
		</div>
	</div>
</body>

آموزش CSS – بخش نهم

تمرین: یک منوی راهنما بسازید و یکی از گزینه های آن را به صورت بالا بسازید.

می توان به جای لینک ها، عکسی را به عنوان جزء فهرست کشویی در صفحه قرار داد. با همان دستورات CSS ، کدهای HTML زیر را در ادیتور بنویسید:

<body>
 <div class="dropdown">
  <img src="images/img01.jpg" alt="naturalpicture" width="50" height="25">
  <div class="dropdown-content">
	<img src="images/img01.jpg" alt="naturalpicture" width="200" height="100">
	<p>some text for caption</p>
  </div>
 </div>
</body>

آموزش CSS – بخش نهم

خب دوستان عزیزم، حالا نحوه طراحی نوار راهنما را می آموزیم.

طراحی نوار راهنما

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

برای طراحی تولتیپ نیز به ترتیب زیر عمل می کنیم:

  • در قسمت HTML

در ابتدا باید المان دربرگیرنده تولتیپ را ایجاد کنیم. فرضا <div class=”tooltip”>

حال باید متن راهنمای کاربر را در یک المان قرار دهیم. به عنوان مثال <span class=”tooltiptext”>

  • در بخش CSS

در ابتدا div.tooltip  را به این صورت سبک دهی می کنیم که به صورت relative  تثبیت مکانی شود و نحوه نمایش آن inline-block  باشد.

در قدم بعدی باید span.tooltiptext  را سبک دهی کنیم. اولین کاری که می کنیم پنهان سازی آن با استفاده از دستور visibility: hidden;  می باشد. و در قدم بعدی باید آن را تثبیت مکانی کنیم. و سپس CSS های دلخواه دیگر را به آن اعمال می کنیم.

در قدم سوم تعیین می کنیم که زمانی که نشانگر موس روی div.tooltip  حرکت کرد، span.tooltiptext  نمایش داده شود و شفافیت آن به عدد 1 تغییر یابد.

در CSS ها دستور transition  را استفاده کرده این که تعیین می کند در مدت زمان 5 ثانیه، شفافیت تغییر یابد. با این ویژگی در جلسه یازدهم CSS آشنا خواهیم شد.

لطفا خط به خط دستورات مثال زیر را بررسی کنید:

/*style.css*/
body {
    font-family: "iran sans";
    direction: rtl;
}
div.tooltip {
    position: relative;
    display: inline-block;
}
div.tooltip span.tooltiptext {
    visibility: hidden;
    width: 100px;
    background-color: #000000;
    color: #ffffff;
    text-align: center;
    border-radius: 10px;
    padding: 7px 2px;
    position: absolute;
    z-index: 1;
    top: 100%;
    right: 50%;
    opacity: 0;
    transition: opacity 5s;
}
div.tooltip:hover span.tooltiptext {
    visibility: visible;
    opacity: 1;
}
<body>
 <div class="tooltip">نشانگر موس را اینجا قرار دهید!!
  <span class="tooltiptext">متن راهنمای کاربر</span>
 </div>
</body>

آموزش CSS – بخش نهم

حالا بیایید ببینیم مکان این نوار راهنما رو چطور می توانیم تنظیم کنیم؟

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

ابتدا ویژگی های visibility  و opacity  و transition  را در قسمت span.tooltiptext  کامنت می کنیم تا تولتیپ نمایش داده شود.

حال به سراغ ویژگی های top  و right  می رویم. مقدار این دو ویژگی را صفر می دهیم. اگر مرورگر را رفرش کنید، تولتیپ دقیقا بر روی دیو قرار می گیرد. صفر مبدا این مکان است. حال نسبت به این مکان ویژگی های top  و right  را مقدار دهی می کنیم.

چون می خواهیم نوار راهنما کاملا در سمت راست دیو باشد، مقدار ویژگی right را 100% می دهیم. (می توانید مقدار مناسب را با هر واحدی انتخاب کنید که در این صورت باید هر مقدار را چک کنید تا ببینید تولتیپ کاملا در سمت چپ دیو قرار گرفته است یا نه؟)

وقتی که مقدار right را 100% تعیین کردید یعنی تولتیپ را 100 درصد ( اندازه کل عرض div.tooltip  ) از سمت راست از divtooltip  فاصله داده اید. حال برای تنظیم تولتیپ در راستای div.tooltip  مقدار top  را با توجه به فاصله داخلی span.tooltip  تعیین می کنیم. مقدار padding  هر چقدر بود، منفی آن را برای ویژگی top  تنظیم می کنیم. (انتخاب این مقادیر دلخواه است و بستگی به مکان دلخواه تولتیپ دارد.)

با همان دستورات css مثال قبل، ویژگی های top  ، bottom  ، right  و left  را برای قرار دادن تولتیپ در 4 سمت div.tooltip  بررسی می کنیم. قبلا هم پَدینگ بالا و پایین spon.tooltip  را 7px تنظیم کرده ایم:

تولتیپ در سمت راست:

top: -7px;
left: 100%;

آموزش CSS – بخش نهم

تولتیپ در سمت چپ دیو:

top: -7px;
right: 100%;

آموزش CSS – بخش نهم

تولتیپ بالای دیو:

right: 0px;
bottom: 100%;

آموزش CSS – بخش نهم

تولتیپ پایین دایو:

right: 0px;
top: 100%;

آموزش CSS – بخش نهم

روش دیگری که برای تنظیم تولتیپ در بالا یا پایین داریم این است که margin  چپ یا راست span.tooltiptext  را منفی نصف عرض آن تنظیم کنیم.

در مثال های بالا عرض span.tooltiptext  برابر 110 پیکسل است که نصف آن 55 پیکسل خواهد بود. بنابراین برای تنظیم تولتیپ در پایین دیو دستورات زیر را می نویسیم:

right: 50%;
top: 100%;
margin-right: -55px

آموزش CSS – بخش نهم

خب دوستان عزیز، حال می خواهیم مبحث مهم دیگری را بررسی کنیم.

ما می توانیم از طریق خصیصه های المان ها به آن ها دسترسی داشته باشیم. بیایید با هم این موضوع مهم را بررسی کنیم:

انتخاب المان ها با استفاده از خصیصه ها

باید اعتراف کنم (!) که می توانیم از طریق خصیصه و حتی مقدار خصیصه ها، المان های مختلف را انتخاب کرد:

انتخاب کننده [attribute]

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

a[target] { css rules }

انتخاب کننده [attribute=”value”]

این انتخاب کننده عنصر را با خصیصه و مقدار آن انتخاب می کند:

element[attribute="value"]

انتخاب کننده [attribute~=”value”]

این انتخاب کننده المان هایی را انتخاب می کند که خصیصه ای از آنها چند قسمتی باشد که یک قسمت از آن value باشد. خب این یعنی چی؟

فرض کنید که دو المان داریم که المان اول کلاس main container  و المان دوم کلاس main-container  دارد. وقتی که این انتخاب کننده را به صورت زیر به کار ببریم فقط المان اول انتخاب می شود:

[class~="container"]

انتخاب کننده [attribute|=”value”]

این انتخاب کننده المان هایی را انتخاب می کند که خصیصه ای داشته باشند که مقدار آن با value  آغاز شود.

توجه کنید که این انتخاب کننده المان هایی را انتخاب می کند که مقدار خصیصه آنها بصورت value-anyword  یا فقط value  باشد. یعنی با value  شروع می شود. اگر مقدار خصیصه valueanyword  باشد، آن عنصر انتخاب نخواهد شد.

انتخاب کننده [attribute^=”value”]

این انتخاب کننده المان هایی که خصیصه ای با مقدار value  یا value-anyword  و یا valueanyword  داشته باشند را انتخاب می کند.

انتخاب کننده [attribute$=”value”]

این انتخاب کننده المان هایی را انتخاب می کند مقدار خصیصه آن ها با value  تمام شود. یعنی المان هایی که خصیصه آن ها مقادیر value  یا anyword-value  و یا anywordvalue  باشد را انتخاب می کند.

انتخاب کننده [attribute*=”value”]

این انتخاب کننده المان هایی را انتخاب می کند که خصیصه آنها شامل value  باشد را انتخاب می کند. مقدار خصیصه به هر صورتی می تواند باشد.

انتخاب ورودهای فرم ها

انتخاب کننده های زیر، ورودی های فرم را انتخاب می کنند:

Input[type="text"]

Input[type="button"]

Input[type="anytype"]

دوستان عزیزم آموزش CSS – بخش نهم را هم در اینجا به پایان می رسانم. نظرات، انتقادات و پیشنهادات فراموش نشه. هدف ما تهیه آموزش طراحی سایت مطابق با خواست و نیاز شماست و با همکاری شما عزیزان آموزش های مفیدتری را ارائه خواهیم داد.

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

سرافراز باشید.

دیدگاه ‏خود را بنویسید