CSS2 మరియు CSS3 మధ్య తేడా

CSS3 కు పెద్ద మార్పులను గ్రహించుట

CSS2 మరియు CSS3 మధ్య అతిపెద్ద వ్యత్యాసం CSS3 అని వివిధ విభాగాలుగా విభజించబడింది చేయబడింది, గుణకాలు అని. ఈ మాడ్యూళ్ళలో ప్రతి ఒక్కదానిని W3C ద్వారా సిఫారసు ప్రక్రియలో వివిధ దశలలో చేస్తున్నారు. ఈ ప్రక్రియ వేర్వేరు తయారీదారులచే బ్రౌజర్లో ఆమోదించబడిన మరియు అమలు చేయబడే వివిధ ముక్కలు కోసం దీన్ని మరింత సులభతరం చేసింది.

మీరు CSS2 తో ఏమి జరిగిందో ఈ ప్రక్రియను పోల్చి ఉంటే, అన్నింటినీ ఒకే క్యాస్కేడింగ్ స్టైల్ షీట్ సమాచారంతో ఒకే డాక్యుమెంట్గా సమర్పించినప్పుడు, చిన్న, వ్యక్తిగత ముక్కలుగా సిఫారసులను విచ్ఛిన్నం చేసే ప్రయోజనాలను మీరు చూడగలుగుతారు. ప్రతి మాడ్యూల్ ఒక్కొక్కటిగా పని చేస్తున్నందున, మనకు CSS3 మాడ్యూల్స్ కోసం విస్తృతమైన బ్రౌజర్ మద్దతు ఉంది.

ఏ కొత్త మరియు మారుతున్న స్పెసిఫికేషన్ మాదిరిగా, మీ బ్రౌజరు మరియు అనేక ఆపరేటింగ్ సిస్టం లలో పూర్తిగా మీ CSS3 పేజీలను పరీక్షించుకోండి. లక్ష్యం ప్రతి బ్రౌజర్ లో సరిగ్గా అదే చూడండి వెబ్ పేజీలను సృష్టించడానికి కాదు గుర్తుంచుకోండి, కానీ CSS3 శైలులు సహా మీరు ఉపయోగించే ఏ శైలులు, వారికి మద్దతిచ్చే బ్రౌజర్లలో గొప్ప చూడండి మరియు వారు పాత బ్రౌజర్లలో సరసముగా తిరిగి వస్తాయి వద్దు.

కొత్త CSS3 సెలెక్టర్లు

CSS3 మీరు కొత్త CSS సెలెక్టర్లు, అలాగే ఒక కొత్త కాంబినేటర్, మరియు కొన్ని కొత్త నకిలీ మూలకాలతో CSS నియమాలు వ్రాయగలరు కొత్త మార్గాలను ఒక సమూహం అందిస్తుంది.

మూడు కొత్త లక్షణం సెలెక్టర్లు:

• లక్షణం సరిగ్గా మూలకంతో సరిపోతుంది [foo ^ = "bar"] మూలకం "బార్" తో మొదలయ్యే ఫూ అని పిలువబడే లక్షణం ఉంది
• ముగింపు లక్షణం సరిగ్గా ఎలిమెంట్ [foo $ = "bar"] కు సరిపోలడం మూలకం "బార్" తో ముగిసే ఫూ అని పిలిచే లక్షణం ఉంది
• లక్షణం మౌళిక మూలకం [foo * = "bar"] కలిగి ఉంది. మూలకం foo అనే లక్షణం కలిగి ఉంటుంది, ఇది స్ట్రింగ్ "బార్" ఉదా

16 కొత్త నకిలీ తరగతులు:

• : రూట్
  • పత్రం యొక్క మూల మూలకం. HTML లో ఇది ఎల్లప్పుడూ ఉంది.
• : n వ సంతానం (n)
  • ఖచ్చితమైన చైల్డ్ ఎలిమెంట్లను సరిపోల్చడానికి లేదా ప్రత్యామ్నాయ మ్యాచ్లను పొందడానికి వేరియబుల్స్ను ఉపయోగించేందుకు దీన్ని ఉపయోగించండి.
• : n వ-చివరి పిల్లల (n)
  • చివరి నుండి లెక్కింపు ఖచ్చితమైన బాల ఎలిమెంట్లను ఫలితం చేయండి.
• : n వ-యొక్క-రకం (n)
  • పత్రం చెట్టు ముందు అదే పేరు తో తోబుట్టువులు అంశాలను మ్యాచ్.
• : n వ-చివరి ఆఫ్ రకం (n)
  • దిగువ నుండి లెక్కించే అదే పేరుతో తోబుట్టువు అంశాలను ఫలితం చేయండి.
• :ఆఖరి బిడ్డ
  • తల్లిదండ్రుల ఆఖరి చిన్నారి మూలకాన్ని సరిపోల్చుకోండి.
• : మొదటి రకం
  • ఆ రకమైన మొదటి సహోదర మూలకాన్ని ఫలితం చేయండి.
• : చివరి రకం
  • ఆ రకమైన చివరి సహోదర మూలకాన్ని సరిపోల్చండి.
• :ఏకైక సంతానం
  • దాని తల్లిదండ్రుల ఏకైక సంతానంతో సరిపోలండి.
• : మాత్రమే-రకం
  • దాని రకాల్లో ఒకటి మాత్రమే మూలకం ఫలితం.
• : ఖాళీ
  • పిల్లలను కలిగి ఉన్న మూలకాన్ని ఫలితం చేయండి (టెక్స్ట్ నోడ్స్తో సహా).
• : లక్ష్యం
  • సూచించే URI యొక్క లక్ష్యంగా ఉన్న ఒక మూలకాన్ని సరిపోల్చుకోండి.
• ప్రారంభించబడి
  • ఎనేబుల్ చేసినప్పుడు మూలకం మ్యాచ్.
• : వికలాంగ
  • ఇది డిసేబుల్ అయినప్పుడు మూలకం ఫలితం.
• : ఎంచుకోబడింది
  • అది తనిఖీ చేసినప్పుడు మూలకం ఫలితం (రేడియో బటన్ లేదా చెక్బాక్స్).

• : కాదు (లు)
  • మూలకం సాధారణ సెలెక్టర్లకు సరిపోలడం లేదు.

ఒక కొత్త కాంబినేటర్:

• మూలకం A ~ మూలకం B
  • మూలకం B ఎప్పుడు ఎక్కడా మూలకం తరువాత ఒక ఫలితం, వెంటనే అవసరం లేదు.

క్రొత్త లక్షణాలు

CSS3 కొత్త CSS లక్షణాలను అనేక పరిచయం చేసింది. ఈ లక్షణాల్లో చాలావి దృశ్యమాన శైలులను సృష్టించడం, ఇవి ఎక్కువగా Photoshop వంటి గ్రాఫిక్స్ ప్రోగ్రామ్తో అనుబంధించబడ్డాయి. వీటిలో కొన్ని, సరిహద్దు-వ్యాసార్థం లేదా బాక్స్-నీడ వంటివి, CSS3 ను పరిచయం చేసినప్పటి నుండి ఉన్నాయి. ఇతరులు, ఫ్లక్స్బాక్స్ లేదా CSS గ్రిడ్ వంటివి ఇప్పటికీ తరచుగా CSS3 సంకలనాలను పరిగణించే కొత్త శైలులు.

CSS3 లో, బాక్స్ మోడల్ మారలేదు. కానీ మీ శైలి యొక్క నేపథ్యాలు మరియు సరిహద్దులను మీకు సహాయపడే కొత్త శైలి లక్షణాల సమూహం ఉన్నాయి.

బహుళ నేపధ్యం నేను mages

నేపథ్యం-ఇమేజ్, బ్యాక్గ్రౌండ్-స్థానం మరియు బ్యాక్గ్రౌండ్ రిపీట్ శైలులను ఉపయోగించి మీరు బాక్స్లో ఒకదానిపై ఒకటి పొరలుగా ఉన్న బహుళ నేపథ్య చిత్రాలను పేర్కొనవచ్చు. మొదటి చిత్రం వినియోగదారునికి దగ్గరిగా ఉన్న పొర, కింది వాటిని చిత్రించిన తరువాత. నేపథ్య రంగు ఉంటే, ఇది అన్ని చిత్ర పొరలకు క్రింద చిత్రీకరించబడుతుంది.

కొత్త నేపథ్య శైలి గుణాలు

CSS3 లో కొన్ని కొత్త నేపథ్య లక్షణాలు కూడా ఉన్నాయి.

• నేపథ్య క్లిప్
  • ఈ ఆస్తి నేపథ్య చిత్రాన్ని ఎలా క్లిప్ చేయాలి అని నిర్వచిస్తుంది. డిఫాల్ట్ సరిహద్దు పెట్టె, కానీ అది పాడింగ్ బాక్స్ లేదా కంటెంట్ పెట్టెకు మార్చబడుతుంది.
• నేపథ్య సంతతి
  • ఈ ఆస్తి నేపథ్యంలో పాడింగ్ బాక్స్, సరిహద్దు పెట్టె లేదా కంటెంట్ పెట్టెలో స్థలాలను గుర్తించాలా అని నిర్ణయిస్తుంది.
• background- పరిమాణం
  • ఈ ఆస్తి మీరు నేపథ్య చిత్రం పరిమాణం సూచించడానికి అనుమతిస్తుంది. ఇది మీరు పేజీ సరిపోయే చిన్న చిత్రాలు విస్తరించేందుకు అనుమతిస్తుంది.

ఉన్న నేపథ్య శైలి గుణాలకు మార్పులు

ఇప్పటికే ఉన్న నేపథ్య శైలి లక్షణాలకు కొన్ని మార్పులు ఉన్నాయి:

• background-repeat
  • ఈ ఆస్తికి రెండు కొత్త విలువలు ఉన్నాయి: స్పేస్ మరియు రౌండ్. చదునైన పెట్టెలో ఖాళీ స్థలంలో ఖాళీ ప్రదేశంలో ఖాళీ స్థలం ఖాళీలు. ఈ రౌండ్ నేపథ్య చిత్రాన్ని ప్రతిబింబించేలా చేస్తుంది.
• background-అటాచ్మెంట్
  • ఒక కొత్త విలువ "స్థానికం" జోడించబడింది, తద్వారా ఆ అంశం ఒక స్క్రోల్ బార్ ఉన్నప్పుడు నేపథ్యంలో మూలకం యొక్క కంటెంట్తో స్క్రోల్ అవుతుంది.
• నేపథ్య
  • నేపథ్య సంక్షిప్తచిహ్నం ఆస్తి పరిమాణం మరియు మూలం లక్షణాలు లో జతచేస్తుంది.

CSS3 బోర్డర్ గుణాలు

CSS3 సరిహద్దుల్లో మేము ఉపయోగిస్తున్న శైలులు (ఘన, డబుల్, గీతల, మొదలైనవి) కావచ్చు లేదా అవి ఒక చిత్రం అయి ఉండవచ్చు. ప్లస్, CSS3 గుండ్రంగా మూలలు సృష్టించడానికి సామర్థ్యం తెస్తుంది. మీరు నాలుగు అంచుల యొక్క ఒక చిత్రాన్ని సృష్టించి, ఆ చిత్రంను మీ సరిహద్దులకు ఎలా వర్తింపజేయాలని CSS ను చెప్పడం వలన బోర్డర్ చిత్రాలు ఆసక్తికరమైనవి.

కొత్త బోర్డర్ శైలి గుణాలు

CSS3 లో కొన్ని కొత్త సరిహద్దు లక్షణాలు ఉన్నాయి:

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

అదనపు CSS3 లక్షణాలు బోర్డర్స్ మరియు నేపథ్యాలు సంబంధించిన

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

కూడా బాక్స్ అంశాలకు నీడలు జోడించడానికి ఉపయోగించే ఒక బాక్స్ నీడ ఆస్తి ఉంది.

CSS3 తో, మీరు ఇప్పుడు సులభంగా పట్టికలు లేదా క్లిష్టమైన DIV ట్యాగ్ నిర్మాణాలు లేకుండా బహుళ నిలువు ఒక వెబ్ పేజీ ఏర్పాటు చేయవచ్చు. మీరు ఎంత మంది శరీరాన్ని కలిగి ఉంటారో మరియు ఎంత విస్తృతంగా ఉండాలి అనేదానిని బ్రౌసర్కు చెప్పండి. ప్లస్ మీరు హద్దులను (నియమాలు), కాలమ్ యొక్క ఎత్తు పరిధిలో ఉన్న నేపథ్య రంగులను జోడించవచ్చు మరియు మీ వచనం అన్ని నిలువు వరుసలను స్వయంచాలకంగా ప్రవహిస్తుంది.

CSS3 నిలువు - నిలువు సంఖ్య మరియు వెడల్పు నిర్వచించండి

మీరు మీ నిలువు యొక్క సంఖ్య మరియు వెడల్పును నిర్వచించడానికి అనుమతించే మూడు కొత్త లక్షణాలు ఉన్నాయి:

• కాలమ్ వెడల్పు
  • మీ స్తంభాలు ఉండాలి వెడల్పును నిర్వచిస్తుంది. వెడల్పు నిలువు వరుసలతో ఖాళీని పూరించడానికి బ్రౌజర్ పాఠాన్ని పంపుతుంది.
• కాలమ్-లెక్కింపు
  • పేజీలో నిలువు వరుసల సంఖ్యను నిర్వచిస్తుంది. అప్పుడు బ్రౌజర్ ఖాళీలో సరిపోయేంత నిలువు వరుసలను సృష్టించండి, కానీ మీరు పేర్కొన్న సంఖ్య మాత్రమే ఉంటుంది.
• నిలువు
  • మీరు వెడల్పు లేదా సంఖ్య (లేదా రెండింటినీ, కానీ చాలా అరుదుగా అర్ధమే) నిర్వచించగల షోర్తాండ్ ఆస్తి.

CSS3 కాలమ్ ఖాళీలు మరియు నియమాలు

ఖాళీలు మరియు నియమాలు ఒకే బహుళ సమయ దృశ్యంలో స్తంభాల మధ్య ఉంచబడతాయి. ఖాళీలు నిలువు వరుసలను వేరుచేస్తాయి, కానీ నిబంధనలు ఖాళీ స్థలాన్ని తీసుకోవు. కాలమ్ నియమం దాని గ్యాప్ కంటే విస్తృతమైనదిగా ఉంటే, అది ప్రక్కనే ఉన్న నిలువు వరుసలను కలుపుతుంది. కాలమ్ నియమాలు మరియు ఖాళీల కోసం ఐదు క్రొత్త లక్షణాలు ఉన్నాయి:

• కాలమ్ గ్యాప్
  • నిలువు మధ్య అంతరాల వెడల్పును నిర్వచిస్తుంది.
• కాలమ్-పాలన రంగు
  • నియమం యొక్క రంగును నిర్వచిస్తుంది.
• కాలమ్-పాలన-శైలి
  • నియమం (ఘన, చుక్కలు, డబుల్ మొదలైనవి) యొక్క శైలిని నిర్వచిస్తుంది.
• కాలమ్-పాలన వెడల్పు
  • నియమం యొక్క వెడల్పును నిర్వచిస్తుంది.
• కాలమ్-పాలన
  • ఒకేసారి మూడు కాల నియమావళి లక్షణాలను నిర్వచించే ఒక షార్ట్హ్యాండ్ ఆస్తి.

CSS3 కాలమ్ బ్రేక్స్, విస్తరించడం స్తంభాలు, మరియు నింపి నిలువు

కాలమ్ విరామాలు పాజ్ కంటెంట్లో బ్రేక్లను నిర్వచించడానికి ఉపయోగించే అదే CSS2 ఎంపికలను ఉపయోగిస్తాయి, కానీ మూడు కొత్త లక్షణాలతో: బ్రేక్-ముందు , బ్రేక్-ఆప్ట్ , మరియు బ్రేక్-ఇన్ .

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

నిలువు నింపడం ప్రతి కాలమ్లో ఎంత కంటెంట్ ఉంటుందో నిర్ణయిస్తుంది. సమకాలీకరణ నిలువు వరుసలు నిలువు వరుసలు పూర్తి అయ్యే వరకు కంటెంట్ని ప్రవహించి, ఆపై తదుపరి దానికి వెళుతున్నప్పుడు ప్రతి కాలమ్లోని కంటెంట్ను అదే స్థాయిలో ఉంచడానికి ప్రయత్నించండి.

CSS2 లో అరేన్ చేర్చబడిన CSS3 లో మరిన్ని ఫీచర్లు

CSS2 లో లేవని CSS3 లో అదనపు లక్షణాలను కలిగి ఉన్నాయి, వాటిలో:

• CSS మూస లేఅవుట్ మాడ్యూల్ మరియు CSS3 గ్రిడ్ స్థానాలు మాడ్యూల్ : CSS తో గ్రిడ్ల సృష్టిస్తోంది.
• CSS3 టెక్స్ట్ మాడ్యూల్ : అవుట్లైన్ టెక్స్ట్ మరియు కూడా CSS తో డ్రాప్ షాడో సృష్టించడానికి.
• CSS3 రంగు మాడ్యూల్ : ఇప్పుడు అస్పష్టత తో.
• బాక్స్ మోడల్కు మార్పులు : IE ట్యాగ్ లాగా పనిచేసే మార్క్యూ ఆస్తితో సహా.
• CSS3 వాడుకరి ఇంటర్ఫేస్ మాడ్యూల్ : మీరు కొత్త cursors ఇవ్వడం, చర్యలు ప్రతిస్పందనలు, అవసరమైన ఖాళీలను, మరియు పునఃపరిమాణం అంశాలు కూడా.
• మీడియా ప్రశ్నలు : స్టైల్ షీట్ను ఎలా ఉపయోగించాలో నిర్వచించేటప్పుడు మీడియా ప్రశ్నలకు మీరు మరింత సౌలభ్యాన్ని అనుమతిస్తాయి. ఉదాహరణకు, 20em కన్నా ఎక్కువ వీక్షణపోర్ట్ కలిగిన హ్యాండ్హెల్డ్ పరికరాల కోసం మాత్రమే ఉన్న శైలి షీట్ను మీరు నిర్వచించవచ్చు.
• CSS3 రూబీ మాడ్యూల్ : పత్రాలు వ్యాఖ్యానించడానికి పాఠ్య రూబీ ఉపయోగించే భాషలు మద్దతు అందిస్తుంది.
• CSS3 Paged మీడియా మాడ్యూల్ : పేజెడ్ మీడియా కోసం మరింత మద్దతు కోసం (కాగితం, transparencies, etc).
• సృష్టించిన కంటెంట్ : L నడుస్తున్న శీర్షికలు మరియు ఫుటర్లు, ఫుట్నోట్స్ మరియు ఇతర విషయాలన్నీ ప్రోగ్రామేతంగా సృష్టించబడతాయి, ముఖ్యంగా పేజెడ్ మీడియా కోసం.
• CSS3 స్పీచ్ మాడ్యూల్ : అరల్ CSS కు మార్పులు.