ಸಿಎಸ್ಎಸ್ ಆಯ್ಕೆಗಳಲ್ಲಿ ಕೋಮಾ ಎಂದರೇನು?

ಸರಳವಾದ ಕೋಮಾ ಏಕೆ ಕೋಡಿಂಗ್ ಅನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ

ಸಿಎಸ್ಎಸ್, ಅಥವಾ ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಸ್ಟೈಲ್ ಶೀಟ್ಸ್, ವೆಬ್ ವಿನ್ಯಾಸ ಉದ್ಯಮವು ಸೈಟ್ಗೆ ದೃಶ್ಯಾತ್ಮಕ ಶೈಲಿಗಳನ್ನು ಸೇರಿಸಲು ಒಪ್ಪಿದ ಮಾರ್ಗವಾಗಿದೆ. ಸಿಎಸ್ಎಸ್ ಜೊತೆ, ನೀವು ಪುಟ ವಿನ್ಯಾಸ, ಬಣ್ಣಗಳು, ಮುದ್ರಣಕಲೆ , ಹಿನ್ನೆಲೆ ಚಿತ್ರ, ಮತ್ತು ಹೆಚ್ಚು ನಿಯಂತ್ರಿಸಬಹುದು. ಮೂಲಭೂತವಾಗಿ, ಇದು ಒಂದು ದೃಶ್ಯ ಶೈಲಿಯಲ್ಲಿದ್ದರೆ, ಆ ವೆಬ್ಸೈಟ್ಗಳನ್ನು ನಿಮ್ಮ ವೆಬ್ಸೈಟ್ಗೆ ತರಲು ಸಿಎಸ್ಎಸ್ ಮಾರ್ಗವಾಗಿದೆ.

ನೀವು ಡಾಕ್ಯುಮೆಂಟ್ಗೆ ಸಿಎಸ್ಎಸ್ ಶೈಲಿಗಳನ್ನು ಸೇರಿಸಿದಾಗ, ಡಾಕ್ಯುಮೆಂಟ್ ದೀರ್ಘ ಮತ್ತು ಮುಂದೆ ಪಡೆಯಲು ಪ್ರಾರಂಭಿಸುತ್ತದೆ ಎಂದು ನೀವು ಗಮನಿಸಬಹುದು. ಕೆಲವೇ ಪುಟಗಳು ಮಾತ್ರ ಹೊಂದಿರುವ ಸಣ್ಣ ಸೈಟ್ ಕೂಡ ಗಣನೀಯವಾದ ಸಿಎಸ್ಎಸ್ ಫೈಲ್ನೊಂದಿಗೆ ಕೊನೆಗೊಳ್ಳುತ್ತದೆ - ಮತ್ತು ಸಾಕಷ್ಟು ದೊಡ್ಡ ಸೈಟ್ಗಳು ಮತ್ತು ಅನನ್ಯವಾದ ವಿಷಯಗಳ ಪುಟಗಳಲ್ಲಿ ದೊಡ್ಡ CSS ಫೈಲ್ಗಳನ್ನು ಹೊಂದಿರುತ್ತದೆ. ಇದು ದೃಶ್ಯ ಸೈಟ್ಗಳು ಹೇಗೆ ಕಾಣುತ್ತದೆ ಮತ್ತು ಪುಟವು ವಿಭಿನ್ನ ಪರದೆಗಳಿಗೆ ಹೇಗೆ ಹೊರಹೊಮ್ಮುತ್ತದೆ ಎಂಬುದನ್ನು ಬದಲಾಯಿಸಲು ಸ್ಟೈಲ್ ಹಾಳೆಗಳಲ್ಲಿ ಒಳಗೊಂಡಿರುವ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳು ಹೊಂದಿರುವ ಪ್ರತಿಕ್ರಿಯಾಶೀಲರಾಗಿರುತ್ತಾರೆ ಸೈಟ್ಗಳಿಂದ ಸಂಯೋಜಿಸಲ್ಪಟ್ಟಿದೆ.

ಹೌದು, ಸಿಎಸ್ಎಸ್ ಫೈಲ್ಗಳು ಸುದೀರ್ಘವಾಗಿ ಪಡೆಯಬಹುದು. ಇದು ಸೈಟ್ ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಡೌನ್ಲೋಡ್ ವೇಗಕ್ಕೆ ಬಂದಾಗ ಇದು ಒಂದು ಪ್ರಮುಖ ಸಮಸ್ಯೆ ಅಲ್ಲ, ಏಕೆಂದರೆ ಒಂದು ಸುದೀರ್ಘವಾದ ಸಿಎಸ್ಎಸ್ ಫೈಲ್ ಸಹ ಸಾಕಷ್ಟು ಚಿಕ್ಕದಾಗಿದೆ (ಇದು ನಿಜವಾಗಿಯೂ ಕೇವಲ ಒಂದು ಪಠ್ಯ ಡಾಕ್ಯುಮೆಂಟ್ ಆಗಿದೆ). ಆದರೂ, ಪುಟದ ವೇಗಕ್ಕೆ ಬಂದಾಗ ಪ್ರತಿ ಸ್ವಲ್ಪವೂ ಎಣಿಕೆ ಮಾಡುತ್ತದೆ, ಹಾಗಾಗಿ ನಿಮ್ಮ ಸ್ಟೈಲ್ ಶೀಟ್ ಲೆನರ್ ಅನ್ನು ನೀವು ಮಾಡಬಹುದು, ಅದು ಒಳ್ಳೆಯದು. ಇಲ್ಲಿ "ಕಾಮಾ" ನಿಮ್ಮ ಶೈಲಿ ಹಾಳೆಯಲ್ಲಿ ಬಹಳ ಸುಲಭವಾಗಿ ಬರಬಹುದು!

ಕಾಮಾಗಳು ಮತ್ತು CSS

CSS ಸೆಲೆಕ್ಟರ್ ಸಿಂಟ್ಯಾಕ್ಸ್ನಲ್ಲಿ ಕಾಮವು ಯಾವ ಪಾತ್ರವನ್ನು ವಹಿಸುತ್ತದೆ ಎಂದು ನೀವು ಯೋಚಿಸಿದ್ದೀರಾ. ವಾಕ್ಯಗಳನ್ನು ಹೇಳುವುದಾದರೆ, ಅಲ್ಪವಿರಾಮವು ಸ್ಪಷ್ಟತೆಯನ್ನು ನೀಡುತ್ತದೆ-ಕೋಡ್ ಅನ್ನು ವಿಭಜಕಗಳಾಗಿರುವುದಿಲ್ಲ. CSS ಸೆಲೆಕ್ಟರ್ನಲ್ಲಿರುವ ಅಲ್ಪವಿರಾಮವು ಒಂದೇ ಶೈಲಿಯಲ್ಲಿ ಅನೇಕ ಆಯ್ಕೆಗಾರರನ್ನು ಪ್ರತ್ಯೇಕಿಸುತ್ತದೆ.

ಉದಾಹರಣೆಗೆ, ಕೆಳಗಿನ ಕೆಲವು ಸಿಎಸ್ಎಸ್ ನೋಡೋಣ.

ನೇ ಬಣ್ಣ: ಕೆಂಪು; }
td {color: red; }
p.red {color: red; }
div # firstred {ಬಣ್ಣ: ಕೆಂಪು; }

ಈ ಸಿಂಟ್ಯಾಕ್ಸಿನೊಂದಿಗೆ, ನೀವು ಟ್ಯಾಗ್ಗಳನ್ನು ಬಯಸುವಿರಿ, ಟಿಡಿ ಟ್ಯಾಗ್ಗಳು, ವರ್ಗ ಕೆಂಪುನೊಂದಿಗೆ ಪ್ಯಾರಾಗ್ರಾಫ್ ಟ್ಯಾಗ್ಗಳು, ಮತ್ತು ಎಲ್ಲಾ ಬಣ್ಣ ಬಣ್ಣದ ಕೆಂಪು ಬಣ್ಣವನ್ನು ಹೊಂದಿರುವ ID ಯನ್ನು ಹೊಂದಿರುವ ಡಿವ್ ಟ್ಯಾಗ್.

ಇದು ಸಂಪೂರ್ಣವಾಗಿ ಸ್ವೀಕಾರಾರ್ಹವಾದ ಸಿಎಸ್ಎಸ್ ಆಗಿದೆ, ಆದರೆ ಈ ರೀತಿ ಬರೆಯುವುದಕ್ಕೆ ಎರಡು ಗಮನಾರ್ಹ ನ್ಯೂನತೆಗಳು ಇವೆ:

• ಭವಿಷ್ಯದಲ್ಲಿ, ಈ ಗುಣಲಕ್ಷಣಗಳ ಫಾಂಟ್ ಬಣ್ಣವನ್ನು ನೀಲಿ ಬಣ್ಣಕ್ಕೆ ಬದಲಿಸಲು ನೀವು ನಿರ್ಧರಿಸಿದರೆ, ನಿಮ್ಮ ಶೈಲಿಯ ಶೀಟ್ನಲ್ಲಿ ನೀವು ಆ ಬದಲಾವಣೆಯನ್ನು ನಾಲ್ಕು ಬಾರಿ ಮಾಡಬೇಕು.
• ಇದು ನಿಮಗೆ ಅಗತ್ಯವಿಲ್ಲದ ನಿಮ್ಮ ಸ್ಟೈಲ್ ಶೀಟ್ಗೆ ಹೆಚ್ಚಿನ ಹೆಚ್ಚುವರಿ ಅಕ್ಷರಗಳನ್ನು ಸೇರಿಸುತ್ತದೆ. ಈ 4 ಶೈಲಿಗಳು ಅತಿಕೊಲ್ಲುವಿಕೆಗಳಂತೆ ಕಾಣುತ್ತಿಲ್ಲ, ಆದರೆ ನೀವು ನಿಮ್ಮ ಸಂಪೂರ್ಣ ಶೈಲಿಯ ಹಾಳೆಯಲ್ಲಿ ಇದನ್ನು ಮುಂದುವರೆಸಿದರೆ, ಸಾಲುಗಳು ಸೇರಿಸಲ್ಪಡುತ್ತವೆ ಮತ್ತು ಆ ಶೀಟ್ ತುಂಬಾ ಹೆಚ್ಚು ಇರುತ್ತದೆ, ಅದು ಹೆಚ್ಚು ಬೇಕಾಗಿರುವುದಕ್ಕಿಂತ ದೊಡ್ಡದಾಗಿದೆ.

ಈ ನ್ಯೂನತೆಗಳನ್ನು ತಪ್ಪಿಸಲು ಮತ್ತು ನಿಮ್ಮ ಸಿಎಸ್ಎಸ್ ಫೈಲ್ ಅನ್ನು ಸ್ಟ್ರೀಮ್ಲೈನ್ ​​ಮಾಡಲು, ನಾವು ಕಾಮಾಗಳನ್ನು ಉಪಯೋಗಿಸಲು ಪ್ರಯತ್ನಿಸುತ್ತೇವೆ.

ಪ್ರತ್ಯೇಕ ಆಯ್ಕೆಗಾರರಿಗೆ ಕಾಮಾಗಳನ್ನು ಬಳಸುವುದು

4 ಪ್ರತ್ಯೇಕ CSS ಆಯ್ಕೆಕಾರರು ಮತ್ತು 4 ನಿಯಮಗಳನ್ನು ಬರೆಯುವ ಬದಲು, ನೀವು ಈ ಎಲ್ಲಾ ಶೈಲಿಗಳನ್ನು ಒಂದು ನಿಯಮ ಆಸ್ತಿಯೊಂದಿಗೆ ಒಂದುಗೂಡಿಸಬಹುದು. ಅದು ಹೇಗೆ ಆಗುತ್ತದೆ ಎಂಬುದು ಇಲ್ಲಿವೆ:

th, td, p.red, div # firstred {color: red; }

ಅಲ್ಪವಿರಾಮ ಪಾತ್ರವು ಮೂಲಭೂತವಾಗಿ ಸೆಲೆಕ್ಟರ್ನ ಒಳಗೆ "ಮತ್ತು" ಪದವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಆದ್ದರಿಂದ ಇದು ಟಿಎಚ್ ಟ್ಯಾಗ್ಗಳಿಗೆ ಮತ್ತು ಟಿಡಿ ಟ್ಯಾಗ್ಗಳಿಗೆ ಮತ್ತು ಪ್ಯಾರಾಗ್ರಾಫ್ ಟ್ಯಾಗ್ಗಳಿಗೆ ವರ್ಗದ ಕೆಂಪು ಮತ್ತು ಡಿವಿ ಟ್ಯಾಗ್ನೊಂದಿಗೆ ID ಯನ್ನು ಮೊದಲು ಅನ್ವಯಿಸುತ್ತದೆ. ಇದು ನಾವು ಮೊದಲೇ ನಿಖರವಾಗಿ ಹೊಂದಿದ್ದೇವೆ, ಆದರೆ 4 ಸಿಎಸ್ಎಸ್ ನಿಯಮಗಳು ಬೇಕಾಗುವುದಕ್ಕೆ ಬದಲಾಗಿ, ನಾವು ಬಹು ಆಯ್ಕೆಗಳೊಂದಿಗೆ ಏಕ ನಿಯಮವನ್ನು ಹೊಂದಿದ್ದೇವೆ. ಸೆಲೆಕ್ಟರ್ನಲ್ಲಿ ಅಲ್ಪವಿರಾಮವು ಏನು ಮಾಡುತ್ತದೆ, ಇದು ಒಂದು ನಿಯಮದಲ್ಲಿ ಬಹು ಆಯ್ಕೆಗಾರರನ್ನು ಹೊಂದಲು ನಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

ಈ ವಿಧಾನವು ಲೀನರ್, ಕ್ಲೀನರ್ ಸಿಎಸ್ಎಸ್ ಫೈಲ್ಗಳಿಗಾಗಿ ಮಾತ್ರವಲ್ಲ, ಇದು ಭವಿಷ್ಯದ ನವೀಕರಣಗಳನ್ನು ತುಂಬಾ ಸುಲಭಗೊಳಿಸುತ್ತದೆ. ಈಗ ನೀವು ಬಣ್ಣವನ್ನು ಕೆಂಪು ಬಣ್ಣದಿಂದ ನೀಲಿ ಬಣ್ಣಕ್ಕೆ ಬದಲಾಯಿಸಲು ಬಯಸಿದರೆ, ನಾವು ಹೊಂದಿದ್ದ ಮೂಲ 4 ಶೈಲಿಯ ನಿಯಮಗಳ ಬದಲಾಗಿ ನೀವು ಕೇವಲ ಒಂದು ಸ್ಥಳದಲ್ಲಿ ಬದಲಾವಣೆಯನ್ನು ಮಾಡಬೇಕಾಗಿದೆ! ಇಡೀ ಸಿಎಸ್ಎಸ್ ಫೈಲ್ನಲ್ಲಿ ಈ ಸಮಯದ ಉಳಿತಾಯದ ಬಗ್ಗೆ ಯೋಚಿಸಿ ಮತ್ತು ದೀರ್ಘಾವಧಿಯಲ್ಲಿ ಇದು ಸಮಯ ಮತ್ತು ಸ್ಥಳವನ್ನು ಹೇಗೆ ಉಳಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ನೀವು ನೋಡಬಹುದು!

ಸಿಂಟ್ಯಾಕ್ಸ್ ವೇರಿಯೇಷನ್

ಮೇಲಿನ ಸಾಲಿನಲ್ಲಿ ಪ್ರತಿಯೊಂದನ್ನು ಬರೆಯುವ ಬದಲು, ಪ್ರತಿಯೊಬ್ಬ ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ತನ್ನದೇ ಆದ ಸಾಲಿನಲ್ಲಿ ಬೇರ್ಪಡಿಸುವ ಮೂಲಕ CSS ಅನ್ನು ಹೆಚ್ಚು ಸ್ಪಷ್ಟವಾಗಿಸಲು ಕೆಲವರು ಆಯ್ಕೆ ಮಾಡುತ್ತಾರೆ. ಅದು ಹೇಗೆ ಆಗುತ್ತದೆ:

ನೇ,
ಟಿಡಿ,
p.red,
div # firstred
{
ಬಣ್ಣ: ಕೆಂಪು;
}

ನೀವು ಪ್ರತಿ ಸೆಲೆಕ್ಟರ್ನ ನಂತರ ಕಾಮಾವನ್ನು ಇರಿಸಿದ್ದೀರಿ ಮತ್ತು ನಂತರ ಅದರ ಸ್ವಂತ ಸಾಲಿನಲ್ಲಿ ಮುಂದಿನ ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಮುರಿಯಲು "ನಮೂದಿಸಿ" ಅನ್ನು ಗಮನಿಸಿ. ಅಂತಿಮ ಸೆಲೆಕ್ಟರ್ ನಂತರ ನೀವು ಅಲ್ಪವಿರಾಮವನ್ನು ಸೇರಿಸಬೇಡಿ.

ನಿಮ್ಮ ಆಯ್ಕೆದಾರರ ನಡುವೆ ಅಲ್ಪವಿರಾಮಗಳನ್ನು ಬಳಸುವುದರ ಮೂಲಕ, ಭವಿಷ್ಯದಲ್ಲಿ ನವೀಕರಿಸಲು ಸುಲಭವಾಗುವಂತಹ ಹೆಚ್ಚು ಕಾಂಪ್ಯಾಕ್ಟ್ ಸ್ಟೈಲ್ ಹಾಳೆಯನ್ನು ನೀವು ರಚಿಸಿ ಮತ್ತು ಅದು ಇಂದು ಓದುವುದು ಸುಲಭ!

ಜೆನ್ನಿಫರ್ ಕ್ರಿನಿನ್ರಿಂದ ಮೂಲ ಲೇಖನ. ಜೆರೆಮಿ ಗಿರಾರ್ಡ್ರಿಂದ 5/8/17 ರಂದು ಸಂಪಾದಿಸಲಾಗಿದೆ