Background Shorthand
Background Shorthand అంటే ఏమిటి?
CSSలో background కు సంబంధించిన అనేక properties ను ఒకే declaration లో రాయడానికి background shorthand ఉపయోగిస్తాము.
వేర్వేరు declarations గా రాయడానికి బదులుగా, color, image, repeat, position మరియు size వంటి values ను ఒకే background property లో ఇవ్వవచ్చు.
సాధారణ Syntax
selector {
background: color image repeat position / size;
}అన్ని values తప్పనిసరి కావు. అవసరమైన values మాత్రమే రాయవచ్చు. రాయని values వాటి default value ను ఉపయోగిస్తాయి.
ఉదాహరణ
.notice {
background: #fff3cd;
}ఇక్కడ background shorthand ద్వారా background color మాత్రమే ఇచ్చాము.
Background image తో size ఇవ్వాలంటే position మరియు size మధ్య / ఉపయోగించాలి.
.banner {
background: #eaf4ff url("banner.png") no-repeat center / cover;
}ఈ lessonలో external image ఉపయోగించకుండా, shorthandలో values ఎలా కలుస్తాయో సులభమైన runnable exampleతో చూస్తాము.
Simple Explanation
background shorthand అనేది background కు సంబంధించిన properties ను చిన్నగా రాయే విధానం.
background-colorకు color value ఇవ్వవచ్చు.- Image ఉంటే image URL ఇవ్వవచ్చు.
repeatద్వారా image repeat అవుతుందా లేదా నిర్ణయించవచ్చు.positionద్వారా background స్థానం నిర్ణయించవచ్చు./తర్వాత image size ఇవ్వవచ్చు.
ఉదాహరణకు background: #eaf4ff no-repeat center; లో color, repeat మరియు position values ఉన్నాయి. Image value ఇవ్వలేదు కాబట్టి image defaultగా ఉండదు.
Real-Life Example
ఒక notice card కు background color, image repeat మరియు position ను విడివిడిగా రాయవచ్చు. కానీ ఒకే background declarationలో ఈ settings ను కలిపితే code చిన్నగా మరియు నిర్వహించడానికి సులభంగా ఉంటుంది. ఇది ఒక formలో address ను ఒకే lineలో రాసినట్లుగా భావించవచ్చు.
Code Examples
Background Shorthandతో Notice Card
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Background Shorthand</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
background: #f5f7fa;
}
.notice {
width: 320px;
margin: 40px auto;
padding: 24px;
border: 1px solid #d6b656;
border-radius: 8px;
background: #fff3cd no-repeat center;
color: #513f00;
}
.notice h2 {
margin-top: 0;
}
</style>
</head>
<body>
<section class="notice">
<h2>Study Reminder</h2>
<p>Practice CSS for a few minutes every day.</p>
</section>
</body>
</html>.notice selectorలో background shorthand ఉపయోగించాము. ఇందులో #fff3cd background color, no-repeat repeat కాకూడదని, center positionను సూచిస్తాయి. ఈ exampleలో image value ఇవ్వలేదు, కాబట్టి కనిపించేది background color మాత్రమే. అయినప్పటికీ shorthandలో values ఎలా రాయాలో ఇది చూపిస్తుంది.
Browserలో మధ్యలో ఒక పసుపు రంగు notice card కనిపిస్తుంది. Cardలో Study Reminder heading మరియు practice message ఉంటాయి.
Line-by-Line Explanation
ఈ selector notice class ఉన్న sectionను ఎంచుకుంటుంది. ఆ elementకు background shorthand వర్తిస్తుంది.
Notice card వెడల్పును 320 pixelsగా ఉంచుతుంది.
Cardకు పైకింద 40 pixels margin ఇస్తుంది మరియు auto ద్వారా దాన్ని horizontalగా మధ్యలో ఉంచుతుంది.
Card లోపల textకు చుట్టూ 24 pixels ఖాళీ ఇస్తుంది.
ఇది ముఖ్యమైన background shorthand declaration. #fff3cd background colorను ఇస్తుంది. no-repeat image ఉంటే repeat కాకుండా చేస్తుంది. center image ఉంటే మధ్యలో ఉంచుతుంది. ఈ exampleలో image ఇవ్వలేదు కాబట్టి background color మాత్రమే కనిపిస్తుంది.
Cardలోని textకు dark color ఇస్తుంది. దీని వల్ల పసుపు backgroundపై text చదవడానికి సులభంగా ఉంటుంది.
notice selectorకు సంబంధించిన CSS declarations ముగుస్తాయి.
ఈ HTML sectionకు notice class ఉంది. అందుకే .notice selectorలోని styles దీనిపై పనిచేస్తాయి.
Study Reminder
Cardలో heading textను చూపిస్తుంది.
Practice CSS for a few minutes every day.
Cardలో చిన్న సందేశాన్ని paragraphగా చూపిస్తుంది.
Try It
Try this CSS code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Try Background Shorthand</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f5f7fa;
}
.card {
width: 300px;
margin: 40px auto;
padding: 20px;
background: #dbeafe no-repeat center;
border: 1px solid #93c5fd;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="card">
<h2>Try It</h2>
<p>Edit the background shorthand value.</p>
</div>
</body>
</html>Practice
Practice: practice_codeలోని background-color, background-repeat మరియు background-position declarationsను తొలగించి, వాటి స్థానంలో ఒకే background shorthand declaration రాయండి.
Hint: background: #e0f2fe no-repeat center; వంటి క్రమాన్ని ఉపయోగించండి.
Common Mistakes
background-shorthand అనే తప్పు property name ఉపయోగించడం.సరైన property name
background. CSSలో shorthand propertyకి hyphen ఉండదు.
background: #eaf4ff center cover;.Position మరియు size మధ్య slash పెట్టాలి:
background: #eaf4ff url("banner.png") no-repeat center / cover;.
ప్రతి declaration చివర semicolon పెట్టండి:
background: #e0f2fe no-repeat center;.
Background color మాత్రమే ఇవ్వబడితే color మాత్రమే కనిపిస్తుంది. Image అవసరమైతే image URLను కూడా shorthandలో ఇవ్వాలి.
Interview Questions
CSS background shorthand అంటే ఏమిటి?
Answer: Backgroundకు సంబంధించిన అనేక propertiesను ఒకే background declarationలో రాయే విధానాన్ని background shorthand అంటారు.
Background shorthandలో అన్ని values తప్పనిసరిగా ఇవ్వాలా?
Answer: లేదు. అవసరమైన values మాత్రమే ఇవ్వవచ్చు. ఇవ్వని values తమ default valuesను ఉపయోగిస్తాయి.
Background shorthandలో slash / ఎందుకు ఉపయోగిస్తారు?
Answer: Background position మరియు background sizeను వేరు చేయడానికి slash ఉపయోగిస్తారు. ఉదాహరణకు center / cover.
Exam Questions
ఈ declarationsను ఒక shorthand declarationగా మార్చండి: background-color: yellow; background-repeat: no-repeat; background-position: center;
Answer:
సరైన shorthand: background: yellow no-repeat center;
Background shorthand property name ఏమిటి?
Answer:
Property name background.
Image size ఇవ్వడానికి background shorthandలో ఏ symbol ఉపయోగిస్తారు?
Answer:
Position మరియు size మధ్య / symbol ఉపయోగిస్తారు.
Quick Revision
- Background propertiesను ఒకే declarationలో రాయడానికి
backgroundshorthand ఉపయోగిస్తారు. - సాధారణ క్రమం: color, image, repeat, position / size.
- అవసరం లేని valuesను వదిలివేయవచ్చు.
- Image position మరియు size మధ్య
/ఉపయోగించాలి. - Image value ఇవ్వకపోతే background color మాత్రమే కనిపించవచ్చు.