યાદીઓ અને કોષ્ટકોનું ફોર્મેટિંગ એ તમારી વેબસાઇટ પર માહિતી પ્રદર્શિત કરવાનો આવશ્યક ભાગ છે. CSS તમારી રુચિ અનુસાર સૂચિઓ અને કોષ્ટકો બનાવવા અને કસ્ટમાઇઝ કરવા માટે ગુણધર્મો અને વર્ગો પ્રદાન કરે છે. CSS માં સૂચિઓ અને કોષ્ટકોને કેવી રીતે ફોર્મેટ કરવું તે વિશે અહીં વિગતવાર માર્ગદર્શિકા છે.
ફોર્મેટિંગ સૂચિઓ
બિનક્રમાંકિત સૂચિ(ul)
મુખ્ય મિલકત: સૂચિ-શૈલી-પ્રકાર.
મૂલ્યો: none, disc, circle, square.
ઉદાહરણ:
ul {
list-style-type: disc;
}
ઓર્ડર કરેલ સૂચિ(ol)
મુખ્ય મિલકત: સૂચિ-શૈલી-પ્રકાર.
મૂલ્યો: કંઈ નહીં(ડિફૉલ્ટ), દશાંશ, લોઅર-આલ્ફા, અપર-આલ્ફા, લોઅર-રોમન, અપર-રોમન.
ઉદાહરણ:
ol {
list-style-type: decimal;
}
વ્યાખ્યા સૂચિ(dl)
મુખ્ય મિલકત: વ્યાખ્યા સૂચિને ફોર્મેટ કરવા માટે કોઈ વિશિષ્ટ CSS ગુણધર્મ નથી. જો કે, તમે વર્ગો અથવા અન્ય ગુણધર્મો જેમ કે સૂચિની અંદરના ઘટકોને સ્ટાઇલ કરી શકો છો font-size, font-weight, margin, padding, etc.
ઉદાહરણ:
<dl>
<dt>HTML</dt>
<dd>A markup language for creating web pages</dd>
<dt>CSS</dt>
<dd>A styling language for web pages</dd>
</dl>
dt {
font-weight: bold;
}
ફોર્મેટિંગ કોષ્ટકો
ટેબલ સ્ટ્રક્ચર ફોર્મેટિંગ
મુખ્ય મિલકત: border-collapse.
મૂલ્યો: separate(default), collaps e.
ઉદાહરણ:
table {
border-collapse: collapse;
}
ટેબલ બોર્ડર ફોર્મેટિંગ
મુખ્ય મિલકત: border.
મૂલ્યો: સરહદ મૂલ્ય, ઉદાહરણ તરીકે: 1px solid black.
ઉદાહરણ:
table {
border: 1px solid black;
}
સેલ બોર્ડર ફોર્મેટિંગ
મુખ્ય મિલકત: border.
મૂલ્યો: સરહદ મૂલ્ય, ઉદાહરણ તરીકે: 1px solid black.
ઉદાહરણ:
td, th {
border: 1px solid black;
}
કોષ્ટક કોષોનું સંરેખણ અને અંતર
મુખ્ય ગુણધર્મો: text-align, padding.
- ટેક્સ્ટ-સંરેખિત: સંરેખણ મૂલ્યો, ઉદાહરણ તરીકે:
left, right, center. - પેડિંગ: કોષોમાં અંતર મૂલ્ય, ઉદાહરણ તરીકે: 10px.
ઉદાહરણ:
th {
text-align: center;
padding: 10px;
}
કોષ્ટકોમાં પૃષ્ઠભૂમિ અને ટેક્સ્ટનો રંગ
મુખ્ય ગુણધર્મો: background-color, color
background-color: પૃષ્ઠભૂમિ રંગ મૂલ્ય, ઉદાહરણ તરીકે:lightgray.color: ટેક્સ્ટ રંગ મૂલ્ય, ઉદાહરણ તરીકે:white.
ઉદાહરણ:
table {
background-color: lightgray;
color: white;
}
કોષ્ટકોમાં કૉલમ અને પંક્તિનું કદ
મુખ્ય ગુણધર્મો: width, height.
width: પહોળાઈ મૂલ્ય, ઉદાહરણ તરીકે: "100px", "20%".height: ઊંચાઈ મૂલ્ય, ઉદાહરણ તરીકે: "50px", "10%".
ઉદાહરણ:
th {
width: 100px;
height: 50px;
}
CSS માં સૂચિઓ અને કોષ્ટકોને કેવી રીતે ફોર્મેટ કરવું તે અંગે આ એક વ્યાપક માર્ગદર્શિકા છે. તમે તમારી વેબસાઇટ પર તમારી ડિઝાઇનની જરૂરિયાતોને અનુરૂપ સૂચિ અને કોષ્ટક શૈલીઓ બનાવવા માટે મૂલ્યો અને ગુણધર્મોને કસ્ટમાઇઝ કરી શકો છો.