آموزش Css قسمت دوم - انتخابگر ها

به سلکتور ها ، کلس های کاذب هم گفته می شود. (انتخابگر کلمه ی کلی تری است)

این مطلب ، درباره ی چگونگی کار با انتخابگر های سی اس اس نوشته شده است. پیشنهاد می کنم قبل از این که خواندن این آموزش را شروع کنید ، آموزش قبلی را مطالعه کنید. این آموزش را در سطح بالایی آماده کرده ایم و اگر متوجه آن نشدید ، زیاد عجیب نیست. باید چندین بار مطالعه کنید. زیرا همین یک آموزش کار چندین آموزشی که در اینترنت وجود دارد را انجام می دهد و با فهمیدن این مبحث شما می توانید گام بزرگی در راستای آموختن css بردارید.

قبل از شروع آموزش ، در یک صفحه ی اینترنت روی قسمتی از صفحه کلیک راست کنید و inspect element را بزنید تا قسمتی باز شود. این قسمت تمام المنت های صفحه را با ویژگی ها و استایل های css آن ها نمایش می دهد. این ویژگی در مرورگر فایرفاکس سریع تر است و کار با آن راحت تر است. این قسمت کمک بزرگی برای شماست تا طرز کار با کد های css را یاد بگیرید. در آینده این قسمت در آموختن javascript هم به شما کمک خواهد کرد.

انتخابگر های یا selectors در css همان طور که از نامش پیدا است به قسمت هایی از کد ها گفته می شود که کارشان انتخاب یک شیء در صفحه است. حتما تا به حال در صفحات وب ، منو هایی را دید اید که وقتی موس را روی آن ها می برید ، رنگشان تغییر می کند یا لینک هایی که وقتی روی آن ها کلیک می شود مانند یک دکمه ، رو به تو فشرده می شوند و ... تمامی مثالی هایی که زدیم مربوط به کار انتخابگر ها (selectors) است. در پایین مثالی برای کار با انتخابگرها روی تگ A (لینک ها) زده ام:

کاربرد انتخابگرها یا کلاس های کاذب: این فایل را دانلود کنید و سپس مثال را همراه با کار روی فایل ها دنبال کنید. (رمز فایل: www.toolstheme.ir)

ابتدا فایل دانلود شده را اکسترکت کنید و سپس دو فایل درون آن را با استفاده از هر نوع ادیتوری که دوست دارید باز کنید و مشاهده کنید. (اگر به هر دلیلی ، متن های فارسی درون فایل ها دچار مشکل شده است ، آن ها را با استفاده از نرم افزار notepad++ باز کنید.)

خب! حالا آموزش.

در ابتدای فایل css شیوه نامه ای برای تگ body ایجاد شده است. شما می توانید توضیحات مربوط به هر کدام از استایل ها را در روبروی آن ها مشاهده کنید. تنها موردی که کمی نامفهوم به نظر می رسد قسمت font است. این هم توضیح این قسمت:

font و بسیاری از حالت های دیگر در css برای این که خلاصه نویسی شوند به جای این که همه ی حالت های جزئی آن ها به صورت جداگانه تعریف شوند ، قسمت های مختلف با یک فاصله و به ترتیب تعریف می شوند (ترتیب مهم است). برای مثال در font:

ما برای تعریف اندازه و نوع فونت باید این گونه عمل کنیم:

<<<code>>>

body{

font-size: 20px; /* اندازه ی فونت */

font-family: arial; /* نوع فونت */

}

<<</code>>>

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

 <<<code>>>

body{

font: 20px airal; /* اندازه ی فونت */ /* نوع فونت */

}

<<</code>>>

ترتیب فراموش نشود. اگر ترتیب نوشتن اندازه و نوع فونت تغییر کند ، کد عمل نخواهد کرد.

به طور کلی ما در css پنج سلکتور ساده داریم. به غیر از این پنج تا ، چندین انتخابگر (کلاس کاذب) هم وجود دارد که فعلا برای آموزش آن ها زود است:

 توضیح *: فوکوس صفحه مربوط به زمانی است که شما روی یک چیزی کلیک کرد اید یا با استفاده از کلید tab صفحه کلید ، روی آن متمرکز شده اید. در فایلی که دانلود کرده اید این موضوع را بهتر متوجه خواهید شد. ( ابتدا روی لینکی که کلس روی آن اعملا شده است ، کلیک کنید و صفحه لینک را در صفحه ی جدید باز کنید. حال اگر به صفحه ی قبلی برگردید می بینید که دور آن لینک یک سایه (box-shadow) ایجاد شده است)

در فایل دانلود شده از تمام این کلاس های کاذب استفاده شده است. موس را روی لینک مرود نظر برده و مشاهده می کنید که تغییر حالت می دهد. این مربوط به (:hover) است. روی لینک کلیک کنید می بینید که باز تغییر حالت ایجاد می شود (:active) بعد از کلیک روی لینک به صفحه بازگردید می بینید که باز هم تغییر حالت ایجاد شده است (:focus).

کلاس های کاذب link و visited: شاید شما در فایل نتوانید فایده ی این دو انتخابگر را ببینید. اما راهی وجود دارد تا فایده ی آن را دریابید. در گوگل کلمه ای را جستجو کنید. بعد از باز شدن صفحه اکثر لینک ها به رنگ آبی هستند. اما همین که شما روی یکی از لینک ها کلیک کنید و آن را ببینید ، رنگ آن تغییر می کند و حتی اگر بعد ها باز هم همان کلمه را جستجو کنید ، این صفحه ای که شما آن را دیده اید (حداقل یک بار) تغییر رنگ داده است. این حالت مربوط به فایده ی :visited و :link است.

در فایلی که دانلود کرده اید به این قسمت دقت کنید:

<<<code>>>

.link{

background: #39f;

border: 5px solid #333;

border-radius: 100%;

width: 200px;

height: 200px;

padding: 25px;

margin: 20px;

}

<<</code>>>

توضیح رنگ های مختلف در بالا:

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

<<<code>>>

border-width: 5px;

border-style: solid;

border-color: #333;

<<</code>>>

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

رنگ سبز: این قسمت مشخص کننده ی این است که گوشه های المنت ما چقدر گرد باشند. این مقدار هم به درصد معلوم می شود و هم به دیگر واحد ها (مثل پیکسل و پیسی و ... )

رنگ قرمز: همان طور که در توضیحات داخل فایل هم نوشته شده است این دو خصوصیت ، مشخص کننده ی فاصله ی درونی و بیرونی المنت هستند. توجه داشته باشید که خصوصیت padding فقط می تواند مقدار مثبت دار بگیرد. اما margin هم می تواند مثبت بگیرد و هم می تواند منفی بگیرد. خودتان امتحان کنید و ببینید که مقدار منفی در خصوصیت margin چگونه عمل می کند.

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

در این نوشته منظور از حالت پیشفرض مرورگر این است: هر مرورگری (فایرفاکس ، گوگل کروم و ... ) برای نمایش پیشفرض تگ های اچ تی ام ال ، حالت های خاص خود را دارند. به همین دلیل اگر شما از کد های css استفاده نکنید ، ممکن است در هر مرورگر با کمی تغییر به حالتی متفاوت نمایش داده شود. پس ما با استفاده از کد های css در اصل حالت پیشفرض آن ها را تغییر می دهیم.

یک نکته ی مهم: در کلاس های کاذب ، اگر شما قبل از تعریف آن کلاس کاذب برای المنت مورد نظر خود استایلی مشخص کرده باشید که نمی خواهید در کلاس کاذب تغییر کند ، لازم نیست آن را دوباره بنویسید. فقط باید هر چیزی را که می خواهید تغییر کند در داخل کلاس کاذب خود وارد کنید. کد هایی که دانلود کرده اید مثال خوبی برای این نکته هستند. اگر شما دقت کنید می بینید که برای خط زیرین فونت و نوشتن آن به صورت bold تنها یک بار در .link a خصوصیات تعریف شده اند و در کلاس ها کاذب بعد دیگر این خصوصیات دوباره تعریف نشده اند ، زیرا ثابت هستند و نمی خواهیم تغییر کنند.

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

منتظر آموزش های جدید تر باشید.