در این قسمت از آموزش ، مقدماتی در مورد انتخابگرهای کلاس HTML/CSS و شناسه، به نمونه‌های خلاقانه‌ای می‌پردازیم که بینش ارزشمندی را در مورد قدرت این انتخابگرها در ارائه توانایی نامحدود برای طراحی وب ارائه می‌دهند.
تعامل HTML و CSS
CSS مخفف “Cascading Style Sheet” است و در ارتباط با HTML (زبان نشانه گذاری فرامتن) به عنوان ابزاری قدرتمند برای ایجاد طراحی و طرح بندی وب استفاده می شود. HTML از شناسه و کلاس ویژگی های CSS برای اضافه کردن هر تعداد سبک برای بهبود محیط وب شما استفاده می کند.
ID در مقابل کلاس:
گرچه عملکردهای مشابهی دارند، اما یکسان نیستند و همیشه هدف مشترکی ندارند.
- شناسه ها منحصر به فرد هستند
- هر عنصر می تواند تنها یک شناسه داشته باشد.
- هر شناسه می‌تواند تعداد نامحدودی از سبک‌های اعمال شده روی آن داشته باشد.
- هر صفحه می تواند تنها یک عنصر با آن شناسه داشته باشد.
- شناسه ها از “#” در CSS استفاده می کنند که همچنین می تواند به عنوان یک شناسه برای “پیوندهای پرش” (hyperlinks) HTML استفاده شود.این به شما امکان می دهد در همان صفحه وب از یک مکان به مکان دیگر بپرید و همچنین می توانید از آن در ایجاد یک فهرست مطالب با طراحی خوب استفاده کنید.
در زیر نمونه ای از شناسه استفاده شده در ناحیه CSS آمده است:
#top {
background-color: #ccc;
padding: 20px
}
کلاس ها منحصر به فرد نیستند.
- می توانید از یک کلاس روی چندین عنصر استفاده کنید.
- نامگذاری کلاس به حروف کوچک و بزرگ حساس است.
- کلاس ها از یک “” استفاده می کنند. در مقابل نام در CSS همانطور که در تصویر زیر مشاهده می شود.
- هر کلاس می‌تواند تعداد نامحدودی از سبک‌های اعمال شده روی آن داشته باشد.
- می توانید از چندین کلاس روی یک عنصر استفاده کنید.
در زیر نمونه ای از کلاس مورد استفاده در ناحیه CSS آمده است:
.introduction {
color: red;
font-weight: bold;
font: 20px Arial, Helvetica, sans-serif;
}
استفاده از انتخابگر شناسه برای ایجاد پیوندهای پرش (هایپرلینک)
در مثال زیر، ما رفتار موثر انتخابگر ID را برای ساختن یک فهرست مطالب ابرپیوندی نشان می‌دهیم. به یاد داشته باشید که وب یک محیط ثابت مانند صفحات نسخه برداری شده نیست. استفاده از قابلیت هایپرلینک با Jump Links به کاربران وب شما سهولت استفاده را می دهد.
صفحه زیر یک صفحه HTML واقعی با کد است که می توانید آن را کپی کنید.
<!DOCTYPE html>
<html>
<head>
<style>
/* Style the element with the id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 30px;
text-align: center;
}
#locator {
background-color: yellow;
color: black;
padding: 10px;
text-align: left;
}
</style>
</head>
<body>
<h1>متاوبز</h1>
<h2 id="locator">لورم ایپسوم</h2>
<p id="myHeader" >لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه
</br>
روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی
</br>
مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان
</br>
را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در ا
</br>
ین صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیو
</br>
</br>
</br>
</br>
</br>
سته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
</br>
</br>
</br>
</br>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان
</br>
که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با </br>
هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزار
</br>
ها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
</br>
</br>
</br>
</br>
</br>
در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیا
</br>
ز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
</br>
</br>
</br>
</br>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله د
</br>
ر ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی
</br>
در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طرا
</br>
حان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید دا
</br>
شت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز
</br>
</br>
</br>
</br>
</br>
</br>
</br> شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
<!-- hyperlinking to this location -->
<a id="locator" href="#locator">از پیوند لورم ایپسوم در بالا به این مکان در صفحه بروید.</a>
</body>
</html>
تصویر زیر اطلاعاتی در مورد کد نمایش داده شده در بالا ارائه می دهد. از این تصویر، می توانید رابطه دو بخش کد را مشاهده کنید که با یکدیگر صحبت می کنند تا پیوند پرش را تشکیل دهند.
انتخاب شناسه با جاوا اسکریپت
به اندازه کافی جالب توجه است، هر id خاصیت به خصوصیات جاوا اسکریپت در window شی سراسری تبدیل می شود.
بنابراین اگر این کار را انجام دهیم، در واقع یک متغیر سراسری با همین نام ایجاد می‌کنیم:
<aside id="author">...</aside> <script> window.author; // <aside id="author"></aside> </script>
اما متغیرهای سراسری عالی یا قابل اعتماد نیستند، بنابراین واقعاً باید هنگام معماری HTML از آنها اجتناب کنیم.
به احتمال زیاد با جاوا اسکریپت خود بهتر است یک را انتخاب و تغییر دهید class- اما اگر به آن نیاز داشته باشید، می دانید که id وجود دارد.
اکنون یک API نیز وجود دارد classList که مستقیماً برای کار با ویژگی شما ایجاد شده است ، بنابراین نیازی به استفاده از آن در واقعیت class نیست.
استفاده از انتخابگر کلاس در چندین عنصر
برای این بخش، می‌خواهیم نشان دهیم که چگونه می‌توانید از یک نام کلاس در مکان‌های مختلف برای تکرار یک موضوع در صفحه وب خود استفاده کنید. هنگامی که استایل ها را به نام کلاس دادید ، می توانید هر چند وقت یکبار که دوست دارید از آن استفاده کنید.
نکته : کلاس را می توان با هر نامی که می خواهید استفاده کنید نامگذاری کرد. پیشنهاد می کنیم از یک نامگذاری منطقی و بصری استفاده کنید که به شناسایی محتوا کمک می کند. این به نوبه خود به یک شناسه محتوا تبدیل می‌شود و کمک می‌کند کد شما را در قالبی با ساختار خوب تنظیم کنید.
تفاوت بین Class و ID را به خاطر بسپارید : نام کلاس می تواند توسط چندین عنصر HTML استفاده شود، در حالی که یک ID فقط باید توسط یک عنصر HTML در صفحه استفاده شود.
نمونه زیر یک صفحه HTML با نام کلاس GreekCity است . می توانید کد را از این کپی کنید تا خودتان آن را امتحان کنید.
<!DOCTYPE html>
<html>
<head>
<style>
/* Style the element with the id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 30px;
text-align: center;
}
/* Style all elements with the class name "GreekCity" */
.GreekCity {
background-color: #9815B0;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<!-- An element with a unique id -->
<h1 id="myHeader">متاوبز</h1>
<!-- Multiple elements with same class -->
<h2 class="GreekCity">شهر 1</h2>
<p>شهر شماره یک</p>
<h2 class="GreekCity">شهر2</h2>
<p>شهر شماره دو</p>
<h2 class="GreekCity">شهر3</h2>
<p>شهر شماره 3</p>
</body>
</html>
تصویر زیر زمینه هایی را که در این بخش مورد بحث قرار دادیم مشخص می کند:
این مقدمه برای انتخابگرهای کلاس و شناسه باید نقطه شروعی برای پرس و جو بیشتر در مورد جنبه های خلاقانه نامحدودی که HTML ارائه می دهد فراهم کند. ما به بررسی سایر زمینه های طراحی HTML در وبلاگ بعدی ادامه خواهیم داد. امیدواریم این مقدمه علاقه شما را برانگیخته باشد و الهام بخش شما برای کاوش بیشتر و فرو رفتن عمیق تر در دنیای طراحی وب باشد.
درباره HTML بیشتر بخوانید و حرفه ای شوید:
- ایجاد اولین سند html و آشنایی با ساختار صفحات آن
- آموزش تگ های تیتر یا heading – تاثیر تگ هدینگ html در سئو سایت
- آموزش تگ p یا پاراگراف در html و کاربردهای آن
- آموزش تگ تاکیدی strong و em در HTML
- آموزش تگ های br و hr در HTML و نکات آن ها
- تمام نکات در مورد کامنت گذاری درHTML
- نحوه استفاده از تصویر با تگ img در HTML
- چگونه لینک یا پیوند یا hyperlink در HTML قرار دهیم؟
- آموزش ایجاد جدول HTML با استفاده از تگ Tableآشنایی با تگ صدا audio و تگ ویدیو video در HTML
- آموزش کار با فرم ها یا Forms در سند HTML
- آموزش قاب درون خطی (iframe) در HTML
می توانید در تلگرام با تیم مجموعه متاوبز در ارتباط باشید.
