در حال بارگذاری

گروه طراحي وب سایت ، سايت مايت ، با ارائه خدمات طراحي حرفه اي وب سايت ، سئو و بهينه سازي ، امنيت و هک و آموزش و کار آموزي شما را به صبر و شکيبايي جهت بارگذاری کامل وب سایت دعوت مينمايد.
شماره دفتر مرکزي : 03116618188
موبايل واحد فروش : 09136848587

موضوعات
دوستان
آرشیو
آمار سايت
arrow  افراد آنلاین : 8
بازديد ديروز: 312
بازديد امروز: 851
 خروجی فید امروز : 9
arrow  ورودی گوگل : 1
  • برچسب‌ها

  • آموزش CSS به زبان ساده

    تعداد بازدید : 1140   دسته بندی : آموزش css , آموزش و کار آموزی دوشنبه ,29 اکتبر , 2012

    آموزش سریع CSS

    آشنایی CSS

    اموزش سی اس اس به زبان ساده
    تاکنون دو نسخه از CSS توسط مؤسسه استانداردسازی وب ارائه شده است که نسخه دوم بسیار کامل تر از نسخه اول بوده و امکانات بسیار بیشتری را در اختیار طراحان وب قرار داده است اما با توجه به اینکه نسخه دوم دارای پیچیدگی های بسیاری بود، این نسخه توسط مؤسسه استانداردسازی وب مورد بازنگری قرار گرفت و بخش هایی از آن حذف گردیده و یا تغییر یافتند. نسخه ای که حاصل این فرآیند بود، CSS2.1 نامیده می شود که نسخه رایج و فعلی CSS است (همان نسخه ای که ما مورد استفاده قرار خواهیم داد).


    نسخه دیگری از CSS به نام CSS3، در حال حاضر در حال تهیه و تنظیم از طرف مؤسسه استاندارد سازی وب می باشد که چندین سال است این مؤسسه در حال کار بر روی آن می باشد. برخی از شرکت های تولید کننده مرورگرها، بعضی از بخش های این نسخه را در مرورگرهای خود گنجانده اند اما با توجه به اینکه پشتیبانی از آن هنوز در بسیاری از مرورگرها کامل نشده است، استفاده از دستورات این نسخه توصیه نمی شود. در صورت تمایل به کسب اطلاعات بیشتر در مورد این نسخه می توانید به آدرس w3.org/Style/CSS/current-work، مراجعه نمایید.
    نحوه به کاربردن CSS همراه با HTML
    برای اعمال دستورات CSS بر عناصر HTML که در فایل صفحه وب مورد نظرمان نوشته ایم، چهار روش در اختیار ما است که در ادامه بحث به صورت مشروح به توضیح آن ها می پردازیم:
    در روش اول، کلیه دستورات CSS در فایلی جداگانه با فرمت .css قرار گرفته و با نوشتن کدهای زیر در فایل HTML ما وارد می شوند:
    <style  type=”text/css”>
    @import url(“styles.css”);
    </style>
    همانطور که در درس های HTML توضیح دادیم، از تگ های <style>، معمولاً در بخش head فایل های HTML استفاده می شود.
    در روش دوم نیز دستورات در فایل CSS جداگانه ای قرار می گیرند اما برای اتصال آنها به فایل HTML از تگ <link> به ترتیب زیر استفاده می شود:
    <link  rel=”stylesheet”  type=”text/css”  href=”linked_styles.css”>
    در مورد ویژگی های تگ <link> در بخش HTML توضیح داده شد اما در اینجا نیز به صورت مختصر برای یادآوری توضیح می دهیم:
    ویژگی rel، مشخص کننده رابطه ای است که فایل پیوند داده شده با فایل HTML ما دارد که در این مورد، کلمه stylesheet مشخص می کند که فایل مورد نظر ما فایلی است که وظیفه تعیین صورت ظاهری عناصر را به عهده دارد.
    ویژگی type، مشخص کننده نوع فایلی است که به فایل HTML ما پیوند داده می شود و مقدار آن از نوع MIME type می باشد که در مورد فایل های CSS، برابر با text/css است. به کار بردن این ویژگی الزامی نیست و معمولاً مرورگرهای رایج بدون این ویژگی نیز قادر به تشخیص نوع فایل هستند اما استفاده از آن باعث می شود که اطمینان بیشتری نسبت به نحوه نشان داده شدن صفحاتمان در مرورگرها و سیستم های عامل دیگر داشته باشیم.
    ویژگی href نیز همانطور که قبلاً توضیح داده شد، وظیفه مشخص کردن آدرس فایل مورد نظر را به عهده دارد.
    هر دو روش فوق، از آنجا که دستورات CSS را از فایلی جداگانه دریافت می کنند، دارای مزایایی زیر هستند:
    •    دستورات CSS را می توان به صورت مشترک برای چندین صفحه از صفحات وب و یا حتی کلیه صفحات یک سایت، مورد استفاده قرار داد. به این ترتیب، ویرایش و تغییر ظاهر عناصر سایت در صورت لزوم بسیار ساده تر خواهد بود.
    •    پس از آنکه کاربر برای بار اول از صفحه ای که با فایل CSS ما در ارتباط است، بازدید کرد، فایل CSS مربوطه دانلود شده و در حافظه (cache) مرورگر مورد استفاده او باقی می ماند. به این ترتیب، برای بازدید از هر صفحه دیگری که از همان فایل CSS استفاده می کند، نیازی به دانلود مجدد آن نیست و همچنین حجم کد تایپ شده در صفحات HTML نیز به طور چشمگیری کاهش می یابد. به همین دلیل، چنانکه در بعضی آزمایشات توسط متخصصین مشخص شده است، سرعت لود شدن صفحات برای کاربر می تواند تا میزان 50% و در برخی موارد بیشتر، افزایش یابد. از دیدگاه مالک سایت نیز، چنانچه سایت مورد نظر سایت پر بیننده ای باشد، این امر در صرفه جویی در میزان ترافیک مجاز برای هر سایت، تأثیر زیادی خواهد داشت.
    •    جدا کردن محتوای صفحات (فایلهای HTML) از ظاهر آنها (فایل های CSS) موجب می شود که مالکان سایت بتوانند برای مقاصد دیگری همچون فیدهای RSS نیز از فایل های HTML خود استفاده کنند. همچنین، می توان با ایجاد دو یا چند فایل CSS، به عناصر صفحات وب در شرایط مختلف ظاهر کاملاً متفاوتی داد. مثلاً می توان یک فایل CSS برای زمانی که صفحه وب ما بر روی نمایشگر رایانه دیده می شود، ایجاد کرد و فایل CSS دیگری را برای چاپ کردن صفحه وب مورد نظر ایجاد کرد. به این ترتیب، می توان در فایل CSS مربوط به چاپ، فرمتی مناسبتر برای چاپ را مشخص کرد تا کاربر بتواند صفحه مورد نظر را با هزینه کمتر و صورت خواناتر و مناسبتری، چاپ نماید.
    از روش سوم، معمولاً زمانی استفاده می نماییم که کاربرد دستوراتی خاص یک صفحه از مجموع صفحات وب ما مدنظر باشد. در این روش نیز از تگ <style> (طبق معمول در بخش head صفحه)، استفاده می کنیم و دستورات CSS مورد نظر را میان تگ های ابتدایی و انتهایی آن تایپ می کنیم.
    روش چهارم، استفاده از ویژگی (attribute) style عناصر HTML و تایپ کردن دستورات CSS به عنوان مقدار آن است. این روش دارای چند محدودیت مهم می باشد و عناصر HTML را با اطلاعات مربوط به ظاهر آنها در نزدیک ترین شکل ممکن خود، ترکیب می نماید. به همین دلیل، معمولاً نباید از آن استفاده کرد. شاید تنها موردی که توجیه کننده استفاده از آن باشد، استفاده از فرمتی خاص برای یکی از عناصر صفحه باشد که در هیچ مورد دیگری تکرار نخواهد شد.
    نحوه محدود کردن دستورات CSS به یک یا چند نوع وسیله خروجی
    در کلیه روش های ذکر شده برای اعمال دستورات CSS بر فایل های HTML (به استثنای روش چهارم)، می توان تعیین کرد که کدامیک از دستورات CSS در کدام مورد (با توجه به وسیله خروجی مورد نظر)، اعمال شود. این کار از طریق ذکر ویژگی (attribute) media در تگ های style و link، صورت می گیرد. به این ترتیب که می توانیم که یک یا چند نوع وسیله خروجی را به عنوان مقدار این ویژگی مشخص نماییم و در این صورت فقط در مواردی که وسایل خروجی از انواع مشخص شده باشند، دستورات CSS ذکر شده در میان تگ های style  و یا موجود در فایلی که به وسیله تگ style یا link به فایل HTML ما پیوند داده شده است، اعمال خواهند شد. کلمات و عباراتی که می توانیم به عنوان مقدار ویژگی media به کار ببریم عبارتند از all (برای مشخص کردن کلیه وسایل خروجی)، braille (دستگاه های خروجی که محتوای صفحات را به صورت خط بریل برای نابینایان در می آورند)، embossed (برای مشخص کردن چاپگرهای سیستم بریل)، handheld (کامپیوترهای دستی و گوشی های موبایل)، print (حالتی که صفحه وب توسط چاپگر بر روی کاغذ چاپ می شود)، projection (برای ارائه صفحات به وسیله پروژکتورها و وسایل مشابه آنها. اپرا در حالت تمام صفحه خود از این گزینه استفاده می کند)، screen (نمایشگرهای رایانه)، speech (برای تبدیل محتوای صفحات به گفتار برای افراد نابینا که در حال حاضر تکمیل نشده و مؤسسه استانداردسازی در حال کارکردن بر روی آن است)، tty (برای وسایلی که قادر به نشان دادن فونت ها به شکل معمول خود نیستند و کلیه کاراکترها را با عرض ثابتی نشان می دهند)، tv (تلویزیون و وسایلی شبیه به آنها که رنگی بوده و رزولوشن پایینی دارند، صفحات آنها قابلیت اسکرول خوردن زیادی ندارند و قابلیت پخش صدا را نیز دارند).
    در حال حاضر بیشترین استفاده ای که ما در ایران می توانیم از این مورد داشته باشیم، مشخص کردن اشکال ظاهری متفاوت برای نمایشگرهای رایانه، چاپگرها و گوشی های موبایل است.
    آرایش صفحات وب به اشکال مختلف و قراردادن انتخاب در اختیار کاربران
    در صورتی که مرورگر مورد استفاده کاربران از استایل شیت های جایگزین پشتیبانی کند (در حال حاضر اپرا و فایرفاکس از آن پشتیبانی می کنند)، می توان دو یا چند فایل CSS را برای حالتهای مختلف ایجاد کرد و انتخاب گزینه مناسب را در اختیار کاربر قرار داد. برای این منظور باید تگ link مشخص کننده استایل شیت جایگزین، دارای ویژگی rel با مقدار alternate stylesheet بوده و دارای ویژگی title همراه با نامی برای مشخص کردن آن استایل شیت باشد.
    بنا بر دو بخشی که گفته شد، می توانیم برای استفاده از اشکال جایگزین صفحه وب و قراردادن نسخه قابل چاپ، کدهای زیر را در صفحه تایپ نماییم:
    <link rel=”stylesheet” type=”text/css” href=”base.css” media=”screen”      title=”شکل پیش فرض سایت”>
    <link rel=”alternate stylesheet” type=”text/css” href=”alt_layout.css” media=”screen” title=”شکل کاربرپسند سایت”>
    <link rel=”stylesheet” type=”text/css” href=”print.css” media=”print”>
    در این حالت، استایل شیت اول، به صورت پیش فرض و در هنگام لود شدن صفحه وب در مرورگر، مورد استفاده قرار خواهد گرفت، استایل شیت بعدی را کاربر می تواند به عنوان گزینه جایگزین فعال کند و استایل شیت سوم نیز تنها در صورتی که صفحه چاپ شود، مورد استفاده قرار خواهد گرفت.
    آشنایی با صورت نوشتاری و اصطلاحات رایج CSS
    هر کدام از استایل شیت های CSS در واقع لیستی از statement ها است. هر کدام از این statement ها ممکن است از نوع at-rule یا rule set باشد.
    At-rule ها
    در حال حاضر به دلیل پشتیبانی محدودی که مرورگرها از at-rule ها دارند، تنها از دو نوع آن می توانیم استفاده کنیم.
    مورد اول @import است که کاربرد آن را در وارد کردن استایل شیت ها در فایل صفحه وبمان دیدیم. در واقع، کاربرد این نوع at-rule، وارد کردن استایل شیتی در میان دیگری است.
    مورد دوم @media است که محدود کننده تعدادی از دستورات CSS به وسایل خروجی خاصی است و در واقع همان کار ویژگی (attribute) مدیای تگ <link> را انجام می دهد. نحوه به کار بردن آن به صورت زیر است:
    @media print, handheld {
    body {
    font-size: 30pt;
    }
    }
    rule set ها
    هر کدام از مجموعه قوانین (rule sets)، از یک انتخابگر (selector) و یک بلوک تعریف دستورات (declaration block)، تشکیل شده است.
    انتخابگر بخشی از مجموعه قوانین است که تا قبل از علامت } قرار دارد. این بخش در واقع عنصر یا عناصری در صفحات وب را مشخص می کند که باید دستورات بر روی آنها اعمال شود.
    بلوک تعریف دستورات، بخشی از مجموعه قوانین است که با علامت آکولاد (curly brace)، سمت چپ آغاز شده و با جفت سمت راستی این علامت، خاتمه می یابد. در داخل این بلوک تعدادی تعریف دستور (declaration) قرار می گیرد که هر کدام از آنها از یک جفت نام ویژگی (property name) و مقدار (value) تشکیل شده که با علامت دونقطه بیانی (:) از هم جدا می شوند. در پایان هر تعریف دستوری باید یک علامت نقطه ویرگول (semicolon) ; تایپ شود. نام ویژگی ها باید به صورت درست مشخص شوند و غلط املایی و مفهومی نداشته باشند. مقادیر آنها به صورت های متنوعی تعیین می شوند که در ادامه بحث به آنها می پردازیم.
    انواع مختلف مقادیر در CSS
    1ـ کلمات کلیدی: بسیاری از مقادیر در CSS به صورت کلمات کلیدی مشخص می شوند که از جمله آنها می توان نام رنگ ها را ذکر کرد. کلمات کلیدی نباید در میان علامت های نقل قول (quotation mark) قرار بگیرند مثلاً background-color: “yellow”; اشتباه است و آن را باید به صورت background-color: yellow; تایپ کرد.
    2ـ اندازه ها و واحد های آنها: اندازه ها در CSS به صورت یک عدد کامل یا عدد اعشاری به علاوه واحد آنها ذکر می شوند. عدد مشخص کننده اندازه و واحد آن باید به صورت پیوسته نوشته شده و هیچ فاصله یا فضای خالی میان آنها نباشد. ذکر واحد در تمامی موارد ضروری است به جز مواردی که عدد آن صفر باشد.
    واحدهایی که برای اندازه یک عنصر در صفحه وب به کار می روند، ممکن است از نوع نسبی یا مطلق باشند اما واحدهای مطلق را تنها در مواردی می توان به کار برد که خصوصیات ظاهری وسیله خروجی مشخص باشد. در ادامه بحث هر دو نوع واحد را معرفی می کنیم.
    واحدهای نسبی
    الف ـ em: این واحد بستگی به اندازه ای دارد که بر روی فونت عنصر مورد نظر اعمال می شود. به این ترتیب که فرض کنیم یک عنصر در نتیجه تعریف های قبلی که بر روی عناصر دربرگیرنده آن اعمال شده است، اندازه معینی از فونت ها را ارث بری کرده است. در این صورت، اندازه فعلی فونت این عنصر 1em می باشد و مثلاً برای بزرگترکردن آن به اندازه 1.2 برابر اندازه فونت عنصر دربرگیرنده آن، می توان اندازه فونت این عنصر را 1.2em تعیین کرد. نام این واحد از قالبهای قدیمی چاپ که حرف M بر روی آنها حک شده بود، گرفته شده است و معرف اندازه عرض این حرف در فونت مورد استفاده می باشد.
    ب ـ ex: این واحد به اندازه ارتفاع حرف x کوچک می باشد. این اندازه حتی برای فونت هایی نیز که فاقد این حرف می باشند، تعریف شده است.
    پ ـ px: این واحد مشخص کننده اندازه ها بر حسب پیکسل است. پیکسل ها در CSS از جمله واحدهای نسبی به شمار می آیند زیرا اندازه دیده شدن آنها بستگی به عوامل بسیار مانند وسیله خروجی، رزولوشن آن و غیره دارد. قبلاً گفته می شد که از این واحد نباید برای تعیین اندازه متون در صفحات وب استفاده کرد زیرا باعث می شود که مرورگر نتواند متن را زوم نماید. این اشکال در حال حاضر در بیشتر مرورگرها برطرف شده است اما از آنجا که هنوز هم ممکن است مرورگرهایی باشند که این اشکال را داشته باشند، بهتر است از استفاده آن اجتناب گردد. همچنین، برای تعیین اندازه متون در هنگام چاپ، نباید از این واحد استفاده کرد زیرا باعث می شود برخی از چاپگرهای دارای رزولوشن بالا حروف را بسیار ریز و یا حتی به اندازه یک نقطه چاپ نمایند.
    واحدهای مطلق
    الف ـ mm, cm, in: این سه عبارت به ترتیب بیانگر میلی متر، سانتی متر و اینچ هستند.
    ب ـ pt: این واحد point نام داشته و مقدار آن در CSS برابر با 72/1 اینچ (353/0 میلی متر) می باشد. این همان واحدی است که در نرم افزارهای ویرایش متن مانند Word از آن استفاده می شود.
    پ ـ pc: این واحد pica نام داشته و برابر با 12 point می باشد.
    از واحدهای مطلق (فیزیکی)، نباید برای نشان دادن متون بر روی صفحات نمایشگر رایانه استفاده کرد زیرا ممکن است باعث ناخوانا بودن متن در بعضی از سیستم های عامل و مرورگرها شود. این واحدها بیشتر برای چاپ مناسب بوده و به این منظور به کار می روند.
    3ـ درصدها: برخی از مقادیر را در CSS می توان به صورت یک عدد همراه با یک علامت درصد ذکر کرد. مثلاً در مجموعه قوانین زیر، عرض یک عنصر به صورت درصدی مشخص شده است:
    #example {
    width: 50%;
    }
    مقادیر مشخص شده به وسیله درصدها، ذاتاً وابسته به عنصر دیگری بوده و نسبت به آن تعیین می شوند. نحوه اعمال این مقادیر در مورد عناصر مختلف متفاوت است که در هر مورد جداگانه به آن اشاره خواهد شد.
    4ـ رنگ ها: سه روش معمول برای تعیین رنگ های در CSS وجود دارد که در ادامه بحث به آنها می پردازیم:
    الف ـ مبنای شانزده: همانطور که می دانیم، بزرگترین عدد در مبنای هر عدد دیگری می تواند حداکثر برابر با یکی کمتر از عدد مبنا باشد. بنابراین، اعداد در مبنای 16، می توانند حداکثر 15 باشند که برای نشان دادن اعداد تک رقمی (9 ـ 0) از اعداد و برای نشان دادن اعداد دورقمی (15 ـ 10)، به ترتیب از حروف انگلیسی a-f، استفاده می کنیم. برای تعیین رنگ های در CSS، می توان از 6 عدد در مبنای 16 استفاده کرد که جفت اول آن مربوط به رنگ قرمز، جفت دوم مربوط به رنگ سبز و جفت سوم آن مربوط به رنگ آبی است. در واقع، هر جفت از این اعداد، عددی بین 255 – 0 در مبنای 10 است که به معادل آن در مبنای 16 تبدیل شده است.  در صورتی که هر جفت این اعداد از دو عدد یکسان تشکیل شده باشد، می توان به جای 6 عدد، به تایپ کردن 3 عدد اکتفا کرد. قبل از مجموعه این اعداد نیز باید یک علامت # تایپ شود.
    ب ـ  مبنای 10:  به جای مشخص کردن رنگ ها به روش قبلی می توانیم اعداد مربوط به هر یک از رنگ های قرمز، سبز و آبی را به صورت اعداد در مبنای رایج روزمره آن یعنی مبنای 10 ذکر کنیم. همانطور که در مورد قبل نیز ذکر کردیم هر کدام از این مقادیر می تواند بین 255 ـ 0 باشد. برای مشخص کردن رنگ ها به این طریق، به روش زیر عمل می کنیم:
    rgb(0, 160, 255);
    همچنین می توانیم مقادیر درصدی هر کدام از این سه عدد را محاسبه کرده و به جای اعداد فوق قرار دهیم. به ترتیب زیر:
    rgb(0%, 63%, 100%);
    پ ـ کلمات کلیدی: تعدادی از رنگ ها را که در CSS مشخص شده اند می توان به صورت کلمات کلیدی معرفی کرد. از جمله این رنگ ها می توان به maroon (قرمز تیره یا خرمایی)، red (قرمز)، orange (نارنجی)، yellow (زرد) و olive (زیتونی)، اشاره کرد. برای اطلاع از لیست کامل این رنگ ها و معادل مبنای شانزده آنها می توانید به آدرس http://www.w3.org/TR/CSS21/syndata.html#color-units مراجعه فرمایید.
    ت ـ رنگهای سیستمی: رنگ ها را همچنین می توان به صورت رنگ های به کار رفته در سیستم عامل مورد استفاده کاربر معرفی کرد. از آنجا که پشتیبانی از این رنگها توسط مرورگرها چندان قابل اطمینان نبوده و در سیستم عامل دیگری ممکن است صفحات وب ما به شکلی کاملاً متفاوت از آنچه که ما در هنگام طراحی بر روی سیستم عامل خود ملاحظه می کنیم باشد، از این مورد معمولاً تنها در مواردی استفاده می کنیم که بخواهیم صفحه وبی شبیه پنجره ها و برنامه های بومی سیستم عامل کاربر طراحی نماییم و در این موارد نیز باید صفحات طراحی شده را در سیستم های عامل و مرورگرهای مختلف آزمایش نماییم. از جمله این رنگ ها می توان به ActiveCaption (بخشی که عنوان پنجره فعال در آن نوشته شده است)، Background (پس زمینه دسک تاپ سیستم عامل) و ButtonFace (رنگ روی عناصر سه بعدی مانند دکمه ها) اشاره کرد. برای مشاهده لیست کامل این رنگ ها می توانید به نشانی اینترنتی http://www.w3.org/TR/CSS21/ui.html#system-colors
    مراجعه فرمایید.
    5ـ اعداد: اعداد در CSS می توانند به صورت اعداد کامل یا اعداد اعشاری باشند. همچنین در مواردی که کاربرد آنها برای ویژگی (property)  مورد نظر، معتبر باشد، اعداد می توانند دارای علامتهای + و یا – باشند. برای مثال در عبارت زیر ارتفاع خط زمینه متن به وسیله عدد مشخص شده است:
    #example {
    line-height: 1.5;
    }
    6ـ رشته یا سلسله حروف (strings): برخی از کلمات و عبارات هستند که به عنوان کلمات کلیدی توسط سیستم و یا مرورگر شناسایی نمی شوند. از جمله این موارد می توان به نام خاص فونت های سیستم اشاره کرد. از آنجا که این کلمات و عبارات قابل شناسایی نیستند و سیستم آنها را به همان صورت ذکر شده خود در نظر می گیرند، باید از علامتهای نقل قول (تکی یا جفتی) در دو طرف این عبارات استفاده کرد.
    body {
    font-family: ‘tahoma’;
    }
    7ـ آدرس ها (URIs): این مورد مشخص کننده آدرس فایلی خارج از استایل شیت ما است. از آنجا که قبلاً به این آدرس ها URL (مخفف Uniform Resource Locator) گفته می شد، هنوز نیز برای مشخص کردن آنها در CSS از url استفاده می شود اما در حال حاضر از این آدرس ها با عنوان URI (مخفف Uniform Resource Identifier) یاد می شود.
    #example {
    background-image: url(“images/bg.gif”);
    }
    یادداشت ها (comments) در CSS
    در CSS، بر خلاف HTML که در آن از علامتهای <!– –> برای مشخص کردن یادداشت ها استفاده می شد، از صورتی از یادداشت ها که معمولاً در زبان های برنامه نویسی رایج تر است، استفاده می شود. به این منظور می توان نوشته هایی را که به عنوان یادداشت، مشخص می شود بین علامتهای /* و */ قرار داد. لازم به ذکر است که در CSS، بر خلاف آنچه در بیشتر زبانهای برنامه نویسی رایج است، نمی توان از // برای مشخص کردن یادداشتهای تک خطی استفاده کرد.

    آشنایی با انواع انتخابگرها (selectors) در CSS
    1ـ انتخابگر عناصر (Element Type Selector): این نوع انتخابگر در css شامل حال یک نوع از عناصر HTML می شود و شکل نوشتاری آن به صورت زیر است:
    نام عنصر (تگ مورد نظر)  {
    دستورات CSS
    }
    لازم به ذکر است که IE نسخه های 6 و قبل از آن، این نوع انتخابگر را در مورد عنصر abbr، تشخیص نمی دهند.
    2ـ انتخابگر گروه ها (classes): کلیه عناصری که در صفحه وب دارای ویژگی (attribute) class با مقدار مشترکی باشند، مشمول این نوع از انتخابگرها خواهند شد. شکل کاربردی آن به صورت زیر است:
    .warning {
    دستورات مورد نظر
    }
    در این مورد کلیه عناصری که در صفحه دارای ویژگی (class) با مقدار warning باشند، تحت تأثیر این انتخابگر قرار خواهند گرفت. دقت داشته باشید که هیچ فاصله ای نباید بین نقطه نشانگر گروه و مقدار آن تایپ شود. از این انتخابگر می توان همراه با مورد قبلی استفاده کرد به ترتیب زیر:
    p.warning {
    دستورات مورد نظر
    }
    در مورد فوق، تنها پاراگراف هایی که دارای کلاس با مقدار warning باشند، مشمول دستورات خواهند شد. این نوع از انتخابگر می تواند بیش از یک کلاس داشته باشد. در این صورت فقط عناصری که کلیه کلاس های مشخص شده را داشته باشند، مشمول این دستورات قرار خواهند گرفت. مثلاً در مورد زیر:
    div.new.warning {
    دستورات مورد نظر
    }
    فقط دستوراتی عناصری از نوع <div> که هر دو مقدار کلاس new و warning را داشته باشند، مشمول این دستورات خواهند شد.
    در اینترنت اکسپلورر نسخه 6 اگر مقدار کلاس عنصر مورد نظر با یک خط فاصله کوچک (-) یا بزرگ (_) شروع شود، این انتخابگر عمل نخواهد کرد.
    در اینترنت اکسپلورر نسخه های 6 و قبل از آن، تنها آخرین انتخابگر کلاس مورد توجه قرار خواهد گرفت و موارد قبلی مدنظر گرفته نخواهند شد. مثلاً در یک انتخابگر مانند .x.y.z ، دستورات نوشته شده در مورد کلیه عناصری که کلاس با مقدار z دارند، اجرا خواهد شد و اجرای دستورات تنها به عناصری که هم کلاس z و هم کلاس y و x را دارند، محدود نخواهد شد.
    3ـ انتخابگر شناسه ها (ids): این انتخابگرها مشمول عنصری در صفحه خواهند شد که دارای شناسه خاصی باشد. ساده ترین شکل استفاده آن به شکل زیر است:
    #شناسه عنصر موردنظر {
    دستورات مورد نظر
    }
    از آنجا که شناسه ها تنها یک بار در هر صفحه و برای یک عنصر خاص به کار می روند کمتر پیش می آید که همراه با آنها از انتخابگرهای عناصر استفاده شود اما برای وضوح بیشتر در استایل شیت هایمان ممکن است بخواهیم به صورت زیر از آنها استفاده کنیم:
    p#lastwarning {
    دستورات مورد نظر
    }
    4ـ انتخابگر کلی (universal): این انتخابگر کلیه عناصر را مشمول خود قرار خواهد داد. معمولاً وقتی این انتخابگر معنی پیدا می کند که همراه با انتخابگرهای دیگر مورد استفاده قرار گیرد:
    html * {
    دستورات مورد نظر
    }
    دستورات فوق شامل کلیه عناصر موجود در صفحه خواهند شد زیرا کلیه عناصر داخل  عنصر html قرار دارند.
    5ـ انتخابگر ویژگی های (attributes): گاهی ممکن است بخواهیم عناصر HTML را بر اساس ویژگی هایی که دارند، انتخاب کرده و دستورات CSS را بر آنها اعمال کنیم. در این موارد از انتخابگر ویژگی ها استفاده می کنیم. مثلاً دستور زیر:
    [title] {
    دستورات مورد نظر
    }
    شامل کلیه عناصری خواهد شد که دارای ویژگی title باشند. همانطور که در مورد انتخابگرهای دیگر نیز گفته شد، میتوان این انتخابگر را همراه با انتخابگر عناصر مورد استفاده قرار داد و در نتیجه آن را به نوع خاصی از عناصر محدود کرد:
    a[title] {
    دستورات مورد نظر
    }
    همچنین می توان این نوع انتخابگر را محدود به عناصری کرد که ویژگی خاصی با مقدار خاصی داشته باشند:
    a[title=”bestlinks”] {
    دستورات مورد نظر
    }
    انتخابگر فوق تنها لینک هایی را که دارای ویژگی title با مقدار bestlinks هستند را تحت تأثیر قرار خواهد داد.

    آموزش راحت CSS

    اگر تعدادی از عناصر داشته باشیم که مقدار یک ویژگی آنها لیستی از تعدادی کلمات جداشده از یکدیگر به وسیله hyphen باشند، می توانیم با به کاربردن اولین کلمه از لیست به صورت زیر کلیه آنها را مشمول دستوراتی قرار دهیم:
    a[class|=”link”] {
    دستورات مورد نظر
    }
    دستور فوق، <a href=”#” title=”titled_links”>، <a href=”#” title=”titled_links”>، <a href=”#” title=”titled_links”> و <a href=”#” title=”titled_links”> را تحت تأثیر خود قرار خواهد داد.
    و بالأخره در آخرین مورد استفاده این انتخابگر، اگر مقدار یکی از ویژگی های گروهی از عناصر لیستی از کلمات باشد که به وسیله فاصله (space) از هم جدا شده باشند و یکی از این کلمات، مورد نظر ما باشد، می توانیم به صورت زیر این عناصر را مورد فرمت خاصی قرار دهیم:
    a[class~=”link”] {
    دستورات مورد نظر
    }
    اینترنت اکسپلورر نسخه 6 و قبل از آن کلاً انتخابگر ویژگی ها را پشتیبانی نمی کنند.
    در مورد ویژگی هایی که به صورت حداقلی ذکر می شوند (آنهایی که تنها مقدارشان ذکر می شود)، مرورگرها در صورت به کاربردن این ویژگی ها رفتار متفاوتی از خود نشان می دهند. مثلاً اگر عنصری به صورت <input type=”text” name=”email” disabled>، داشته باشیم، انتخابگر input[disabled=”disabled”] طبق قوانین CSS باید عنصر فوق را انتخاب کند. با این وجود، بیشتر مرورگرها با آن مشکل پیدا می کنند. در فایرفاکس 2 و نسخه های قبلی آن و سافاری 2 و نسخه های قبلی آن، انتخابگر input[disabled=””]، این عنصر را انتخاب خواهد کرد. در اپرا 9.2، انتخابگر input[disable=”true”] این عنصر را انتخاب خواهد کرد. اینترنت اکسپلورر 7 نیز کلاً انتخابگرهای ویژگی های حداقلی را اصلاً نمی پذیرد.
    گروه بندی انتخابگرها
    اگر عناصری داشته باشیم که بخواهیم ظاهر و فرمت مشترکی را بر روی آنها اعمال کنیم، می توانیم انتخابگرهای مربوط به آنها را با علامت , از یکدیگر جدا کرده و دستورات مشترک را در مورد آنها ذکر نماییم:
    td, th {
    }

     

     ارسال در حدود 1700 روز قبل  نویسنده : akbari  بدون نظر   | ادامه مطلب »

    برترين مطالب
    Best Posts
    آخرین مطالب ارسالی
    Last Posts