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

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت
  • 09306889067
  • info@irprogram.com
perm_identity
سبد خرید 0
  • تماس با ما
  • داستان آی آر
  • پشتیبانی
  • پرسش و پاسخ
0
آموزش برنامه نویسی
ورود و ثبت نام
دسته بندی دوره ها
  • آموزش های برنامه نویسی موبایل
    • آموزش طراحی اینستاگرام با React Native
    • آموزش مقدماتی react native
    • آموزش اکما اسکریپت
    • دوره آموزش phonegap
    • آموزش custom dialog در اندروید
    • آموزش استفاده از کتابخانه glide در اندروید
    • آموزش اندروید کرکینگ ۲۰۱۹
    • آموزش استفاده از کتابخانه tasty toast در اندروید
    • دوره آموزش JQuery Mobile
    • دوره جامع آموزش زامارین اندروید
    • آموزش استفاده از کتابخانه Picasso در اندروید
    • آموزش استفاده از کتابخانه Circle ImageView در اندروید
    • آموزش استفاده از کتابخانه Material Text Field در اندروید
    • آموزش استفاده از کتابخانه Photo View در اندروید
    • آموزش استفاده کتابخانه Progress Whell در اندروید
    • آموزش react native
    • آموزش اندروید
  • آموزش های برنامه نویسی وب
    • آموزش پروژه محور html
    • دوره آموزش css
    • آموزش پروژه محور جاوا اسکریپت
    • آموزش پروژه محور جی کوئری
    • آموزش های طراحی سایت
    • آموزش های وردپرس
    • آموزش طراحی صفحات وب
    • آموزش css
    • آموزش html
    • آموزش های وردپرس
    • آموزش افزونه های وردپرس
    • آموزش افزونه yoast
  • آموزش های صد روز تا دولوپری
    • آموزش html
    • آموزش css
    • آموزش phonegap
    • آموزش جی کوئری
    • آموزش جی کوئری موبایل
    • آموزش جاوا اسکریپت
  • آموزش های رایگان
    • همه آموزش های رایگان
  • همه دوره های کسب و کار و درآمد دیجیتالی (بیت کوین و بازار فارکس)
    • بازار فارکس
    • بازار فارکس ۲
    • بیت کوین و بلاک چین
    • خلق مدل کسب و کار
  • آی آر پروگرم
  • آموزش ها
    • آموزش های ویدئویی
    • آموزش های متنی
  • بلاگ
  • چارت آموزشی آی آر
  • ابزار های برنامه نویسی
  • پادکست ها
  • بانک کد

وبلاگ

آموزش برنامه نویسی > بلاگ > آموزش طراحی صفحات وب > آموزش css > آموزش Css – جلسه هفتم

آموزش Css – جلسه هفتم

access_time۲۶ تیر ۱۳۹۸
perm_identity ارسال شده توسط irprogramadmin
folder_open آموزش css ، آموزش html ، آموزش برنامه نویسی ، آموزش طراحی صفحات وب ، بانک کد
visibility 303 بازدید

با سلام خدمت کاربران محترم سایت irprogram با جلسه هفتم آموزش Css در خدمت شما هستم.

مطالبی که توی این جلسه می خوایم در موردش صحبت کنیم در رابطه با لینک ها و نحوه ی effect دادن به اونهاست .برای مثال بصورت پیش فرض لینک های ما چه رنگی ، چه فونتی و چه سایزی داشته باشن و یا زمانی که موس و روی لینک ها میبریم به چه صورتی تغییر حالت بدن و در ادامه ساخت منو رو به وسیله ی لیست های html یادمیگیریم ، اینکه چطور می تونیم منوهای وب سایت و به سادگی ایجادکنیم و به اونها style مورد نظرمون و بدیم .

خب همونطور که می دونید برای ایجاد لینک توی html از تگ <a></a> استفاده می کنیم و href اونو مثلا صفحه ی hom.html در نظر میگیریم و اسمش رو هم hom می زاریم. لینک های دیگه هم به همین ترتیب.

توی جلسات قبل دیدید که ما توی footer سایتمون سه تا box قرار دادیم حالا من میخوام یکسری لینک  رو توی box سمت راست ایجاد کنم.پس داخل div مربوط به box سمت راست کد های زیر و می نویسم:

۱
۲
۳
۴
۵
            <div id="right-box" class="box">
                <a href="Hom.html">Home</a>
                <a href="cantact.html">cantact</a>
                <a href="about.html">about</a>
            </div>

الان این صفحه های html (Home.html,cantact.html,about.html)که توی کد بالا نوشتیم وجود ندارند من فقط نوشتم تا بتونم به عنوان لینک ازشون استفاده کنم.

حالا اگه این صفحه ی html و داخل مرورگر باز کنم لینک ها رو داخل باکس سمت راست میبینید.

آموزش Css - جلسه هفتم

همونطور که دقت می کنید به صورت پیش فرض رنگ لینک ها آبیه و آندرلاین هم دارند اما ما میخوایم رنگشون و عوض کنیم و آندرلاین و هم حذف کنیم

برای اینکار به فایل Css  مراجعه می کنیم و تگ  a رو انتخاب میکنیم به عنوان مثال میگم رنگش قرمز بشه

۱
a:link{color:red}

الان از طریق این selector کل تگ های a  که توی صفحه ی html  قرار دارند رو انتخاب کردیم  ، چه  لینک هایی که توی  header  قرار داشته باشند ، چه توی footer یا هرجای دیگه از صفحه ی html، و رنگ قرمزو بهشون اختصاص دادیم.

آموزش Css - جلسه هفتم

حالا اگه من به عنوان  مثال یه لینک دیگه داخل header داشته باشم رنگش قرمز میشه

۱
۲
۳
۴
۵
۶
        <div id="header">
            <a href="#">link2</a>
            <div id="logo">
            </div><!--logo-->
            <div id="left_header"></div>
        </div><!--header div-->

آموزش Css - جلسه هفتم

هر لینک سه تا حالت مختلف داره

۱.حالت عادی

۲.زمانی که موس و روش نگه میداریم

۳.زمانی که روش کلیک شده

الان ما رنگ لینک و در حالت عادی تغییر دادیم

بیشتر بخوانید  آموزش Css - جلسه پنجم

حالا اگه بخوایم زمانی که موس و روی آیتم های لینک ها قرار میدم  رنگش عوض بشه چیکار باید بکنم!

میایم selector خودمون و به این صورت می نویسیم

۱
a:hover{color: blue}

یعنی زمانی که اشاره گر موس روش قرار میگیره به رنگ آبی دربیاد

آموزش Css - جلسه هفتم

و برای تغییر رنگ لینک زمانی که روش کلیک شده از selector زیر استفاده می کنیم:

۱
a:active{color: chartreuse}

با اینکار در لحظه ای که روی لینک کلیک میکنیم رنگش  زرد میشه.

آموزش Css - جلسه هفتم

اما یک حالت دیگه وجود داره برای مشخص شدن اینکه قبلا روی این لینک کلیک شده

۱
a:visited{color: greenyellow}

لینک هایی که توی box  نوشتیم  چون آدرس مشخصی ندارن نمیشه اینکار و روشون تست کنیم اما برای لینکی که توی header نوشته شده و آدرس “#” داره بعد از این که قطعه کد بالا رو براش نوشتیم به رنگ  سبز درمیاد چون قبلا روی این لینک کلیک کرده بودیم

آموزش Css - جلسه هفتم

یک نکته ی خیلی مهم اینجا وجود داره اونم اینکه ترتیب این کد ها مهمه

۱
۲
۳
۴
a:link{color: red}  
a:hover{color: blue}
a:active{color:gold}
a:visited{color: greenyellow}

اگر مثلا کد مربوط به hover ابتدا نوشته بشه دیگه وقتی که موس و روی لینک میگیریم رنگش عوض نمیشه

حالا برای اینکه آندرلاین  و حذف کنیم از خاصیت text-decoraion استفاده می کنیم به این صورت:

۱
a:link{color: red;text-decoration:none}

آموزش Css - جلسه هفتم

علاوه بر دستوراتی که گفتیم ما می تونیم کار های دیگه ای رو هم انجام بدیم بنا بر سلیقه خودمون مثلا زمانی که موس و  روی لینک قرار میدیم علاوه بر رنگ فونتش هم تغییر کنه  یا یک background-color بگیره و..

طراحی یک منوی ساده برای وب سایت:

ما می خوایم یه منوی ساده برای وب سایت خودمون به وسیله ی لیست ها ایجاد بکنیم اول از همه من یک لیست ایجاد می کنم(لینک هایی که قبلا ایجاد کردم و حذف می کنم و اینکار و توی همون box سمت راست انجام می دم)

خب اگه اموزش های html و دنبال کرده باشید می دونید که برای ایجاد لیست های نامرتب از تگ <ul></ul>  استفاده میشه که در داخل این تگ ها ما می تونیم آیتم های خودمون و به وسیله ی تگ <li></li> تعریف کنیم که من آیتم ها رو به صورت لینک قرار میدم

۱
۲
۳
۴
۵
۶
۷
            <div id="right-box" class="box">
                <ul>
                    <li><a href="http://www.google.com">googl</a></li>
                    <li><a href="http://www.yahoo.com">yahoo</a></li>
                    <li><a href="https://www.irprogram.com">irprogram</a></li>
                </ul>
            </div>

استایلی که برای لینک ها در ابتدای این آموزش نوشتم و پاک کردم حالا اگه به فایل html داخل مرورگر رفرش بدم همون استایل های پیش فرض برای لینک ها رو میبینید

بیشتر بخوانید  ویژگی هایی که باید در DNA برنامه نویسان موبایل وجود داشته باشه؟

آموزش Css - جلسه هفتم

همونطور که می بینید سایت irprogram , google چون قبلا بازدید کردم رنگ بنفش گرفتند اما سایت yahoo حالت عادی یعنی رنگ آبی رو داررنگ آبیه. پس به صورت پیش فرض اگر لینک بازدید نشده باشه رنگ آبی و اگر قبلا بازدید شده باشه رنگ بنفش داره.

اولین خصوصیتی که در مورد این منوها می خوام توضیح بدم اون نقطه ی سیاه رنگی هستش که سمت چپ این آیتم ها قرار گرفته

خب اول میام به این لیستم یک آی دی میدم که بتونم توی فایل Css بهش استایل بدم پس توی تگ ul که نوشتیم  آی دی my link بهش میدم

حالا توی فایل Css برای اینکه این آیکون و حذف کنم یا تغییر بدم از دستورList-style-type استفاده می کنم برای اینکه بخوام کلا حذف بشه روی none قرار میدم حالت  مربعی روی square و ..

۱
#my-link{list-style-type:none}

آموزش Css - جلسه هفتم

می تونیم یک شکل به دلخواه خودمون به جای این ایکون ها قرار بدیم با استفاده از دستور List-style-image

فقط باید توجه داشته باشیم که سایز این آیتم ها باید ده پیکسل باشه چون بزرگ تر کوچیک تر باشه ممکنه زیاد جالب نباشه

۱
#my-link{list-style-image: url(images/pic5.jpg)}

حالا می خوام این منو ها حالت ستونی نداشته باشن توی یک خط قرار بگیرن.

برای اینکار باید تگ <Li></Li> داخل آی دی my-link و انتخاب کنم Float و براش left کنم،اما اگه لینک هامون فارسی بود float و براش right  می کنیم

۱
#my-link li{float: left;}

اما با اینکار همونطور که در تصویر زیر می بینین خیلی تو در تو و بهم ریخته است

آموزش Css - جلسه هفتم

برای اینکه این آیتم ها از هم فاصله بگیرن یه margin-left بهشون میدیم اگه فارسی بودن از margin-right استفاده می کنیم

۱
#my-link li{float:left;margin-left: 20px}

آموزش Css - جلسه هفتم

یکی دیگه از selector هایی که می تونیم اینجا بکار ببریم اینه که بیایم تگ <a></a> داخل id=”my-link”  و انتخاب کنیم

و مثلا رنگشون و تغییر بدیم به این صورت

۱
#my-link li a{color:yellow}

آموزش Css - جلسه هفتم

و کارای دیگه سایزشون و تغییر بدیم آندرلاین و حذف کنیم و به همین ترتیب..

اگه بخوایم زمانی که موس روی اون قرار میگیره رنگش تغییر کنه selector و به این صورت می نویسیم:

۱
#my-link li a:hover{color: teal}

آموزش Css - جلسه هفتم

توضیحاتی که در مورد لینک ها در ابتدای جلسه گفتیم به همین ترتیب می تونیم روی منوها پیاده کنیم

یا مثلا می تونیم دور آیتم ها مون border ایجاد کنیم از دستور border برای حاشیه دادن دور item، div دور همه چی  می تونیم ازش استفاده کنیم می تونیم حالت solid،dashed،dotted بهش بدیم

به این صورت:

۱
#my-link li a{color:yellow;border:1px solid}

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

پایان آموزش Css جلسه ی هفتم،امیدوارم که بتونین استفاده لازم و ببرین.

اشتراک گذاری:
برچسب ها: cssآموزش CSS
مطالب زیر را حتما بخوانید
  •  گذاشتن افکت برای هاور تصاویر

    3 بازدید

  • ساخت گرادیانت رنگین کمانی متحرک

    7 بازدید

  • انتشار اپلیکیشن اندروید React Native در گوگل پلی استور

    11 بازدید

  • ساخت دکمه Volume با HTML و CSS

    12 بازدید

  • طراحی رادار با HTML و CSS

    14 بازدید

جدید تر آموزش Css - جلسه ششم
قدیمی تر آموزش Css - جلسه نهم

پاسخی بگذارید لغو پاسخ

جستجو
جستجو برای:
مطالب بلاگ آی آر
  • Uncategorized (۵)
  • آموزش PHP (۱۰)
  • آموزش react native (۴۹)
  • آموزش اندروید (۱۳)
  • آموزش ایلاستریتور (۴۹)
  • آموزش برنامه نویسی (۲۰۱)
  • آموزش خرید از وبسایت های خارجی (۱۶)
  • آموزش طراحی صفحات وب (۸۲)
    • آموزش css (۳۹)
    • آموزش html (۴۵)
  • آموزش های فتوشاپ (۶۶)
  • آموزش های وردپرس (۵۳)
    • آموزش افزونه های وردپرس (۳۲)
      • آموزش افزونه yoast (۱۳)
  • ابزار های برنامه نویسی (۵۵)
  • استارتاپ و کسب و کار (۱۵۹)
  • انگیزشی (۴۰)
  • بانک کد (۴۶)
  • پادکست (۲)
  • دسته‌بندی نشده (۳)
  • کسب و کار آنلاین (۱۲)
  • مرجع برنامه نویسی (۴)
  • مطالب متفرقه (۵۶)
  • معرفی ایده (۴)
  • معرفی زبان های برنامه نویسی (۴)
  • معرفی کتاب (۵)
  • معرفی ویرایشگرها (۱)
  • مقایسه (۴)
جدیدترین مطالب بلاگ آی آر
  •  گذاشتن افکت برای هاور تصاویر ۲۶ تیر ۱۳۹۸
  • چرا اینقدر بیکار داریم ؟ ۲۶ تیر ۱۳۹۸
  • ساخت گرادیانت رنگین کمانی متحرک ۲۶ تیر ۱۳۹۸
  • انتشار اپلیکیشن اندروید React Native در گوگل پلی استور ۲۶ تیر ۱۳۹۸
  • ساخت دکمه Volume با HTML و CSS ۲۶ تیر ۱۳۹۸
دوره های آموزشی آی آر
  • تحلیل تکنیکال بازارهای بورس ، فارکس و ارزهای دیجیتال( چهارمین دوره از مجموعه صد روز تا درآمد دیجیتالی)
  • آموزش طراحی اینستاگرام با React Native
  • بازار فارکس2- فارکس مقدماتی( سومین دوره از مجموعه صد روز تا درآمد دیجیتالی)
  • بیت کوین و بلاک چین (اولین دوره از مجموعه صد روز تا درآمد دیجیتالی)
  • بازار فارکس (دومین دوره از مجموعه صد روز تا درآمد دیجیتالی)
  • خلق مدل کسب و کار (اولین دوره از مجموعه کسب و کار نوین)
  • دوره جامع آموزش زامارین اندروید
    دوره جامع آموزش زامارین اندروید
  • دوره آموزش phonegap (دوره ششم از آموزش صد روز تا دولوپری)
تماس با ما
  • location_on
    استان خراسان جنوبی پارک علم و فناوری اتاق 111
  • phone_android
    09306889067
  • email
    info@irprogram.com
دسته بندی دوره های آی آر
  • برنامه نویسی موبایل
  • برنامه نویسی وب
  • آموزش های رایگان
  • آموزش بیت کوین
  • آموزش وردپرس
  • آموزش طراحی سایت
درباره آی آر پروگرم

آی آر پروگرم یه وب سایت آموزش آنلاین نیست ! بلکه وب سایتیه که شما با آموزش های اون میتونین آینده خودتون رو بسازین .

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

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

نماد های اعتماد ما
تمامی حقوق مادی و معنوی وب سایت irprogram برای شرکت فرزان فناوران پویان محفوظ است .
keyboard_arrow_up