CSS యూజర్ ఇంటర్ఫేస్

CSS యూజర్ ఇంటర్ఫేస్

ఈ చాప్టర్లో మీరు క్రింది క్రియాశీల సిఎస్ఎస్ అంశాలను నేర్చుకుంటారు:

  • resize
  • outline-offset

బ్రౌజర్ మద్దతు

పట్టికలో నమోదైన సంఖ్యలు ఈ అంశాన్ని పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ వెర్షన్ను నిర్దేశిస్తాయి.

అట్రిబ్యూట్ చ్రోమ్ ఐఇ ఫైర్ఫాక్స్ సఫారీ ఓపెరా
resize 4.0 మద్దతు లేదు 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

CSS సైజ్ చేయండి

resize అంశం వినియోగదారులు ఎలా సైజ్ చేయాలి మరియు ఎలా సైజ్ చేయబడాలి అనేది నిర్ణయిస్తుంది.

ఈ div ఎలిమెంట్ వినియోగదారులచే సైజ్ చేయబడగలదు!

సైజ్ చేయండి: ఈ div ఎలిమెంట్ యొక్క డాక్టర్ మూలల్లో క్లిక్ చేయి మరియు లాగుని జరిపించండి.

గమనిక:ఇంటర్నెట్ ఎక్స్ప్లోరర్ రెజైజ్ అంశాన్ని మద్దతు చేయలేదు.

ఈ ఉదాహరణలో వినియోగదారులు మాత్రమే <div> ఎలిమెంట్ యొక్క వెడల్పును సైజ్ చేయగలరు:

ప్రతీయం

div {
  resize: horizontal;
  overflow: auto;
}

亲自试一试

ఈ ఉదాహరణలో వినియోగదారులు మాత్రమే <div> ఎలిమెంట్ యొక్క పొడవును సైజ్ చేయగలరు:

ప్రతీయం

div {
  resize: vertical;
  overflow: auto;
}

亲自试一试

ఈ ఉదాహరణలో వినియోగదారులు <div> ఎలిమెంట్ యొక్క పొడవు మరియు వెడల్పును సైజ్ చేయగలరు:

ప్రతీయం

div {
  resize: both;
  overflow: auto;
}

亲自试一试

అనేక బ్రౌజర్లలో <textarea> ప్రతిపాదితంగా సైజ్ సర్తింగ్ అవుతుంది. ఇక్కడ, మేము resize అంశాన్ని ఉపయోగించి ఈ సైజ్ సర్టింగ్ ను నిలిపివేస్తాము:

ప్రతీయం

textarea {
  resize: none;
}

亲自试一试

సిఎస్ఎస్ స్కార్ ఆఫ్సెట్

outline-offset అంశం ఆకృతి మరియు ఎలిమెంట్ బార్డర్ మధ్య అంతరాన్ని జోడిస్తుంది.

ఈ div యొక్క బార్డర్ మూలల్లో 15px ఆకృతి ఉంది.

గమనిక:ఆకృతి బార్డర్ తో వ్యత్యాసం ఉంది! బార్డర్ నుండి వేరుగా, ఆకృతి రేఖలు ఎలిమెంట్ బార్డర్ బయటన జాబితా చేయబడతాయి మరియు ఇతర కంటెంట్లతో అనుభంధించవచ్చు. అలాగే, ఆకృతి కూడా ఎలిమెంట్ పరిమాణంలో భాగం కాదు: ఎలిమెంట్ మొత్తం వెడల్పు మరియు పొడవు ఆకృతి రేఖల వెడల్పు పై ప్రభావం లేదు.

దిగువ ఉదాహరణలో outline-offset అంశం వాస్తవానికి బార్డర్ మరియు ఆకృతి మధ్య అంతరాన్ని జోడించడం జరుగుతుంది:

ప్రతీయం

div.ex1 {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid red;
  outline-offset: 15px;
} 
div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
}

亲自试一试

CSS 用户界面属性

下表列出了所有用户界面属性：

అట్రిబ్యూట్ వివరణ
outline-offset హెడర్ మరియు విషయం బార్డర్ అంగుళాల మధ్య అంతరాన్ని జోడించండి.
resize ప్రతిపాదించబడిన ఎల్లా విషయాలను వినియోగదారులు మార్చగలరు అని నిర్ధారించండి.