[su_box title=”بخش آپدیت های مقاله” box_color=”#d97560″ radius=”20″]آموزش ویدئویی در تاریخ 26 مرداد 98 اضافه شد .[/su_box]
سلامی دوباره خدمت همه دوستان و همراهان سایت آیلین با یک جلسه دیگه از آموزش HTML و CSS خدمت شما هستیم و میخواهیم در این جلسه از دوره در رابطه با سلکتور ها در HTML و همچنین کار با font و در انتها حالت های مختلف لینک ها رو بهتون آموزش بدیم امیدوارم که از آموزش های قبل دوره ی HTML و CSS همه رو یاد گرفته و همه رو تمرین کرده باشید.
در ابتدای آموزش میخوام در مورد سلکتور ها بهتون بگم که چیکار میکنن و به چه دردی میخورن . پس شروع کنیم :
[toc]
کار با سلکتور ها در HTML :
دوستان ما در HTML چندین نوع سلکتور داریم که استفاده میشود ولی بیشترین سلکتور هایی که در این آموزش ما آنها کار میکنیم در پایین لیست میشود :
tag selector :
با این سلکتور در جلسات قبل آشنا شده اید و با آن کار هم کرده اید ولی برای این که آموزش کامل باشد من سعی کردم که یک یادآوری دوباره باشد. tag selector ها به این صورت استفاده میشوند که شما در فایل css فقط اسم آن تگی که میخواهید تغییرات در آن اعمال شود مینویسید و خصوصیاتی را که میخواهید تغییر کند را در آن لحاظ میکنید.
مطالعه بیشتر : آشنایی بیشتر با تگ سلکتور ها با استفاده از background , border
به مثال زیر توجه کنید :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
p
{
border-radius: 20px;
border: solid;
}
h1
{
border-left-style: solid;
border-color:red;
}
</style>
</head>
<body>
<h1>hello aylinweb</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</body>
</html>
همانطور که در کد بالا میبیند تغییراتی که به تگ ها داده شده از طریق تگ سلکتور ها بوده . و اگر ما هر چقدر تگ p یا h1 داشته باشیم تمام آنها به آن صورت که به آنها استایل داده ایم تغییر خواهند کرد و عملا این کار رو نمیشه توی صفحاتی که ایجاد میکنیم انجام دهیم ولی برای بعضی از تگ ها مثل تگ body میشود چنین تغییراتی را انجام داد . بریم سراغ سلکتور بعدی .
class selector :
با مشکلاتی که در بالا داشیم کلاس ها میتوانند بسیار عالی باشند چرا که از حجم کدنویسی ما کم خواهد شد و سرعت سایت ما را بالاتر خواهد برد . برای استفاده از کلاس ها باید از کلمه class در Html استفاده کنید به این شکل:
<p class="mayp">
در کد بالا که میبیند نحوی استفاده کردن کلاس در html است که به این صورت است که بعد از نوشتن کلمه class با یک علامت مساوی(=) و یک نام داخل جفت کوتیشن و برای نام گذاری هم باید از اصولی را رعایت کنید تا مشکلی پیش نیاد .
- ابتدای اسم با عدد شروع نشود
- از علامت های غیر متعارف مثل (@#$%) استفاده نکنید
- ابتدای اسم با آندرلاین شروع نشود (_)
- و…
نحوی استفاده از کلاس سلکتور ها رو بهتون میگم :
<!DOCTYPE html>
<html>
<head>
<style>
body
{
direction: rtl;
}
.city {
background-color: lightblue;
color: white;
}
.Village {
background-color: blueviolet;
color: white;
}
</style>
</head>
<body>
<div class="city">
<h2>شهر</h2>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده</p>
</div>
<div class="Village">
<h2>روستا</h2>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده</p>
</div>
<div class="city">
<h2>شهر</h2>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده</p>
</div>
</body>
</html>
در مثال بالا اگر توجه کنید ما از تگ <div> استفاده کردیم بهتره بهتون بگم که این تگ عملا کار خاصی رو انجام نمیده و یک تگ مشابه دیگه مثل اون <span> است که بیشتر برای کلاس ها استفاده میشه و در ادامه کار بیشتر با اونا آشنا میشید .
و در قسمت کلاس که میبینید ما چند تگ h و p دارین اما رنگ و شکل متفاوتی دارند و این به کمک کلاس ها است .
نکته ها :
- از class میتونید در همه جای Html و در همه المنت ها استفاده کنید .
- اسم class به حروف بزرگ و کوچک حساس است.
ID selector :
یکی دیگه از سلکتور هایی که بهتون معرفی میکنم id selector هست که نحوی کار این سلکتور هم تقریبا شبیه کلاس ها هست ، به این شکل که شما برای معرفی در html باید از کلمه id استفاده کنید و برای استفاده id در css باید از علامت # استفاده کنید .
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
<h1 id="myHeader">My Header</h1>
یک نکته : در رابطه با id اینه که شما از آی دی ها باید یک بار در صفحه استفاده کنید تا در ادامه کار مشکلی برای کد شما به وجود نیاید.
کار با font در CSS :
در CSS هم مثل HTML میتوانید از فونت ها استفاده کنید و در خاصیت های که دارد میتوانید نوع فونت ، اندازه و استایل را تغییر دهید پس بریم سراغ کار با font در css :
اولین ویژگی که شما باید با آن آشنا شوید font-family است .
مطالعه بیشتر : نحوی اضافه کردن فونت به وردپرس
p
{
font-family: tahoma,sans-serif;
}
در بالا شما نام یک فونت رو میبینید که این فونت تاهوما پیشفرض خود ویندوز هست در ادامه آموزش ها حتما اضافه کردن فونت رو خواهم گفت و بعد کلمه serif هست اجازه بدین یه توضیح بدم تا بهتر متوجه بشید :
sans-serif : به این شکل است که در حروفی که هست قسمت های انتهای حروف به صورت تیز و نشان داده میشوند .
serif : به صورتی است که حروف در انتهایشان به حالت خمیده هستند .
شما با font چندین گزینه برای انتخاب دارید که با هم آنها را بررسی میکنیم :
font-style : شما با این گزینه میتوانید استایل متن خود را تغییر دهید که داری سه مقدار normal , italic و oblique که شما را از کد های html راحت خواهد کرد .
font-size : با استفاده از این خصوصیت میتوانید اندازه متن خود را تغییر دهید که برای مقدار آن میتوانید از غدد و (px) استفاده کنید و بسیار کاربردی است .
p
{
font-family:"tahoma", serif;
font-style: italic;
font-size: 20px;
}
حالات مختلف در لینک ها :
شما در جلسات قبل با لینک در html آشنا شدید و در این قسمت ما برای شما میخواهیم حالاتی که شما اشاره گر را روی لینک میبرید چه اتفافی رخ دهد . بررسی میکنیم :
- a:link
این در حالتی است که لینک به صورت عادی نمایش داده میشود .
- a:visited
این در حالتی است که شما بر روی لینک کلیک کرده اید و اتفاقی که بعد از کلیک میفتد(در ویدئو بررسی میکنیم)
- a:hover
این خصوصیت هم برای زمانی که شما اشاره گر را روی لینک میبرید و روی آن مکث میکنید .
- a:active
این خاصیت در حالتی است که شما روی لینک کلیک میکنید و کلیک خود را برای چند لحظه نگه میدارید .
و حالا در جواب این گزینه ها میتوانید تغییراتی را که میخواهید را روی لینک انجام دهید.
a:link, a:visited
{
background-color: #f44336;
color: white;
text-align: center;
text-decoration: none;
}
a:hover, a:active
{
background-color: red;
}
در بالا یک خط شاید برای شما قابل درک نباشد ;text-decoration: none این کد خط زیر لینک را حذف میکند .
به پایان این جلسه هم رسیدیم امیدوارم که تمام استفاده رو از این آموزش برده باشین . اگر هر سوالی یا پیشهادی در رابطه با آموزش ها داشتید حتما از ما بپرسید .
