رفتن به مطلب

کاربران گرامی تاپیک استخدام و همکاری با سایت  رو مطالعه کنید و در صورت علاقه می توانید برای خودتون درآمد کسب کنید و پول در بیارید.

جستجو در
  • تنظیمات بیشتر ...
نمایش نتایجی که شامل ...
جستجو در ...
خوش آمدید مهمان!

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

چرا منتظر هستید؟ هم اکنون ثبت نام نمایید.

8908190

آشنایی با طراحی سایت - استایل دهی به لینک ها در CSS

امتیاز دادن به این موضوع:

پست های پیشنهاد شده

ضمن عرض سلام و احترام خدمت تمامی کاربران فروم ایران سی اف سی

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

در این آموزش به نحوه استایل لینک ها در CSS می پردازیم.

  1. چطور با استفاده از ویژگی :link برای لینک هایی که هنوز باز نشده اند استایل تعریف کنید.
  2. چطور با استفاده از ویژگی :visited برای لینک هایی که باز شده اند استایل تعریف کنید.
  3. چطور با استفاده از ویژگی :hover برای هنگامی که موس روی لینک قرار می گیرد استایل تعریف کنید.
  4. چطور با استفاده از ویژگی :active برای لینکی که در حال حاضر کاربر در حال کلیک کردن روی آن است، استایل تعریف کنید.

این ویژگی ها را معمولا درون تگ <style> که خود درون تگ <head> قرار دارد، استفاده می کنند. فقط نکته ای که در استفاده از این ویژگی ها باید مد نظر داشته باشید این است که a:hover برای اینکه موثر باشد باید بعد از a:link و a:visited بیاید. همچنین توجه داشته باشید که a:active حتما باید بعد از a:hover استفاده شود. ترتیب استفاده از این ویژگی ها را می توانید در مثال زیر مشاهده کنید:

<style type="text/css">
   a:link {color: #000000;}
   a:visited {color: #006600;}
   a:hover {color: #FFCC00;}
   a:active {color: #FF00CC;}
</style>

در ادامه با ما همراه باشید تا با مثال هایی کاربردی نحوه استایل دهی به لینک ها را در حالت های مختلف به شما یاد دهیم.

  1. استایل دهی به لینک در حالت عادی

در مثال زیر شما می توانید نحوه استایل دهی به تگ <a> در حالت عادی یعنی زمانی که هنوز روی آن کلیک نشده است را بینید.

<html>
   <head>
      <style type="text/css">
         a:link {color:#4834d4;}
     </style>
   </head>
   <body>
      <a href="#">Link</a>
   </body>
</html> 

حالا نتیجه کدهای بالا را ببینید:
image-20180621033654-2.png

2. استایل دهی به لینک های دیده شده

در مثال بعدی به شما یاد می دهیم که چطور با استفاده از ویژگی :visited لینک هایی که حداقل یک بار دیده شده اند را استایل دهی کرده تا بدین صورت آن ها را از سایر لینک ها متمایز کنید.

<html>
   <head>
      <style type="text/css">
         a:visited {color: #006600;}
      </style>
   </head>
   <body>
      <a href="#"> link</a> 
   </body>
</html> 

نتیجه کد بالا به صورت زیر خواهد بود:
image-20180621033918-3.png

3. استایل دهی به لینک ها برای وقتی که موس روی آن ها قرار می گیرد

در مثال بعدی به شما یاد می هیم که چطور لینک ها را برای موقعی که موس روی آن ها قرار می گیرد یعنی به اصطلاح برای حالت هاور استایل دهی کنید.

<html>
   <head>
      <style type="text/css">
         a:hover {color: #FFCC00;}
      </style>
   </head>
   <body>
      <a href="#">Link</a>
   </body>
</html> 

خب حالا نتیجه را ببینید:
image-20180621034038-4.png

 

 

 

 

 

 

 

 

منبع:

مقاله آموزش CSS و CSS3 جهت ورود به بازار کار

  • تشکر 1

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

در تاپیک ها، اگر سوال يا نظر خاصي نداريد لطفا فقط از دکمه تشكر يا می پسندم استفاده کنيد. نظراتي مانند مرسی، خوب بود، ممنون و ... شامل اسپم هستند و باعث کاهش کيفيت پست ها مي شوند.

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

برای ارسال دیدگاه یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید دیدگاهی ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در سایت ما ثبت نام کنید. عضویت خیلی ساده است !

ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید

ورود به حساب کاربری

  • کاربران آنلاین در این صفحه   0 کاربر

    هیچ کاربر عضوی،در حال مشاهده این صفحه نیست.

  • مطالب مشابه

    • توسط ircfc
      مشاهده فایل افزونه طراحی آنلاین محصولات fancy product designer
      افزونه طراحی آنلاین محصولات fancy product designer
       
      امکانات اصلی افزونه طراحی آنلاین محصول ووکامرس:
      امکان قرار دادن عکس بر روی طرح اولیه امکان قرار دادن متن بر روی طرح اولیه امکان تغییر دادن رنگبندی طرح اولیه قرار دادن واترمارک بر روی خروجی ها ایجاد محدوده تغییر برای تصاویر تعیین رنگ برای تصاویر و متن ها تعیین قیمت برای افزودن تصاویر یا متن ها نمایش طراحی محصول به سه شیوه ساده، با استفاده از یک دکمه و پاپ آپ تعیین قیمت برای یک رنگ خاص محدود کردن انتخاب آیتم افزودن لایه ها برای طراحی بیشتر جابجایی و کوچک و بزرگنمایی تصاویر امکان ایجاد تور راهنما برای هر محصول ایجاد کادر برای یک موقعیت خاص امکان انتخاب برای یک محصول خاص امکان سفارشی کردن کامل طرح سمت کاربر(رنگبندی تغییر در آیتم ها) ترجمه ترجمه متن آیتم ها به متن دلخواه تعیین کیفیت فایل های آپلودی یا خروجی مشخص انتخاب بوم به اندازه دلخواه به عنوان مثال A4 یا A5 و سایر اندازه ها جابجایی و کوچک و بزگنمایی متن رنگبندی متفاوت و زیبا در تمامی قسمتها امکان قرار دادن چند طرح از محصول اولیه (مثلا پست و جلوی یک تیشرت) افزودن طرح های پیشفرض یا طرح های سفارشی خودتان تعیین قیمت برای هر آیتم امکان افزودن طرح ساختگی مشتری به سبد خرید ذخیره طرح ساختگی مشتری ثبت طرح ساختگی مشتری مدیریت حرفه ای برای کنترل طرح سازگاری با وردپرس و ووکامرس و بیش از ۲۰۰ گزینه در تنضیمات مدیریت! ارسال کننده ircfc ارسال پنجشنبه, 26 مهر 1397 دسته افزونه و پلاگین  
    • توسط ircfc
      افزونه طراحی آنلاین محصولات fancy product designer
       
      امکانات اصلی افزونه طراحی آنلاین محصول ووکامرس:
      امکان قرار دادن عکس بر روی طرح اولیه امکان قرار دادن متن بر روی طرح اولیه امکان تغییر دادن رنگبندی طرح اولیه قرار دادن واترمارک بر روی خروجی ها ایجاد محدوده تغییر برای تصاویر تعیین رنگ برای تصاویر و متن ها تعیین قیمت برای افزودن تصاویر یا متن ها نمایش طراحی محصول به سه شیوه ساده، با استفاده از یک دکمه و پاپ آپ تعیین قیمت برای یک رنگ خاص محدود کردن انتخاب آیتم افزودن لایه ها برای طراحی بیشتر جابجایی و کوچک و بزرگنمایی تصاویر امکان ایجاد تور راهنما برای هر محصول ایجاد کادر برای یک موقعیت خاص امکان انتخاب برای یک محصول خاص امکان سفارشی کردن کامل طرح سمت کاربر(رنگبندی تغییر در آیتم ها) ترجمه ترجمه متن آیتم ها به متن دلخواه تعیین کیفیت فایل های آپلودی یا خروجی مشخص انتخاب بوم به اندازه دلخواه به عنوان مثال A4 یا A5 و سایر اندازه ها جابجایی و کوچک و بزگنمایی متن رنگبندی متفاوت و زیبا در تمامی قسمتها امکان قرار دادن چند طرح از محصول اولیه (مثلا پست و جلوی یک تیشرت) افزودن طرح های پیشفرض یا طرح های سفارشی خودتان تعیین قیمت برای هر آیتم امکان افزودن طرح ساختگی مشتری به سبد خرید ذخیره طرح ساختگی مشتری ثبت طرح ساختگی مشتری مدیریت حرفه ای برای کنترل طرح سازگاری با وردپرس و ووکامرس و بیش از ۲۰۰ گزینه در تنضیمات مدیریت!
    • توسط ircfc
      مشاهده فایل شتابدهنده نسخه موبایل سایت با پروژه AMP گوگل WP AMP
      شتابدهنده نسخه موبایل سایت با پروژه AMP گوگل WP AMP
       
      نسخه اورجینال پلاگین WP AMP چه کاری برای شما انجام می دهد:
      بهبود باورنکردنی سئوی سایت افزایش سرعت سایت در نسخه موبایل بهبود تجربه کاربری (UX) دریافت ترافیک بیشتر از گوگل ساخت AMP سفارشی سایت بدون دانش برنامه نویسی افزایش فروش محصولات با ووکامرس  
      افزونه WP AMP این امکانات را به شما می دهد:
      پشتیبانی از تمام محتواها و آرشیو ها سازگاری کامل با افزونه های Yoast SEO، All in One SEO Pack، The SEO Framework و SEO Ultimate سازگاری کامل با ووکامرس (فروشگاه ساز محبوب وردپرس)  
      افزونه WP AMP از تمام پست تایپ های زیر پشتیبانی می کند:
      صفحات اصلی صفحات بلاگ صفحات ادامه مطلب صفحات استاتیک دسته بندی ها برچسب ها آرشیو زمان بندی و نویسنده جستجو صفحات ارور ۴۰۴ پست های سفارشی و طبقه بندی ها صفحه فروشگاه، محصولات، دسته بندی ها و برچسب محصولات  
      اما شما چه چیزهایی را می توانید شخصی سازی کنید:
      لوگوی سایت (متن، تصویر و یا هر دو) منوی هدر رنگ ها فونت ها محتوای فوتر تصاویر شاخص پست متاها پست های اخیر و مطالب مرتبط لیست دیدگاه ها و دکمه ثبت دیدگاه ووکامرس تبلیغات Html و CSS سفارشی  
      ارسال کننده ircfc ارسال پنجشنبه, 8 شهریور 1397 دسته افزونه و پلاگین  
    • توسط ircfc
      شتابدهنده نسخه موبایل سایت با پروژه AMP گوگل WP AMP
       
      نسخه اورجینال پلاگین WP AMP چه کاری برای شما انجام می دهد:
      بهبود باورنکردنی سئوی سایت افزایش سرعت سایت در نسخه موبایل بهبود تجربه کاربری (UX) دریافت ترافیک بیشتر از گوگل ساخت AMP سفارشی سایت بدون دانش برنامه نویسی افزایش فروش محصولات با ووکامرس  
      افزونه WP AMP این امکانات را به شما می دهد:
      پشتیبانی از تمام محتواها و آرشیو ها سازگاری کامل با افزونه های Yoast SEO، All in One SEO Pack، The SEO Framework و SEO Ultimate سازگاری کامل با ووکامرس (فروشگاه ساز محبوب وردپرس)  
      افزونه WP AMP از تمام پست تایپ های زیر پشتیبانی می کند:
      صفحات اصلی صفحات بلاگ صفحات ادامه مطلب صفحات استاتیک دسته بندی ها برچسب ها آرشیو زمان بندی و نویسنده جستجو صفحات ارور ۴۰۴ پست های سفارشی و طبقه بندی ها صفحه فروشگاه، محصولات، دسته بندی ها و برچسب محصولات  
      اما شما چه چیزهایی را می توانید شخصی سازی کنید:
      لوگوی سایت (متن، تصویر و یا هر دو) منوی هدر رنگ ها فونت ها محتوای فوتر تصاویر شاخص پست متاها پست های اخیر و مطالب مرتبط لیست دیدگاه ها و دکمه ثبت دیدگاه ووکامرس تبلیغات Html و CSS سفارشی  
    • توسط ircfc
      سلام به کاربران گرامی
       
      در این تاپیک قصد داریم تا شما رو به همکاری با این سایت دعوت کنیم تا هم سایت رو بالا بیاریم هم شما خودتون درآمدی از سایت بدست بیارید. خب بریم سر اصل مطلب که همکاری شما با ما به چه صورت خواهد بود.
       
      بخش فروشگاه سایت رو مدتی هستش که راه اندازی کردیم و دسته هایی هم تعیین شده که می تونید در آدرس زیر مشاهده بکنید
      دریافت‎ها - ایران سی اف سی
      هر کسی در هر زمینه ای که تخصص داره می تونه فعالیت خودش رو شروع بکنه و هر چیزی که در فروشگاه قرار داده میشه قیمتش دست خود شماست که می تونید بصورت رایگان یا پولی قرار بدید مثل نمونه های مشابهی که خود بنده در بخش مورد نظر قرار دادم و می تونید مشاهده بکنید.
       
      در صورتی که آموزش یا فایل خود را بصورت پولی قرار می دهید این مواردرو بهتر هستش که رعایت کنید:
      قیمت رو طوری قرار دهید که سریع و راحت به فروش برسد. سعی کنید با قیمت های سایت های مشابه برابر یا کمتر باشد. حدود 5 درصد مبلغ فروش به سایت تعلق خواهد گرفت مابقی در نام کاربری شما ذخیره خواهد شد. در پایان هر ماه حداقل 10.000 هزار تومان و حداکثر (بستگی به فروش آموزش یا فایل هایتان دارد) می توانید از قسمت اعتبار حساب بخش فروشگاه درخواست کنید تا بصورت کارت به کارت در طی حداکثر 48 ساعت کل مبلغ به حساب شما واریز گردد.  
      توجه: لطفا آموزش یا فایل که حاصل کار خودتان است را در اینجا قرار دهید و از کپی کردن منابع دیگر خودداری کنید.
       
      الان تنها بخش هایی که بیشتر نیاز داریم تا شما دوستان در اونجا فعالیت داشته باشید بخش های زیر هستند:
      + گرافیک و طراحی
      کارت ویزیت بنر مشاغل بنر مناسبتی تراکت دیگر طرح ها + اینترنت و سئو سایت
      مقاله و آموزش نرم افزار + هک و امنیت
      مقاله و آموزش نرم افزار + فلش و رام موبایل
      + تحقیق و مقاله
      ابتدایی متوسطه اول متوسطه دوم کنکوری + پایان نامه و کارآموزی
      کاردانی کارشناسی کارشناسی ارشد دکتری + پشتیبانی سیستم های مدیریت محتوا (خود بنده اکثر این سیستم هارو از نظر قالب، افزونه و پلاگین و فارسی ساز پشتیبانی کامل و بروز می کنم)
       
      اینم تاپیک راهنمای ارسال فایل در بخش فروشگاه هستش که می تونید مشاهده بکنید
       
      توجه: در صورت امکان در آموزش ها یا فایل های ارسالی خود آدرس انجمن را ذکر کنید.
      مثل: file - www.ircfc.ir.zip
       
      حتی اگه شما در محیط خارج از اینترنت شاغل هستید می توانید با روزانه یا هر زمانی که فرصت کردید یک الی دو ساعت وقت گذاشتن و قرار دادن یک یا چند آموزش یا فایل در این بخش علاوه بر درآمد شغلی خودتان درآمدی اندک که رفته رفته بیشتر خواهد شد بدست بیاورید که همه چیز بستگی به تلاش و همت خودتان خواهد داشت.
       
      امیدواریم که با حمایت و همکاری شما با ما بتوانیم یکی از مرجع های جامع و بزرگ در ایران باشیم و با یک محیط شاد و صمیمی در خدمت ایرانیان کشور عزیزمان باشیم.
       
      با تشکر
      یاحق
×