ما هو CSS؟
هي آلية بسيطة لإضافة نمط (على سبيل المثال، الخطوط والألوان والتباعد) إلى مستندات الويب. يستخدم CSS لتحسين مظهر صفحة الويب. تحتوي هذه مقالة علی منصة كرسي للتعليم، على معلومات حول كيفية تعلم واستخدام CSS.
Inline CSS
الكود أدناه هو مثال على “inline CSS”، حيث يتم تحديد الأنماط داخل العلامات الفردية.
<!-- css.html --> <!DOCTYPE html> <html> <head> <title>CSS Tutorial</title> </head> <body> <h3 style="color:blue"> Heading 1 </h3> <h3 style="color:blue"> Heading 3 </h3> <h3 style="color:blue"> Heading 3 </h3> </body> </html>
في الكود أعلاه، لدينا ثلاثة “عناوين” بلون الخط (font-color) “الأزرق”. لنفترض أننا نريد تغيير اللون إلى اللون الأحمر، ثم يجب علينا الانتقال إلى علامة “h3” الفردية ثم تغيير اللون. وهذا أمر سهل في هذه الحالة، ولكن إذا كان لدينا 100 عنوان في 5 ملفات “HTML” مختلفة، فإن هذه العملية ليست سهلة للغاية. في مثل هذه الحالات، يمكن أن تكون CSS مفيدة جدًا مثل ما هو مبين في القسم التالي Embedded CSS.
Embedded CSS
في الكود أدناه، يتم تضمين النمط (style) داخل علامة “النمط” (style’ tag’) كما هو موضح في السطور 8-17. هنا، حددنا فئتين(class)، أي “h3_blue” (السطور 21-23) و “h3_red” (السطور 26-28). وبعد ذلك، تستهدف المحددات الموجودة في السطرين 9 و 13 الفئة “h3_blue” و “h3_red”، وتغيير اللون إلى الأزرق والأحمر على التوالي. ملاحظة في CSS، تتم كتابة التعليقات بين(/* and */).
يتكون Cascading Style Sheets من ثلاثة أجزاء:
- المحددات :p, h3.h3_blue
- خصائص (Properties): مثل اللون
- قيم الخصائص(Values of properties): مثل أحمر
<!-- css.html -->
<!DOCTYPE html>
<html>
<head>
<title>CSS Tutorial</title>
<style type="text/css">
h3.h3_blue{ /*change color to blue*/
color: blue;
}
h3.h3_red{ /*change color to red*/
color:red;
}
</style>
</head>
<body>
<h3 class='h3_blue'> Heading 1 </h3>
<h3 class='h3_blue'> Heading 3 </h3>
<h3 class='h3_blue'> Heading 3 </h3>
<h3 class='h3_red'> Heading 1 </h3>
<h3 class='h3_red'> Heading 3 </h3>
<h3 class='h3_red'> Heading 3 </h3>
</body>
</html>
External CSS
يمكننا كتابة كود “CSS” في ملف مختلف ثم استيراد الملف إلى مستند “html” كما هو موضح في هذا القسم.
بهذه الطريقة، يمكننا إدارة الملفات بسهولة.
• يتم حفظ كود “سي اس اس” في ملف “my_css.css” الذي يتم حفظه داخل المجلد ‘asset/css’.
/* asset/css/my_css.css */
h3.h3_blue{
color: blue;
}
h3.h3_red{
color:red;
}
وبعد ذلك، نحتاج إلى استيراد ملف CSS إلى ملف “html” كما هو موضح في السطر 7.
<!-- css.html --> <!DOCTYPE html> <html> <head> <title>CSS Tutorial</title> <link rel="stylesheet" type="text/css" href="asset/css/my_css.css"> </head> <body> <h3 class='h3_blue'> Heading 1 </h3> <h3 class='h3_blue'> Heading 3 </h3> <h3 class='h3_blue'> Heading 3 </h3> <h3 class='h3_red'> Heading 1 </h3> <h3 class='h3_red'> Heading 3 </h3> <h3 class='h3_red'> Heading 3 </h3> </body> </html>
Basic CSS Selectors
هناك ثلاثة أنواع من المحددات (selectors) في سي اس اس:
العنصر(Element): يمكن تحديده باستخدام اسمه على سبيل المثال “p” و “div” و “h1” إلخ.
الفئة(Class): يمكن تحديدها باستخدام “className.” على سبيل المثال “h3_blue.”.
المعرف(ID): يمكن تحديده باستخدام “idName#” على سبيل المثال “my_para#”.
سنستخدم HTML التالي لفهم المحددات،
<!-- css.html --> <!DOCTYPE html> <html> <head> <title>CSS Selectors</title> <link rel="stylesheet" type="text/css" href="asset/css/my_css.css"> </head> <body> <h3>CSS Selectors</h3> <p class='c_head'> Paragraph with class 'c_head' </p> <p id='i_head'> Paragraph with id 'i_head' </p> </body> </html>
يظهر الكود أدناه مثال على محددات مختلفة:
/* asset/css/my_css.css */
/*element selection*/
h3 {
color: blue;
}
/*class selection*/
.c_head{
font-family: cursive;
color: orange;
}
/*id selection*/
#i_head{
font-variant: small-caps;
color: red;
}
Hierarchy
في الفقرة السابقة، رأينا مثال المحددات. في هذه الفقرة، سوف نفهم التسلسل الهرمي لعمليات التصميم. سوف نتحدث عن مستوى الأولوية لـ سي اس اس.
• مستويات الأولوية :
– ID أعلى أولوية
– ثم Class
–ثم Element
• وإذا كان اثنان من CSS لهما نفس الأولوية، فسيتم تطبيق أخر قاعدة في CSS.
سوف نطبق مثال التالي:
1- ‘p ‘tag
2- ‘p’ tag with class ‘c_head’
3- ‘p’ tag with class ‘c_head’ and id ‘i_head’
<!-- css.html --> <!DOCTYPE html> <html> <head> <title>CSS Selectors</title> <link rel="stylesheet" type="text/css" href="asset/css/my_css.css"> </head> <body> <p>Paragraph</p> <p class='c_head'> Paragraph with class 'c_head' </p> <p class='c_head' id='i_head'> Paragraph with class 'c_head' and id 'i_head' </p> </body> </html>
/* asset/css/my_css.css */
/*class selection*/
.c_head{
font-family: cursive;
color: orange; /*override the blue color*/
}
/*id selection*/
#i_head{
color: red;
}
/*element selection*/
p {
font-variant: small-caps;
color: blue;
}
/*element selection*/
p {
color: green;
}
More selectors
سوف نعرض مجموعة من المحددات.
| Description | Selectors |
| element selector | h1, p, span etc |
| class selector | className. |
| id selector | idName# |
| (Universal selector (selects everything | * |
| ‘select h1 with class ‘className | h1.className |
| ‘select h1 with id ‘idName | h1#idName |
| (descendant selector (select span which is insid p | p span |
| (‘child selector (‘span’ which is direct descendant of ‘p | p > span |
| (group selection (select h1, h2 and p | h1, h2, p |
| ‘select ‘span’ with attribute ‘my_id | [span[my_id |
| ‘select ‘span’ with attribute ‘my_id=m_span | [span[my_id=m_span |
Attribute selector
أضف الكود أدناه في نهاية ملف html. تتم إضافة “السمات المخصصة” ( my_id).
<!-- css.html --> <span my_id='m_span'> Span with attribute 'my_id' with value 'm_span' </span> <br> <span my_id='m_span2'> Span with attribute 'my_id' with value 'm_span2' </span>
أضف الكود أدناه في ملف سي اس اس.
/*attribute selection*/
span[my_id] { /* select 'span' with attribute 'my_id' */
color: green;
font-weight: bold
}
span[my_id=m_span] { /* select 'span' with attribute 'my_id = m_span' */
color: red;
}
More properties
سيتم عرض بعض الخصائص الأكثر أهمية التي يمكن استخدامها في سي اس اس.
| Description/possible values | Syntax | Property |
| size = 20% | 20% | size |
| 20 pixel | 20px | |
| 2*font-size | 2em | |
| 2mm, cm and inch | 2mm, 2cm, 2in | |
| e.g. red, blue, green | names | color |
| FFF000 or #FFF# | hex code #RRGGBB or #RGB | |
| rgb(0, 0, 255) or rgb(20%, 10%, 70% | (rgb(num, num, num | |
| {a:link {color: red | a:link | link |
| a:hover | ||
| a:visited | ||
| a:active | ||
| serif, cursive | font-family | Font |
| normal, italic, oblique | font-style | |
| normal, small-caps | font-variant | |
| normal, bold, bolder, lighter, 100-900 | font-weight | |
| .10px, small, medium, large etc | font-size | |
| red, #FFF | color | Text |
| 10px | letter-spacing | |
| 10px | word-spacing | |
| right, left, center | text-align | |
| underline, overline, line-through, none | text-decoration | |
| capitalize, uppercase, lowercase, none | text-transform | |
| pre, normal, nowrap | white-space | |
| ;text-shadow:5px 5px 8px red | text-shadow | |
| ‘1px’, or ‘1px solid blue’ | border | Image |
| 100px, 20% | height, width | |
| solid, dashed, dotted, double, none etc | border-style | Border |
| border-top-style | ||
| border-bottom-style | ||
| border-left-style | ||
| border-right-style | ||
| 4px, 4pt | border-width | |
| ‘similarly use ‘top’, ‘left’, ‘right | border-bottom-width | |
| 1px solid blue | (border (shortcut | |
| margin, margin-left etc | Margin | |
| ‘10px 10px 2px 2px’ or ‘10px 2px’ | padding (top, bottom, left, right | Padding |
| padding-right, padding-left etc |
This article is useful for me
1+ 8 People like this post
