CSS2 ಮತ್ತು CSS3 ನಡುವಿನ ವ್ಯತ್ಯಾಸ

CSS3 ಗೆ ಪ್ರಮುಖ ಬದಲಾವಣೆಗಳನ್ನು ಅಂಡರ್ಸ್ಟ್ಯಾಂಡಿಂಗ್

CSS2 ಮತ್ತು CSS3 ನಡುವಿನ ಅತಿದೊಡ್ಡ ವ್ಯತ್ಯಾಸವು CSS3 ಅನ್ನು ಮಾಡ್ಯೂಲ್ ಎಂದು ಕರೆಯಲಾಗುವ ವಿಭಿನ್ನ ವಿಭಾಗಗಳಾಗಿ ವಿಭಜಿಸಲಾಗಿದೆ. ಈ ಮಾಡ್ಯೂಲ್ಗಳು ಪ್ರತಿಯೊಂದು ಶಿಫಾರಸು ಪ್ರಕ್ರಿಯೆಯ ವಿವಿಧ ಹಂತಗಳಲ್ಲಿ ಡಬ್ಲ್ಯು 3 ಸಿ ಮೂಲಕ ದಾರಿ ಮಾಡುತ್ತಿದೆ. ಈ ಪ್ರಕ್ರಿಯೆಯು ವಿಭಿನ್ನ ತಯಾರಕರು ಬ್ರೌಸರ್ನ ವಿವಿಧ ತುಣುಕುಗಳನ್ನು ಸ್ವೀಕರಿಸಲು ಮತ್ತು ಅನುಷ್ಠಾನಗೊಳಿಸುವುದು ಸುಲಭವಾಗಿಸಿದೆ.

ಈ ಪ್ರಕ್ರಿಯೆಯನ್ನು ನೀವು CSS2 ನೊಂದಿಗೆ ಏನಾಯಿತು ಎಂಬುದನ್ನು ಹೋಲಿಸಿದರೆ, ಎಲ್ಲ ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಸ್ಟೈಲ್ ಶೀಟ್ಸ್ ಮಾಹಿತಿಯೊಳಗೆ ಎಲ್ಲವೂ ಒಂದೇ ಡಾಕ್ಯುಮೆಂಟ್ನಂತೆ ಸಲ್ಲಿಸಿದಲ್ಲಿ, ಶಿಫಾರಸುಗಳನ್ನು ಸಣ್ಣ, ಪ್ರತ್ಯೇಕ ತುಣುಕುಗಳಾಗಿ ಮುರಿಯುವ ಅನುಕೂಲಗಳನ್ನು ನೀವು ಕಾಣುವಿರಿ. ಪ್ರತಿಯೊಂದು ಮಾಡ್ಯೂಲ್ಗಳು ಪ್ರತ್ಯೇಕವಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತಿರುವುದರಿಂದ, CSS3 ಮಾಡ್ಯೂಲ್ಗಳಿಗಾಗಿ ನಾವು ಹೆಚ್ಚು ವ್ಯಾಪಕ ಬ್ರೌಸರ್ ಬೆಂಬಲವನ್ನು ಹೊಂದಿದ್ದೇವೆ.

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

ಹೊಸ CSS3 ಆಯ್ಕೆದಾರರು

CSS3 ನೀವು ಹೊಸ ಸಿಎಸ್ಎಸ್ ಸೆಲೆಕ್ಟರ್ಗಳೊಂದಿಗೆ ಸಿಎಸ್ಎಸ್ ನಿಯಮಗಳನ್ನು ಬರೆಯಬಹುದು, ಹಾಗೆಯೇ ಹೊಸ ಸಂಯೋಜಕ, ಮತ್ತು ಕೆಲವು ಹೊಸ ಹುಸಿ-ಅಂಶಗಳನ್ನು ಹೊಸ ರೀತಿಯಲ್ಲಿ ನೀಡುತ್ತದೆ.

ಮೂರು ಹೊಸ ಗುಣಲಕ್ಷಣ ಆಯ್ಕೆದಾರರು:

• ಆಟ್ರಿಬ್ಯೂಟ್ ಆರಂಭದಲ್ಲಿ ನಿಖರವಾದ ಅಂಶವನ್ನು ಸರಿಹೊಂದಿಸುತ್ತದೆ [foo ^ = "bar"] ಅಂಶವು "ಬಾರ್" ಉದಾ ಜೊತೆ ಪ್ರಾರಂಭವಾಗುವ ಫೂ ಎಂಬ ಗುಣಲಕ್ಷಣವನ್ನು ಹೊಂದಿದೆ.
• ಆಟ್ರಿಬ್ಯೂಟ್ ಅಂತ್ಯವು ನಿಖರವಾದ ಅಂಶಕ್ಕೆ ಸರಿಹೊಂದಿಸುತ್ತದೆ [foo $ = "bar"] ಅಂಶವು "ಬಾರ್" ನೊಂದಿಗೆ ಕೊನೆಗೊಳ್ಳುವ ಫೂ ಎಂದು ಕರೆಯಲಾಗುವ ಗುಣಲಕ್ಷಣವನ್ನು ಹೊಂದಿದೆ.
• ಆಟ್ರಿಬ್ಯೂಟ್ ಪಂದ್ಯದ ಅಂಶವನ್ನು ಹೊಂದಿದೆ [foo * = "bar"] ಅಂಶವು ಸ್ಟ್ರಿಂಗ್ "ಬಾರ್" ಉದಾ ಹೊಂದಿರುವ ಫೂ ಎಂದು ಕರೆಯಲ್ಪಡುವ ಗುಣಲಕ್ಷಣವನ್ನು ಹೊಂದಿದೆ.

16 ಹೊಸ ಹುಸಿ ತರಗತಿಗಳು:

• :ಬೇರು
  • ಡಾಕ್ಯುಮೆಂಟ್ನ ಮೂಲ ಅಂಶ. ಎಚ್ಟಿಎಮ್ಎಲ್ನಲ್ಲಿ ಯಾವಾಗಲೂ ಇದು.
• : ಎನ್ತ್-ಮಗು (ಎನ್)
  • ನಿಖರವಾದ ಮಗು ಅಂಶಗಳನ್ನು ಹೊಂದಿಸಲು ಅಥವಾ ಪರ್ಯಾಯ ಹೊಂದಾಣಿಕೆಗಳನ್ನು ಪಡೆಯಲು ವೇರಿಯಬಲ್ಗಳನ್ನು ಬಳಸಲು ಇದನ್ನು ಬಳಸಿ.
• : nth- ಕೊನೆಯ ಮಗು (n)
  • ಕೊನೆಯಿಂದ ಎಣಿಸುವ ನಿಖರ ಮಗು ಅಂಶಗಳನ್ನು ಹೊಂದಿಕೆ ಮಾಡಿ.
• : ಎನ್ತ್-ಆಫ್-ಟೈಪ್ (ಎನ್)
  • ಡಾಕ್ಯುಮೆಂಟ್ ಟ್ರೀಯಲ್ಲಿ ಅದೇ ಹೆಸರಿನೊಂದಿಗೆ ಸಹೋದರ ಅಂಶಗಳನ್ನು ಹೊಂದಿಸಿ.
• : nth-last-type (n)
  • ಕೆಳಗಿನಿಂದ ಎಣಿಸುವ ಅದೇ ಹೆಸರಿನೊಂದಿಗೆ ಸಹೋದರ ಅಂಶಗಳನ್ನು ಹೊಂದಿಕೆ ಮಾಡಿ.
• :ಕೊನೆಯ ಮಗು
  • ಪೋಷಕರ ಕೊನೆಯ ಮಗುವಿನ ಅಂಶವನ್ನು ಹೊಂದಿಸಿ.
• : ಮೊದಲ-ಆಫ್-ಟೈಪ್
  • ಆ ರೀತಿಯ ಮೊದಲ ಸಹೋದರ ಅಂಶವನ್ನು ಹೊಂದಿಸಿ.
• : ಕೊನೆಯ-ರೀತಿಯ
  • ಆ ರೀತಿಯ ಕೊನೆಯ ಸಹೋದರ ಅಂಶವನ್ನು ಹೊಂದಿಸಿ.
• : ಕೇವಲ-ಮಗು
  • ಅದರ ಪೋಷಕರ ಏಕೈಕ ಮಗು ಎಂದು ಅಂಶವನ್ನು ಹೊಂದಿಸಿ.
• : ಕೇವಲ-ಆಫ್-ಟೈಪ್
  • ಅದರ ಬಗೆಯ ಏಕೈಕ ಅಂಶವನ್ನು ಹೊಂದಿಸಿ.
• :ಖಾಲಿ
  • ಮಕ್ಕಳನ್ನು ಹೊಂದಿರದ ಅಂಶವನ್ನು ಸರಿಹೊಂದಿಸಿ (ಪಠ್ಯ ಗ್ರಂಥಿಗಳು ಸೇರಿದಂತೆ).
• : ಗುರಿ
  • URI ಯನ್ನು ಸೂಚಿಸುವ ಗುರಿಯೊಂದಿಗೆ ಒಂದು ಅಂಶವನ್ನು ಹೊಂದಿಸಿ.
• : ಸಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ
  • ಅದು ಸಕ್ರಿಯಗೊಂಡಾಗ ಅಂಶವನ್ನು ಹೊಂದಿಸಿ.
• : ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ
  • ನಿಷ್ಕ್ರಿಯಗೊಂಡಾಗ ಅಂಶವನ್ನು ಹೊಂದಿಸಿ.
• : ಪರಿಶೀಲಿಸಲಾಗಿದೆ
  • ಅದನ್ನು ಪರಿಶೀಲಿಸಿದಾಗ ಅಂಶವನ್ನು ಹೋಲಿಸಿ (ರೇಡಿಯೋ ಬಟನ್ ಅಥವಾ ಚೆಕ್ಬಾಕ್ಸ್).

• : ಅಲ್ಲ (ಗಳು)
  • ಅಂಶ ಸರಳ ಸೆಲೆಕ್ಟರ್ಗಳಿಗೆ ಹೊಂದಿಕೆಯಾಗದಿದ್ದಾಗ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ.

ಒಂದು ಹೊಸ ಸಂಯೋಜಕ:

• ಅಂಶಎ ~ ಎಲಿಮೆಂಟ್ಬಿ
  • ElementB elementA ನಂತರ ಎಲ್ಲಿಯಾದರೂ ಅನುಸರಿಸುವಾಗ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ, ಅಗತ್ಯವಾಗಿ ತಕ್ಷಣವಲ್ಲ.

ಹೊಸ ಪ್ರಾಪರ್ಟೀಸ್

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

CSS3 ನಲ್ಲಿ ಬಾಕ್ಸ್ ಮಾದರಿ ಬದಲಾಗಿಲ್ಲ. ಆದರೆ ನಿಮ್ಮ ಪೆಟ್ಟಿಗೆಗಳ ಹಿನ್ನೆಲೆ ಮತ್ತು ಗಡಿಗಳನ್ನು ಶೈಲಿಗೆ ಸಹಾಯ ಮಾಡುವ ಹೊಸ ಶೈಲಿ ಗುಣಲಕ್ಷಣಗಳ ಒಂದು ಗುಂಪನ್ನು ನೀವು ಕಾಣಬಹುದು.

ಬಹು ಹಿನ್ನೆಲೆ ನಾನು mages

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

ಹೊಸ ಹಿನ್ನೆಲೆ ಶೈಲಿ ಗುಣಲಕ್ಷಣಗಳು

CSS3 ನಲ್ಲಿ ಕೆಲವು ಹೊಸ ಹಿನ್ನೆಲೆ ಗುಣಲಕ್ಷಣಗಳಿವೆ.

• ಹಿನ್ನೆಲೆ-ಕ್ಲಿಪ್
  • ಹಿನ್ನೆಲೆ ಗುಣಲಕ್ಷಣವನ್ನು ಹೇಗೆ ಕ್ಲಿಪ್ ಮಾಡಬೇಕೆಂದು ಈ ಆಸ್ತಿ ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ಪೂರ್ವನಿಯೋಜಿತವು ಗಡಿ ಪೆಟ್ಟಿಗೆಯಾಗಿದೆ, ಆದರೆ ಇದನ್ನು ಪ್ಯಾಡಿಂಗ್ ಬಾಕ್ಸ್ ಅಥವಾ ವಿಷಯ ಪೆಟ್ಟಿಗೆಯಲ್ಲಿ ಬದಲಾಯಿಸಬಹುದು.
• ಹಿನ್ನೆಲೆ-ಮೂಲ
  • ಪ್ಯಾಡಿಂಗ್ ಬಾಕ್ಸ್, ಗಡಿ ಪೆಟ್ಟಿಗೆಯಲ್ಲಿ ಅಥವಾ ವಿಷಯ ಪೆಟ್ಟಿಗೆಯಲ್ಲಿ ಹಿನ್ನೆಲೆ ಇರಬೇಕೆ ಎಂದು ಈ ಆಸ್ತಿ ನಿರ್ಧರಿಸುತ್ತದೆ.
• ಹಿನ್ನೆಲೆ-ಗಾತ್ರ
  • ಹಿನ್ನೆಲೆ ಆಕೃತಿಯ ಗಾತ್ರವನ್ನು ಸೂಚಿಸಲು ಈ ಆಸ್ತಿ ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಪುಟಕ್ಕೆ ಹೊಂದಿಕೊಳ್ಳಲು ಸಣ್ಣ ಚಿತ್ರಗಳನ್ನು ವಿಸ್ತರಿಸಲು ಇದು ನಿಮ್ಮನ್ನು ಅನುಮತಿಸುತ್ತದೆ.

ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಹಿನ್ನೆಲೆ ಶೈಲಿ ಗುಣಲಕ್ಷಣಗಳಿಗೆ ಬದಲಾವಣೆಗಳು

ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಹಿನ್ನೆಲೆ ಶೈಲಿಯ ಗುಣಲಕ್ಷಣಗಳಿಗೆ ಕೆಲವು ಬದಲಾವಣೆಗಳಿವೆ:

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

CSS3 ಬಾರ್ಡರ್ ಗುಣಲಕ್ಷಣಗಳು

CSS3 ಗಡಿಗಳಲ್ಲಿ ನಾವು ಬಳಸಿದ ಶೈಲಿಗಳು (ಘನ, ಡಬಲ್, ಬಿಡಿ, ಇತ್ಯಾದಿ) ಅಥವಾ ಅವುಗಳು ಇಮೇಜ್ ಆಗಿರಬಹುದು. ಪ್ಲಸ್, CSS3 ದುಂಡಾದ ಮೂಲೆಗಳನ್ನು ರಚಿಸಲು ಸಾಮರ್ಥ್ಯವನ್ನು ತರುತ್ತದೆ. ಬಾರ್ಡರ್ ಇಮೇಜ್ಗಳು ಆಸಕ್ತಿದಾಯಕವಾಗಿದೆ ಏಕೆಂದರೆ ನೀವು ಎಲ್ಲಾ ನಾಲ್ಕು ಗಡಿಗಳ ಚಿತ್ರವನ್ನು ರಚಿಸಿ ತದನಂತರ ಸಿಎಸ್ಎಸ್ ಅನ್ನು ನಿಮ್ಮ ಗಡಿಗಳಿಗೆ ಹೇಗೆ ಅನ್ವಯಿಸಬೇಕು ಎಂದು ತಿಳಿಸಿ.

ಹೊಸ ಬಾರ್ಡರ್ ಶೈಲಿ ಪ್ರಾಪರ್ಟೀಸ್

CSS3 ನಲ್ಲಿ ಕೆಲವು ಹೊಸ ಗಡಿ ಗುಣಲಕ್ಷಣಗಳಿವೆ:

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

ಗಡಿ ಮತ್ತು ಹಿನ್ನೆಲೆಗಳಿಗೆ ಸಂಬಂಧಿಸಿದ ಹೆಚ್ಚುವರಿ CSS3 ಗುಣಲಕ್ಷಣಗಳು

ಪೇಜ್ ಬ್ರೇಕ್ನಲ್ಲಿ ಪೆಟ್ಟಿಗೆಯನ್ನು ಮುರಿದಾಗ, ಲೈನ್ ಬ್ರೇಕ್ಗಾಗಿ ಕಾಲಮ್ ಬ್ರೇಕ್ (ಇನ್ಲೈನ್ ​​ಅಂಶಗಳಿಗಾಗಿ) ಬಾಕ್ಸ್-ಅಲಂಕಾರ-ಬ್ರೇಕ್ ಆಸ್ತಿ ಹೊಸ ಪೆಟ್ಟಿಗೆಗಳನ್ನು ಗಡಿ ಮತ್ತು ಪ್ಯಾಡಿಂಗ್ನೊಂದಿಗೆ ಹೇಗೆ ಸುತ್ತುತ್ತದೆ ಎಂಬುದನ್ನು ವರ್ಣಿಸುತ್ತದೆ. ಈ ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಿಕೊಂಡು ಅನೇಕ ಮುರಿದ ಪೆಟ್ಟಿಗೆಗಳ ನಡುವೆ ಹಿನ್ನೆಲೆಗಳನ್ನು ವಿಂಗಡಿಸಬಹುದು.

ಬಾಕ್ಸ್ ಅಂಶಗಳಿಗೆ ನೆರಳುಗಳನ್ನು ಸೇರಿಸಲು ಬಳಸಬಹುದಾದ ಬಾಕ್ಸ್-ನೆರಳು ಆಸ್ತಿ ಸಹ ಇದೆ.

CSS3 ನೊಂದಿಗೆ, ಕೋಷ್ಟಕಗಳಿಲ್ಲದೆ ಸಂಕೀರ್ಣವಾದ DIV ಟ್ಯಾಗ್ ರಚನೆಗಳಿಲ್ಲದೆ ನೀವು ಬಹು ಕಾಲಮ್ಗಳನ್ನು ಹೊಂದಿರುವ ವೆಬ್ ಪುಟವನ್ನು ಈಗ ಸುಲಭವಾಗಿ ಹೊಂದಿಸಬಹುದು. ದೇಹದ ಅಂಶವು ಎಷ್ಟು ಕಾಲಮ್ಗಳನ್ನು ಹೊಂದಿರಬೇಕು ಮತ್ತು ಅವು ಎಷ್ಟು ವಿಶಾಲವಾಗಿರಬೇಕು ಎಂದು ನೀವು ಬ್ರೌಸರ್ಗೆ ಹೇಳಿರಿ. ಪ್ಲಸ್ ನೀವು ಗಡಿಗಳನ್ನು (ನಿಯಮಗಳು), ಕಾಲಮ್ ಎತ್ತರವನ್ನು ವ್ಯಾಪಿಸುವ ಹಿನ್ನಲೆ ಬಣ್ಣಗಳನ್ನು ಸೇರಿಸಬಹುದು, ಮತ್ತು ನಿಮ್ಮ ಪಠ್ಯ ಎಲ್ಲಾ ಕಾಲಮ್ಗಳ ಮೂಲಕ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಹರಿಯುತ್ತದೆ.

CSS3 ಕಾಲಮ್ಗಳು- ಅಂಕಣಗಳ ಸಂಖ್ಯೆ ಮತ್ತು ಅಗಲವನ್ನು ವಿವರಿಸಿ

ನಿಮ್ಮ ಕಾಲಮ್ಗಳ ಸಂಖ್ಯೆ ಮತ್ತು ಅಗಲವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ಮೂರು ಹೊಸ ಗುಣಲಕ್ಷಣಗಳಿವೆ :

• ಕಾಲಮ್ ಅಗಲ
  • ನಿಮ್ಮ ಕಾಲಮ್ಗಳು ಇರಬೇಕಾದ ಅಗಲವನ್ನು ವಿವರಿಸುತ್ತದೆ. ಬ್ರೌಸರ್ ವ್ಯಾಪಕವಾದ ಕಾಲಮ್ಗಳೊಂದಿಗೆ ಜಾಗವನ್ನು ತುಂಬಲು ಪಠ್ಯವನ್ನು ಹರಿಯುತ್ತದೆ.
• ಕಾಲಮ್ ಎಣಿಕೆ
  • ಪುಟದ ಕಾಲಮ್ಗಳ ಸಂಖ್ಯೆಯನ್ನು ವಿವರಿಸುತ್ತದೆ. ನಂತರ ಬ್ರೌಸರ್ ಜಾಗದಲ್ಲಿ ಹೊಂದಿಕೊಳ್ಳಲು ಸಾಕಷ್ಟು ವ್ಯಾಪಕ ಕಾಲಮ್ಗಳನ್ನು ರಚಿಸುತ್ತದೆ, ಆದರೆ ನೀವು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಸಂಖ್ಯೆ ಮಾತ್ರ.
• ಕಾಲಮ್ಗಳು
  • ನೀವು ಎಲ್ಲಿ ಅಗಲ ಅಥವಾ ಸಂಖ್ಯೆಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು (ಅಥವಾ ಎರಡೂ, ಆದರೆ ವಿರಳವಾಗಿ ಸಮಂಜಸವೇ) ಅಲ್ಲಿ ಸಂಕ್ಷಿಪ್ತ ಆಸ್ತಿ.

CSS3 ಕಾಲಮ್ ಗ್ಯಾಪ್ಸ್ ಮತ್ತು ರೂಲ್ಸ್

ಅದೇ ಬಹುವಿಧದ ಸನ್ನಿವೇಶದಲ್ಲಿ ಕಾಲಮ್ಗಳ ನಡುವೆ ಅಂತರ ಮತ್ತು ನಿಯಮಗಳನ್ನು ಇರಿಸಲಾಗುತ್ತದೆ. ಅಂತರಗಳು ಅಂಕಣಗಳನ್ನು ಹೊರತುಪಡಿಸಿ ತಳ್ಳುತ್ತದೆ, ಆದರೆ ನಿಯಮಗಳು ಯಾವುದೇ ಜಾಗವನ್ನು ತೆಗೆದುಕೊಳ್ಳುವುದಿಲ್ಲ. ಒಂದು ಕಾಲಮ್ ನಿಯಮವು ಅಂತರಕ್ಕಿಂತಲೂ ವಿಸ್ತಾರವಾಗಿದ್ದರೆ, ಇದು ಪಕ್ಕದ ಕಾಲಮ್ಗಳನ್ನು ಅತಿಕ್ರಮಿಸುತ್ತದೆ. ಕಾಲಮ್ ನಿಯಮಗಳು ಮತ್ತು ಅಂತರಗಳಿಗೆ ಐದು ಹೊಸ ಗುಣಲಕ್ಷಣಗಳಿವೆ:

• ಕಾಲಮ್ ಅಂತರ
  • ಕಾಲಮ್ಗಳ ನಡುವಿನ ಅಂತರಗಳ ಅಗಲವನ್ನು ವಿವರಿಸುತ್ತದೆ.
• ಕಾಲಮ್-ನಿಯಮ-ಬಣ್ಣ
  • ನಿಯಮದ ಬಣ್ಣವನ್ನು ವಿವರಿಸುತ್ತದೆ.
• ಕಾಲಮ್-ನಿಯಮ-ಶೈಲಿ
  • ನಿಯಮದ ಶೈಲಿಯನ್ನು ವಿವರಿಸುತ್ತದೆ (ಘನ, ಚುಕ್ಕೆ, ಡಬಲ್, ಇತ್ಯಾದಿ.).
• ಕಾಲಮ್-ನಿಯಮ-ಅಗಲ
  • ನಿಯಮದ ಅಗಲವನ್ನು ವಿವರಿಸುತ್ತದೆ.
• ಕಾಲಮ್-ನಿಯಮ
  • ಒಂದು ಸಂಕ್ಷಿಪ್ತ ಆಸ್ತಿ ಎಲ್ಲಾ ಮೂರು ಕಾಲಮ್ ನಿಯಮ ಗುಣಗಳನ್ನು ಏಕಕಾಲದಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ.

CSS3 ಕಾಲಮ್ ಬ್ರೇಕ್ಸ್, ಕಾಲಮ್ಗಳನ್ನು ವಿಸ್ತರಿಸುವುದು, ಮತ್ತು ಕಾಲಮ್ಗಳನ್ನು ತುಂಬಿಸುವಿಕೆ

ಅಂಕಣ ವಿರಾಮಗಳು ಪೇಜ್ ವಿಷಯದಲ್ಲಿ ವಿರಾಮಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಬಳಸಲಾದ ಅದೇ CSS2 ಆಯ್ಕೆಗಳನ್ನು ಬಳಸುತ್ತವೆ, ಆದರೆ ಮೂರು ಹೊಸ ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ: ಮುರಿದುಹೋಗುವ ಮುಂಚಿನ , ಮುರಿದುಹೋಗುವಿಕೆ ಮತ್ತು ಮುರಿದುಹೋಗುವಿಕೆ .

ಕೋಷ್ಟಕಗಳಂತೆ, ನೀವು ಕಾಲಮ್-ಸ್ಪ್ಯಾನ್ ಆಸ್ತಿಯೊಂದಿಗೆ ಅಂಶಗಳನ್ನು ಲಗತ್ತಿಸಬಹುದು. ವೃತ್ತಪತ್ರಿಕೆಗಳಂತೆ ಅನೇಕ ಕಾಲಮ್ಗಳನ್ನು ವ್ಯಾಪಿಸುವ ಮುಖ್ಯಾಂಶಗಳನ್ನು ರಚಿಸಲು ಇದು ನಿಮ್ಮನ್ನು ಅನುಮತಿಸುತ್ತದೆ.

ಕಾಲಮ್ಗಳಲ್ಲಿ ಭರ್ತಿ ಮಾಡುವಿಕೆಯು ಪ್ರತಿ ಕಾಲಮ್ನಲ್ಲಿ ಎಷ್ಟು ವಿಷಯವನ್ನು ಹೊಂದಿರುತ್ತದೆ ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ. ಸಮತಲ ಕಾಲಮ್ಗಳು ಪ್ರತಿ ಕಾಲಮ್ನಲ್ಲಿ ಒಂದೇ ರೀತಿಯ ವಿಷಯವನ್ನು ಹಾಕಲು ಪ್ರಯತ್ನಿಸುತ್ತಿರುವಾಗ, ಸ್ವಯಂ ಕೇವಲ ಕಾಲಮ್ ಪೂರ್ಣಗೊಳ್ಳುವವರೆಗೆ ವಿಷಯವನ್ನು ಹರಿಯುತ್ತದೆ ಮತ್ತು ನಂತರ ಮುಂದಿನದಕ್ಕೆ ಹೋಗುತ್ತದೆ.

CSS2 ನಲ್ಲಿ ಸೇರಿಸಲಾಗಿದೆ ಎಂದು CSS3 ನಲ್ಲಿ ಹೆಚ್ಚು ವೈಶಿಷ್ಟ್ಯಗಳು

CSS2 ನಲ್ಲಿ ಅಸ್ತಿತ್ವದಲ್ಲಿರದ CSS3 ನಲ್ಲಿ ಬಹಳಷ್ಟು ಹೆಚ್ಚುವರಿ ವೈಶಿಷ್ಟ್ಯಗಳಿವೆ, ಅವುಗಳೆಂದರೆ:

• ಸಿಎಸ್ಎಸ್ ಟೆಂಪ್ಲೇಟು ಲೇಔಟ್ ಮಾಡ್ಯೂಲ್ ಮತ್ತು CSS3 ಗ್ರಿಡ್ ಸ್ಥಾನಿಕ ಮಾಡ್ಯೂಲ್ : ಸಿಎಸ್ಎಸ್ ಜೊತೆ ಗ್ರಿಡ್ ರಚಿಸಲಾಗುತ್ತಿದೆ.
• CSS3 ಪಠ್ಯ ಘಟಕ : ಔಟ್ಲೈನ್ ​​ಪಠ್ಯ ಮತ್ತು ಸಿಎಸ್ಎಸ್ ಜೊತೆ ಡ್ರಾಪ್ ನೆರಳುಗಳು ರಚಿಸಲು.
• CSS3 ಬಣ್ಣ ಮಾಡ್ಯೂಲ್ : ಈಗ ಅಪಾರದರ್ಶಕತೆ ಜೊತೆ.
• ಬಾಕ್ಸ್ ಮಾದರಿಗೆ ಬದಲಾವಣೆಗಳು : ಐಇ ಟ್ಯಾಗ್ನಂತೆ ವರ್ತಿಸುವ ಮಾರ್ಕ್ಯೂ ಆಸ್ತಿ ಸೇರಿದಂತೆ.
• CSS3 ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ ಮಾಡ್ಯೂಲ್ : ನಿಮಗೆ ಹೊಸ ಕರ್ಸರ್ಗಳು, ಕ್ರಮಗಳು, ಅಗತ್ಯ ಕ್ಷೇತ್ರಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯೆ, ಮತ್ತು ಮರುಗಾತ್ರಗೊಳಿಸುವ ಅಂಶಗಳು .
• ಮೀಡಿಯಾ ಪ್ರಶ್ನೆಗಳು : ಸ್ಟೈಲ್ ಹಾಳೆಯನ್ನು ಹೇಗೆ ಬಳಸಬೇಕೆಂದು ವ್ಯಾಖ್ಯಾನಿಸುವಾಗ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳು ನಿಮಗೆ ಹೆಚ್ಚಿನ ನಮ್ಯತೆಯನ್ನು ನೀಡುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, 20m ಗಿಂತ ದೊಡ್ಡದಾದ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ ಹೊಂದಿರುವ ಹ್ಯಾಂಡ್ಹೆಲ್ಡ್ ಸಾಧನಗಳಿಗೆ ಕೇವಲ ಒಂದು ಸ್ಟೈಲ್ ಹಾಳೆಯನ್ನು ನೀವು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು.
• CSS3 ರೂಬಿ ಮಾಡ್ಯೂಲ್ : ಡಾಕ್ಯುಮೆಂಟ್ಗಳನ್ನು ವಿವರಿಸಲು ಪಠ್ಯ ಮಾಣಿಕ್ಯವನ್ನು ಬಳಸುವ ಭಾಷೆಗಳಿಗೆ ಬೆಂಬಲವನ್ನು ಒದಗಿಸುತ್ತದೆ.
• CSS3 ಪೇಜ್ ಮೀಡಿಯಾ ಮಾಡ್ಯೂಲ್ : ಪೇಜ್ ಮಾಧ್ಯಮದ (ಪೇಪರ್, ಟ್ರಾನ್ಸ್ಪರೆನ್ಸಿಸ್, ಇತ್ಯಾದಿ) ಹೆಚ್ಚಿನ ಬೆಂಬಲಕ್ಕಾಗಿ.
• ರಚಿಸಿದ ವಿಷಯ : ಪ್ರೊಗ್ರಾಮೆಟಿಕ್ವಾಗಿ ಉತ್ಪತ್ತಿಯಾಗುವ ಹೆಡರ್ಗಳು ಮತ್ತು ಅಡಿಟಿಪ್ಪಣಿಗಳು, ಅಡಿಟಿಪ್ಪಣಿಗಳು, ಮತ್ತು ಇತರ ವಿಷಯಗಳು, ವಿಶೇಷವಾಗಿ ಪೇಜ್ ಮಾಧ್ಯಮಕ್ಕಾಗಿ.
• CSS3 ಸ್ಪೀಚ್ ಮಾಡ್ಯೂಲ್ : ಶ್ರುತ ಸಿಎಸ್ಎಸ್ ಗೆ ಬದಲಾವಣೆಗಳು.