This article is currently in the process of being translated into Arabic (~20% done).
Linking CSS to HTML
كما تم التوضيح من قبل ، تحتوي CSS على معلومات حول كيفية تقديم الترميز المحتوى او النص (عادةً HTML) للمستخدم النهائي. هذا يعني أن اللغتين يجب أن تكونا مرتبطتين ببعضها البعض - يجب أن يعرف المتصفح أنك تريد دمج جزء من ترميز HTML مع جزء من كود CSS. للحصول على أعلى مستوى من المرونة، وهناك عدة طرق لتحقيق ذلك.
CSS المضمن من خلال سمة النمط
تتضمن كل علامة HTML تقريبًا سمة للنمط وباستخدام هذه السمة ، يمكنك تحديد CSS مباشرةً للعنصر. لكن هذا يعطل أحد أهم مزايا CSS ، "قابلية إعادة الاستخدام" ، لأن كود CSS المطبق مع هذه التقنية لا ينطبق إلا على عنصر واحد ولا يمكن إعادة استخدامه لعناصر أخرى.
It is however a great way to test things out, or to specify rules which you do not expect ever to re-use. Here's how it may be used:
<span style="color: Blue; text-decoration: underline;">Hello, CSS!</span>Notice that I can define several properties for the same element, in this case rules for text color as well as text decoration. This is by far the easiest way to use CSS, since it doesn't involve extra tags or files - just locally defined CSS. However, for reasons already stated, this is not the preferred way of using CSS.
Another disadvantage is the fact that the style code will have to be downloaded each time the page is requested. This is not really a problem for a single element with a couple of style rules, but if you have a loop which outputs the same style attribute code many times, then it fills up your markup document unnecessarily, and instead of being cached by the browser and only downloaded once per visitor, the code is downloaded again and again!
Document wide CSS through style blocks
The second easiest way to apply CSS to elements in your document is through the use of a style block. HTML includes a tag called style, which can contain CSS code. Here, you can define rules which can then be used all across your document. Here's an example:
<!DOCTYPE html>
<html>
<head>
<title>Style blocks</title>
<style type="text/css">
.highlight {
color: Blue;
text-decoration: underline;
}
</style>
</head>
<body>
This is a piece of <span class="highlight">text</span> with <span class="highlight">highlighted</span> elements in <span class="highlight">it</span>.
</body>
</html>Notice how I can now define the rule in one place and then re-use it multiple times in the document. You can define multiple style blocks, if you want to, and place them wherever in the document you want to. It is however considered best practice to include the style block(s) in the top of the document, inside the head (<head>) section.
Global CSS through external CSS documents
So, by using the style block as described above, you can re-use your CSS code all over the document, but you still have to include it on all of the pages of your website, which requires the browser to download it on each request instead of just downloading an external CSS file once and then cache it. This is a major disadvantage of the style block approach and why you should normally go for the third approach instead: The external CSS file!
A CSS file is simply a plain text file saved with a .css extension and then referenced in the file(s) where you want to apply the rules. If we re-use the example from the style block part, we can then move the "highlight" rule to a new file (without the HTML part) and save it under an appropriate name, e.g. style.css:
.highlight {
color: Blue;
text-decoration: underline;
}We can then reference it in our HTML document, using the link element:
<!DOCTYPE html>
<html>
<head>
<title>Style blocks</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
This is a piece of <span class="highlight">text</span> with <span class="highlight">highlighted</span> elements in <span class="highlight">it</span>.
</body>
</html>This example requires the HTML and CSS file to be in the same directory - if they are not, you need to update the href attribute to match the path.
Now we define all of our CSS code in its own file and then just reference it inside all of our sub pages to take advantage of the defined rules! If you want to, you can divide your CSS code into several external files and only include the ones you need - it all depends on how big your website is and how you prefer to organize your code.
ملخص
We have talked about different ways for your webpage to consume CSS code in this chapter.
The first approach was the inline style attribute. Its biggest advantage is the fact that its so easy to use, but as a disadvantage, it cuts you off from some of the biggest benefits of CSS: Code re-usability and the ability to make layout changes in a single place and have it applied across your entire website.
The second approach uses the style block. It's only slightly less cumbersome to use than the inline style attribute, and allows re-using your CSS code. The biggest disadvantage is that code in a style block is global across the page, but not across multiple pages, meaning that you will have to include it on each subpage of your website.
The third approach is the one you most commonly see on websites: External CSS file(s). It only has the disadvantage of being slightly harder to work with, because you have to place the CSS in a separate file which you will have to open to make changes - a very small price to pay for the ability to re-use your CSS across your entire website!
يرجى العلم أنه خلال هذا البرنامج التعليمي ، سنستخدم النهج الثاني والأول بشكل أساسي ، ولكن فقط لأن الأمثلة المقدمة في هذا البرنامج التعليمي عبارة عن كيانات صغيرة ومنفصلة وليست مواقع ويب كبيرة. من السهل جدًا عرض خصائص CSS المختلفة بهذه الطريقة، بدلاً من الاضطرار إلى فصل الترميز و CSS في ملفات متعددة وشرح هذه الحقيقة في كل مرة. وأنت حر في استخدام النهج الذي تفضله ، ولكن لأي شيء بخلاف الأمثلة الصغيرة والمواقع البسيطة جدًا ، فإن الطريقة الثالثة هي عادةً الطريقة الأفضل!