ما هو 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>
ما هو CSS؟
Embedded CSS

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;
 }
ما هو CSS؟
Selectors : element, class and id

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;
 }

ما هو CSS؟
Priority level for CSS rule

More selectors

سوف نعرض مجموعة من المحددات.

DescriptionSelectors
element selectorh1, p, span etc
class selectorclassName.
id selectoridName#
(Universal selector (selects everything*
‘select h1 with class ‘classNameh1.className
‘select h1 with id ‘idNameh1#idName
(descendant selector (select span which is insid pp span
(‘child selector (‘span’ which is direct descendant of ‘pp > 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
List of selectors

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;
}
ما هو CSS؟
Attribute selector

More properties

سيتم عرض بعض الخصائص الأكثر أهمية التي يمكن استخدامها في سي اس اس.

Description/possible valuesSyntax Property
size = 20%20%size
20 pixel20px
2*font-size2em
2mm, cm and inch2mm, 2cm, 2in
e.g. red, blue, greennamescolor
FFF000 or #FFF#hex code #RRGGBB or #RGB
rgb(0, 0, 255) or rgb(20%, 10%, 70%(rgb(num, num, num
{a:link {color: reda:linklink
a:hover
a:visited
a:active
serif, cursivefont-familyFont
normal, italic, obliquefont-style
normal, small-capsfont-variant
normal, bold, bolder, lighter, 100-900font-weight
.10px, small, medium, large etcfont-size
red, #FFFcolorText
10pxletter-spacing
10pxword-spacing
right, left, centertext-align
underline, overline, line-through, nonetext-decoration
capitalize, uppercase, lowercase, nonetext-transform
pre, normal, nowrapwhite-space
;text-shadow:5px 5px 8px redtext-shadow
‘1px’, or ‘1px solid blue’borderImage
100px, 20%height, width
solid, dashed, dotted, double, none etcborder-styleBorder
border-top-style
border-bottom-style
border-left-style
border-right-style
4px, 4ptborder-width
‘similarly use ‘top’, ‘left’, ‘rightborder-bottom-width
1px solid blue(border (shortcut
margin, margin-left etc Margin
‘10px 10px 2px 2px’ or ‘10px 2px’padding (top, bottom, left, rightPadding
padding-right, padding-left etc
More CSS properties

منشور ذات صلة

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

السلة