الفئة على <p> تلوّن الفقرة كلها. فماذا لو أردنا تلوين كلمة واحدة فقط؟ نُحيطها بالوسم <span>. هو وحده لا يغيّر شيئًا، لكنه يعطي CSS «مقبضًا» يمسك به هذا الجزء.
.sea {
color: blue;
}
.mountain {
color: green;
}حقول الإدخال والأزرار
الوسم <input> يصنع عنصرًا يتفاعل معه الزائر، وليس له وسم نهاية. نوعه تحدده السمة type: القيمة text تصنع حقلًا للكتابة، والقيمة button تصنع زرًّا، والسمة value هي النص المكتوب على الزر.
<h1>School Survey</h1> <p>Your opinion</p> <input type="text"> <input type="button" value="Submit">
hover و transition
إذا كتبنا :hover بعد المُحدِّد يُطبَّق التنسيق فقط أثناء مرور مؤشر الفأرة فوق العنصر. والخاصية transition تجعل التغيّر تدريجيًا خلال مدة بالثواني، مثل 2s. مرّر الفأرة على الزرين:
.btn1 {
background-color: aqua;
}
.btn2:hover {
background-color: yellow;
transition: 2s;
}:hover: اكتب .btn2:hover وليس .btn2 :hover. والزر الأول هنا لونه ثابت لأن قاعدته بلا :hover.الإطار border
الخاصية border ترسم إطارًا حول العنصر. نكتب لها ثلاث قيم بمسافات بينها: السُمك بالبكسل، ثم النوع (solid خط واحد، double خطان)، ثم اللون.
h1 {
border: 10px double blue;
}
li {
font-weight: 900;
}تدريبات
CSS جاهز. أحِط Apple بوسم span فئته apple، وGiraffe بـspan فئته giraffe، وLight blue sneakers بـspan فئته sneaker.
<p>My favorite fruit is Apple</p> <p>My favorite animal is Giraffe</p> <p>Today's shoes are Light blue sneakers</p>
تحت الفقرة أضف حقل نص <input type="text">، ثم زرًّا (type="button") مكتوبًا عليه Submit.
تلميح
اكتبtype أولًا ثم value.<h1>School Survey</h1> <p>Your opinion</p>
أضف بعد القاعدة الموجودة قاعدة تجعل زر Zoo (الفئة btn2) خلفيته yellow عند مرور الفأرة فقط.
.btn1 {
background-color: aqua;
}اجعل تغيّر لون زر Zoo تدريجيًا خلال 5 ثوانٍ.
.btn1:hover {
background-color: lime;
transition: 2s;
}
.btn2:hover {
background-color: yellow;
___: ___;
}أضف إلى h1 إطارًا: السُمك 5px والنوع solid واللون red (بهذا الترتيب).
h1 {
}CSS جاهز. في إعلان الامتحان أحِط Sunday بوسم span فئته day، وRoom 5 بـspan فئته room.
<h2>Exam Notice</h2> <p>The physics exam is on Sunday in Room 5.</p>
اكتب قاعدتين بهذا الترتيب: (1) h1 له إطار 3px double green. (2) .join:hover خلفيته lime ثم transition مدته 1s.
النقاط الرئيسية
<span>يُحيط بجزء من السطر لننسّقه وحده.<input type="text">حقل نص، و<input type="button" value="...">زر..x:hoverتنسيق أثناء مرور الفأرة، وtransition: 2s;يجعله تدريجيًا.border: 10px double blue;= السُمك ثم النوع ثم اللون.