پرسش ها و پاسخ های برتر مصاحبه های CSS
جمعه 12 شهریور 1395در این مقاله قصد داریم که نحوه کار با CSS را در HTML با چندین مثال متنوع برای شما بازگو کنیم.که اکثر خصوصیات CSS را در برمیگیرد.
سوال اول : CSS چیست؟
CSS مخفف کلمه(Cascading Style Sheets).
CSS یک زبان طراحی است.که برای ساختن صفحات HTML استفاده میشود که آنها را جذاب تر میکند.
سوال دوم : مزایای استفاده از CSS چیست؟
•صرفه جویی در وقت_ ما CSS را یک بار مینویسیم و بارها از آن استفاده میکنیم.
•صفحات با سرعت بالاتری load میشوند_با نوشتن css سرعت load صفحات اینترنتی بالاتر میرود به دلیل اینکه شما برای هر تگ html لازم به نوشتن attribute نیستید.
•نگهداری آسان_اگر شما بخواهید که تغییری در طراحی سایت ایجاد کنید ،شما فقط یکبار آن را در فایل css تغییر میدهید.
•پلتفرم مستقل_css یک پلتفرم مستقل است.
سوالا سوم : اجزای css چیست؟
• Selector_تگ HTML در هر style عملی میشود.
•Property_یک style است که در المان ها کاربرد دارد.
•Value_اختصاص دادن مقدار به property.
سوال چهارم : type selector چیست؟
type selectorیک انتخاب گر برای stlye است.
مثال :
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: lightblue;
text-align: left;
}
p {
font-family: verdana;
font-size: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>c# corner</h1>
<p>community for developer</p>
</body>
</html>
سوال پنجم : universal selector چیست؟
universal selector برای انتخاب کردن تمام المان های html برای استایل دادن استفاده می شوند.
مثال:
<!DOCTYPE html>
<html>
<head>
<style>
*{
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1>c# corner</h1>
<p>community for developer</p>
</body>
</htm
سوال ششم: Descendant Selector چیست؟
Descendant Selectorبرای وقتی که ما style به المنت میدهیم که بین المنی خاص قرار گرفته است ، استفاده میشود.
مثال:
<!DOCTYPE html>
<html>
<head>
<style>
h1{
color:red;
}
h1 em{
color: blue;
}
</style>
</head>
<body>
<h1>c# <em>Corner</em></h1>
<p>community for developer</p>
</body>
</html>
سوال هفتم: class selector چیست؟
class selector وقتی که style را به المنت میدهیم با استفاده از class attribute از آن استفاده میشود.
مثال :
<!DOCTYPE html>
<html>
<head>
<style>
.heading{
color:red;
text-align:center;
}
</style>
</head>
<body>
<h1 class="heading">c#corner</h1>
<p class="heading">community for developer</p>
</body>
</html>
سوال هشتم: آیا شما میتوانید یک class selector خاص برای یک نوع المنت ایجاد کنید؟
بله ما این کار را میتوانیم انجام دهیم.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
h1.heading{
color:red;
text-align:center;
}
</style>
</head>
<body>
<h1 class="heading">c#corner</h1>
<p class="heading">community for developer</p>
</body>
</html>
سوال نهم : ID selector چیست؟
ID selector برای style دهی برای attribute ها یکی است.
مثال:
<!DOCTYPE html>
<html>
<head>
<style>
#heading{
color:red;
text-align:center;
}
#para{
color:blue;}
</style>
</head>
<body>
<h1 id="heading">c#corner</h1>
<p id="para">community for developer</p>
</body>
</html>
سوال دهم : آیا شما میتوانید یک id selector خاص برای یک نوع المنت ایجاد کنید؟
بله ما این کار را میتوانیم انجام دهیم.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
h1#heading{
color:red;
text-align:center;
}
</style>
</head>
<body>
<h1 id="heading">c#corner</h1>
<p id="heading">community for developer</p>
</body>
</html>
سوال یازدهم : child selector چیست؟
child selector برای انتخاب کردن child element تگ html کاربرد دارد.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
body>p{
color:red;
font-size:30px;
}
</style>
</head>
<body>
<h1 id="heading">c#corner</h1>
<p id="heading">community for developer</p>
<p>www.c-sharpcorner.com</p>
</body>
</html>
سوال دوازدهم : attribute selector چسیت؟
ما میتوانیم style را برای یک المان به وسیله ی attribute selector قرار دهیم.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
input[type="text"]
{
color:red;
background-color:powderblue;
font-size:20px;
}
</style>
</head>
<body>
<h1 id="heading">c#corner</h1>
<p id="heading">community for developer</p>
enter your name<input type="text"/>
</body>
</html>
سوال سیزده ام:
چگونه تمام پاراگراف های المنت ها را با lang attribute انتخاب کنیم.؟
برای این کار از (p(lang استفاده میکنیم.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
p:lang(it) {
background: yellow;
}
</style>
</head>
<body>
<h1 id="heading">c#corner</h1>
<p id="heading">community for developer</p>
<p lang=it>c-sharpcorner.com</p>
</body>
</html>
سوال چهارده ام : چه راه های مختلفی برای استفاده css در html داریم؟
• ادغام عنصر <CSS − <style: شما میتوانید قانون های CSS را با استفاده از style> element> در داخل فایل HTML بنویسید.
• Inline CSS − style Attribute : شما میتوانید صفت های همه ی فایل های html را در style تعریف کنید.
•External CSS − <link> Element : المان <link>برای یک فایل stylesheet بیرونی میتواند تعریف شود.
• Imported CSS − @import Rule : به شیوه ای استفاده میشود @import برای وارد کردن یک فایل css شبیه به link> element>
سوال پانزدهم : هدف از واحد٪ اندازه گیری چیست؟
واحد٪ اندازه گیری برای تعریف ارزش در یک در صد استفاده میشود.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
div{
width:20%;
background-color:lightblue;}
p:lang(it) {
background: yellow;
}
</style>
</head>
<body>
<div>
<h1 id="heading">c#corner</h1>
</div>
<p id="heading">community for developer</p>
<p lang=it>c-sharpcorner.com</p>
</body>
</html>
سوال شانزده ام : هدف از واحد اندازه گیری سانتی متر چیست؟
برای تعریف مقدار در واحد cm استفاده میشود.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
div{
width:20%;
background-color:lightblue;
border-style: dotted;
border-width: 0.1cm;}
p:lang(it) {
background: yellow;
}
</style>
</head>
<body>
<div>
<h1 id="heading">c#corner</h1>
</div>
<p id="heading">community for developer</p>
<p lang=it>c-sharpcorner.com</p>
</body>
</html>
سوال هفده ام : مرورگرها از کدام رنگ ها پشتیانی میکند؟
در زیر لیستی از رنگها و مرورگرهایی که از آن ها پشتیبانی میکند را میبینیم:
سوال هجدهم : برای تنظیم رنگ پس زمینه یک عنصر کدام property استفاده می شود ؟
برای تنظیم رنگ پس زمینه یک عنصر، خصوصیت background-color استفاده شده است.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
div{
width:20%;
background-color:lightblue;
}
</style>
</head>
<body>
<div>
<h1 id="heading">c#corner</h1>
</div>
<p id="heading">community for developer</p>
</body>
</html>
سوال نوزدهم : برای تنظیم تصویر پس زمینه یک عنصر کدام property استفاده می شود؟
برای تنظیم تصویر پس زمینه یک عنصر، خصوصیت background-image استفاده شده است.
مثال :
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/olympics_logo.png");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<br>
<h1>c# corner</h1>
</body>
</html>
سوال بیستم : برای کنترل از تکرار یک تصویر در پس زمینه کدام property مورد استفاده قرار میگیرد؟
برای تکرار یک تصویر در پس زمینه، از background-repeat استفاده شده است.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/olympics_logo.png");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<br>
<h1>c# corner</h1>
</body>
</html>
سوال بیست و یکم : برای کنترل موقعیت از یک تصویر در پس زمینه کدام property استفاده می شود؟
برای تنظیم موقعیت تصویر پس زمینه، خاصیت background-position استفاده شده است.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/olympics_logo.png");
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<br>
<h1>c# corner</h1>
</body>
</html>
سوال بیست و دوم : برای کنترل پیمایش از یک تصویر در پس زمینه کدام property مورد استفاده میشود؟
برای رفع در پس زمینه، خصوصیت background-attachment استفاده شده است.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/olympics_logo.png");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
</style>
</head>
<body>
<br>
<h1>c# corner</h1>
</body>
</html>
سوال بیست و سوم : کدام property استفاده می شود برای تغییر چهره یک فونت کدام property استفاده می شود؟
برای تغییر فونت، ویژگی font-family استفاده شده است.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
p.serif {
font-family: "Times New Roman", Times, serif;
}
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>c# corner</h1>
<p class="serif">community for developers</p>
<p class="sansserif">c-sharpcorner.com</p>
</body>
</html>
سوال بیست و چهارم : برای کج فونت یا مورب کدام property استفاده می شود؟
برای ایجاد یک فونت italic و یا مورب، ویژگی font-style استفاده شده است.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
.italic {
font-style: italic;
color:red;
}
.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<h1 class="italic">c# corner</h1>
<p class="oblique">c-sharpcorner.com</p>
</body>
</html>
سوال بیست و ششم : برای افزایش یا کاهش حجم (bold)و یا روشن کردن یک فونت کدام property استفاده می شود؟
برای این کار از font-weight استفاده میشود.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
.italic {
font-style: italic;
color:red;
font-weight: bold;
}
.oblique {
font-style: oblique;
font-weight: 900;
}
</style>
</head>
<body>
<h1 class="italic">c# corner</h1>
<p class="oblique">c-sharpcorner.com</p>
</body>
</html>
سوال بیست و هفت : کدام property استفاده می شود برای کنترل جریان و قالب بندی متن کدام property استفاده می شود؟
برای کنترل جریان و قالب بندی متن، ویژگی white-space استفاده شده است.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
p {
white-space: nowrap;
}
</style>
</head>
<body>
<p>
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
</p>
</body>
</html>
سوال بیست و هشتم : کدام property حاشیه سمت چپ یک عنصر را مشخص میکند؟
برای مشخص کردن حاشیه سمت چپ از یک عنصر، margin-left استفاده شده است.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
.lm{
margin-left: 5cm;
}
</style>
</head>
<body>
<p>c# corner</p>
<p class="lm">www.c-sharpcorner.com</p>
</body>
</html>
سوال بیست و نهم : کدام property است که padding پایین یک عنصر را تعیین میکند؟
برای مشخص کردن padding پایین از یک عنصر، ویژگی padding-bottom استفاده شده است.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
padding-bottom: 2cm;
}
p.padding2 {
padding-bottom: 50%;
}
</style>
</head>
<body>
<p>c# corner</p>
<p class="padding">community of dvelopers</p>
<p class="padding2">c-sharpcorner.com</p>
</body>
</html>
سوال آخر: کدام property است که padding بالا یک عنصر را تعیین میکند؟
برای مشخص کردن padding پایین از یک عنصر، ویژگی padding-top استفاده شده است.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
padding-top: 2cm;
}
</style>
</head>
<body>
<p>c# corner</p>
<p class="padding">community of dvelopers</p>
<p class="padding2">c-sharpcorner.com</p>
</body>
</html>
- HTML
- 5k بازدید
- 3 تشکر