نحوه استایل دادن به لینک ها ( دستور hover و دستور active ) و لیست ها در فیلم آموزش CSS
در این قسمت از فیلم آموزش CSS نحوه استایل دهی به لینک ها مثلاً دستور hover و active و … و نحوه استایل دهی به لیست های مرتب و لیست های نامرتب را آموزش داده ایم که در CSS خیلی زیاد مورد استفاده قرار می گیرد .
تغییر رنگ لینک در CSS :
برای تعییر رنگ لینک کافیست که تگ لینک و یا کلاس مربوط را انتخاب کنید و از دستور Color برای تغییر رنگ آن استفاده کنید . مانند سورس زیر :
a{
color: #f00;
}
خاصیت text-decoration :
از این خاصیت می توان برای زیرخط دار کردن یا برداشتن زیرخط متن ها و لینک ها استفاده کرد . اگر مقدار آن را برابر none قرار دهید زیر خط را برمی دارد و اگر مقدار آن را برابر underline قرار دهید متن و یا لینک را به صورت زیرخط دار در می آورد .
دستور hover در CSS :
دستور hover در CSS یک Pseudo-class است ( در مورد pseudo-class در جلسات آینده توضیح خواهم داد ) . از دستور hover برای استایل دهی به عنصری که کاربر نشانه گر موس را روی آن نگه داشته است استفاده می شود به زبان ساده وقتی موس را روی مثلاً یک لینک بردید رنگش عوض شود یا یه استایل دیگه بگیره .
از دستور hover می توان استفاده های مختلفی کرد مثلاً یکی از اون ها استفاده در زیر منو هاست . در فیلم آموزشی همه این ها توضیح داده شده است .
نکته مهمی باید به آن توجه بکنید این است که دستور hover در CSS فقط برای لینک نیست و از این دستور می توانید برای تمام عناصر استفاد کنید .
سورس زیر نحوه استفاده از دستور hover در CSS را نشان می دهد :
a{
color: #f00;
text-decoration: none;
}
a:hover{
color: #0f0;
font-size: 30px;
}
سورس کد HTML :
<!doctype html> <html> <head> <title>Web30ty.com</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <a> سلام خدمت همه کاربران سایت وب سیتی </a> </body> </html>
دستور active در CSS :
خاصیت کلیک در CSS برای زمانی است که کاربر بر روی یک عنصری کلیک کنید . اگر کاربر بروی یک عنصری کلیک کرد می توان با استفاده ار خاصیت active به آن استایل داد . مانند سورس کد زیر :
a{
color: #f00;
text-decoration: none;
}
a:active{
color: #fff;
background: red;
padding: 20px;
font-size: 30px;
}
اگر کد html بالا و این کد CSS را اجرا کنید و بر روی متن کلیک کنید متوجه گفته های من خواهید شد .
استایل دادن به لیست ها :
برای خواندن مطلب لیست های مرتب و نامرتب کلیک کنید .
با استفاده از CSS می توان اعداد و اشکال موجود در لیست ها را نشان نداد و یا می توان به جای آن ها یک عکس قرار داد .
توضیحات بیش تر در فیلم آموزشی داده شده است .
سورس کد html :
<!doctype html> <html> <head> <title>Web30ty.com</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <ol> <li>CSS</li> <li>C++</li> <li>C#</li> <li>PHP</li> </ol> <ul> <li>CSS</li> <li>C++</li> <li>C#</li> <li>PHP</li> </ul> </body> </html>
سورس کد CSS :
ol{
list-style-type: none;
}
ul{
list-style-image: url (' picture.png ');
}
سلام.
خیلی ممنون بابت ویدیو و مطالب مفیدتون.
استاد اگه بخواییم مثل این ۳ تا باکس مطالبمون نمایش داده شن در وردپرس چه کار باید کنیم ؟
http://uupload.ir/files/o23i_2018-03-03_00-55-33.png
سلام
باید از float استفاده کنید و به هر سه یه float مثلاً راست بدید .