All Articles Dreamweaver
تعلم CSS في ملف دريمويفر الجزء 2 : إنشاء قواعد فئة
Geoff Blake on Tue, February 15th 0 comments
In Part One of our look at using CSS in Dreamweaver, I provided a rundown on a few key fundamentals, such as what styles are, how they work, what style sheets are. Remember, a style (also called a "ru

في الجزء الأول من دينا نظرة في استخدام CSS في Dreamweaver ، وأنا قدمت المتهدمة على أسس رئيسية قليلة ، مثل ما هي الأساليب ، وكيف يعملون فيها ، ما هي أوراق الأنماط. تذكر ، وهو أسلوب (وتسمى أيضا "القاعدة") هو ببساطة عبارة عن مجموعة من خصائص التنسيق ، ورقة الأنماط قائمة الأنماط.

Also in Part One, we discussed how to create Redefined HTML Elements, a CSS rule type. Recall that we weren't creating anything new per se, we were simply redefining what was already present on our page. This not only means that you don't have to apply your formatting manually to any content (since your content already exists on your page), but also that you're changing all instances of the HTML element that you've redefined. Now, you may not want that -- you may not want to redefine all paragraphs, for example; maybe only the first paragraph. And this is where class rules come into play.

With class rules, we name and create the rule completely from scratch, then go and apply the formatting where ever it's needed on our page. If you're familiar with styles from other applications, like Word, Pages, InDesign, and Quark, then you're already familiar with how class rules work.

ما هو عظيم هو أن نتمكن من تطبيق قواعد فئة إلى أي عنصر HTML : الجداول ، divs ، والعناوين ، الجسد ، والقواعد الأفقية ، وقوائم الأعمال...! وهذا يسمح لنا للحصول على صفحتنا حقا والتنسيق لدينا تحت السيطرة. لذلك دعونا نلقي نظرة على إنشاء قاعدة الطبقة ، ثم يمكننا مناقشة كيفية تطبيقها.

إليك كيفية إنشاء قاعدة الطبقة...

الخطوة -- 1

في الجزء السفلي من لوحة أنماط CSS ، انقر فوق القاعدة CSS جديد الرمز.

الخطوة -- 2

في مربع الحوار قاعدة CSS الجديدة التي تظهر ، اختر فئة (يمكن تطبيقها على أي عنصر HTML) من القائمة المنسدلة نوع محدد أسفل القائمة.

الخطوة -- 3

في الحقل اسم محدد ، اكتب اسما للقاعدة الخاصة بك فئة جديدة.

لأننا أساسا خلق قواعد فئة من نقطة الصفر ، ويمكننا تسميتها كل ما نريد ، ولكن تأكد من عدم استخدام المسافات أو الأحرف الخاصة في أسماء الخاص الحكم الطبقي. على سبيل المثال ، إذا كنت تقوم بإنشاء قاعدة للسيطرة على فئة الرسومات ، قد اسمك القاعدة "ImageController" أو "PictureFixerUpper". إذا كنت تقوم بإنشاء الشريط الجانبي ، ثم الخاص اسم القاعدة "الشريط الجانبي". اسم 'م كيفما تشاء ، واستخدام الاسم الذي هو مفيد وهادف!

الخطوة -- 4

في الجزء السفلي من مربع الحوار ، أن تقرر ما إذا كنت تريد حفظ قاعدة الخاصة بك في ورقة أنماط الداخلية "هذا المستند فقط" أو في ورقة نمط خارجية "ورقة نمط جديد ملف".

الخطوة -- 5

In the CSS Rule Definition dialog box, go nuts and have some fun setting some CSS properties. The properties that you decide to use really depend on what it is you want your new class rule to do. Here are a few ideas to consider: If you're controlling images, you might want to apply a border, a margin, and perhaps a float setting. If you're creating a sidebar for some text, head for the Type category and possibly the Block category. Maybe throw on a background color and some padding too. Again, it really depends on what you have in mind, what you want to create, and how you want it to look.
When you're done, click OK.

لاحظ أن القاعدة الجديدة الخاصة بك يظهر في الجزء العلوي من لوحة أنماط CSS. لاحظ أيضا أن اسم القاعدة وشرع الخاص بفترة / التوقف الكامل. ويجب دائما أن تكون أسماء حكم فئة يسبقه فترة ، وإذا كنت لا تضع واحدة في حين كنت تسمية الحكم الخاص (كما فعلنا مرة أخرى في الخطوة 3) ، ثم دريمويفر ستلتزم الفترة تلقائيا.

الآن بعد أن كنت قد أنشأت قاعدة الطبقة ، لقد حان الوقت لتطبيقه في جميع أنحاء صفحتك. كما ذكرنا سابقا ، على عكس تعريف عناصر HTML ، وقواعد يجب أن تكون الطبقة تطبيقها يدويا في المستند. اعتمادا على كيفية تطبيق الحكم الخاص ، سواء على مستوى لبنة أو عناصر HTML المضمن ، وستحصل على نتائج مختلفة على الصفحة الخاصة بك. دعونا نلقي نظرة على عدد قليل من الطرق للقيام بذلك.

هنا كيفية تطبيق التنسيق على مستوى الكتلة عناصر HTML :

الخطوة -- 6

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

الخطوة -- 7

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

. Notice that the rule name in code is not proceeded by a period.


That's how to apply formatting to a block level element. Let's see what happens if we try selecting text instead of simply clicking inside it.

Here's how to apply formatting to an inline element. It's only slightly different, but let's give it a try.

الخطوة -- 8

Rather than single-clicking within some text, try selecting a word, phrase, or sentence. If you're coming from the print world, this is the equivalent to character formatting (as opposed to paragraph formatting).

الخطوة -- 9

فقط كما كان من قبل ، واختيار الحكم الخاص فئة من مفتش الملكية. الفرق الآن هو أن يحصل تنسيق فقط الكلمة المحددة أو العقوبة. سحب بطاقات محدد ، وأنها سوف اقول لكم ما يصل. الآن يقرأ تليها فترة واسم القاعدة في صفك ، على سبيل المثال . في عرض قانون ، فإنه قراءة . ألف عنصر المضمنة. كما ترون ، يتم استخدام نفس السمة HTML (فئة) ، وبناء الجملة هو نفسه تماما كما كان سابقا ، ولكن حصلنا على نتيجة مختلفة جدا على صفحتنا.

معرفة والفهم ، وليس فقط كيفية إنشاء قواعد الطبقة ، ولكن أيضا على اثنين من طرق تطبيقها سيعزز حقا قدرتك على بناء وتطوير مواقع رائعة المظهر. سعيد stylin '!

الحصول على عمق CSS مع CSS استكشاف .

Comments (0)

You must be logged in to comment.

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: