Need help? Chat now!

Hostwinds مدونة

نتائج البحث عن:


Hostwinds CSS دردشة صورة مميزة

Hostwinds CSS دردشة

بواسطة: Hostwinds Team  /  ديسمبر 27, 2018


هل سمعت عن كل hostwinds html الضجيج؟ما هذا؟من الواضح أنني قد طلبت عن قصد من ذلك فقط أن السؤال ل Segway إلى قابس وقح لسلسلة مدونة HostWinds المسماة "HostWinds HTML Hype؟"وجه الفتاة!هنا رابط للجزء 1 و 2 من سلسلة المدونة هذه فقط لك:

Hostwinds HTML Hype

Hostwinds HTML Hype الجزء 2: Tag Talk

دعونا نبقي الحديث عن طريق مناقشة مكونات مختلفة من لغة الكمبيوتر التكميلية HTML، CSS.

التحدث عن HTML والمقابس الأكثر وقحا، وأول مرة مؤخرا مؤخرا سلسلة مدونتنا لجعل موقع الويب التدوين. ينطبق هذا من حيث الضجيج HTML لأننا استخدمنا HTML لبدء بناء موقعنا على الإنترنت. هنا رابط إلى أجزاء 1 و 2 من سلسلة المدونة هذه:

دروس Hostwinds: كيفية إنشاء موقع تدوين أساسي بدون تطبيق بناء موقع Pt.1

دروس Hostwinds: كيفية بناء موقع تدوين أساسي بدون تطبيق بناء موقع Pt. 2

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

بارد CSS

تقف CSS ورقة النمط المتتالية لأنها رمز أن الأساليب أو تصمم موقع واحد.يمكنك تغيير الحجم والمواءمة واللون وغيرها، من أشياء مختلفة لديك على موقع الويب الخاص بك باستخدام CSS.

فيما يلي كيفية إعداد وثيقة CSS التي نجعلها لموقع التدوين الخاص بنا:

Body {} NAV {} n4 {}} {}} {} p {} button {} button

المحددات

اسمحوا لي أن توضح قليلا.يتم استدعاء العناصر الموجودة في هذه الوثيقة مثل "H3"، "الجسم"، "P،" إلخ. المحدداتوبعدتشير المنشطات ".Readnext" و "#Thankyou" إلى فئة "Readnext" و "Thankyou" ID الذي أنشأناه في الجزء 2 من سلسلة بلوق بناء موقع الويب الخاص بنا.هذه الفترة أمام "Readnext" تحكي المتصفح أن هذا المحدد هو فئة.يخبر المعاشات الاختبارية (#) أمام محدد "Thankyou" المتصفح أن هذا المحدد هو معرف.بين الأقواس المجعدين يذهب الإرشادات التي تشرح كيف ترغب في تعديل كل محدد.سنضي قدما وملء كل هذه في وسوف سأشرح ما تعنيه:

الجسم {صورة خلفية: URL ('../ الصور / your_background_image.jpg')؛ حجم الخلفية: غطاء؛} NAV {font: 22px 'cinzel'، serif؛ تحويل النص: الأحرف الكبيرة؛} h4 {font: 33px 'cinzel'، serif؛ تحويل النص: الأحرف الكبيرة؛ نص محاذاة: مركز؛ اللون: # 5A7E9E؛} h3 {font: 27px 'cinzel'، serif؛ تحويل النص: الأحرف الكبيرة؛ نص محاذاة: مركز؛ اللون: # 0B053F؛}} {الهامش - اليسار: السيارات؛ الهامش الحق: السيارات؛ العرض: 50؛ العرض محجوب؛ الحدود: 3px الصلبة الأسود؛ الحدود نصف قطرها: 25px؛} p {font: 22px 'cinzel'، serif؛ نص محاذاة: مركز؛ اللون: # 074B82؛} زر {font: 27px 'cinzel'، serif؛ تحويل النص: الأحرف الكبيرة؛ نص محاذاة: مركز؛ الهامش اليسار: السيارات؛ الهامش الحق: السيارات؛ العرض محجوب؛ لون الخلفية: # bee5eb؛ الحشو: 20px 30px؛ الحدود: 3px الصلبة الأسود؛ حدود نصف قطرها: 25 بكسل؛} زر: تحوم {خلفية اللون: # 00A1F5؛ العتامة: .5؛} footer {font: 27px 'cinzel'، serif؛ محاذاة النص: اليسار؛ اللون: # 074B82؛ لون الخلفية: # bee5eb؛ Margin-Top: 10px؛} DIV {خلفية-image: الخطي التدرج (إلى اليمين، # 2E6BD4، # Bee5eb، # 2E6BD4)؛} .Readnext {تحويل النص: الأحرف الكبيرة؛ تباعد الرسالة: 3 بكسل؛ تعويم: اليسار؛} #Thankyou {تحويل النص: الأحرف الكبيرة؛ اللون: # 0B053F؛}

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

الخصائص

خلفية - صورة: ** هذا هو العقار الذي ستكتب فيه بين قوسين Scrighly الخاص ب Selector الخاص بك إذا كنت ترغب في أن تكون خلفية عنصرك صورة.

ملاحظة جانبية:

التنسيق الصحيح الذي تطلب من المستعرض من خلاله التقاط صورة هو التالي (راجع الجزء من الجزء الأول من سلسلة المدونات هذه للحصول على مزيد من المعلومات بخصوص مسارات الملفات):

عنوان URL (./ foldername / filename.png)

في هذا المثال، "filename.png" هو اسم الملف الفعلي.يخبر "./foldername/" السابق لاسم الملف أن يخبر المتصفح أن يذهب إلى نفس المجلد الذي يوجد فيه Index.html لدينا. ثم انتقل إلى مجلد آخر بعنوان "اسم المجلد" للعثور على الملف عندما يكون هناك.وهذا ما يسمى مسار الملف النسبي.

لون الخلفية: هذا هو العقار الذي ستكتبه داخل أقواس Scregly's Scrighter الخاص بك إذا كنت تريد أن تكون خلفية عنصرك لونا.لاحظ أنه بدلا من رؤية اسم ملون لقيمة هذه الخاصية هذه، فإنك ترى سلسلة من الأرقام والأحرف بعد علامة التجزئة.يمكنك بسهولة Google العديد من الرموز التي تمثل ألوان مختلفة.

لاحظ سطر التعليمات البرمجية التالي بين قوسين Scrighly "DIV":

1 صورة الخلفية: التدرج الخطي (إلى اليمين ، # 2e6bd4 ، # bee5eb ، # 2e6bd4) ؛

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

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

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

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

الخط: مقابض خاصية الخط كثيرا.على سبيل المثال، بين قوسين Scrighly الخاص ب H4 Selector لدينا، تتمتع خاصية الخط بقيمة:

33px 'Cinzel'، Serif؛

الجزء الأول يدل على حجم النص.يشير الجزء "Cinzel" إلى اسم Font-Fontle.يشير الجزء "Serif" إلى الأسرة العامة التي تعد الأسرة فيها عضوا في.

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

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

الهامش الصحيح: تخبر هذه الخاصية المتصفح بمدى البعد عن الجانب الأيمن من صفحة الويب أو العنصر الموجود على يمين المحدد الذي تريد أن يتواجد هذا المحدد فيه.

هامش أعلى: هذه الخاصية تحكي المتصفح مدى بعيد عن الجزء العلوي من صفحة الويب أو العنصر الموجود أعلى المحدد الذي تريد أن يقيم هذا المحدد.

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

إذا كنت تريد توسيط المحدد في منتصف الصفحة مباشرةً ، فاستخدم الخصائص وقيم الخصائص التالية:

123 margin-right: auto؛ margin-left: auto؛ display: block؛

عرض: هذه الخاصية واضحة جدًا. يشير إلى العرض الذي تريد أن يكون عليه العنصر الخاص بك.

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

العرض محجوب؛

هذا يعني أننا نريد أن يملأ العنصر عرض المنطقة بالكامل.

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

دائرة نصف قطرها: هذا العقار يشير إلى كيفية جولة نريد أن تكون زوايا الحدود.

العتامة: تحكي هذه الخاصية بالمتصفح ما إذا كنا نريد أن يكون العنصر غير شفاف أو شفاف أو في مكان ما بينهما. واحد يعني تماما معفاة، و 0 يعني شفافة تماما.

حشوة: هذا يدل على مقدار المساحة التي تريدها بين عنصرك والمنطقة المحيطة بها.على سبيل المثال، على الأزرار التي أنشأناها على صفحتنا الرئيسية، نريد مساحة صغيرة بين عبارة "قراءة مشاركة المدونة" وحدود الأزرار.وبالتالي، منحنا الأزرار 20px من الحشو في الجزء العلوي والسفلي من الكلمات وحشو 30PX إلى اليمين واليسار.

تباعد الرسالة: يخبر هذا المتصفح مقدار التباعد الذي تريده بين كل حرف من الكلمات التي تعرضها على موقع الويب الخاص بك.

يطفو: يخبر هذه الخاصية بالمتصفح الذي تريد أن يذهب عنصرك إلى جانب عنصر آخر بدلا منه بشكل افتراضي.

التعليق في CSS

إليك كيفية إضافة التعليقات إلى كود CSS الخاص بك:

بناء الجملة لتعليقات CSS هو كتابة التعليقات بين / * و * /.

على سبيل المثال ، في مستند CSS الخاص بنا ، قد أعلق على ما يلي لتنظيم الكود الخاص بي:

/ * الجسم من صفحة الويب * / هيئة {صورة خلفية: URL ('.. images / images / your_background_image.jpg')؛ Background-size: غطاء؛} / * أشرطة الملاحة لجميع صفحات الويب باستثناء الصفحة الرئيسية والمدونة وظيفة 1 صفحة الويب * / NAV {font: 22px 'cinzel'، serif؛ تحويل النص: الأحرف الكبيرة؛} / * اسم المدونة العنوان * / h4 {font: 33px 'cinzel'، serif؛ تحويل النص: الأحرف الكبيرة؛ نص محاذاة: مركز؛ اللون: # 5A7E9E؛} / * مدونات آخر العناوين * / h3 {font: 27px 'cinzel'، serif؛ تحويل النص: الأحرف الكبيرة؛ نص محاذاة: مركز؛ اللون: # 0B053F؛} / * الصور * / img {الهامش اليسار: السيارات؛ الهامش الحق: السيارات؛ العرض: 50؛ العرض محجوب؛ الحدود: 3px الصلبة الأسود؛ الحدود نصف قطرها: 25 بكسل؛} / * الفقرات * / p {font: 22px 'cinzel'، serif؛ نص محاذاة: مركز؛ اللون: # 074B82؛} / * أزرار * / زر {font: 27px 'cinzel'، serif؛ تحويل النص: الأحرف الكبيرة؛ نص محاذاة: مركز؛ الهامش اليسار: السيارات؛ الهامش الحق: السيارات؛ العرض محجوب؛ لون الخلفية: # bee5eb؛ الحشو: 20px 30px؛ الحدود: 3px الصلبة الأسود؛ الحدود نصف قطرها: 25px؛} / * أزرار عند التحويم * / زر: تحوم {لون الخلفية: # 00A1F5؛ العتامة: .5؛} / * تذييل * / تذييل {font: 27px 'cinzel'، serif؛ محاذاة النص: اليسار؛ اللون: # 074B82؛ لون الخلفية: # bee5eb؛ الهامش الأعلى: 10 بكسل؛} / *

علامة لمدون بلوق كامل 1 قسم في Index.html الصفحة * / DIV {صورة خلفية: التدرج الخطي (إلى اليمين، # 2E6BD4، # Bee5eb، # 2E6BD4)؛} / * "Readnext" فئة للمدونة بوست 2 و 3 صفحات الويب * /. Readnext {تحويل النص: الأحرف الكبيرة؛ تباعد الرسالة: 3 بكسل؛ تعويم: اليسار؛} / * "Thankyou" معرف شكرا لك في تذييل الصفحة الرئيسية فقط * / # thankyou {تحويل النص: الأحرف الكبيرة؛ اللون: # 0B053F؛}

هناك الكثير حيث تأتي خصائص CSS تلك.ومع ذلك، في الوقت الحالي، سننتقل إلى مزيد من الترميز بالفعل!انا.وبالتالي.متحمس.

خاتمة CSS

أعلم أنني ذكرت للتو هذا، لكن هذا هو حقا مجرد غيض من جبل الجليد بقدر ما يذهب CSS.أوصي بشدة بفحص مواقع الويب الخاصة ببعضها البعض بسرعة تحتوي على جميع مكونات وقطع CSS (و HTML، لهذه المسألة).يسعد فريق HostWinds أن يبدأ بإضافة بعض الجمال المخصص إلى موقع التدوين الخاص بنا، ونحن نتطلع إلى التحدث معك عندما نقوم بالأول مرة الجزء 3 من "البرامج التعليمية HostWinds: كيفية بناء موقع مدونات دون تطبيق بناء الموقع" سلسلة المدونة قريباوبعد(أبي نكتة لإرسال لنا :) "C ... SS" أنت ثم !!!

كتب بواسطة Hostwinds Team  /  ديسمبر 27, 2018