סלקטורים CSS. סוגים של סלקטורים

, שכל אחת מהן אתה רוצה להגדיר צבע מסוים. איך עושים את זה? סלקטורים CSS הרגילים אינם מתאימים תגים, הם מציינים את הפרמטרים עבור כל בלוקים בבת אחת. הפתרון הוא פשוט. הקצאת חברי הכיתה. לדוגמה, קיבלו הראשון div class = 'אדום', השני - class = 'כחול', ג '- class = 'ירוק'. עכשיו הם יכולים להיבחר באמצעות טבלאות CSS.

התחביר הוא כדלקמן: מציין נקודה ( ""), ואחריו כותב את שם הכיתה. כדי לנהל את היחידה הראשונה, להשתמש בניית .red. שנית - .blue וכן הלאה.

חשוב! מומלץ להשתמש בערכים משמעותיים של התכונה בכיתה. זה נחשב טופס רע להשתמש בתעתיק (למשל, krasiviy-בלוק) או צירופים אקראיים של אותיות / מספרים (ojfh834871). בקוד זה, אתה חייב להתבלבל, שלא לדבר על הקשיים כי יעמוד בפני מי יהיה מעורב בפרויקט לאחר. האפשרות הטובה ביותר - כדי להשתמש בכל מתודולוגיה, כגון BEM.

יתרונות - גמישות גבוהה יחסית.

חסרונות - האלמנטים המרובים עשויים להיות אחד ואותו בכיתה, מה שאומר שהם יעברו עריכה בו זמנית. הבעיה נפתרת באמצעות המתודולוגיה וכן הירושה של preprocessors. הקפד לקבל את הידיים פחות, וחוצפנית או כמה Preprocessor אחרים, הם מאוד לפשט את העבודה.

בורר מזהה

על גירסה זו מקדדים דעת ומתכנתים אינם חד משמעיים. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. כמה מדריכי CSS לא ממליצים על השימוש זיהה, כי יישום מדויק הם יכולים לגרום לבעיות עם ירושה. עם זאת, מומחים רבים הם פעילים לסדר אותם לאורך כל הפריסה. אתם תחליטו. # »), затем имя блока. התחביר הוא כדלקמן: וסולמית ( "#"), אז השם של הבלוק. #red. לדוגמה, #red.

отличается от класса по нескольким параметрам. מזהה שונה מהכיתה בכמה דרכים. ID. ראשית, הדף לא יכול להיות שני ID זהה. הם מוקצים שם ייחודי. שנית, בורר כזה יש עדיפות גבוהה יותר. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. משמעות דבר הוא שאם תציין כיתה יחידה אדומה ולציין בטבלאות CSS אדום צבע רקע, ולאחר מכן להקצות לו את אותה הזהות כחולה לציין את הצבע הכחול, היחידה תהפוך כחולה.

יתרונות - אתה יכול לשלוט על אלמנט מסוים, תוך התעלמות סגנונות של תגי וכיתות.

ID и class. חסרונות - קל ללכת לאיבוד בתוך מספר רב של זהות ומעמד.

חשוב! ID вам, в общем-то, не нужны. אם אתה משתמש במתודולוגיה BEM (או אנלוגים שלה), מזהה אליכם, בכלל, אין צורך. טכניקה זו כרוכה בשימוש כיתות ייחודיות פריסה כי הרבה יותר נוח.

בורר אוניברסלי

{}. תחביר: סימן כוכבניות ( "*") ואת הפלטה, כלומר, {*} ...

משמש להקצאת תכונות מסוימות פעם כל האלמנטים של הדף. כאשר זה יכול להיות שימושי? box-sizing: border-box. לדוגמא, אם אתה רוצה להגדיר את התיבה-אומד דף נכס: גבול תיבה. div *{}. לא ניתן להשתמש רק כדי לנהל את כל הרכיבים של המסמך, אלא גם לשלוט בכל הילדים של גוש המסוים, למשל, * div {}.

יתרונות - אתה יכול לשלוט במספר רב של פריטים בכל פעם.

חסרונות - לא מספיק אפשרות גמישה. בנוסף, השימוש בורר זה, ובמקרים מסוימים להאט את העבודה בעמוד.

לפי מאפיין

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

קלט [ 'text' = סוג] {}

בורר זה יסמן את כל התכונות עם הסוג של טקסט קלט.

הכלי הוא די גמיש וניתן להשתמש עם כל אחד מהתגים, שבו ייתכנו תכונות. אבל זה לא הכל! המפרט CSS יש את היכולת לשלוט על האלמנטים עם עוד יותר נוחות!

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

קלט [מציין מיקום = "הזן את השם"] {} או קלט [מציין מיקום = "הזן את הסיסמה"]

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

[כותרת * = "Kaspiysk"]

CSS יבחר כל הפריטים בכותרת מתוכם ישנם סימנים של "כספיאן", כלומר. א, ו "כספיאן" ו "כספיאן".

ניתן גם לבחור תגיות המתחילות דמות מסוימת ותכונות:

[כותרת ^ = "התו שברצונך"] {}

או לסיים אותם:

[כותרת $ = "תו נכון"] {}.

יתרונות - גמישות מקסימלית. אתה יכול לבחור כל אלמנטים בדף קיימים בלי להתעסק עם המעמדות.

חסרונות - השתמשו יחסית נדירות, רק במקרים ספציפיים. מעצבי אינטרנט רבים מעדיפים מתודולוגיה, מאז מעמד הנקודה הוא קל יותר מאשר לארגן רבים בסוגריים מרובעים וסימנים "שווה". בנוסף, הבוררים האלה לא עובדים בגרסאות של Internet Explorer 7 ומטה. עם זאת, מי הם עכשיו צריכים את האינטרנט אקספלורר הישן?

סלקטורים פסאודו-class

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

סוג של בורר זה משמש באופן פעיל פריסה מודרנית, כי בזכות זה אתה יכול לעשות דף "חי" ללא השימוש ב- JavaScript. לדוגמה, אתה רוצה לוודא כי בעת ריחוף מעל הכפתור עם הכיתה של btn צבעו השתנה. לשם כך, אנו משתמשים במבנה הבא:

.btn: לרחף {

background-color: red;

}

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

מעלות - נמצאות בשימוש נרחב עבור "התחייה" של דפים. קל לשימוש.

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

סלקטורים-פסאודו

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

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

יתרונות - מספקים את הגמישות להתאים אישית את המראה של הדף.

חסרונות - חדשים להם מבולבלים לעתים קרובות. בחירות רבות של סוג זה של עבודה רק בדפדפנים מסוימים.

לסיכום

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