سوالات مصاحبه CSS

CSS مخفف Cascading Style Sheet است. CSS زبانی است که ما برای استایل دادن به سند HTML استفاده می کنیم. در واقع CSS نحوه نمایش عناصر HTML را توضیح می دهد. CSS باعث صرفه جویی زیادی در کار می شود زیرا می تواند استایل چندین صفحه وب را به طور همزمان کنترل کند.

CSS در وقت شما صرفه جویی می کند - می توانید CSS را یکبار بنویسید و سپس از همان برگه در چندین صفحه HTML استفاده کنید. می توانید برای هر عنصر HTML یک سبک تعریف کنید و آن را در هر تعداد صفحه وب که می خواهید اعمال کنید. تغییر و نگهداری آسان - برای ایجاد یک تغییر سراسری، فقط استایل را تغییر دهید و همه عناصر در تمام صفحات وب به طور خودکار به روز می شوند. استانداردهای جهانی وب - اکنون ویژگی های HTML در حال منسوخ شدن هستند و توصیه می شود از CSS استفاده کنید. بنابراین ایده خوبی است که از CSS در همه صفحات HTML استفاده کنید تا با مرورگرهای آینده سازگار شوند. افزایش سرعت - CSS سرعت بارگذاری صفحات را افزایش میدهد. زیرا می توان با حجم کمی از کد ها صفحات وب مورد نظر را ایجاد کرد. زمانی که کد های کمتری وجود داشته باشد مرورگر ها نیز وقت کمتری برای خواندن آن ها صرف می کنند.

Selector {Property:value; Property:value}

Example:
h1 {color:blue}

سه روش برای ادغام CSS در صفحات وب وجود دارد. روش Inline - از آن برای دادن استایل به تگ های HTML استفاده می شود روش Embedded/Internal - از این روش برای افزودن یک سبک منحصر به فرد داخل یک سند HTML استفاده می شود روش Linked/Imported/External - زمانی استفاده می شود که می خواهید در چندین صفحه از یک استایل کنید.

Inline
<p style="color:blue">Hello CSS</p>  

Intrenal
<style>  
p {color:blue}     
</style>  

External
In your style.css file:
p{color:blue}  

In your HTML
<link rel="stylesheet" type="text/css" href="style.css">  

فریمورک های CSS ، کتابخانه های از پیش برنامه ریزی شده ای هستند که امکان طراحی آسان صفحات وب را با استانداردهای بیشتر ایجاد می کنند. فریم ورک های CSS که اغلب استفاده می شوند عبارتند از: Bootstrap Foundation Semantic UI Gumby Ulkit

رشته هایی هستند که عناصری را که یک استایل خاص در مورد آنها اعمال می شود ، مشخص می کنند. همچنین از آن ها به عنوان پیوندی بین سند HTML و استایل شیت یاد می شود. معادل عناصر HTML است. چندین نوع مختلف Selector در CSS وجود دارد: - Element Selector - Id Selector - Class Selector - Universal Selector - Group Selector

- Selector - Property - Value

ویژگی opacity برای تعیین شفافیت یک عنصر استفاده می شود. در یک کلمه ساده ، می توانید بگویید که وضوح تصویر را مشخص می کند. مثلا:

<style>    
img.trans {    
    opacity: 0.4;    
    filter: alpha(opacity=40); /* For IE8 and earlier */    
}    
</style>  

universal selector به جای انتخاب یک عنصر خاص ، با نام تمام عناصر مطابقت دارد.

<style>    
* {    
   color: green;    
   font-size: 20px;    
}     
</style>    

از ویژگی background-color برای تعیین رنگ پس زمینه عنصر استفاده می شود. مثلا:

<style>
h2,p{    
    background-color: #b0d4de;    
}    
</style>

ویژگی background-repeat تصویر پس زمینه را به صورت افقی و عمودی تکرار می کند. برخی از تصاویر فقط به صورت افقی یا عمودی تکرار می شوند.

ویژگی background-position برای تعریف موقعیت اولیه تصویر پس زمینه استفاده می شود. به طور پیش فرض ، تصویر پس زمینه در سمت چپ بالای صفحه وب قرار می گیرد. می توانید موقعیت های زیر را تنظیم کنید: center top bottom left right

background: white url('good-morning.jpg');  
background-repeat: no-repeat;  
background-attachment: fixed;  
background-position: center;  

ویژگی background-attachment برای تعیین ثابت بودن تصویر پس زمینه یا حرکت با بقیه صفحه در پنجره مرورگر استفاده می شود. اگر تصویر پس زمینه را ثابت کرده اید ، در حین پیمایش در مرورگر ، تصویر حرکت نمی کند.

background: white url('bbb.gif');  
background-repeat: no-repeat;  
background-attachment: fixed;  

RWD مخفف عبارت Responsive Web Design است. این تکنیک برای نمایش کامل صفحه طراحی شده در هر اندازه صفحه نمایش و دستگاه ، به عنوان مثال تلفن همراه ، تبلت ، دسکتاپ و لپ تاپ استفاده می شود. نیازی به ایجاد صفحه متفاوت برای هر دستگاه ندارید.

اگر یک صفحه وب دارای تعداد زیادی تصویر باشد که بارگیری آنها زیاد طول می کشد زیرا هر تصویر به طور جداگانه یک درخواست HTTP ارسال می کند. مفهوم sprites CSS برای کاهش زمان بارگذاری صفحه وب استفاده می شود ، زیرا تصاویر کوچک مختلف را در یک تصویر ترکیب می کند. این مساله تعداد درخواست های HTTP و در نتیجه زمان بارگذاری را کاهش می دهد.

مدل CSS Box برای تعریف طراحی و چیدمان عناصر CSS استفاده می شود. عناصر آن عبارتند از: margin - فضایی اطراف تگ ایجاد میکند. transparent است. border - خطی اطراف عنصر ایجاد میکند. padding - اطراف محتواِی داخل تگ فضایی ایجاد میکند. transparent است. content - محتوا مانند متن ، تصاویر و غیره را نشان می دهد.

به طور کلی یک ویژگی موقعیت یابی است. یعنی برای جابجایی یک عنصر به راست یا چپ همراه با عناصری که دور آن قرار دارند ، استفاده می شود. این ویژگی عناصر مورد استفاده قبل از آن را تغییر نمی دهد.

<style>  
img {  
    float: right;  
}  
</style>  

به تعیین ترتیب پشته عناصری که ممکن است با یکدیگر همپوشانی داشته باشند ، کمک می کند. مقدار پیش فرض z-index صفر است و می تواند یک عدد مثبت یا منفی به خود بگیرد. عنصری با z-index بالاتر همیشه بالاتر از بقیه عناصر قرار میگیرد. Z-Index می تواند مقادیر زیر را دریافت کند: auto : ترتیب پشته را برابر با والدین خود تنظیم می کند. number : پشته را مرتب می کند. initial : این ویژگی را به مقدار پیش فرض (0) تنظیم می کند. inherit: مقدار این ویژگی را از عنصر والد خود به ارث می برد.

visibility: hidden عنصر را پنهان می کند ، اما فضا را اشغال می کند و روی layout سند تأثیر می گذارد.display: none نیز عناصر را پنهان میکند اما فضا را اشغال نمی کند و روی layout سند تأثیر نمی گذارد.

فواید: می توانید به صورت یک جا استایل و ویژگی های مختلف کل سایت را تعیین کنید و تغییرات را اعمال کنید. می توانید CLASS های مختلفی از استایل ها را بسازید و برای عناصر مختلفی از HTML از آن ها استفاده کنید. می توانید استایل های خود را به شکل گروهی استفاده کنید تا تاثیر بیشتری داشته باشند. این گروه ها نیاز شما را به نوشتن کدهای تکرار کاهش می دهند. معایب: بالا بردن زمان دانلود صفحات برای نمایش سند HTML ، باید استایل شیت خارجی بارگذاری شود. برای تعاریف سبک کوچک کاربردی نیست.

Id Selector از ویژگی id یک عنصر HTML برای انتخاب یک عنصر خاص و اعمال استایل استفاده می کند. id یک عنصر در یک صفحه منحصر به فرد است ، بنابراین از Id Selector برای انتخاب یک عنصر منحصر به فرد استفاده می شود! برای انتخاب عنصری با id خاص ، یک کاراکتر hash (#) و به دنبال آن id عنصر را بنویسید. CSS زیر روی عنصر HTML با id = para1 اعمال می شود:

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>

</body>
</html>

Class Selector عناصر HTML را با ویژگی خاص class انتخاب می کند. برای انتخاب عناصر با یک کلاس خاص ، یک کاراکتر (.) و سپس نام کلاس را بنویسید. در این مثال همه عناصر HTML با "class = "center قرمز و تراز وسط خواهند بود:

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p> 

</body>
</html>

Element Selector ، عناصر HTML را بر اساس نام عنصر انتخاب می کند. مثال در اینجا ، همه عناصر <p> صفحه با یک متن قرمز قرمز تراز وسط می شوند:

p {
  text-align: center;
  color: red;
}

Group Selector همه عناصر HTML را با استایل یکسان یکجا انتخاب می کند. مثال:

h1, h2, p {
  text-align: center;
  color: red;
}

Font-style Font-variant Font-weight Font-size/line-height Font-family Caption Icon

یک رنگ با 6 کاراکتر ، یعنی کدگذاری رنگ هگزا دسیمال نشان داده می شود که ترکیبی از اعداد و حروف است و قبل از آن #وجود دارد. یک رنگ با ترکیبی از قرمز ، سبز و آبی نیز نشان داده می شود. به عنوان مثال: rgb (r، g، b). در این نوع مقادیر می توانند بین اعداد صحیح 0 و 255 باشد.

Hexadecimal
p { color: #000000; }

RGB
ul { color: rgb(128, 80, 200); }

ابعاد را می توان با ویژگی های زیر تعریف کرد: Height Max-height Max-width Min-height Min-width Width

از آنجایی که با تصاویر inline مانند متن ها رفتار می شود ، بنابراین یک فضای خالی زیر تصویر باقی می ماند که می تواند با CSS زیر برطرف شود:

img { display: block ; }

کامنت را در CSS می توان با / * و * /اضافه کرد.

/* This is a single-line comment */
p {
  color: red;
}