• صفحه نخست
  • درباره ی ما
  • ارتباط با ما
  • وبلاگ
  • مرکز آموزش
  • قوانین خرید
بلاگ تمز-دانلود قالب بلاگ بیان،قالب و افزونه وردپرس
  • قالب بلاگ بیان
  • قالب وردپرس
  • افزونه وردپرس
  • پروژه کامپیوتر
  • ورود / عضویت
  • فراموشی گذرواژه

آموزش سی اس اس – شروع کار با css

  • خانه
  • دسته بندی نشده
  • آموزش سی اس اس – شروع کار با css
ج.محمد بهمن ۲۷, ۱۳۹۳ دسته بندی نشده ۰ نظر

شاید فکر کنید که استفاده از css احتیاج به کدنویسی پیچیده دارد! در حالی که اینطور نیست ، css یکی از آسان ترین و برترین ابزار برای طراحان وب هست! 

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

سلکتورهای سی اس اس (CSS selectors)

هر سبک css دو بخش دارد. اولین بخش سلکتور مورد نظر ماست که می خواهیم استایل را بهش اعمال کنیم. بخش دومم هم خصوصیات(propertis) مورد نظرمون که میخاهیم رو سلکتور اعمال بشن.که خصوصیات و مقدار آنها بین دو { } قرار میگیرند.


selector
{
propertis:value;
}

  

برای درک بیشتر مطلب بالا به عکس زیر نگاه کنید:

css-selector

خب دوستان تعریف سلکتور را یاد گرفتیم با نحوه ی سبک دهی آن! (همون خصوصیت و مقدار دهی به آن).

انواع سلکتور ها

  • سلکتور برچسب (tag selector) 
  •  سلکتور کلاس کاذب (Pseduo-Class selector)
  • سلکتور کلاس(Class selector)
  • سلکتور های مفهومی(Contextual selector)
  • سلکتورهای خصوصی (ID selector)

سلکتور برچسب ؛ در این حالت یک تگ مخصوص html سبک دهی میشود، که در عکس به کار بردم! وقتی میخاهیم یک تگ خاض اچ تی ام ال در تمام صفحه مون به یک صورت خاص نشان داده بشه از این روش استفاده میکنیم.بعنوان مثال اگر بخواهیم تمام h1های صفحه مون به رنگ قرمز باشند و با فونت tahoma نشون داده بشوند. به کد زیر دقت کنید:

h1{
color: red;
font-family: tahoma;
}

سلکتور کلاس کاذب ؛  سبک دهی link ها . به کد زیر دقت کنید:


a:link{color: blue;}
a:visited{color: violet;}
a:hover{color: red;}
a:active{color: orange;}

در کدای بالا چهار سبک css  تعریف کردیم. link  تمام لینک های موجود در صفحه را آبی میکنه ؛ visited لینک های که بازدید شده اند را به رنگ بنفش نمایش میده، hover وقتی ماوس رو لینکی قرار بگیره رنگش را با قرمز نمایش میده و آخرین active رنگ لینک های که روشون کلیک شود را نارنجی نشون میده!

همچنین بخوانید  آموزش ساخت شکل قلب با سی اس اس

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

به کد html   زیر دقت کنید :

<p> matn mored nazar </p>
<p class="sidebar"> matn mored nazar</p>

کد css 

.sidebar{
color: red;
font-family: sens-serif;
}

خروجی :

matn mored nazar

matn mored nazar

سلکتور کلاس مفهومی؛ بعنوان مثال اگر بخواهیم رنگ لینک ها در کلاس سایدبار را با رنگ بقیه لینک ها متفاوت کنیم از این روش استفاده میکنیم.

<p> Made whit love by <a> JAMO </a> </p>
<p class="sidebar"> Made whit love by <a> JAMO </a> </p>

کد css:

<!--Pseudo-Class--> a:link{color:red;}
<!--Contextual Selector--> p.sidebar a:link{color: blue;}

خروجی : 

Made whit love by JAMO

Made whit love by JAMO

سلکتور خصوصی ؛ همانند سلکتورهای کلاس هستند و به یک گروه خاص که با ایدی مشخص شده اند اعمال می شوند.

<p> Drowgaan Tahi Wada!</p>
<p id="myid"> Drowgaan Tahi Waada!</p>
<!--CSS CODE-->
<!--ID Selector--> #myid { color: red; font-size: 15px; font-family: arial;}
votes
رتبه دهی مطلب
آموزش سی اس اسcss selectorid selectorpseudo classسلکتورسلکتورهای cssکار با cssکلاس کاذبکلاس مفهمویوبلاگ/آموزش برنامه نویسی وبوبلاگ/سی اس اس
فرم پرداخت آنلاین صورتحسابمطلب قبلی
سبک دهی به متن در سی اس اسمطلب بعدی
اشتراک
اطلاع از
Please login to comment
0 نظرات
Inline Feedbacks
View all comments

خوب است بدانید

  • انتشار مطلب در بلاگ بیان
  • چطور تصویر پروفایل در هدر قالب را تغییر دهم ؟
  • قالب های بلاگ بیان نیازمند فعالسازی جاوااسکریپت می باشد
  • نحوه ی نصب قالب های بلاگ بیان
  • نحوه ی استفاده از نشانه ها در بلاگ بیان

آخرین محصولات مارکت

  • قالب ریسپانسیو زمستان بلاگ بیان

    دانلود قالب ریسپانسیو زمستان بلاگ بیان

    ۳۹,۰۰۰ تومان
  • مطالب مرتبط بلاگ بیان

    مطالب مرتبط بلاگ بیان

    ۱۵,۰۰۰ تومان
  • قالب نوشتار بلاگ بیان

    قالب نوشتار بلاگ بیان

    ۳۰,۰۰۰ تومان
  • قالب مجله و خبری بلاگ بیان

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

    ۴۷,۰۰۰ تومان
  • قالب انحنای بلاگ بیان

    قالب انحنا بلاگ بیان

    امتیاز 5.00 از 5
    ۴۵,۰۰۰ تومان

آخرین مطالب

  • آموزش افزودن مطالب مرتبط قالب بلاگ بیان
    آموزش افزودن مطالب مرتبط قالب بلاگ بیان فروردین ۲۴, ۱۳۹۹
  • افزودن سایت خود به کنسول جستجوی گوگل
    افزودن سایت خود به کنسول جستجوی گوگل مرداد ۲۲, ۱۳۹۸
  • راهنما قالب شخصی بلاگ بیان
    راهنما قالب شخصی بلاگ بیان مرداد ۸, ۱۳۹۸
  • استایل نظرات مدیر بلاگ بیان را متفاوت نشان بده
    استایل نظرات مدیر بلاگ بیان را متفاوت نشان بده تیر ۲۳, ۱۳۹۸
  • قالب مجله ای و خبری ماهتاک بلاگ بیان
    قالب مجله ای و خبری ماهتاک بلاگ بیان تیر ۱۷, ۱۳۹۸
  • قالب ساز بلاگ تمز-ویدیو پیشنمایش قالب ساز بلاگ بیان
    قالب ساز بلاگ تمز-ویدیو پیشنمایش قالب ساز بلاگ بیان تیر ۷, ۱۳۹۸
  • راهنمای قالب انحنا بلاگ بیان
    راهنمای قالب انحنا بلاگ بیان تیر ۱, ۱۳۹۸
  • افزونه نمایش استوری بلاگ بیان
    افزونه نمایش استوری بلاگ بیان اردیبهشت ۴, ۱۳۹۸
  • آموزش ساخت قالب بلاگ بیان ، ایجاد لیست مطالب
    آموزش ساخت قالب بلاگ بیان ، ایجاد لیست مطالب فروردین ۱, ۱۳۹۸
  • دانلود قالب بلاگ بیان حرفه ای و ریسپانسیو
    دانلود قالب بلاگ بیان حرفه ای و ریسپانسیو بهمن ۳, ۱۳۹۷

دسته های محصولات

  • اسکریپت
  • افزونه بلاگ بیان
  • افزونه وردپرس
  • پروژه کامپیوتر
  • دسته بندی نشده
  • سئو
  • سورس نرم افزار آندروید
  • شرکتی
  • قالب HTML
  • قالب بلاگ بیان
  • قالب وردپرس
  • ووکامرس

سوالات متداول

  • انتشار مطلب در بلاگ بیان
  • چطور تصویر پروفایل در هدر قالب را تغییر دهم ؟
  • قالب های بلاگ بیان نیازمند فعالسازی جاوااسکریپت می باشد
  • نحوه ی نصب قالب های بلاگ بیان
  • نحوه ی استفاده از نشانه ها در بلاگ بیان

آخرین مطالب

  • آموزش افزودن مطالب مرتبط قالب بلاگ بیان
    آموزش افزودن مطالب مرتبط قالب بلاگ بیان
  • نحوه ی ارسال مطلب برای قالب فیلم و سریال بلاگ بیان
    نحوه ی ارسال مطلب برای قالب فیلم و سریال بلاگ بیان
  • افزودن سایت خود به کنسول جستجوی گوگل
    افزودن سایت خود به کنسول جستجوی گوگل
  • راهنما قالب شخصی بلاگ بیان
    راهنما قالب شخصی بلاگ بیان
©۱۳۹۷ بلاگ تمز ساخته شده با ♥؛ توسط تیم ماکاوب با استفاده از وردپرس و ووکامرس.
ورود ×
کد تایید
لطفاً کد تأیید ارسال شده را تایپ کنید
ثبت
رمز عبور را فراموش کرده اید؟
آیا حساب کاربری ندارید؟
ثبت نام
ارسال مجدد کد یکبار مصرف(00:30)
برگشت به ورود

ارسال مجدد کد یکبار مصرف (00:30)
برگشت به ورود
  • (+98) ایران
0
0
Would love your thoughts, please comment.x
()
x
| Reply