بخش Vip سئو نود

بهترین فرصت برای یادگیری در قسمت Vip سئو نود هم اکنون برای دانشجوبان عزیز فراهم شده است

جزئیات بیشتر
آموزش یکبار برای همیشه
دوره جدید آموزش طراحی cms با php و mysql ، مشاهده دوره

آموزش سلکتور placeholder:: در css

مقالات طراحی سایت

چگونه روی ویژگی placeholder داخل المان های فرم کار کنیم ؟ استایل دهی به صفت placeholder داخل input و ...

0 71
آموزش سلکتور placeholder:: در css

در طراحی با زبان css با موضوعاتی روبرو هستیم تحت عنوان سلکتور ( selector ) ! این سلکتورها درحقیقت انتخاب کننده‌هایی هستند که به شما امکان خواهند داد تا هرچیزی داخل زبان html را انتخاب کرده و روی استایل آن یا به عبارتی ظاهر آن کار کنید .

معروف‌ترین سلکتورها یا همان انتخاب کننده‌ها در css همان کلاس و آیدی هستند که بیشترین کاربرد را در طراحی سایت و نشانه گذاری داخل html دارند . برای مثال اگر نمونه کد زیر را درنظر بگیریم :

<div class="header__wrapp"></div>

در این کد ، یک تگ div ایجاد کردیم و یک کلاس با نام header__wrapp به آن اختصاص دادیم ، اکنون اگر قصد داریم تا برای header__wrapp استایل بنویسیم در داخل فایل style.css باید به شکل زیر عمل کنیم :

.header__wrapp{
	width:200px;
	height:400px;
	background-color:#ddd;
	border-radius:6px;
}

مسلما بسیاری از شما دوستان به این مورد آشنایی دارید که برای انتخاب کلاس از نقطه ( . ) استفاده کرده و برای انتخاب المان هایی که آیدی دارند از ( # ) استفاده می‌کنیم . به عبارتی هردوی این موارد یک سلکتور یا انتخاب کننده هستند که می‌توانید بسادگی به کمک آنها استایل نویسی کنید .

اما این سلکتورها برای المان هایی از html که حتما صفت class یا id داشته باشند کاربرد دارد . انتخاب کننده‌هایی وجود دارند که برای کار توسط آنها نیازی نیست تا به یک المان در html صفاتی همچون کلاس و آیدی اختصاص دهیم و می‌توان آنها را برای کل پروژه یا بخشی از تگ های html که صفت خاصی دارند به کار گرفت . برای مثال نمونه زیر :

::selection{}

در مقاله قبلی ( قبل از همین مقاله ) در مورد selection صحبت کردیم که این مثال نیز دقیقا مشابه با موضوع همین مقاله است . انتخاب کننده placeholder نیز یکی از این انتخاب کننده‌‎ها است که می‌توان به کمک آن بخش هایی را که تصور می‌کنید نمی‌توان تغییر داد ، تغییر دهید . به مثال زیر دقت کنید :

<input type="text" placeholder="your name...">

در این مثال یک تگ input داریم که یک صفت به نام placeholder دارد . placeholder مسبب این خواهد شد که یک متن کمرنگ داخل input های فرم شما نمایش داده شود و شما هنگامی که جهت تایپ کردن داخل این ورودی فرم کلیک خواهید کرد ، بمحض تایپ کردن اولین حرف ، قسمت placeholder دیگر نمایش داده نخواهد شد .

نمونه placeholder در فرم سایت

اکنون سوال اینجاست که آیا می‌توان استایل این متن را تغییر داد ؟ المان هایی مثل اندازه فونت ، رنگ متن ، شفافیت و … را می‌توان تغییر داد اما چگونه ؟

چگونه به placeholder استایل دهیم ؟

برای اینکه به بخش placeholder استایل دهیم می‌توانیم به دو روش عمل کنیم ، اول اینکه برای کل پروژه استایل نویسی کنیم و تمامی placeholder های موجود در داخل فرم‌های پروژه را تغییر دهیم و یا اینکه برای قسمت خاصی از المان های فرم این کار را انجام دهیم مثلا تنها برای قسمت‌های textarea ویژگی های placeholder را تغییر دهیم . برای اینکار باید کد زیر را داخل فایل style.css قرار دهید :

::placeholder{
	font-size:14px;
	color:#ddd;
	opacity:0.8;
}

در این کد شما تمامی placeholder های موجود داخل المان های فرم همچون input و textarea را تغییر خواهید داد که انجام این کار به این روش توصیه می‌شود . اما اگر قصد داشتید تا برای تنها یک بخش این کار را انجام دهید باید به شکل زیر عمل کنید ، مثلا :

input::placeholder{
	font-size:13px;
}

حتی می‌توان برای حالت های خاص‌تر کدنویسی کرد مثلا برای قسمت هایی که برای کلمه عبور استفاده می‌کنید ، رنگ placeholder را پررنگ تر کنید ، همانند مثال زیر :

input[type="password"]::placeholder{
	color:#111;
}

پس توسط این ویژگی و سلکتور جذاب در css می‌توان روی قسمت پلیس‌هولدر نیز به راحتی کار کرد . در این قسمت استایل هایی که معمولا تغییر می‌دهیم ، رنگ متن داخل placeholder و اندازه فونت آن را تغییر می‌دهیم و تغییر آیتم های بیشتری از این بخش توصیه نمی‌شود .

زبان طراحی سی اس اس امکانات بسیاری را در اختیار شما قرار داده است اما لازم است تا با آنها آشنایی داشته باشید . در اینصورت می‌توان روی پروژه های طراحی سایت با قدرت بیشتری کار کرد . حتی ریزترین موارد نیر در طراحی سایت شما تاثیر دارند فلذا قسمت هایی همچون مثال این صفحه ، می‌تواند بسیار به شما در جهت کنترل قسمت های مختلف صفحه کمک کند .

تقریبا تمامی استایل های مربوط به بخش متون را می‌توان داخل بخش placeholder تغییر داد یعنی استایل هایی همچون font-size و font-weight و color و font-style و … را در این بخش اضافه کرد . اما همانطور که در بالا گفته شد بهتر است تغییرات داخل این قسمت بسیار ریز باشد . امیدواریم محتوای این بخش برای شما مفید واقع شود . سئوالات خودتان را در این مورد داخل بخش دیدگاه‌ها با ما به اشتراک بگذارید . موفق باشید .

امید قدیمی

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

نقشه راه فرانت

اگر قصد دارید تا یک طراح ماهر باشید ، ما درست ترین مسیر را برای شما فراهم کردیم و فقط کافیست همراه ما باشید

شاید این مطالب نیز برای شما جالب باشد

چگونه میتوانیم با پرداخت فقط 500 هزار تومان یک وب سایت برای کسب و کار خودمان داشته باشیم ؟ برای طراحی سایت 500 هزار تومان کافیست یا نه ؟ سیر تا پیاز طراحی سایت های ارزان را در این مقاله مطالعه کنید !

4 428

در این مقاله یکبار برای همیشه تفاوت بین سه مقدار نوع نمایشی یعنی display های inline , inline-block , block را بررسی خواهیم کرد تا در هنگام استایل نویسی ، بسیار راحت تر و روان تر عمل کنید .

2 901
دیدگاه ها و نظرات
توجه کامنت های انگلیسی تایید نخواهند شد در صورت داشتن مشکل ، قبل از ارسال دیدگاه نظرات سایر دوستان را نیز مطالعه فرمائید برای مشاهده پاسخ دیدگاه ها بر روی علامت " " کلیک کنید
اشتراک دیدگاه
captcha
تکمیل تمامی فیلد ها الزامی است

آموزش های رایگان بیشتر در آپارات و یوتیوب سئو نود
کانال آپارات سئو نود چنل یوتیوب سئو نود