CSS-selector ואת תפקידו בעיצוב HTML- מסמכים

האינטרנט

יצירת האתר שלך ומילוי אותו עם מסוימיםאלמנטים של דף אינטרנט, כולם בהחלט להתקל מושג כגון בורר CSS. הוא משמש כדי לקבוע במדויק את כל האלמנטים של קובץ HTML, העיצוב שלהם במקום על הדף. לשם כך, צור מסמך CSS, אשר קובע את אותם בוררים או פרמטרים אחרים עבור העיצוב שלהם: צבע, גודל, מיקום ואחרים. כל מעצב אינטרנט צריך לדעת ולהיות מסוגל להיכנס כראוי בוררים הרצוי. הם מחולקים לסוגים, העיקריים שבהם נשקול להלן.

סוגי בוררים ב- CSS

תלוי באיזה רכיב HTML הפורמט מוחל על, בורר CSS יכול להתייחס לאחת מהקבוצות הבאות:

  • בורר התגים;
  • בורר מחלקה;
  • id-selector;
  • בורר התכונה.

בורר css

תג בורר

זה נקרא גם "בורר סוג" או "על ידיאלמנט ", הוא הפשוט והנפוץ ביותר, כשם האלמנטים של קובץ ה- HTML שאנו מתארים בו, לדוגמה, אם אנו צריכים לציין סגנון פסקה, אנו מציינים את המאפיינים ואת הערכים שלהם עבור p { רקע: x:; y: size: z} במקרה זה, לכל הפסקאות של דף האינטרנט תהיה אותה עיצוב (צבע רקע, טקסט, גודל וכו ').

בורר מחלקה

ומה אם אתה צריך להגדיר את הסגנון שלך שונה עבור אחרים עבור כל הפסקה? לשם כך, יש בורר מחלקה.

מסמך ה- CSS במקרה זה יכיל את הערך הבא: p.first {color: x; font-size: y}. לכן, אנו קובעים את המאפיינים "צבע" ו "גודל" רק עבור הפסקה של הכיתה הראשונה.

במסמך html במקרה זה, אתה מזין את התכונה class עם שם הסגנון תחילה. הכיתות יכולות להיות רבות מהסגנונות שברצונך להחיל על אלמנטים בדף אינטרנט.

בוררי תכונות css

בורר לפי מזהה

לעתים קרובות יש צורך להגדיר סגנוןוליתר דיוק, למשל, אלמנט אחד של הדף או למדגם שלהם. במצב זה, בורר הזיהוי מגיע להצלה. בקובץ ה- HTML אנו מקצים את השם למרכיב הרצוי ומזהים אותו בין השאר. לדוגמה, האלמנט שאנו רוצים להגדיר שונה מהסגנון האחר יהיה כותרת המאמר.

ואז ב- HTML מסמך אנו להקצות את כותרת h1id, למשל articlename. ובקובץ CSS, הגדר את הסגנון על ידי הוספת סריג לפני שם המזהה: #articlename {color: blue; text-align: center}. עכשיו הכותרת שלנו יהיה צבע כחול יישור במרכז.

כל אחד מהסוגים הנ"ל ניתן לקרוא"בורר CSS פשוט". הם מגדירים עיצוב עבור פרמטר מסוים של מסמך html: אוסף של אלמנטים דומים (לדוגמה, כל פסקאות של מאמר), מחלקה אחת (לדוגמה, רק את הפסקה הראשונה) או אלמנט מסוים (לדוגמה, כותרת המאמר).

בורר css

בחירת תכונה

בנוסף לאמור לעיל, ישנם בוררי CSSתכונות היא דרך מורכבת יותר של החלת סגנונות. זה מאפשר לך לעצב אלמנטים HTML על ידי התכונה שנבחרה או הערך שלה. ישנם מספר סוגים של בורר זה:

  • על ידי נוכחות של תכונה;
  • לפי ערכו המדויק;
  • לפי ערך תכונה חלקית;
  • לפי משמעותה הספציפית.

הבה נבחן בפירוט כל אחד מן הזנים האלה:

  1. המקרה הראשון. עיצוב משמש אם יש תכונה מסוימת בקוד ה- HTML (הם יכולים להיות p, div, כותרת ואחרים). אם הוא חסר, אזי נעשה שימוש בסגנון אוניברסלי לכל האלמנטים. לדוגמה, עבור פריטים בעלי כותרת (הסבר קצר).
  2. המקרה השני. הסגנון מוחל רק על אותם אלמנטים html שיש להם התאמות מדויקות של ערכי תכונה. לדוגמה, לאותם רכיבי קלט שערכם של התכונה type שווה להגשה.
  3. המקרה השלישי. העיצוב מוגבל לפריטים עם מילה ספציפית ברשימת הערכים. לדוגמה, sideBar בתכונה "class" של אלמנטים div.
  4. המקרה הרביעי. הסגנון מצוין רק עבור אותם אלמנטים של מסמך ה- HTML, שעבורו למאפיין מסוים יש ערך מסוים ומתחיל בו. לדוגמה, החלת הצבע שצוין על כל האלמנטים ששפת המאפיינים שלהם היא אנגלית (זה יכול להיות en, en-rus, en-au וכו ').

לכן, באמצעות בורר CSS מסוים, אתה יכול לעצב בצורה הטובה ביותר את כל דף האינטרנט, ולתאר את האלמנטים האישיים שלה.