CSS సెలెక్టర్లు. సెలెక్టర్ల రకాల

, ఒక ప్రత్యేక రంగు సెట్ కావలసిన వీటిలో ప్రతి. ఎలా చేయాలో? ప్రామాణిక CSS సెలెక్టర్లు వారు ఒకేసారి అన్ని బ్లాకుల ప్రమాణాలను సూచిస్తాయి, ట్యాగ్లు కోసం ఉపయోగపడవు. పరిష్కారం సులభం. తరగతి సభ్యుల కేటాయించవచ్చు. తరగతి = 'నీలం', మూడవ - - తరగతి = 'పచ్చని' ఉదాహరణకు, మొదటి div తరగతి 'రెడ్', రెండవ పొందింది =. ఇప్పుడు వారు CSS పట్టికలు ఉపయోగించి ఎంపిక చేయవచ్చు.

సింటాక్స్ ఈ క్రింది విధంగా ఉంది: ఒక పాయింట్ ( "."), తరగతి పేరు వ్రాయడం ద్వారా తెలంగాణను సూచిస్తుంది. మొదటి యూనిట్ నిర్వహించడానికి, .ఎరుపు నిర్మాణం ఉపయోగించండి. రెండవ - అందువలన న .blue మరియు.

ముఖ్యం! ఇది తరగతి లక్షణం యొక్క అర్ధవంతమైన విలువలు ఉపయోగించడానికి మద్దతిస్తుంది. ఇది లిప్యంతరీకరణ (ఉదా, krasiviy-నిరోధించు) లేదా అక్షరాలను / సంఖ్యల యాదృచ్ఛిక కలయికలు (ojfh834871) ఉపయోగించడానికి చెడు రూపం భావిస్తారు. ఈ కోడ్ లో, మీరు తర్వాత ప్రాజెక్టు నిమగ్నమై ఉంటుంది వారికి ఎదుర్కొనే సమస్యలతో చెప్పలేదు, అయోమయం పొందుటకు బంధం ఏర్పరుస్తాయి. - ఉత్తమ ఎంపిక అలాంటి BEM వంటి, ఏ పద్దతి ఉపయోగించడానికి.

ప్రయోజనాలు - సాపేక్షంగా అధిక వశ్యత.

ప్రతికూలతలు - బహుళ అంశాలు ఒకటి మరియు వారు ఏకకాలంలో సవరించవచ్చు చేస్తాము అదే తరగతి ఉండవచ్చు. సమస్య preprocessors పద్దతి అలాగే వారసత్వం ఉపయోగించి పరిష్కరించవచ్చు. వారు గొప్పగా పని సులభతరం, మీ చేతులు తక్కువ, సాస్ లేదా కొన్ని ఇతర ప్రాసెసర్ పొందడానికి నిర్ధారించుకోండి.

ID సెలెక్టర్

ఈ వెర్షన్ గురించి అభిప్రాయం రహస్య సమాచారాన్ని అందించే వాళ్ళ మరియు ప్రోగ్రామర్లు సందిగ్ధంగా ఉన్నాయి. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. సరికాని అప్లికేషన్ వారు వారసత్వంతో సమస్యలు కారణమవుతుంది ఎందుకంటే కొన్ని CSS ట్యుటోరియల్స్, ID ఉపయోగం సిఫార్సు లేదు. అయితే, అనేక నిపుణులు చురుకుగా లేఅవుట్ అంతటా వాటిని ఏర్పాట్లు. మీరు నిర్ణయించుకుంటారు. # »), затем имя блока. పౌండ్ సైన్ ( "#"), అప్పుడు బ్లాక్ పేరు: సింటాక్స్ ఈ క్రింది విధంగా ఉంది. #red. ఉదాహరణకు, #red.

отличается от класса по нескольким параметрам. ID అనేక విధాలుగా తరగతి నుండి భిన్నంగా ఉంటుంది. ID. మొదటి, పేజీ రెండు ఒకేలా ID ఉండకూడదు. వారు ఒక ప్రత్యేక పేరు కేటాయిస్తారు. రెండవది, అటువంటి సెలెక్టర్ అధిక ప్రాధాన్యత ఉంది. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. ఈ మీరు ఎరుపు యూనిట్ తరగతి తెలిపితే మరియు CSS పట్టికలలో ఎరుపు పేర్కొనే అర్థం నేపథ్య రంగు, దానికి ఒకే గుర్తింపుతో నీలం పెట్టేందుకు ఆపై మరియు రంగు నీలం పేర్కొనండి, యూనిట్ నీలం చేస్తుంది.

ప్రయోజనాలు - మీరు టాగ్లు మరియు తరగతుల శైలులు విస్మరించి, ప్రత్యేక ఎలిమెంట్ నియంత్రించవచ్చు.

ID и class. ప్రతికూలతలు - సులభంగా ID మరియు తరగతి పెద్ద సంఖ్యలో కోల్పోతాయి.

ముఖ్యం! ID вам, в общем-то, не нужны. మీరు BEM పద్దతి (లేదా దాని అనలాగ్లు), ID వాడుతుంటే, సాధారణంగా, అవసరం లేదు. ఈ పద్థతి మరింత సౌకర్యవంతంగా లేఅవుట్ ఏకైక తరగతులు వాడతారు.

సార్వత్రిక సెలెక్టర్

{}. సింటాక్స్: ఛాయాచిత్రకారులు సైన్ ( "*") మరియు బంధాలను, అంటే, {*} ...

ఒకసారి నిర్దిష్ట లక్షణాల పేజీ యొక్క అన్ని అంశాలు పెట్టేందుకు ఉపయోగించే. ఈ ఉపయోగపడుతుంది చేసినప్పుడు? box-sizing: border-box. ఉదాహరణకు, మీరు పేజీ ప్రాపర్టీ బాక్స్ పరిమాణము సెట్ అనుకుంటే: సరిహద్దు పెట్టె. div *{}. మాత్రమే పత్రం యొక్క అన్ని అంశాలు, నిర్వహించడానికి ఉపయోగించలేము కానీ కూడా ఉదాహరణకు పేర్కొన్న బ్లాక్ అన్ని పిల్లలు, నియంత్రించడానికి, div * {}.

ప్రయోజనాలు - మీరు ఒక సమయంలో అంశాలను పెద్ద సంఖ్యలో నియంత్రించవచ్చు.

కాన్స్ - సరిపోదు అనువైన ఎంపిక. అదనంగా, ఈ సెలెక్టర్ ఉపయోగంలో, కొన్ని సందర్భాల్లో డౌన్ పేజీ పని తగ్గించి.

లక్షణాల ద్వారా

అది సాధ్యం ఒక నిర్దిష్ట లక్షణం మూలకం నియంత్రించడానికి చేయండి. ఉదాహరణకు, మీరు ఒక విభిన్న లక్షణం రకం ఇన్పుట్ టాగ్లు ఉన్నాయి. వాటిలో ఒకటి - టెక్స్ట్, రెండవ - పాస్వర్డ్ను, మూడవ - సంఖ్య. కోర్సు యొక్క, మీరు ప్రతి తరగతి లేదా ID సెట్ చేయవచ్చు, కానీ ఇది ఎల్లప్పుడూ అనుకూలమైన కాదు. లక్షణాల CSS సెలెక్టర్లు ఇది గరిష్ట ఖచ్చితత్వంతో కొన్ని ట్యాగ్లు కోసం విలువలు తెలుపుటకు సాధ్యపడుతుంది. ఉదాహరణకు, ఈ వంటి:

ఇన్పుట్ [రకం = 'టెక్స్ట్'] {}

ఈ సెలెక్టర్ ఇన్పుట్ టెక్స్ట్ రకం అన్ని గుణాలు ఎంచుకోండి ఉంటుంది.

సాధనం చాలా అనువైనది మరియు లక్షణాలను ఉండవచ్చు దీనిలో ట్యాగ్లు, ఏ ఉపయోగించవచ్చు. కానీ అన్ని కాదు! CSS వివరణ మరింత సౌలభ్యం అంశాలను నియంత్రించడానికి సామర్థ్యాన్ని కలిగి ఉంది!

"ఒక పేరు Enter" మరియు ఇన్పుట్ హోల్డర్ = "పాస్వర్డ్ను నమోదు చేయండి" = మీ పేజీ గుణం హోల్డర్ తో ఇన్పుట్ కలిగి ఇమాజిన్. వారు కూడా సెలెక్టర్ ఉపయోగించి ఎంపిక చేయవచ్చు! ఇది చేయటానికి, క్రింది నిర్మాణాన్ని ఉపయోగించండి:

ఇన్పుట్ [హోల్డర్ = "పేరు Enter"] {} లేదా ఇన్పుట్ [హోల్డర్ = "పాస్వర్డ్ ఎంటర్"]

బహుశా గుణ మరింత సౌకర్యవంతమైన పని. యొక్క మీరు ఇలాంటి గుణాలు శీర్షిక (ఉదాహరణకు, "కాస్పియన్" మరియు "కాస్పియన్") తో టాగ్లు ఉన్నాయి అనుకోండి. రెండు ఎంచుకోండి, కింది ఎంపికలు ఉపయోగించండి:

[టైటిల్ * = "Kaspiysk"]

CSS "కాస్పియన్", అంటే. E., మరియు "కాస్పియన్" మరియు "కాస్పియన్" చిహ్నాలుగా ఉన్నాయి, వీటిలో టైటిల్ లో అన్ని అంశాలను ఎన్నుకుంటుంది.

మీరు కూడా ఒక నిర్దిష్ట పాత్ర లక్షణాలను ప్రారంభమవుతాయి టాగ్లు ఎంచుకోవచ్చు:

[టైటిల్ ^ = "పాత్ర మీరు"] {}

లేదా వాటిని రద్దు:

[టైటిల్ $ = "కుడి పాత్ర"] {}.

ప్రయోజనాలు - గరిష్ట వశ్యత. మీరు తరగతులు సమస్యను లేకుండా ఇప్పటికే ఏ పేజీ అంశాలు ఎంచుకోవచ్చు.

ప్రతికూలతలు - నిర్దిష్ట సందర్భాల్లో, చాలా అరుదుగా ఉపయోగిస్తారు. పాయింట్ తరగతి అనేక ఏర్పాట్లు కంటే సులభం నుంచి పలువురు వెబ్ డిజైనర్లు, పద్దతి ఇష్టపడతారు చదరపు బ్రాకెట్లలో "సమాన" మరియు సంకేతాలు. అదనంగా, ఈ సెలెక్టర్లు ఇంటర్నెట్ ఎక్స్ప్లోరర్ వెర్షన్లలో 7 మరియు క్రింద పని లేదు. అయితే, ఇప్పుడు పాత ఇంటర్నెట్ ఎక్స్ప్లోరర్ అవసరం ఎవరు?

సూడో-తరగతి సెలెక్టర్లు

సూడో-స్థితి మూలకం సూచిస్తుంది. ఉదాహరణకు ,: హోవర్ కోసం - ,: సందర్శించారు మీరు హోవర్ చేసినప్పుడు పేజీ భాగానికి ఏమి - సందర్శించిన లింక్. మొదటి బిడ్డ మరియు: చివరి పిల్లల ఇది కూడా వంటి అంశాలు ఉన్నాయి.

సెలెక్టర్ ఈ రకమైన చురుకుగా అది కృతజ్ఞతలు మీరు JavaScript వాడకం లేకుండా ఒక పేజీ "ప్రత్యక్ష" చేయవచ్చు ఎందుకంటే, ఆధునిక లేఅవుట్ ఉపయోగిస్తారు. ఉదాహరణకు, మీరు దాని రంగు మారింది btn యొక్క తరగతి బటన్ హోవర్ చేసినప్పుడు ఆ నిర్ధారించుకోవాలి. ఇది చేయటానికి, మేము కింది నిర్మాణాన్ని ఉపయోగించండి:

.btn: హోవర్ {

నేపథ్య రంగు: ఎరుపు;

}

అందం, బటన్, బదిలీ ఆస్తి యొక్క ప్రాథమిక లక్షణాలను లో పేర్కొన్న చేయవచ్చు ఉదాహరణకు, 0.5s - ఈ సందర్భంలో, బటన్ తక్షణమే బ్లుష్ కాదు, మరియు సగం రెండవ లోపల.

సద్గుణాలు - విస్తృతంగా పేజీల "పునరుద్ధరణ" కోసం ఉపయోగిస్తారు. ఉపయోగించడానికి సులభమైన.

ప్రతికూలతలు - వారు కాదు. ఈ ఒక నిజంగా సులభ సాధనం. అయితే, అనుభవం లేని వెబ్ డిజైనర్లు సూడో-తరగతుల సమృద్ధి కోల్పోతాయి చేయవచ్చు. సమస్యను అధ్యయనం మరియు ఆచరణ పరిష్కరించవచ్చు.

సూడో-సెలెక్టర్లు

"సూడో" - ఈ HTML లో లేని పేజీ యొక్క భాగాలు, కానీ వారు ఇప్పటికీ నిర్వహించారు చేయవచ్చు. మీరు అర్థం కాలేదు? అది కనిపిస్తుంది కంటే సులభం. ఉదాహరణకు, మీరు ఇతర చిన్న మరియు నలుపు టెక్స్ట్ వదిలి, పెద్ద మరియు ఎరుపు స్ట్రింగ్ లో మొదటి అక్షరం చేయాలనుకుంటున్నాము. కోర్సు యొక్క, అది ఒక నిర్దిష్ట తరగతి ఒక span ఆ లేఖ నిర్ధారించారు చేయవచ్చు, కానీ ఇది చాలా కాలం మరియు బోరింగ్ ఉంది. ఇది మొత్తం పేరా ఎంచుకోండి మరియు నకిలీ :: మొదటి లేఖ ఉపయోగించడానికి చాలా సులభం. ఇది మొదటి అక్షరం రూపాన్ని నియంత్రించడానికి అవకాశం ఇస్తుంది.

సూడో-అంశాల చాలా పెద్ద సంఖ్యలో ఉన్నాయి. ఒకే వ్యాసం వాటిని జాబితా విజయవంతం అవకాశం ఉంది. మీరు మీ ఇష్టమైన శోధన ఇంజిన్ సంబంధిత సమాచారాన్ని పొందవచ్చు.

ప్రయోజనాలు - పేజీ యొక్క రూపాన్ని అనుకూలీకరించండి కల్పిస్తాయి.

ప్రతికూలతలు - వారికి కొత్త తరచూ అయోమయానికి గురవుతుంటాయి. మాత్రమే కొన్ని బ్రౌజర్లలో పని ఈ రకమైన అనేక ఎంపికలు.

సంగ్రహించేందుకు

సెలెక్టర్ - డాక్యుమెంట్ ఫ్లో నియంత్రణ కోసం ఒక శక్తివంతమైన సాధనం. అతనికి ధన్యవాదాలు, మీరు పేజీ యొక్క ప్రతి ఒక్క భాగం ఎంచుకోవచ్చు (మాత్రమే పాక్షికంగా కూడా ఉన్నాయి). అందుబాటులో అన్ని ఎంపికలు తెలుసుకోవడానికి, లేదా వాటిని వ్రాసి నిర్ధారించుకోండి. మీరు మరియు ఇంటరాక్టివ్ అంశాలు మా ఆధునిక డిజైన్ తో క్లిష్టమైన పేజీలు సృష్టిస్తే ఈ ముఖ్యంగా ముఖ్యం.