دانلود رایگان سوالات آزمون استخدامی شایستگی سی اس اس (CSS) بخش خصوصی
سوالات شایستگی سی اس اس (CSS) ویژه فناوری اطلاعات
سوالات شایستگی سی اس اس (CSS) ویژه مهندسی
شایستگی سی اس اس (CSS)
بهتر است بدانیم که CSS مخفف چه کلماتی است. این کلمه مخفف Cascading Style Sheets و به معنای صفحات استایل آبشاری است.
استایل یعنی چه؟ وقتی شما یک تصویری را طراحی میکنید یا قصد دارید به یک تصویر خالی رنگ و زینت دهید درواقع به آن استایل داده اید. در مبحث طراحی وب هرچقدر از رنگ های زیبا و مناسب برای طراحی وب سایت خود استفاده کنید بهتر است زیرا همانطور که خلق و خوی انسانی متفاوت بودن و زیبا بودن را دوست دارد بنابراین صفحات وب نیز باید به همین ترتیب زیبا طراحی شوند. چون همان کاربران درنهایت قرار است با صفحات وب تعامل داشته باشند.
حالا چرا صفحات استایل آبشاری؟ زیرا در CSS دستور اعمال شده بر هر عنصر، به زیرشاخه های آن عنصر نیز تاثیر خواهد داشت. برای درک بهتر این قضیه در ادامه صحبت خواهیم کرد
کدهای CSS یکسری دستورات هستند که به تنهایی کاربردی ندارند! از کدهای CSS میتوانید برای استایل دهی ظاهر سایت که با HTML طراحی کرده اید استفاده کنید.
طبیعتاً قبل از یادگیری CSS ابتدا باید HTML را یاد بگیرید زیرا در طراحی وب، HTML و CSS دو عضو جدا نشدنی از یکدیگر هستند. به طور کلی اگر بخواهیم HTML و CSS را به بدن انسان تشبیه دهیم، HTML اسکلت انسان و CSS گوشت و پوست و ظاهر خواهد بود. پس همانقدر که سبک و استایل در طراحی وب ضروری است، طراحی بدنه اصلی (یا اسکلت) وب سایت نیز از ضروریات میباشد.
برای ایجاد یک سند جدید ابتدا به مسیر File> New بروید. سند خود را در همان مسیری که فایل HTML را ذخیره کرده اید ذخیره کنید. هنگام ذخیره فایل در قسمت Type گزینه cascade style sheet file را انتخاب کنید. همچنین نامی که برای فایل خود انتخاب میکنید را به خاطر بسپارید زیرا باید دقیقا آن را در صفحه HTML فراخوانی کنید.
همانطور که بالا گفتیم برای اینکه بتوانید فایل CSS خود را به HTML پیوند دهید باید از یک دستور استفاده کنید، اما سوالی که وجود دارد این است آیا در همه جا میتوان از این دستور استفاده کرد؟
پاسخ خیر است! شما باید دستورات و تگ های متا را باید در داخل تگ <head> قرار دهید.
وظیفه انتخاب کننده یا Selector در CSS این است که مقادیر نوشته شده داخل {} را بر روی یک عنصر یا تگ اعمال کند. سلکتور میتواند یک تگ، کلاس یا آیدی باشد. در ادامه پست در رابطه با کلاس و آیدی صحبت خواهیم کرد.
بخش {} دارای دو قسمت است که با کاراکتر (:) از هم جدا میشود. این دو نقطه صفت (Properties) و مقدار آن (Property value) را از یکدیگر جدا میکند. در انتها پس از نوشتن یک مقدار برای صفت باید با کاراکتر (;) پایان دستور را مشخص کنیم. برای مثال در تصویر بالا تگ <p> سلکتور است و برای صفتِ color مقدار red داده شده است. به این معناست که متن داخل تگ <p> موجود در سند HTML، به رنگ قرمز درمیآید.
در سینتکس CSS مفاهیم دیگری از جمله Declaration و Ruleset و Shorthand و Comment وجود دارد.
قانون اولویت بندی استایل دهی در CSS
منظور از اولویت بندی استایل دهی چیست؟ اگر به خاطر داشته باشید در بالا گفتیم که سه روش برای استایل دهی در CSS وجود دارد.
اولویت استایل دهی به همان ترتیبی است که در توضیحات ذکر کردیم:
استایل دهی خطی
استایل دهی داخلی
استایل دهی خارجی
قانون اولویت بندی سلکتورها در CSS
همانطور که استایل دهی قانون خود را دارد، سلکتورها نیز قانون اولویت بندی دارند. در ابتدای پست گفتیم که کلمه CSS مخفف Cascading Style Sheets به معنای صفحات استایل آبشاری میباشد. حال که نحوه نوشتن استایل را یاد گرفتیم میتوانیم بگوییم که اگر دو استایل مشترک در یک صفحه وجود داشته باشد، اولویت با آن استایلی خواهد بود که در پایین ترین سطر از کدها نوشته باشد. زیرا استایل ها به ترتیب از بالا به پایین اجرا و بر روی عنصر ها اعمال میشوند.
بنابراین ما باید قانون اولویت بندی سلکتور ها را یاد بگیریم و استایل های خود را بر اساس این قانون بر روی عنصرها اعمال کنیم
به طور کلی اولویت ها را میتوان در چهار رده اولویت بندی کرد که به ترتیب زیر میباشد:
استایل خطی یا Inline
آیدی (ID)
کلاس (Class)
سلکتور تگ یا Element
دانلود سوالات شایستگی سی اس اس (CSS) ویژه فناوری اطلاعات
دانلود سوالات شایستگی سی اس اس (CSS) ویژه مهندسی