هذه الترجمة لم تكتمل. رجاءً ساعد بترجمة هذه المقالة من الإنجليزية.

السي إس إس (صفحات الطرز المتراصة) هي التعليمات البرمجية التي تستخدم لتنسيق صفحتك. ستناقش مقالة أساسيات صفحات الطرز المتراصة ما تحتاجه لتبدأ مع هذه التقنية. سنجيب عن أسئلة مثل: كيف أجعل نصي ذا لون أسود أو أحمر؟ كيف أجعل محتواي في مكان محدد على الشاشة؟ كيف أزين صفحتي بصورة وألوان خلفية؟

إذاً ماهي صفحات الطرز المتراصة عملياً؟

لاتعد السي إس إس لغة برمجة (كما الأتش تي أم إل لا تعد كذلك). وهي ليست لغة ترميزية حتى — فهي لغة أنماط (تصميم). هذا يعني أنها تسمح لك بتطبيق تنسيقات على عناصر منتقاة من وثيقة لغة ترميز النص الفائق. على سبيل المثال، لاختيار جميع عناصر الفقرة في صفحة الويب وجعل لون النص بداخلها أحمر، تستطيع استخدام هذه التعليمة:

p {
  color: red;
}

دعنا ننسخ الثلاث سطور السابقة ونضعها في ملف جديد وبعدها نقوم بحفظ الملف باسم style.css داخل المجلد styles.

ولكننا مازلنا بحاجة لربط الملف مع وثيقة لغة ترميز النص الفائق. وإلا لن يعمل التنسيق الذي أضافه ملف styls.css على صفحتك. (إذا لم تكن قد تابعت معنا الوحدة من بدايتها قم بقراءة مقالة التعامل مع الملفات و مقالة أساسيات لغة ترميز النص الفائق لمعرفة ما أنت بحاجة إليه لتبدأ).

  1. افتح الملف index.html والصق السطر أدناه في وسم head:
    <link href="styles/style.css" rel="stylesheet" type="text/css">
  2. احفظ الملف وقم بفتح الصفحة في متصفحك. يجب أن ترى شيئاً من هذا القبيل:

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.

تهانينا! إذا أصبح نص فقرتك باللون الأحمر، فقد قمت بكتابة أول ملف سي إس إس ناجح.

تشريح أمر السي إس إس

دعنا نأخذ نظرة مفصلة حول الثلاث سطور السابقة:

تدعى الثلاث سطور السابقة بمجموعة الأمر (rule set). لاحظ أيضاً أسماء كل جزئ من مجموعة الأوامر تلك:

المحدد (المنتقي)
هو اسم عنصر الأتش تي أم إل ويوضع في بداية مجموعة الأوامر. يقوم بتحديد العنصر/العناصر التي يراد تنسيقها (في حالتنا العناصر ذات الوسم p). لتقوم بتنسيق عنصر أخر ما عليك سوى تغيير المحدد.
الإعلان
هو أمر مفرد مثل color: red والذي يحدد الخاصية التي تريد استخدامها لتنسيق العنصر.
الخاصية
هي الطريقة التي تريد تنسيق العنصر فيها. (في حالتنا الخاصية color هي خاصية للعنصر <p>). في السي إس إس أنت تقوم باختيار الخواص التي تريدها أن تأثر على عنصرك.
قيمة الخاصية
توضع على يمين اسم الخاصية بعد النقطتين، والتي تحدد واحدة من  العديد من الخيارات المتاحة (يوجد العديد من القيم الأخرى إلى جانب القيمة red للخاصية color).

انتبه للأجزاء المهمة الأخرى من البنية الكتابية لمجموعة الأمر:

  • كل مجموعة أمر (بغض النظر عن المحدد) يجب أن تحاط بأقواس معقوفة ({}).
  • بداخل كل إعلان يجيب عليك استخدام نقطتين (:) للفصل بين الخاصية وقيمتها.
  • بداخل كل مجموعة أمر يجب عليك استخدام فاصلة منقوطة (;) للفصل بين كل إعلان والإعلان الذي يليه.

إذا لكتابة عدة خواص في مجموعة أمر واحدة ما عليك سوى كتابتهم والفصل بينهم باستخدام فاصلة منقوطة، كالتالي:

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

اختيار عدة عناصر

يمكنك أيضاً اختيار عدة أنواع من العناصر وتطبيق عليهم مجموعة أمر واحدة. قم بإضافة عدة محددات مفصولين بفاصلة. على سبيل المثال:

p,li,h1 {
  color: red;
}

أنواع مختلفة من المحدد

هناك عدة أنواع مختلفة من المحدد. أعلاه، قمنا فقط باستخدام محددات العنصر، والذي يختار جميع العناصر من النوع نفسه في وثيقة الأتش تي أم إل. ولكن يمكننا القيام بتحديد أكثر دقةً من ذلك. يوجد هنا بعض الأنواع الشائعة من المحددات:

اسم المحدد ماذا يحدد مثال
محدد العناصر (يسمى أحيانا بمحدد النوع أو الوسم) جميع العناصر التي من نفس النوع p
تحدد العناصر ذات الوسم <p>
محدد الهوية العنصر الموجود في الصفحة والذي يملك تلك الهوية (في صفحة الأتش تي أم إل يُسمح لك بإعطاء هوية واحدة مميزة لكل عنصر) #my-id
تحدد العناصر ذات الهوية <p id="my-id"> أو <a id="my-id">
محدد الصنف العنصر/العناصر الموجودة على الصفحة والتي تملك ذلك الصنف (يمكن استخدام الصنف نفسه على عدة عناصر) .my-class
Selects <p class="my-class"> and <a class="my-class">
محدد السمة العناصر في الصفحة والتي تملك السمة المحددة img[src]
تحدد الصور ذات السمة <img src="myimage.png"> ولكن لا تحدد عنصر الصورة بدون السمة المذكورة <img>
محدد فئة الشبه عنصر/عناصر محدد ولكن عندما يكون بحالة معينة، مثال عندما يتم التحويم فوقه

a:hover
تحدد العناصر <a>

ولكن فقط عندما يتم تحويم مؤشر الفأرة فوق الرابط

يوجد العديد من المحددات الأخرى لاكتشافها، يمكنك إيجاد قائمة مفصلة أكثر في مقالة دليل المحددات.

الخطوط والنصوص

والآن بعد أن تعرفنا على بعض أساسيات السي إس إس، دعنا نبدأ بإضافة بعد الأوامر والمعلومات لملف style.css لنجعل مثالنا يبدو أجمل. دعنا نبدأ بجعل الخطوط والنصوص التي نستخدمها تبدو أفضل.

  1. بدايةً، قم بالحصول على مسار الخط الذي جلبته من موقع خطوط جوجل. أضف العنصر <link> في الوسم <head>. كالتالي:
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  2. بعدها، قم بحذف التعليمة السابقة التي كتبناها في ملف style.css. لقد كانت تجربة جيدة، ولكن اللون الأحمر ليس ملائماً بما فيه الكفاية.
  3. ضع السطور التالية في الملف، استبدل سطر placeholder بعائلة الخط (font-familt) التي حصلت عليها من موقع خطوط جوجل ()

 

  • Next, delete the existing rule you have in your style.css file. It was a good test, but red text doesn't actually look very good.
  • Add the following lines in its place, replacing the placeholder line with the actual font-family line you got from Google Fonts. (font-family just means the font(s) you want to use for your text.) This rule first sets a global base font and font size for the whole page (since <html> is the parent element of the whole page, and all elements inside it inherit the same font-size and font-family):
    html {
      font-size: 10px; /* px means 'pixels': the base font size is now 10 pixels high  */
      font-family: placeholder: this should be the rest of the output you got from Google fonts
    }

    Note: Anything in a CSS document between /* and */ is a CSS comment, which the browser ignores when it renders the code. This is a place for you to write helpful notes on what you are doing.

  • Now we'll set font sizes for text-containing elements inside the HTML body (<h1>, <li>, and <p>). We'll also center the text of our heading and set some line height and letter spacing on the body content to make it a bit more readable:
    h1 {
      font-size: 60px;
      text-align: center;
    }
    
    p, li {
      font-size: 16px;    
      line-height: 2;
      letter-spacing: 1px;
    }

You can adjust these px values to whatever you like to get your design looking how you want, but in general your design should look like this:

a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

Boxes, boxes, it's all about boxes

One thing you'll notice about writing CSS is that a lot of it is about boxes — setting their size, color, position, etc. Most of the HTML elements on your page can be thought of as boxes sitting on top of each other.

a big stack of boxes or crates sat on top of one another

Not surprisingly, CSS layout is based principally on the box model. Each of the blocks taking up space on your page has properties like this:

  • padding, the space just around the content (e.g., around paragraph text)
  • border, the solid line that sits just outside the padding
  • margin, the space around the outside of the element

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

In this section we also use:

  • width (of an element)
  • background-color, the color behind an element's content and padding
  • color, the color of an element's content (usually text)
  • text-shadow: sets a drop shadow on the text inside an element
  • display: sets the display mode of an element (don't worry about this yet)

So, let's get started and add some more CSS to our page! Keep adding these new rules to the bottom of the page, and don't be afraid to experiment with changing values to see how it turns out.

Changing the page color

html {
  background-color: #00539F;
}

This rule sets a background color for the whole page. Change the color code above to whatever color you chose when planning your site.

Sorting the body out

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

Now for the <body> element. There are quite a few declarations here, so let's go through them all one by one:

  • width: 600px; — this forces the body to always be 600 pixels wide.
  • margin: 0 auto; — When you set two values on a property like margin or padding, the first value affects the element's top and bottom side (make it 0 in this case), and the second value the left and right side (here, auto is a special value that divides the available horizontal space evenly between left and right). You can also use one, three, or four values, as documented here.
  • background-color: #FF9500; — as before, this sets the element's background color. We've used a sort of reddish orange for the body as opposed to dark blue for the <html> element, but feel free to go ahead and experiment.
  • padding: 0 20px 20px 20px; — we have four values set on the padding, to make a bit of space around our content. This time we are setting no padding on the top of the body, and 20 pixels on the left, bottom and right. The values set top, right, bottom, left, in that order.
  • border: 5px solid black; — this simply sets a 5-pixel–wide, solid black border on all sides of the body.

Positioning and styling our main page title

h1 {
  margin: 0;
  padding: 20px 0;    
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

You may have noticed there's a horrible gap at the top of the body. That happens because browsers apply some default styling to the <h1> element (among others), even when you haven't applied any CSS at all! That might sound like a bad idea, but we want even an unstyled webpage to have basic readability. To get rid of the gap we overrode the default styling by setting margin: 0;.

Next up, we've set the heading's top and bottom padding to 20 pixels, and made the heading text the same color as the html background color.

One rather interesting property we've used here is text-shadow, which applies a text shadow to the text content of the element. Its four values are as follows:

  • The first pixel value sets the horizontal offset of the shadow from the text — how far it moves across: a negative value should move it to the left.
  • The second pixel value sets the vertical offset of the shadow from the text — how far it moves down, in this example; a negative value should move it up.
  • The third pixel value sets the blur radius of the shadow — a bigger value will mean a more blurry shadow.
  • The fourth value sets the base color of the shadow.

Again, try experimenting with different values to see what you can come up with!

Centering the image

img {
  display: block;
  margin: 0 auto;
}

Finally, we'll center the image to make it look better. We could use the margin: 0 auto trick again as we did earlier for the body, but we also need to do something else. The <body> element is block level, meaning it takes up space on the page and can have margin and other spacing values applied to it. Images, on the other hand, are inline elements, meaning they can't. So to apply margins to the image, we have to give the image block-level behavior using display: block;.

Note: Don't worry if you don't yet understand display: block; and the block-level/inline distinction. You will as you study CSS in more depth. You can find out more about the different available display values at our display reference page.

Conclusion

If you have followed all the instructions in this article, you should end up with a page that looks something like this (you can also view our version here):

a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

If you get stuck, you can always compare your work with our finished example code on GitHub.

Here, we have only really scratched the surface of CSS. To find out more, go to our CSS Learning topic.

 

In this module

 

Document Tags and Contributors

المساهمون في هذه الصفحة: ahmadnourallah
آخر مَن حدّثها: ahmadnourallah,