CSS ಶೈಲಿಯ ನಿಯಮಗಳನ್ನು ಬ್ರೌಸರ್ನಿಂದ ಅರ್ಥೈಸಲಾಗುತ್ತದೆ ಮತ್ತು ನಂತರ ನಿಮ್ಮ ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿ ಸೂಕ್ತವಾದ ಅಂಶಗಳಿಗೆ ಅನ್ವಯಿಸುತ್ತದೆ. ಶೈಲಿಯ ನಿಯಮವು ಮೂರು ಭಾಗಗಳನ್ನು ಒಳಗೊಂಡಿದೆ:
- ಸೆಲೆಕ್ಟರ್ಶೈಲಿಯನ್ನು ಅನ್ವಯಿಸುವ HTML ಟ್ಯಾಗ್ ಆಗಿದೆ. ಇದು ಯಾವುದೇ ಟ್ಯಾಗ್ ಆಗಿರಬಹುದು, ಉದಾಹರಣೆಗೆ,
ಅಥವಾ
ಇತ್ಯಾದಿ
- ಆಸ್ತಿ HTML ಟ್ಯಾಗ್ನ ಗುಣಲಕ್ಷಣ ಪ್ರಕಾರವಾಗಿದೆ. ಸರಳವಾಗಿ ಹೇಳುವುದಾದರೆ, HTML ನಲ್ಲಿನ ಎಲ್ಲಾ ಗುಣಲಕ್ಷಣಗಳನ್ನು CSS ಗುಣಲಕ್ಷಣಗಳಾಗಿ ಪರಿವರ್ತಿಸಲಾಗುತ್ತದೆ. ಇವು ಬಣ್ಣಗಳು, ಗಡಿಗಳು, ಪ್ಯಾಡಿಂಗ್, ಇತ್ಯಾದಿ ಆಗಿರಬಹುದು.
- ಅರ್ಥ- ಆಸ್ತಿಗೆ ಹೊಂದಿಸಲಾಗಿದೆ. ಉದಾಹರಣೆಗೆ, ಬಣ್ಣದ ಆಸ್ತಿ ಹಸಿರು, #008000, ಇತ್ಯಾದಿ ಆಗಿರಬಹುದು.
CSS ನಲ್ಲಿ ಸೆಲೆಕ್ಟರ್ಗಳಿಗೆ ಸಿಂಟ್ಯಾಕ್ಸ್ ಈ ಕೆಳಗಿನಂತಿರುತ್ತದೆ:
ಸೆಲೆಕ್ಟರ್ (ಆಸ್ತಿ: ಮೌಲ್ಯ)
ಉದಾಹರಣೆ.ನೀವು ಟೇಬಲ್ ಗಡಿಯನ್ನು ಈ ರೀತಿ ಹೊಂದಿಸಬಹುದು:
ಟೇಬಲ್ (ಅಡ್ಡ: 2px ಘನ #FF8C00; )
ಇಲ್ಲಿ ಸೆಲೆಕ್ಟರ್ ಸಿಂಟ್ಯಾಕ್ಸ್ ಆಗಿದೆ: ಟೇಬಲ್ ಸೆಲೆಕ್ಟರ್ ಆಗಿದೆ ಮತ್ತು ಬಾರ್ಡರ್ ಆಸ್ತಿಯಾಗಿದೆ ಮತ್ತು 2px ಘನ #FF8C00 ಆ ಆಸ್ತಿಯ ಮೌಲ್ಯವಾಗಿದೆ.
ನಿಮಗೆ ಸರಿಹೊಂದುವಂತೆ ನೀವು ಆಯ್ಕೆದಾರರನ್ನು ವಿವಿಧ ರೀತಿಯಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು. ಆಯ್ಕೆದಾರರ ಪ್ರಕಾರಗಳನ್ನು ಕೆಳಗೆ ನೀಡಲಾಗಿದೆ.>
ಪ್ರಮಾಣಿತ ಆಯ್ಕೆಗಾರರು
ನೀವು ಮೇಲೆ ನೋಡಿದ ಅದೇ ಸೆಲೆಕ್ಟರ್ ಆಗಿದೆ. ಮತ್ತೊಮ್ಮೆ, ಎಲ್ಲಾ ಮೊದಲ ಹಂತದ ಶೀರ್ಷಿಕೆಗಳಿಗೆ ಬಣ್ಣವನ್ನು ನೀಡಲು ಮತ್ತೊಂದು ಉದಾಹರಣೆ:
H1 (ಬಣ್ಣ: #8B4513;)
ಯುನಿವರ್ಸಲ್ ಸೆಲೆಕ್ಟರ್ಸ್
ನಿರ್ದಿಷ್ಟ ಪ್ರಕಾರದ ಅಂಶಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡುವ ಬದಲು, ಸಾರ್ವತ್ರಿಕ ಸೆಲೆಕ್ಟರ್ ಯಾವುದೇ ಅಂಶ ಪ್ರಕಾರದ ಹೆಸರನ್ನು ಸರಳವಾಗಿ ಹೊಂದಿಸುತ್ತದೆ:
* (ಬಣ್ಣ: #808080;)
ಈ ನಿಯಮವು ನಮ್ಮ ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿನ ಪ್ರತಿಯೊಂದು ಅಂಶದ ವಿಷಯಗಳನ್ನು ಬೂದು ಬಣ್ಣದಲ್ಲಿ ಪ್ರದರ್ಶಿಸುತ್ತದೆ.
ಡಿಸೆಂಡೆಂಟ್ ಸೆಲೆಕ್ಟರ್ಗಳು ಅಥವಾ ನೆಸ್ಟೆಡ್ ಸೆಲೆಕ್ಟರ್ಗಳು
ನಿರ್ದಿಷ್ಟ ಅಂಶದೊಳಗೆ ಇರುವಾಗ ಮಾತ್ರ ನೀವು ಶೈಲಿಯ ನಿಯಮವನ್ನು ನಿರ್ದಿಷ್ಟ ಅಂಶಕ್ಕೆ ಅನ್ವಯಿಸಲು ಬಯಸುತ್ತೀರಿ ಎಂದು ಭಾವಿಸೋಣ, ನಂತರ ನೆಸ್ಟೆಡ್ ಸೆಲೆಕ್ಟರ್ಗಳು ಅಥವಾ ವಂಶಸ್ಥರ ಆಯ್ಕೆದಾರರು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತಾರೆ. ಕೆಳಗಿನ ಉದಾಹರಣೆಯಲ್ಲಿ ತೋರಿಸಿರುವಂತೆ, ಶೈಲಿಯ ನಿಯಮವನ್ನು ಅಂಶಕ್ಕೆ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ ಅದು ಟ್ಯಾಗ್ನೊಳಗೆ ಇದ್ದಾಗ ಮಾತ್ರ
- .
ಉಲ್ ಎಮ್ (ಬಣ್ಣ: #CD5C5C; )
ವರ್ಗ ಆಯ್ಕೆಗಾರರು
ವರ್ಗ ಗುಣಲಕ್ಷಣದ ಆಧಾರದ ಮೇಲೆ ನೀವು ಅಂಶಗಳಿಗೆ ಶೈಲಿ ನಿಯಮಗಳನ್ನು ಹೊಂದಿಸಬಹುದು. ಈ ವರ್ಗವನ್ನು ಹೊಂದಿರುವ ಎಲ್ಲಾ ಅಂಶಗಳನ್ನು ನಿರ್ದಿಷ್ಟ ನಿಯಮದ ಪ್ರಕಾರ ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಲಾಗುತ್ತದೆ.
ನೀಲಿ (ಬಣ್ಣ: #0000FF;)
ವರ್ಗ="ನೀಲಿ". ನೀವು ವರ್ಗ ಆಯ್ಕೆಯನ್ನು ಸ್ವಲ್ಪ ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ:
H1.blue (ಬಣ್ಣ: #0000FF; )
ಗುಣಲಕ್ಷಣದೊಂದಿಗೆ ವರ್ಗ="ನೀಲಿ".
ನೀವು ಒಂದು ಅಂಶಕ್ಕೆ ಬಹು ವರ್ಗ ಆಯ್ಕೆಗಳನ್ನು ಅನ್ವಯಿಸಬಹುದು. ಕೆಳಗಿನ ಉದಾಹರಣೆಯನ್ನು ಪರಿಗಣಿಸಿ:
ಈ ಪ್ಯಾರಾಗ್ರಾಫ್ ಅನ್ನು ತರಗತಿಗಳೊಂದಿಗೆ ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಲಾಗುತ್ತದೆ ಕೇಂದ್ರಮತ್ತು ದಪ್ಪ.
ಐಡಿ ಸೆಲೆಕ್ಟರ್ಗಳು
ಐಡಿ ಗುಣಲಕ್ಷಣದ ಆಧಾರದ ಮೇಲೆ ನೀವು ಅಂಶಗಳಿಗೆ ಶೈಲಿ ನಿಯಮಗಳನ್ನು ಹೊಂದಿಸಬಹುದು. ಈ ಐಡಿಯನ್ನು ಹೊಂದಿರುವ ಎಲ್ಲಾ ಅಂಶಗಳನ್ನು ನಿರ್ದಿಷ್ಟ ನಿಯಮದ ಪ್ರಕಾರ ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಲಾಗುತ್ತದೆ.
#ನೀಲಿ (ಬಣ್ಣ: #0000FF;)
ಈ ನಿಯಮವು ನಮ್ಮ ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿರುವ ವಿಷಯವನ್ನು ಗುಣಲಕ್ಷಣದೊಂದಿಗೆ ಪ್ರತಿ ಅಂಶಕ್ಕೆ ನೀಲಿ ಬಣ್ಣದಲ್ಲಿ ಪ್ರದರ್ಶಿಸುತ್ತದೆ ಐಡಿ="ನೀಲಿ". ನೀವು ಐಡಿ ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಸ್ವಲ್ಪ ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟವಾಗಿ ಮಾಡಬಹುದು. ಉದಾಹರಣೆಗೆ:
H1#ನೀಲಿ (ಬಣ್ಣ: #0000FF;)
ಈ ನಿಯಮವು ಅಂಶಗಳಿಗೆ ಮಾತ್ರ ನೀಲಿ ಬಣ್ಣವನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ
ಗುಣಲಕ್ಷಣದೊಂದಿಗೆ ಐಡಿ="ನೀಲಿ".
ಐಡಿ ಸೆಲೆಕ್ಟರ್ಗಳ ನಿಜವಾದ ಶಕ್ತಿಯು ವಂಶಸ್ಥರ ಆಯ್ಕೆದಾರರಿಗೆ ಆಧಾರವಾಗಿ ಬಳಸಿದಾಗ, ಉದಾಹರಣೆಗೆ:
#ನೀಲಿ h2 (ಬಣ್ಣ: #0000FF;)
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಗುಣಲಕ್ಷಣದೊಂದಿಗೆ ಟ್ಯಾಗ್ಗಳಲ್ಲಿದ್ದಾಗ ಎಲ್ಲಾ ಎರಡನೇ ಹಂತದ ಶೀರ್ಷಿಕೆಗಳು ನೀಲಿ ಬಣ್ಣದಲ್ಲಿ ಗೋಚರಿಸುತ್ತವೆ ಐಡಿ="ನೀಲಿ".
ಮಕ್ಕಳ ಆಯ್ಕೆಗಾರರು
ನೀವು ಈಗಾಗಲೇ ವಂಶಸ್ಥರ ಆಯ್ಕೆದಾರರನ್ನು ತಿಳಿದಿದ್ದೀರಿ. ಚೈಲ್ಡ್ ಸೆಲೆಕ್ಟರ್ಗಳಿಗೆ ಹೋಲುವ ಮತ್ತೊಂದು ರೀತಿಯ ಸೆಲೆಕ್ಟರ್ ಇದೆ ಆದರೆ ವಿಭಿನ್ನ ಕಾರ್ಯವನ್ನು ಹೊಂದಿದೆ, ಚೈಲ್ಡ್ ಸೆಲೆಕ್ಟರ್. ಕೆಳಗಿನ ಉದಾಹರಣೆಯನ್ನು ಪರಿಗಣಿಸಿ:
ದೇಹ > ಪು (ಬಣ್ಣ: #0000FF; )
ಅಂಶದ ನೇರ ಮಗುವಾಗಿದ್ದರೆ ಈ ನಿಯಮವು ಎಲ್ಲಾ ಪ್ಯಾರಾಗಳನ್ನು ನೀಲಿ ಬಣ್ಣದಲ್ಲಿ ಪ್ರದರ್ಶಿಸುತ್ತದೆ
. ಇತರ ಪ್ಯಾರಾಗಳು ಇತರ ಪ್ರಕಾರದ ಅಂಶಗಳ ಒಳಗೆ ಇರಿಸಲಾಗಿದೆಅಥವಾಪಕ್ಕದ ಆಯ್ಕೆದಾರರು
ಪರಸ್ಪರ ಅನುಸರಿಸುವ HTML ಅಂಶಗಳನ್ನು ಪಕ್ಕದ ಅಂಶಗಳು ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ. ಕೆಳಗಿನ ಉದಾಹರಣೆಯನ್ನು ಪರಿಗಣಿಸಿ:
ಸ್ಟ್ರಾಂಗ್ + ಎಮ್ (ಬಣ್ಣ: #0000FF; )
ಈ ನಿಯಮವು ಟ್ಯಾಗ್ನ ವಿಷಯಗಳನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ ಅಂಶದ ನಂತರ ಬಂದರೆ ನೀಲಿ ಬಣ್ಣದಲ್ಲಿ . ಇತರೆ ಟ್ಯಾಗ್ಗಳು , ಟ್ಯಾಗ್ ನಂತರ ಬರುತ್ತಿಲ್ಲ , ಈ ನಿಯಮದ ಯಾವುದೇ ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ.
ಗುಣಲಕ್ಷಣ ಆಯ್ಕೆದಾರರು
ನಿರ್ದಿಷ್ಟ ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ HTML ಅಂಶಗಳಿಗೆ ನೀವು ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಬಹುದು. ಕೆಳಗಿನ ಶೈಲಿಯ ನಿಯಮವು ಮೌಲ್ಯ ಪಠ್ಯದೊಂದಿಗೆ ಪ್ರಕಾರದ ಗುಣಲಕ್ಷಣವನ್ನು ಹೊಂದಿರುವ ಎಲ್ಲಾ ಇನ್ಪುಟ್ ಅಂಶಗಳಿಗೆ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ:
ಇನ್ಪುಟ್ (ಬಣ್ಣ: #0000FF; )
ಆಟ್ರಿಬ್ಯೂಟ್ ಸೆಲೆಕ್ಟರ್ಗಳನ್ನು ಬಳಸುವುದರ ಪ್ರಯೋಜನವೆಂದರೆ ಅಂಶ ಬದಲಾಗುವುದಿಲ್ಲ, ಮತ್ತು ಬಣ್ಣವನ್ನು ಬಯಸಿದ ಪಠ್ಯ ಕ್ಷೇತ್ರಗಳಿಗೆ ಮಾತ್ರ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ.
ಕೆಳಗಿನ ನಿಯಮಗಳು ಗುಣಲಕ್ಷಣ ಆಯ್ಕೆಗೆ ಅನ್ವಯಿಸುತ್ತವೆ:
- p - ಲ್ಯಾಂಗ್ ಗುಣಲಕ್ಷಣದೊಂದಿಗೆ ಎಲ್ಲಾ ಪ್ಯಾರಾಗ್ರಾಫ್ ಅಂಶಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡುತ್ತದೆ.
- p - ಲ್ಯಾಂಗ್ ಗುಣಲಕ್ಷಣವು "ರು" ನಿಖರವಾದ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿರುವ ಎಲ್ಲಾ ಪ್ಯಾರಾಗ್ರಾಫ್ ಅಂಶಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡುತ್ತದೆ.
- p - ಲ್ಯಾಂಗ್ ಗುಣಲಕ್ಷಣವು "ರು" ಪದವನ್ನು ಒಳಗೊಂಡಿರುವ ಎಲ್ಲಾ ಪ್ಯಾರಾಗ್ರಾಫ್ ಅಂಶಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡುತ್ತದೆ.
- p - ಲ್ಯಾಂಗ್ ಗುಣಲಕ್ಷಣವು ನಿಖರವಾದ "ರು" ಅಥವಾ "ರು" ನೊಂದಿಗೆ ಪ್ರಾರಂಭವಾಗುವ ಮೌಲ್ಯಗಳನ್ನು ಒಳಗೊಂಡಿರುವ ಎಲ್ಲಾ ಪ್ಯಾರಾಗ್ರಾಫ್ ಅಂಶಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡುತ್ತದೆ.
ಕೆಲವು ಶೈಲಿಯ ನಿಯಮಗಳು
ಒಂದೇ ಅಂಶಕ್ಕಾಗಿ ನೀವು ಬಹು ಶೈಲಿಯ ನಿಯಮಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬೇಕಾಗಬಹುದು. ಈ ಕೆಳಗಿನ ಉದಾಹರಣೆಯಲ್ಲಿ ತೋರಿಸಿರುವಂತೆ, ಬಹು ಗುಣಲಕ್ಷಣಗಳನ್ನು ಮತ್ತು ಅವುಗಳ ಅನುಗುಣವಾದ ಮೌಲ್ಯಗಳನ್ನು ಒಂದೇ ಬ್ಲಾಕ್ಗೆ ಸಂಯೋಜಿಸಲು ನೀವು ಈ ನಿಯಮಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು:
H1 (ಬಣ್ಣ: #00CED1; ಅಕ್ಷರದ ಅಂತರ: .2em; ಪಠ್ಯ-ರೂಪಾಂತರ: ಸಣ್ಣಕ್ಷರ; ಅಂಚು-ಕೆಳಗೆ: 2em; ಫಾಂಟ್-ತೂಕ: 700; )
ಎಲ್ಲಾ ಆಸ್ತಿ ಮತ್ತು ಮೌಲ್ಯದ ಜೋಡಿಗಳನ್ನು ಅರ್ಧವಿರಾಮ ಚಿಹ್ನೆಯಿಂದ ಪ್ರತ್ಯೇಕಿಸಲಾಗಿದೆ (;). ನೀವು ಅವುಗಳನ್ನು ಒಂದು ಸಾಲಿನಲ್ಲಿ ಅಥವಾ ಬಹು ಸಾಲುಗಳಲ್ಲಿ ಸಂಗ್ರಹಿಸಬಹುದು. ಉತ್ತಮ ಓದುವಿಕೆಗಾಗಿ, ಅವುಗಳನ್ನು ಪ್ರತ್ಯೇಕ ಸಾಲುಗಳಲ್ಲಿ ಇರಿಸಿ.
ಮೇಲಿನ ಬ್ಲಾಕ್ನಲ್ಲಿ ಉಲ್ಲೇಖಿಸಲಾದ ಗುಣಲಕ್ಷಣಗಳ ಬಗ್ಗೆ ಚಿಂತಿಸಬೇಡಿ. ಈ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಮುಂದಿನ ಪಾಠಗಳಲ್ಲಿ ವಿವರಿಸಲಾಗುವುದು.
CSS ನಲ್ಲಿ ಆಯ್ಕೆದಾರರನ್ನು ಗುಂಪು ಮಾಡುವುದು
ನೀವು ಬಯಸಿದರೆ ನೀವು ಅನೇಕ ಆಯ್ಕೆಗಳನ್ನು ಶೈಲಿ ಮಾಡಬಹುದು. ಈ ಕೆಳಗಿನ ಉದಾಹರಣೆಯಲ್ಲಿ ತೋರಿಸಿರುವಂತೆ ಅಲ್ಪವಿರಾಮದಿಂದ ಆಯ್ಕೆದಾರರನ್ನು ಸರಳವಾಗಿ ಪ್ರತ್ಯೇಕಿಸಿ:
H1, h2, h3 (ಬಣ್ಣ: #00CED1; ಅಕ್ಷರದ ಅಂತರ: .2em; ಪಠ್ಯ-ರೂಪಾಂತರ: ಸಣ್ಣಕ್ಷರ; ಅಂಚು-ಕೆಳಗೆ: 2em; ಫಾಂಟ್-ತೂಕ: 700; )
ಈ ಶೈಲಿಯ ನಿಯಮವನ್ನು h1, h2 ಮತ್ತು h3 ಅಂಶಗಳಿಗೆ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ. ಆಯ್ಕೆಗಾರರನ್ನು ಗುಂಪು ಮಾಡುವಾಗ ಪಟ್ಟಿಯ ಕ್ರಮವು ಅಪ್ರಸ್ತುತವಾಗುತ್ತದೆ. ಸೆಲೆಕ್ಟರ್ನಲ್ಲಿರುವ ಎಲ್ಲಾ ಅಂಶಗಳು ಅವುಗಳಿಗೆ ಅನುಗುಣವಾದ ಘೋಷಣೆಗಳನ್ನು ಅನ್ವಯಿಸುತ್ತವೆ.
ಕೆಳಗಿನಂತೆ ನೀವು ವಿವಿಧ ಸೆಲೆಕ್ಟರ್ ಐಡಿಗಳನ್ನು ಒಟ್ಟಿಗೆ ಗುಂಪು ಮಾಡಬಹುದು:
#ಹೆಡರ್, #ವಿಷಯ, #ಅಡಿಟಿಪ್ಪಣಿ (ಸ್ಥಾನ: ಸಂಪೂರ್ಣ; ಅಗಲ: 300px; ಎಡ: 250px; )
". ಆದ್ದರಿಂದ, ಆಯ್ಕೆಯು ಒಂದು ಅಂಶವಾಗಿದ್ದು, ಶೈಲಿಯ ನಿಯಮದಲ್ಲಿ ಘೋಷಣೆಯನ್ನು ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ.
CSS ನಿಯಮಗಳನ್ನು ವಿವರಿಸಲು ಬಳಸುವ ನಿಯಮಗಳು.
ಚಿತ್ರ.1. ಸಾಮಾನ್ಯ CSS ನಿಯಮ.
ಚಿತ್ರ.2. ಉದಾಹರಣೆ CSS ನಿಯಮ.
- CSS ನಿಯಮಗಳನ್ನು ಬರೆಯಲು ಸಿಂಟ್ಯಾಕ್ಸ್ ಬಗ್ಗೆ ಸಂಕ್ಷಿಪ್ತವಾಗಿ:
- ಪರ್ವಿಲ್ನಲ್ಲಿನ ಶೈಲಿಯ ಘೋಷಣೆಯು ಸುರುಳಿಯಾಕಾರದ ಕಟ್ಟುಪಟ್ಟಿಗಳಲ್ಲಿ ಸುತ್ತುವರಿದಿದೆ - ()
- ಘೋಷಣೆಯಲ್ಲಿನ ಆಸ್ತಿ ಮತ್ತು ಮೌಲ್ಯವನ್ನು ಕೊಲೊನ್ ಮೂಲಕ ಪ್ರತ್ಯೇಕಿಸಲಾಗಿದೆ -: ಒಂದು ಘೋಷಣೆಯು (ಒಂದು ಜೋಡಿ ಸುರುಳಿಯಾಕಾರದ ಕಟ್ಟುಪಟ್ಟಿಗಳಲ್ಲಿ) ಯಾವುದೇ ಸಂಖ್ಯೆಯ ಜೋಡಿಗಳನ್ನು ಒಳಗೊಂಡಿರಬಹುದು
- ಆಸ್ತಿ: ಮೌಲ್ಯ ಒಂದು ಘೋಷಣೆಯು (ಒಂದು ಜೋಡಿ ಸುರುಳಿಯಾಕಾರದ ಕಟ್ಟುಪಟ್ಟಿಗಳಲ್ಲಿ) ಯಾವುದೇ ಸಂಖ್ಯೆಯ ಜೋಡಿಗಳನ್ನು ಒಳಗೊಂಡಿರಬಹುದುಪ್ರತಿ ಜೋಡಿಯ ಕೊನೆಯಲ್ಲಿ
- ಅರ್ಧವಿರಾಮ ಚಿಹ್ನೆಯನ್ನು ಹಾಕಿ - ; ಒಂದು ಘೋಷಣೆಯು (ಒಂದು ಜೋಡಿ ಸುರುಳಿಯಾಕಾರದ ಕಟ್ಟುಪಟ್ಟಿಗಳಲ್ಲಿ) ಯಾವುದೇ ಸಂಖ್ಯೆಯ ಜೋಡಿಗಳನ್ನು ಒಳಗೊಂಡಿರಬಹುದುಕೊನೆಯ ದಂಪತಿಗಳ ನಂತರ
- ಅರ್ಧವಿರಾಮ ಚಿಹ್ನೆಯ ಅಗತ್ಯವಿಲ್ಲ.
- CSS ಸಿಂಟ್ಯಾಕ್ಸ್ ವೈಟ್ಸ್ಪೇಸ್ ಅಕ್ಷರಗಳಿಗೆ (ಸ್ಪೇಸ್ಗಳು, ಟ್ಯಾಬ್ಗಳು, ಹೈಫನ್ಗಳು) ಸೂಕ್ಷ್ಮವಾಗಿರುವುದಿಲ್ಲ.
CSS ಸಿಂಟ್ಯಾಕ್ಸ್ ಕೇಸ್ ಸೆನ್ಸಿಟಿವ್ ಅಲ್ಲ.
ಯಾವುದೇ HTML ಟ್ಯಾಗ್ ಸೆಲೆಕ್ಟರ್ಗಳಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ; ಎಲ್ಲವನ್ನೂ ಕ್ರಮವಾಗಿ ನೋಡೋಣ.
ಟ್ಯಾಗ್ ಆಯ್ಕೆದಾರರು
ಹಿಂದೆ ಬರೆದಂತೆ, CSS ನಿಯಮದಲ್ಲಿ ಯಾವುದೇ ಟ್ಯಾಗ್ ಸೆಲೆಕ್ಟರ್ ಆಗಿರಬಹುದು. ಒಂದು ಉದಾಹರಣೆಯನ್ನು ನೋಡೋಣ. ಸಿಎಸ್ಎಸ್ ಸಿಂಟ್ಯಾಕ್ಸ್
ನಮಸ್ಕಾರ!
ಶಿರೋನಾಮೆ h2!
,
ಮೂಲಕ, ನೀವು ಆಯ್ಕೆಗಾರರ ಗುಂಪಿಗೆ ಒಂದು ಘೋಷಣೆಯನ್ನು ನಿಯೋಜಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ನಾವು ಶೀರ್ಷಿಕೆ ಟ್ಯಾಗ್ಗಳನ್ನು ಬಯಸುತ್ತೇವೆ
ಮತ್ತು
ನೀಲಿ ಬಣ್ಣದಲ್ಲಿದ್ದವು ಮತ್ತು ಬ್ಲಾಕ್ನ ಮಧ್ಯಭಾಗಕ್ಕೆ ಜೋಡಿಸಲಾಗಿದೆ. ಇದನ್ನು ಮಾಡಲು, ನೀವು ಈ ಟ್ಯಾಗ್ಗಳನ್ನು ಸೆಲೆಕ್ಟರ್ನಲ್ಲಿ ಪಟ್ಟಿ ಮಾಡಬಹುದು, ಅವುಗಳನ್ನು ಅಲ್ಪವಿರಾಮದಿಂದ ಬೇರ್ಪಡಿಸಬಹುದು. ಕೋಡ್ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ: CSS ನಲ್ಲಿ ಗುಂಪು ಮಾಡುವುದು
ನಮಸ್ಕಾರ!
ಹಲೋ h1!
ಈ ಶೈಲಿಯ ನಮೂದು ಕೆಳಗಿನ ನಿಯಮಗಳ ಗುಂಪಿಗೆ ಸಮನಾಗಿರುತ್ತದೆ:
ಅಂಶವು ಇನ್ನೊಂದರಲ್ಲಿ ನೆಲೆಗೊಂಡಿದೆಯೇ ಎಂಬುದನ್ನು ಅವಲಂಬಿಸಿ ನೀವು ಅಂಶಗಳಿಗೆ ಶೈಲಿಯ ನಿಯಮಗಳನ್ನು ನಿಯೋಜಿಸಬಹುದು. ಒಂದು ಟ್ಯಾಗ್ ಇನ್ನೊಂದರೊಳಗೆ ಗೂಡುಕಟ್ಟಿದ್ದರೆ, ನೆಸ್ಟೆಡ್ ಟ್ಯಾಗ್ ಅನ್ನು ಅದರ ಮಗು ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ ಮತ್ತು ಮಗುವನ್ನು ಗೂಡುಕಟ್ಟಿರುವ ಟ್ಯಾಗ್ ಅನ್ನು ಅದರ ಪೂರ್ವಜ ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ನೀವು ಪ್ಯಾರಾಗಳನ್ನು ಹೊಂದಿಸಬೇಕಾಗಿದೆ
ಮೇಜಿನ ಒಳಗೆ
ಕೆಂಪು ಪಠ್ಯ ಬಣ್ಣ. ಈ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸಲು, ಸೆಲೆಕ್ಟರ್ನಲ್ಲಿನ ಅಂಶಗಳನ್ನು ಗೂಡುಕಟ್ಟುವ ಕ್ರಮದಲ್ಲಿ ಜೋಡಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಸ್ಥಳಗಳಿಂದ ಬೇರ್ಪಡಿಸಲಾಗುತ್ತದೆ. ಅಂದರೆ, ನಮ್ಮ ಸಮಸ್ಯೆಯನ್ನು ಈ ರೀತಿ ಪರಿಹರಿಸಲಾಗಿದೆ:
CSS ನಲ್ಲಿ ವಂಶಸ್ಥರ ಆಯ್ಕೆಗಾರರು ಸಿಎಸ್ಎಸ್ ಸಿಂಟ್ಯಾಕ್ಸ್
ಕೋಷ್ಟಕದಲ್ಲಿ ಪ್ಯಾರಾಗ್ರಾಫ್ ಪಠ್ಯ.
ಟೇಬಲ್ ಹೊರಗೆ ಪ್ಯಾರಾಗ್ರಾಫ್ ಪಠ್ಯ.
ಎಲ್ಲಾ ಟ್ಯಾಗ್ಗಳು
ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿನ ಎಲ್ಲಾ ಕೋಷ್ಟಕಗಳು ಬಣ್ಣವನ್ನು ಕೆಂಪು ಬಣ್ಣದಲ್ಲಿ ಪ್ರದರ್ಶಿಸುತ್ತವೆ. ಟ್ಯಾಗ್ ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನಿಸಿ
ಟ್ಯಾಗ್ ಒಳಗೆ ಇದೆ
ಪಠ್ಯವನ್ನು ಸಹ ಕೆಂಪು ಬಣ್ಣದಲ್ಲಿ ಪ್ರದರ್ಶಿಸುತ್ತದೆ.ವಾಸ್ತವವಾಗಿ, ಬದಲಿಗೆ
ಟ್ಯಾಗ್ ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ಸಾಧ್ಯವಾಯಿತು
, ಟ್ಯಾಗ್ ರಿಂದ ಯಾವಾಗಲೂ ಟ್ಯಾಗ್ ಅನ್ನು ಹೊಂದಿರಬೇಕು
. CSS ಸೆಲೆಕ್ಟರ್ಗಳನ್ನು ಮತ್ತಷ್ಟು ಅನ್ವೇಷಿಸಲು, ಡಾಕ್ಯುಮೆಂಟ್ ರಚನೆಗೆ ಸಂಬಂಧಿಸಿದ ಕೆಲವು ಸರಳ ಪದಗಳನ್ನು ನೀವು ಕರಗತ ಮಾಡಿಕೊಳ್ಳಬೇಕು.
ಡಾಕ್ಯುಮೆಂಟ್ ಟ್ರೀ ಎನ್ನುವುದು HTML ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ನಿರ್ಮಿಸುವ ರೇಖಾಚಿತ್ರವಾಗಿದೆ, ಟ್ಯಾಗ್ಗಳ ಕ್ರಮವನ್ನು ಮತ್ತು ಅವುಗಳ ಗೂಡುಕಟ್ಟುವಿಕೆಯನ್ನು ಪರಸ್ಪರ ತೋರಿಸುತ್ತದೆ. ಅಂತಹ ಯೋಜನೆಯ ಉದಾಹರಣೆಯನ್ನು ನೀಡೋಣ:
ಡಾಕ್ಯುಮೆಂಟ್ ಟ್ರೀ HTML ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿನ ಸಂಪರ್ಕಗಳು, ಟ್ಯಾಗ್ಗಳ ಕ್ರಮ ಮತ್ತು ಅವುಗಳ ಗೂಡುಕಟ್ಟುವಿಕೆಯನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ತೋರಿಸುತ್ತದೆ. ಡೆವಲಪರ್ಗಳು ಇದನ್ನು CSS ಶೈಲಿಗಳು ಮತ್ತು JavaScript ಸ್ಕ್ರಿಪ್ಟ್ಗಳನ್ನು ಬರೆಯಲು ಬಳಸುತ್ತಾರೆ.
ಚಿತ್ರ 1 ರಿಂದ ಎಲಿಮೆಂಟ್ ಟ್ರೀ ರೇಖಾಚಿತ್ರಕ್ಕೆ ಅನುಗುಣವಾದ ಕೋಡ್ನ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ.
ದಾಖಲೆ ಮರ. ಸಿಎಸ್ಎಸ್ ಸಿಂಟ್ಯಾಕ್ಸ್
ಪಠ್ಯ ಪ್ಯಾರಾಗ್ರಾಫ್ಮತ್ತು ಕೊಬ್ಬಿನ.
-
- ಷರತ್ತು 1.1
- ಷರತ್ತು 1.2
- ಷರತ್ತು 1.3
-
- ಷರತ್ತು 2.1
- ಷರತ್ತು 2.2
- ಷರತ್ತು 2.3
ಆದ್ದರಿಂದ, HTML ಡಾಕ್ಯುಮೆಂಟ್ನ ಟ್ಯಾಗ್ಗಳ ನಡುವೆ ಸಂಬಂಧಗಳಿವೆ. ಟ್ಯಾಗ್ಗಳ ಗೂಡುಕಟ್ಟುವಿಕೆ ಅಥವಾ ಒಂದು ಟ್ಯಾಗ್ ಇನ್ನೊಂದನ್ನು ಅನುಸರಿಸುವ ಕ್ರಮದಲ್ಲಿ ಅವುಗಳನ್ನು ವ್ಯಕ್ತಪಡಿಸಲಾಗುತ್ತದೆ. ಈ ಸಂಪರ್ಕಗಳನ್ನು ರಕ್ತಸಂಬಂಧ ಸಂಬಂಧಗಳು ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ, ಮತ್ತು ಪೂರ್ವಜ ಮತ್ತು ವಂಶಸ್ಥರು, ಪೋಷಕರು ಮತ್ತು ಮಗು, ಮತ್ತು ಇತರ "ಕುಟುಂಬ" ಪದಗಳಂತಹ ಪದಗಳನ್ನು ವಿವಿಧ ರೀತಿಯ ರಕ್ತಸಂಬಂಧ ಸಂಬಂಧಗಳನ್ನು ಉಲ್ಲೇಖಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ.
ಈಗ ಎಲ್ಲಾ ರೀತಿಯ ಸಂಪರ್ಕಗಳನ್ನು ನೋಡೋಣ.
ಪೂರ್ವಜರು ಮತ್ತು ವಂಶಸ್ಥರು
ಪೂರ್ವಜರು ಇತರ ಅಂಶಗಳನ್ನು ಒಳಗೊಂಡಿರುವ ಅಂಶಗಳಾಗಿವೆ, ಅಂದರೆ, ಅಂಶವು ಪೂರ್ವಜವಾಗಿದೆ ಎಲ್ಲರೂಅದರಲ್ಲಿ ಗೂಡುಕಟ್ಟಲಾದ ಅಂಶಗಳು.
ವಂಶಸ್ಥರು ಮತ್ತೊಂದು ಅಂಶದೊಳಗೆ ಗೂಡುಕಟ್ಟಲಾದ ಅಂಶಗಳಾಗಿವೆ.
ವಂಶಸ್ಥರ ಆಯ್ಕೆದಾರರನ್ನು ಈಗಾಗಲೇ ಮೇಲೆ ಚರ್ಚಿಸಲಾಗಿದೆ.
ಪೋಷಕರು ಮತ್ತು ಮಕ್ಕಳು
ಮೂಲವು ಒಂದು ಅಂಶದ ಮೊದಲ ಹಂತದ ಪೂರ್ವಜ (ತಕ್ಷಣದ ಪೂರ್ವಜ) ಆಗಿದೆ. ಮಗುವಿನ ಅಂಶವು ಮೊದಲ ಹಂತದ ಮಗು. ಪೋಷಕ ಅಂಶವು ಅನಿಯಮಿತ ಸಂಖ್ಯೆಯ ಮಕ್ಕಳನ್ನು ಹೊಂದಬಹುದು.
ಟ್ಯಾಗ್ನಲ್ಲಿರುವ ಅಂಶಗಳ ನಮ್ಮ ಮರದಲ್ಲಿ
ಕೆಳಗಿನ ಮಕ್ಕಳ ಅಂಶಗಳು:,
,
- ಮತ್ತು ಇನ್ನೊಂದು
- ಟ್ಯಾಗ್ ಸೆಲೆಕ್ಟರ್
- ವರ್ಗ ಆಯ್ಕೆಗಾರ
- ಐಡಿ ಸೆಲೆಕ್ಟರ್
- ಯುನಿವರ್ಸಲ್ ಸೆಲೆಕ್ಟರ್
- ಗುಣಲಕ್ಷಣ ಸೆಲೆಕ್ಟರ್
- ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್ ಸೆಲೆಕ್ಟರ್
- ಹುಸಿ ಅಂಶ ಸೆಲೆಕ್ಟರ್
- ಅಂಶದ ಮೂಲಕ ಸೆಲೆಕ್ಟರ್;
- ವರ್ಗದ ಮೂಲಕ ಸೆಲೆಕ್ಟರ್;
- ಐಡಿ ಮೂಲಕ ಸೆಲೆಕ್ಟರ್;
- ಸಂದರ್ಭ ಆಯ್ಕೆ;
ಒಡಹುಟ್ಟಿದ ಅಂಶಗಳು
ಸಹೋದರ ಅಥವಾ ಸಹೋದರಿ ಅಂಶಗಳು, (ಇಂಗ್ಲಿಷ್ ಒಡಹುಟ್ಟಿದವರು - ಸಹೋದರರು ಮತ್ತು ಸಹೋದರಿಯರು), ಸಾಮಾನ್ಯ ಪೋಷಕರನ್ನು ಹೊಂದಿರುವ ಅಂಶಗಳ ಗುಂಪು. ಉದಾಹರಣೆಗೆ, ಟ್ಯಾಗ್ಗಳು
,
,
- ಮತ್ತು ಎರಡನೆಯದು
ಸಹೋದರಿ, ಅವರು ಸಾಮಾನ್ಯ ಪೋಷಕರನ್ನು ಹೊಂದಿರುವುದರಿಂದ
.ಪಕ್ಕದ ಅಂಶಗಳು
ಪಕ್ಕದ ಅಂಶಗಳು ಪಕ್ಕದ ಒಡಹುಟ್ಟಿದ ಅಂಶಗಳಾಗಿವೆ, ಅಂದರೆ, ಸಾಮಾನ್ಯ ಪೋಷಕರನ್ನು ಹೊಂದಿರುವ ಅಂಶಗಳು ಮತ್ತು ಅಂಶಗಳ ಮರದಲ್ಲಿ ಪಕ್ಕದಲ್ಲಿ ನೆಲೆಗೊಂಡಿವೆ. ನಮ್ಮ ಉದಾಹರಣೆಯಲ್ಲಿ, ಪಕ್ಕದ ಅಂಶಗಳು ಜೋಡಿಯಾಗಿರುತ್ತವೆ:
ಮೂಲಕ, ನೀವು ಆಯ್ಕೆಗಾರರ ಗುಂಪಿಗೆ ಒಂದು ಘೋಷಣೆಯನ್ನು ನಿಯೋಜಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ನಾವು ಶೀರ್ಷಿಕೆ ಟ್ಯಾಗ್ಗಳನ್ನು ಬಯಸುತ್ತೇವೆ
,
ಮತ್ತು
-
,
- ಮೂಲಕ, ನೀವು ಆಯ್ಕೆಗಾರರ ಗುಂಪಿಗೆ ಒಂದು ಘೋಷಣೆಯನ್ನು ನಿಯೋಜಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ನಾವು ಶೀರ್ಷಿಕೆ ಟ್ಯಾಗ್ಗಳನ್ನು ಬಯಸುತ್ತೇವೆ
ಈಗ ನಾವು ಆಯ್ಕೆದಾರರಿಗೆ ಹಿಂತಿರುಗೋಣ.
ಮಕ್ಕಳ ಆಯ್ಕೆಗಾರರು
ನಾವು ಎಲ್ಲಾ ವಂಶಸ್ಥರಲ್ಲಿ ಆಸಕ್ತಿ ಹೊಂದಿಲ್ಲದಿರುವಾಗ, ಆದರೆ ಮೊದಲ ಹಂತದ ವಂಶಸ್ಥರಲ್ಲಿ ಮಾತ್ರ, ಅಂದರೆ, ಮಕ್ಕಳ ಅಂಶಗಳು, ಮಕ್ಕಳ ಆಯ್ಕೆಗಳನ್ನು CSS ನಲ್ಲಿ ಬಳಸಲಾಗುತ್ತದೆ. ಶೈಲಿಯ ನಿಯಮವು ಮಗುವಿನ ಅಂಶಕ್ಕೆ ಮಾತ್ರ ಅನ್ವಯಿಸುತ್ತದೆ ಎಂದು ಸೂಚಿಸಲು, ಆಯ್ಕೆಗಾರ ">" ಅಕ್ಷರವನ್ನು ಬಳಸುತ್ತದೆ.
CSS ನಲ್ಲಿ ಮಕ್ಕಳ ಆಯ್ಕೆಗಾರರು ಸಿಎಸ್ಎಸ್ ಸಿಂಟ್ಯಾಕ್ಸ್
ಕೋಷ್ಟಕದಲ್ಲಿ ಪ್ಯಾರಾಗ್ರಾಫ್ ಪಠ್ಯ.
ಕೋಷ್ಟಕದಲ್ಲಿ ಪ್ಯಾರಾಗ್ರಾಫ್ ಪಠ್ಯ (ಡಿವಿ ಕಂಟೇನರ್ನಲ್ಲಿ).
ಟೇಬಲ್ ಹೊರಗೆ ಪ್ಯಾರಾಗ್ರಾಫ್ ಪಠ್ಯ.
ಈ ಉದಾಹರಣೆಗಾಗಿ HTML ಕೋಡ್ ವಂಶಸ್ಥರ ಆಯ್ಕೆಯ ಉದಾಹರಣೆ ಕೋಡ್ನಂತೆಯೇ ಇರುತ್ತದೆ, ಕೇವಲ ಶೈಲಿಯ ನಿಯಮವು ವಿಭಿನ್ನವಾಗಿರುತ್ತದೆ. ಮಗುವಿನ ಆಯ್ಕೆಯನ್ನು ಅನ್ವಯಿಸುವ ಪರಿಣಾಮವಾಗಿ, ಕಂಟೇನರ್ನಲ್ಲಿನ ಕೋಷ್ಟಕದಲ್ಲಿನ ಪ್ಯಾರಾಗ್ರಾಫ್ನ ಪಠ್ಯ
ಇನ್ನು ಮುಂದೆ ಕೆಂಪು, ಏಕೆಂದರೆ ಈ ಪ್ಯಾರಾಗ್ರಾಫ್ ಟ್ಯಾಗ್ಪೋಷಕ ಮತ್ತು ಟ್ಯಾಗ್ಪೂರ್ವಜ. ಪಕ್ಕದ ಸೆಲೆಕ್ಟರ್
ಪಕ್ಕದ ಅಂಶ ಸೆಲೆಕ್ಟರ್ ಮತ್ತೊಂದು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಅಂಶಕ್ಕೆ ತಕ್ಷಣವೇ ಪಕ್ಕದಲ್ಲಿರುವ ಅಂಶವನ್ನು ಆಯ್ಕೆ ಮಾಡುತ್ತದೆ. ಈ ಸೆಲೆಕ್ಟರ್ನ ಸಿಂಟ್ಯಾಕ್ಸ್: ಹಿಂದಿನ ಅಂಶದ ಸೆಲೆಕ್ಟರ್, ನಂತರ "+" ಚಿಹ್ನೆ, ನಂತರ ಆಯ್ಕೆ ಮಾಡಬೇಕಾದ ಅಂಶದ ಆಯ್ಕೆ.
ನಿಜವಾದ ಉದಾಹರಣೆಯನ್ನು ನೋಡೋಣ. ಟ್ಯಾಗ್ಗಳೊಂದಿಗೆ ಶೀರ್ಷಿಕೆಯ ಹಲವಾರು ವಿಭಾಗಗಳನ್ನು ಹೊಂದಿರುವ ದೊಡ್ಡ ಲೇಖನಗಳಲ್ಲಿ
, ಟಾಪ್ ಮಾರ್ಜಿನ್ (ಮಾರ್ಜಿನ್-ಟಾಪ್ ಪ್ರಾಪರ್ಟಿ) ಹೆಚ್ಚಿಸುವುದು ಸೂಕ್ತ. 20px ನ ಇಂಡೆಂಟೇಶನ್ ಪಠ್ಯವನ್ನು ಓದುವಂತೆ ಮಾಡುತ್ತದೆ. ಆದರೆ ಟ್ಯಾಗ್ ವೇಳೆ
ತಕ್ಷಣವೇ ಬರುತ್ತದೆ
, ಮತ್ತು ಇದು ಲೇಖನದ ಪ್ರಾರಂಭದಲ್ಲಿರಬಹುದು, ಟ್ಯಾಗ್ನ ಮೇಲಿನ ಮೇಲಿನ ಇಂಡೆಂಟ್
ಅನಗತ್ಯವಾಗಿರುತ್ತದೆ. ಪಕ್ಕದ ಎಲಿಮೆಂಟ್ ಸೆಲೆಕ್ಟರ್ ಬಳಸಿ ಈ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸಬಹುದು.
ಪಕ್ಕದ ಎಲಿಮೆಂಟ್ ಸೆಲೆಕ್ಟರ್ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದರ ಉದಾಹರಣೆಯೊಂದಿಗೆ html ಕೋಡ್ ಇಲ್ಲಿದೆ.
CSS ನಲ್ಲಿ ಪಕ್ಕದ ಆಯ್ಕೆ ಸಿಎಸ್ಎಸ್ ಸಿಂಟ್ಯಾಕ್ಸ್
ಶಿರೋನಾಮೆ h2
ಶಿರೋನಾಮೆ h2
ಪ್ಯಾರಾಗ್ರಾಫ್ನ ಪಠ್ಯವು ನಂಬಲಾಗದ ಸಾಹಸಗಳ ಬಗ್ಗೆ.
ಪಕ್ಕದ ಸೆಲೆಕ್ಟರ್ಗಳಿಗೆ ಮತ್ತೊಂದು ಹೆಸರು: ಪಕ್ಕದ ಸೆಲೆಕ್ಟರ್ಗಳು, ಇಲ್ಲಿ ನೀವು ಈ ರೀತಿಯ ಸೆಲೆಕ್ಟರ್ಗಳ ಬಗ್ಗೆ ಇನ್ನಷ್ಟು ಓದಬಹುದು.
ಸಂಬಂಧಿತ ಆಯ್ಕೆಗಾರರು
ಒಡಹುಟ್ಟಿದವರ ಆಯ್ಕೆಯು ನೆರೆಯ ಸೆಲೆಕ್ಟರ್ನಂತೆಯೇ ಇರುತ್ತದೆ, ಆಯ್ಕೆಮಾಡಿದ ಒಂದನ್ನು ಅನುಸರಿಸುವ ಎಲ್ಲಾ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಅಂಶಗಳಿಗೆ ಮಾತ್ರ ಇದು ಅನ್ವಯಿಸುತ್ತದೆ. ಸಿಬ್ಲಿಂಗ್ ಸೆಲೆಕ್ಟರ್ನ ಸಿಂಟ್ಯಾಕ್ಸ್ ಹಿಂದಿನ ಎಲಿಮೆಂಟ್ ಸೆಲೆಕ್ಟರ್ ಆಗಿದ್ದು, ಅದರ ನಂತರ "~" (ಟಿಲ್ಡ್) ಚಿಹ್ನೆ, ನಂತರ ಆಯ್ಕೆ ಮಾಡಲು ಎಲಿಮೆಂಟ್ ಸೆಲೆಕ್ಟರ್.
ಸಹೋದರಿ ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಬಳಸುವ ಉದಾಹರಣೆ.
CSS ನಲ್ಲಿ ಸಿಬ್ಲಿಂಗ್ ಎಲಿಮೆಂಟ್ ಸೆಲೆಕ್ಟರ್ ಸಿಎಸ್ಎಸ್ ಸಿಂಟ್ಯಾಕ್ಸ್
ಪ್ಯಾರಾಗ್ರಾಫ್ ಸಂಖ್ಯೆ 1 ರ ಪಠ್ಯವು ನಂಬಲಾಗದ ಸಾಹಸಗಳ ಬಗ್ಗೆ.
ಪ್ಯಾರಾಗ್ರಾಫ್ ಸಂಖ್ಯೆ 2 ರ ಪಠ್ಯವು ನಂಬಲಾಗದ ಸಾಹಸಗಳ ಬಗ್ಗೆ.
ನಂಬಲಾಗದ ಸಾಹಸಗಳ ಕುರಿತು ಡಿವ್ ಸಂಖ್ಯೆ 1 ಗೆ ಪಠ್ಯ ಸಂದೇಶ ಕಳುಹಿಸಿ.ಪ್ಯಾರಾಗ್ರಾಫ್ ಸಂಖ್ಯೆ 3 ರ ಪಠ್ಯವು ನಂಬಲಾಗದ ಸಾಹಸಗಳ ಬಗ್ಗೆ.
ಉದಾಹರಣೆಯಿಂದ ಅದು ನಂತರ ಸ್ಪಷ್ಟವಾಗುತ್ತದೆ
ಪ್ಯಾರಾಗ್ರಾಫ್ ಸಂಖ್ಯೆ 3 ರ ಟ್ಯಾಗ್ ಪಠ್ಯ ಕೂಡ ಕೆಂಪು ಬಣ್ಣದ್ದಾಗಿತ್ತು. ಅಂದರೆ, ಒಂದು ಶೈಲಿಯನ್ನು ನಿಯೋಜಿಸಲು, ಸಹೋದರಿ ಅಂಶಗಳು ಪರಸ್ಪರ ನಂತರ ಬರಬೇಕಾಗಿಲ್ಲ.ಯುನಿವರ್ಸಲ್ ಸೆಲೆಕ್ಟರ್
CSS ನಿಯಮದ ಆಯ್ಕೆಯು "*" ಅಕ್ಷರವನ್ನು ಹೊಂದಿದ್ದರೆ, ಈ ನಿಯಮವು ವಿನಾಯಿತಿ ಇಲ್ಲದೆ ಪುಟದ ಎಲ್ಲಾ ಅಂಶಗಳಿಗೆ ಅನ್ವಯಿಸುತ್ತದೆ. ಅಂತಹ ನಿಯಮವು ಅರ್ಥಪೂರ್ಣವಾದ ಪ್ರಕರಣವನ್ನು ಕಲ್ಪಿಸುವುದು ಕಷ್ಟ. ಆದರೆ ಡೆವಲಪರ್ ಎಲ್ಲಾ ಬಾಹ್ಯ ಮತ್ತು ಆಂತರಿಕ ಇಂಡೆಂಟ್ಗಳನ್ನು "ಶೂನ್ಯ" ಮಾಡಲು ಬಯಸಿದಾಗ ಒಂದು ಪ್ರಕರಣವಿದೆ. ನಂತರ ನೀವು ಈ ಶೈಲಿಯನ್ನು ಬಳಸಬೇಕಾಗುತ್ತದೆ:
* (ಅಂಚು: 0; ಪ್ಯಾಡಿಂಗ್: 0;)
ಆದರೆ ಸಂಯುಕ್ತ ಆಯ್ಕೆಗಳಲ್ಲಿ "*" ಅಕ್ಷರವನ್ನು ಬಳಸಬಹುದು.
ಉಲ್ * (ಬಣ್ಣ: ಕೆಂಪು)
ಈ ಕೋಡ್ ಕೆಂಪು ಅಂಶದ ಎಲ್ಲಾ ವಂಶಸ್ಥರ ಪಠ್ಯ ಬಣ್ಣವನ್ನು ನಿಯೋಜಿಸುತ್ತದೆ
-
.
ತರಗತಿಗಳು
CSS ನಲ್ಲಿನ ತರಗತಿಗಳು ಅಂಶಗಳ ಗುಂಪಿಗೆ ಶೈಲಿಯನ್ನು ನಿಯೋಜಿಸಲು ಸಾಮಾನ್ಯ ಮಾರ್ಗವಾಗಿದೆ. ಒಂದು ಟ್ಯಾಗ್ನಿಂದ ರಚಿಸಲಾದ HTML ಡಾಕ್ಯುಮೆಂಟ್ನ ಅಂಶಗಳಿಗಾಗಿ ನೀವು ವಿಭಿನ್ನ ಶೈಲಿಗಳನ್ನು ಹೊಂದಿಸಬೇಕಾದಾಗ ವರ್ಗವನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ವರ್ಗ ಸಿಂಟ್ಯಾಕ್ಸ್:
Tag.ClassName
ಸ್ಟೈಲ್ ಸೆಲೆಕ್ಟರ್ನಲ್ಲಿ, ಬಯಸಿದ ಟ್ಯಾಗ್ ಅನ್ನು ಮೊದಲು ಬರೆಯಲಾಗುತ್ತದೆ, ನಂತರ ವರ್ಗದ ಹೆಸರನ್ನು ಡಾಟ್ ಮೂಲಕ ಸೂಚಿಸಲಾಗುತ್ತದೆ. ವರ್ಗದ ಹೆಸರು ಲ್ಯಾಟಿನ್ ಅಕ್ಷರದಿಂದ ಪ್ರಾರಂಭವಾಗಬೇಕು ಮತ್ತು ಹೈಫನ್ (-) ಮತ್ತು ಅಂಡರ್ಸ್ಕೋರ್ (_) ಅಕ್ಷರಗಳನ್ನು ಹೊಂದಿರಬಹುದು.
ತರಗತಿಗಳನ್ನು ಬಳಸಿದಾಗ ಒಂದು ಉದಾಹರಣೆ: ವೆಬ್ಸೈಟ್ನಲ್ಲಿ, ಮೇಲಿನ, ಅಡ್ಡ ಮತ್ತು ಕೆಳಗಿನ ಮೆನುಗಳನ್ನು ಟ್ಯಾಗ್ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ರಚಿಸಲಾಗಿದೆ
- , ಈ ಮೂರು ಮೆನುಗಳು ಮೂರು ವಿಭಿನ್ನ ಶೈಲಿಗಳನ್ನು ರಚಿಸಬೇಕಾಗಿದೆ. CSS ನಲ್ಲಿ, ಮೂರು ವರ್ಗಗಳನ್ನು ರಚಿಸಲಾಗಿದೆ: ul.menu-top, ul.menu ಮತ್ತು ul.menu-bottom.
HTML ಡಾಕ್ಯುಮೆಂಟ್ನ ದೇಹದಲ್ಲಿ, ವರ್ಗ ಗುಣಲಕ್ಷಣದಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ವರ್ಗದೊಂದಿಗೆ ವಿವಿಧ ಮೆನುಗಳನ್ನು ರಚಿಸಲಾಗಿದೆ:
- class="menu-top">...
- class="menu">...
- class="menu-bottom">...
ತರಗತಿಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸುವ CSS ಸಾಧನವಾಗಿದೆ. ಇದು ಅನುಕೂಲಕರವಾಗಿದೆ ಮತ್ತು ಸ್ಟೈಲ್ ಕೋಡ್ ಅನ್ನು ಹೆಚ್ಚು ಓದುವಂತೆ ಮಾಡುತ್ತದೆ.
ಯಾವುದೇ ಟ್ಯಾಗ್ಗೆ ಅನ್ವಯಿಸುವ ವರ್ಗವನ್ನು ನೀವು ರಚಿಸಬಹುದು. ಇದಕ್ಕಾಗಿ ಸಾರ್ವತ್ರಿಕ ಆಯ್ಕೆಯನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.
*.ವರ್ಗದ ಹೆಸರು (ಆಸ್ತಿ1: ಮೌಲ್ಯ; ಆಸ್ತಿ2: ಮೌಲ್ಯ; ...)
"*" ಚಿಹ್ನೆಯನ್ನು ತೆಗೆದುಹಾಕುವ ಮೂಲಕ ಈ ನಮೂದನ್ನು ಕಡಿಮೆ ಮಾಡಬಹುದು.
ವರ್ಗದ ಹೆಸರು (ಆಸ್ತಿ1: ಮೌಲ್ಯ; ಆಸ್ತಿ2: ಮೌಲ್ಯ; ...)
ಐಡಿ ಸೆಲೆಕ್ಟರ್ಗಳು (ಐಡೆಂಟಿಫೈಯರ್ಗಳು)
ಐಡೆಂಟಿಫೈಯರ್ಗಳು ಒಂದು ಅಂಶಕ್ಕೆ ಅನನ್ಯ ಹೆಸರನ್ನು ಸೂಚಿಸುವ ಆಯ್ಕೆಗಳ ವಿಧಗಳಾಗಿವೆ. ವಿಶಿಷ್ಟ ಎಂದರೆ ಡಾಕ್ಯುಮೆಂಟ್ ಕೋಡ್ನಲ್ಲಿ ಒಮ್ಮೆ ಸಂಭವಿಸುವುದು. ಗುರುತಿಸುವಿಕೆಗಳನ್ನು ಬಳಸಿಕೊಂಡು ನೀವು ಶೈಲಿಯನ್ನು ರಚಿಸಬಹುದು, ಆದರೆ ಸ್ಕ್ರಿಪ್ಟ್ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಅವುಗಳನ್ನು ಪ್ರವೇಶಿಸುವುದು ಅವರ ಮುಖ್ಯ ಉದ್ದೇಶವಾಗಿದೆ.
ಗುರುತಿಸುವಿಕೆಯನ್ನು ವಿವರಿಸುವಾಗ, ಹ್ಯಾಶ್ ಚಿಹ್ನೆ (#) ಅನ್ನು ಮೊದಲು ಸೂಚಿಸಲಾಗುತ್ತದೆ, ನಂತರ ಗುರುತಿಸುವಿಕೆಯ ಹೆಸರನ್ನು ಸೂಚಿಸಲಾಗುತ್ತದೆ.
#ಐಡೆಂಟಿಫೈಯರ್ ಹೆಸರು(ಆಸ್ತಿ 1: ಮೌಲ್ಯ; ಆಸ್ತಿ2: ಮೌಲ್ಯ; ...)
ವರ್ಗದ ಹೆಸರಿನಂತೆಯೇ, ಗುರುತಿಸುವಿಕೆಯ ಹೆಸರು ಲ್ಯಾಟಿನ್ ಅಕ್ಷರದಿಂದ ಪ್ರಾರಂಭವಾಗಬೇಕು ಮತ್ತು ಹೈಫನ್ (-) ಮತ್ತು ಅಂಡರ್ಸ್ಕೋರ್ (_) ಅಕ್ಷರಗಳನ್ನು ಒಳಗೊಂಡಿರಬಹುದು.
ಗುಣಲಕ್ಷಣ ಆಯ್ಕೆದಾರರು
HTML ನಲ್ಲಿ ಹಲವಾರು ಟ್ಯಾಗ್ಗಳಿವೆ, ಅದು ಗುಣಲಕ್ಷಣಗಳನ್ನು ಅವಲಂಬಿಸಿ ಅವುಗಳ ಪರಿಣಾಮವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಟ್ಯಾಗ್ ಪ್ರಕಾರದ ಗುಣಲಕ್ಷಣದ ಮೌಲ್ಯವನ್ನು ಅವಲಂಬಿಸಿ, ಇದು ಫಾರ್ಮ್ ಕ್ಷೇತ್ರ, ಬಟನ್ ಮತ್ತು ಇತರ ಫಾರ್ಮ್ ಅಂಶಗಳನ್ನು ರಚಿಸಬಹುದು. ಆದ್ದರಿಂದ ನೀವು ಇನ್ಪುಟ್ ಸೆಲೆಕ್ಟರ್ಗೆ ಶೈಲಿಯನ್ನು ಅನ್ವಯಿಸಿದರೆ, ಅದು ಆ ಟ್ಯಾಗ್ನಿಂದ ರಚಿಸಲಾದ ಎಲ್ಲಾ ಫಾರ್ಮ್ ಅಂಶಗಳನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ. ಅಂತಹ ಅಂಶಗಳನ್ನು ನಿಖರವಾಗಿ ನಿಯಂತ್ರಿಸಲು, CSS ಗುಣಲಕ್ಷಣ ಆಯ್ಕೆಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.
ವಿವಿಧ ರೀತಿಯ ಗುಣಲಕ್ಷಣ ಆಯ್ಕೆಗಳಿವೆ. ಆಟ್ರಿಬ್ಯೂಟ್ ಸೆಲೆಕ್ಟರ್ಗಳನ್ನು ಬಳಸಿಕೊಂಡು, ಟ್ಯಾಗ್ ನಿರ್ದಿಷ್ಟ ಗುಣಲಕ್ಷಣವನ್ನು ಹೊಂದಿದ್ದರೆ ಅಥವಾ ನಿರ್ದಿಷ್ಟ ಟ್ಯಾಗ್ ಗುಣಲಕ್ಷಣವು ನಿರ್ದಿಷ್ಟ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿದ್ದರೆ ನೀವು ಅದನ್ನು ಶೈಲಿ ಮಾಡಬಹುದು.
ಅಟ್ರಿಬ್ಯೂಟ್ ಸೆಲೆಕ್ಟರ್ಗಳು ಪ್ರತ್ಯೇಕ ದೊಡ್ಡ ಲೇಖನದ ವಿಷಯವಾಗಿದೆ. ಈ ಲೇಖನದ ಉದ್ದೇಶಗಳಿಗಾಗಿ, ಅವು ಅಸ್ತಿತ್ವದಲ್ಲಿವೆ ಎಂಬುದನ್ನು ಮಾತ್ರ ನಾವು ಗಮನಿಸುತ್ತೇವೆ.
ಹುಸಿ-ವರ್ಗಗಳು
CSS ನಲ್ಲಿ ಮತ್ತೊಂದು ದೊಡ್ಡ ವಿಷಯವೆಂದರೆ ಹುಸಿ-ವರ್ಗಗಳು. "ಹುಸಿ" ಪೂರ್ವಪ್ರತ್ಯಯವು ಕಾಲ್ಪನಿಕ ಅಥವಾ ಸುಳ್ಳುತನವನ್ನು ಸೂಚಿಸುತ್ತದೆ. ಬಳಕೆದಾರರ ಕ್ರಿಯೆಗಳನ್ನು ಅವಲಂಬಿಸಿ html ಡಾಕ್ಯುಮೆಂಟ್ನ ಅಂಶಗಳು ಬದಲಾಗುತ್ತವೆ ಎಂಬುದು ಸತ್ಯ. ಉದಾಹರಣೆಗೆ, ನೀವು ಅದರ ಮೇಲೆ ಕರ್ಸರ್ ಅನ್ನು ಸುಳಿದಾಡಿದಾಗ ಲಿಂಕ್ ಬದಲಾಗುತ್ತದೆ.
ಹುಸಿ-ವರ್ಗಗಳನ್ನು ಬಳಸಿ, ಡೈನಾಮಿಕ್ ಪರಿಣಾಮಗಳನ್ನು ಪುಟದಲ್ಲಿ ರಚಿಸಲಾಗಿದೆ.
ಹುಸಿ-ವರ್ಗದ ಸಿಂಟ್ಯಾಕ್ಸ್:
ಸೆಲೆಕ್ಟರ್: ಹುಸಿ-ವರ್ಗ(ಆಸ್ತಿ 1: ಮೌಲ್ಯ; ಆಸ್ತಿ2: ಮೌಲ್ಯ; ...)
ನೀವು ಐಡಿ ಅಥವಾ ಕ್ಲಾಸ್ ಸೆಲೆಕ್ಟರ್ಗಳಿಗೆ ಹುಸಿ-ವರ್ಗಗಳನ್ನು ಅನ್ವಯಿಸಬಹುದು (ul.menu:hover (ಬಣ್ಣ : ಹಸಿರು )).
ಆರಂಭಿಕರಿಗಾಗಿ, ನಾನು ಗಮನಿಸುತ್ತೇನೆ: ಡೆವಲಪರ್ ವರ್ಗಗಳ ಹೆಸರುಗಳು ಮತ್ತು ಗುರುತಿಸುವಿಕೆಗಳ ಹೆಸರುಗಳೊಂದಿಗೆ ಬಂದಾಗ, ನಂತರ CSS ನಲ್ಲಿ ಹುಸಿ-ವರ್ಗಗಳ ಹೆಸರುಗಳು ಕಾಯ್ದಿರಿಸಿದ ಪದಗಳಾಗಿವೆ.
ಅಂಶವು ಸಕ್ರಿಯವಾಗಿದ್ದರೆ: ಸಕ್ರಿಯ ಹುಸಿ-ವರ್ಗವು ಶೈಲಿಯ ನಿಯಮವನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಕರ್ಸರ್ ಅನ್ನು ಲಿಂಕ್ ಮೇಲೆ ಸುಳಿದಾಡಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಕ್ಲಿಕ್ ಮಾಡಲಾಗುತ್ತದೆ. ಹುಸಿ-ವರ್ಗ : ಹೋವರ್ - ಮೌಸ್ ಕರ್ಸರ್ ಅನ್ನು ಒಂದು ಅಂಶದ ಮೇಲೆ ಸರಳವಾಗಿ ಸುಳಿದಾಡಿಸಲಾಗುತ್ತದೆ, ಉದಾಹರಣೆಗೆ ಲಿಂಕ್.
ಇನ್ನೂ ಅನೇಕ ಹುಸಿ ವರ್ಗಗಳಿವೆ. ಹುಸಿ-ವರ್ಗಗಳ ವಿಷಯವನ್ನು ಪ್ರತ್ಯೇಕ ಲೇಖನದಲ್ಲಿ ಸಂಪೂರ್ಣವಾಗಿ ಒಳಗೊಳ್ಳಬಹುದು. ಇಲ್ಲಿ ನಾವು ಅದನ್ನು ಮೇಲ್ನೋಟಕ್ಕೆ ಮಾತ್ರ ಸ್ಪರ್ಶಿಸಿದ್ದೇವೆ.
ಹುಸಿ ಅಂಶಗಳು
ಹುಸಿ-ಅಂಶಗಳನ್ನು ಬಳಸಿ, ಮೂಲ ಕೋಡ್ನಲ್ಲಿಲ್ಲದ ಪುಟದ ವಿಷಯಕ್ಕೆ ನೀವು ಹೆಚ್ಚುವರಿ ವಿಷಯವನ್ನು ಸೇರಿಸಬಹುದು. ಪ್ಯಾರಾಗ್ರಾಫ್ನಲ್ಲಿನ ಮೊದಲ ಅಕ್ಷರದಂತಹ ಅಂಶದ ಭಾಗವನ್ನು ಸಹ ನೀವು ಬದಲಾಯಿಸಬಹುದು. ಅಂದರೆ, ಕಾಲ್ಪನಿಕ html ಅಂಶವನ್ನು ರಚಿಸಿ - ತನ್ನದೇ ಆದ ಪ್ರದರ್ಶನ ಶೈಲಿಯೊಂದಿಗೆ ಮೊದಲ ಅಕ್ಷರ.
CSS ಹುಸಿ-ಅಂಶಗಳು ಸಹ ಒಂದು ದೊಡ್ಡ ವಿಷಯವಾಗಿದ್ದು, ಅದನ್ನು ಪೂರ್ಣವಾಗಿ ಒಳಗೊಳ್ಳಲು ಪ್ರತ್ಯೇಕ ಲೇಖನದ ಅಗತ್ಯವಿರುತ್ತದೆ.
ಹುಸಿ-ಅಂಶಗಳ ಸಿಂಟ್ಯಾಕ್ಸ್ ಹುಸಿ-ವರ್ಗಗಳಂತೆಯೇ ಇರುತ್ತದೆ:
ಸೆಲೆಕ್ಟರ್: ಹುಸಿ ಅಂಶ(ಆಸ್ತಿ 1: ಮೌಲ್ಯ; ಆಸ್ತಿ2: ಮೌಲ್ಯ; ...)
ಒಟ್ಟು ಏಳು ವಿಧದ ಆಯ್ಕೆದಾರರಿದ್ದಾರೆ. ಇದು:
ಸರಳವಾದದನ್ನು ಕೋನ ಆವರಣಗಳಿಲ್ಲದೆ ಟ್ಯಾಗ್ ಹೆಸರಾಗಿ ಬರೆಯಲಾಗಿದೆ. ಉದಾಹರಣೆಗೆ, ಡಿವಿ.
ಈ ಪ್ರವೇಶದೊಂದಿಗೆ ನಾವು ಎಲ್ಲಾ ಟ್ಯಾಗ್ಗಳ ಸಂಪೂರ್ಣ ವಿಷಯಗಳನ್ನು ಹೇಳುತ್ತೇವೆ
ನಮ್ಮ ಡಾಕ್ಯುಮೆಂಟ್ ಅಥವಾ ಡಾಕ್ಯುಮೆಂಟ್ಗಳನ್ನು ಕೆಂಪು ಫಾಂಟ್ನಲ್ಲಿ ಬರೆಯಲಾಗುತ್ತದೆ.ನಾವು ಒಂದು ಪ್ಯಾರಾಗ್ರಾಫ್ ಅನ್ನು ನೀಡಬೇಕಾದರೆ ಕೆಲವು, ಹೇಳಿ, ಹಿನ್ನೆಲೆ. ನಂತರ ನಾವು ವರ್ಗ ಆಯ್ಕೆಯನ್ನು ಬಳಸಬಹುದು. ಆದರೆ ನಿಯಮಗಳನ್ನು ಬರೆಯುವ ಮೊದಲು, ನಾವು ಟ್ಯಾಗ್ನಲ್ಲಿ ಅಗತ್ಯವಿದೆ
ಈ ಪ್ಯಾರಾಗ್ರಾಫ್ನ ಗುಣಲಕ್ಷಣವನ್ನು ಬರೆಯಿರಿ ವರ್ಗ, ಇದರ ಅರ್ಥದಲ್ಲಿ ನಿಮಗೆ ಬೇಕಾದುದನ್ನು ನೀವು ಬರೆಯಬಹುದು (ಲ್ಯಾಟಿನ್ ಅಕ್ಷರಗಳ ಜೊತೆಗೆ, ನೀವು ಹೈಫನ್ ಮತ್ತು ಸಂಖ್ಯೆಗಳನ್ನು ಬಳಸಬಹುದು), ಆದರೆ ನೀವು ನಮ್ಮ ಸೆಲೆಕ್ಟರ್ಗೆ ಹೆಸರನ್ನು ನೀಡಬೇಕಾಗುತ್ತದೆ ಇದರಿಂದ ಅದು ಏನನ್ನು ಉಲ್ಲೇಖಿಸುತ್ತದೆ ಎಂಬುದು ನಂತರ ನಿಮಗೆ ಸ್ಪಷ್ಟವಾಗುತ್ತದೆ . ನಂತರ ಸ್ಟೈಲ್ ಶೀಟ್ನಲ್ಲಿ ಅಥವಾ ಟ್ಯಾಗ್ನಲ್ಲಿ
ನಡುವೆ ನಮ್ಮ ದಾಖಲೆಯನಾವು ಡಾಟ್ ಅನ್ನು ಬರೆಯುತ್ತೇವೆ ಮತ್ತು ಅದರ ನಂತರ ಗುಣಲಕ್ಷಣ ಮೌಲ್ಯವನ್ನು ಬರೆಯುತ್ತೇವೆ ವರ್ಗ, ಮತ್ತು ಕರ್ಲಿ ಬ್ರೇಸ್ಗಳಲ್ಲಿ ನಾವು ಈ ಪ್ಯಾರಾಗ್ರಾಫ್ಗೆ ನಿಯಮಗಳನ್ನು ಹೊಂದಿಸುತ್ತೇವೆ.
ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿದ್ದರೆ:ಅದು
ಶೈಲಿಯ ಹಾಳೆಯಲ್ಲಿ:ಪ್ರವಿಲೋ (
…
}ಅದೇ ಸಮಯದಲ್ಲಿ, ವಿಭಿನ್ನ ಡಾಕ್ಯುಮೆಂಟ್ ಅಂಶಗಳು ಒಂದೇ ವರ್ಗ ಗುಣಲಕ್ಷಣ ಮೌಲ್ಯಗಳನ್ನು ಹೊಂದಬಹುದು. ಅಂದರೆ, ನಾವು ಒಂದೇ ವರ್ಗಕ್ಕೆ ಹಲವಾರು ಟ್ಯಾಗ್ಗಳನ್ನು ನಿಯೋಜಿಸಬಹುದು ಮತ್ತು ಅವುಗಳ ವಿಷಯವನ್ನು ಕೆಲವು ರೀತಿಯಲ್ಲಿ ಔಪಚಾರಿಕಗೊಳಿಸಲಾಗುತ್ತದೆ. ಇದು ಸಾರ್ವತ್ರಿಕ ನಿಯಮವನ್ನು ರಚಿಸಲು ನಮಗೆ ಅನುಮತಿಸುತ್ತದೆ, ಉದಾಹರಣೆಗೆ, ಪಠ್ಯದ ಪ್ರಮುಖ ಭಾಗಗಳನ್ನು ಹೈಲೈಟ್ ಮಾಡಲು ಮತ್ತು ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಿ ವರ್ಗಟ್ಯಾಗ್ಗಳಲ್ಲಿ.
ನಮೂದಿಸಬೇಕಾದ ಮೊದಲ ವಿಷಯವೆಂದರೆ HTML ನಲ್ಲಿನ ಐಡಿ ಗುಣಲಕ್ಷಣದ ಮೌಲ್ಯವು ಅನನ್ಯವಾಗಿದೆ. ವರ್ಗಕ್ಕಿಂತ ಭಿನ್ನವಾಗಿ, ನಾವು ಅದನ್ನು ಯಾವುದೇ ಟ್ಯಾಗ್ಗೆ ನಿಯೋಜಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ, ಆದರೆ ಒಂದಕ್ಕೆ ಮಾತ್ರ! ಸ್ಟೈಲ್ ಶೀಟ್ನಲ್ಲಿ ಇದನ್ನು ಹ್ಯಾಶ್ ಚಿಹ್ನೆಯಾಗಿ ಚಿತ್ರಿಸಲಾಗಿದೆ ಮತ್ತು ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿ ನೀವು ಟ್ಯಾಗ್ಗೆ ಕೆಲವು ಮೌಲ್ಯದೊಂದಿಗೆ ಐಡಿ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸುವ ಅಗತ್ಯವಿದೆ.
ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿದ್ದರೆ:ಅದು
ಶೈಲಿಯ ಹಾಳೆಯಲ್ಲಿ:
#ಪ್ರವಿಲೋ(
…
}ಸಾರ್ವತ್ರಿಕ ಆಯ್ಕೆಯನ್ನು ನಕ್ಷತ್ರ ಚಿಹ್ನೆಯಾಗಿ ಬರೆಯಲಾಗಿದೆ. ನೀವು ಟೇಬಲ್ನಲ್ಲಿ ಈ ಆಯ್ಕೆಗಾಗಿ ನಿಯಮಗಳನ್ನು ಹೊಂದಿಸಿದರೆ, ಈ ನಿಯಮವು ಎಲ್ಲಾ ಟ್ಯಾಗ್ಗಳ ವಿಷಯಕ್ಕೆ ಅನ್ವಯಿಸುತ್ತದೆ.
*{
…
}ಈ ಎಲ್ಲಾ ನಾಲ್ಕು ಸೆಲೆಕ್ಟರ್ ಪ್ರಕಾರಗಳು ಇಂದು ಎಲ್ಲಾ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ. ಆದರೆ ಎಲ್ಲೆಡೆ ಕೆಲಸ ಮಾಡದ ಸೆಲೆಕ್ಟರ್ಗಳಿವೆ, ಉದಾಹರಣೆಗೆ, ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್ಪ್ಲೋರರ್ ಆವೃತ್ತಿಗಳು 7.6 ಮತ್ತು ಕಡಿಮೆ.
ಅವುಗಳನ್ನು ಈ ರೀತಿ ಬರೆಯಲಾಗಿದೆ:
{
…
}ಈ ಪ್ರವೇಶದೊಂದಿಗೆ ನಾವು ಗುಣಲಕ್ಷಣವನ್ನು ಹೊಂದಿರುವ ಟ್ಯಾಗ್ಗಳಲ್ಲಿ ಒಳಗೊಂಡಿರುವ ಎಲ್ಲವನ್ನೂ ಹೇಳುತ್ತೇವೆ ಶೀರ್ಷಿಕೆ, ಕರ್ಲಿ ಬ್ರಾಕೆಟ್ಗಳಲ್ಲಿ ಬರೆಯಲಾದ ರೂಪವನ್ನು ಹೊಂದಿರುತ್ತದೆ. ಇದಲ್ಲದೆ, ಈ ಗುಣಲಕ್ಷಣವು ಯಾವುದೇ ಅರ್ಥವನ್ನು ಹೊಂದಿದೆಯೇ ಎಂಬುದು ಅಪ್ರಸ್ತುತವಾಗುತ್ತದೆ. ಇದು ಖಾಲಿಯಾಗಿರಬಹುದು ಮತ್ತು ಈ ರೀತಿ ಬರೆಯಬಹುದು:
ಹೇಗಾದರೂ ಟ್ಯಾಗ್ಗೆ
ಸೆಲೆಕ್ಟರ್ನಲ್ಲಿ ಬರೆಯಲಾದ ನಿಯಮಗಳನ್ನು ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ.
ಗುಣಲಕ್ಷಣಕ್ಕೆ ನಿಯಮಗಳನ್ನು ಅನ್ವಯಿಸಲು ನೀವು ಬಯಸಿದರೆ (ಉದಾಹರಣೆಗೆ, ಶೀರ್ಷಿಕೆ) ಒಂದು ನಿರ್ದಿಷ್ಟ ಮೌಲ್ಯದೊಂದಿಗೆ, ನೀವು ಅದನ್ನು ಈ ರೀತಿ ಬರೆಯಬೇಕು:{
…
}ಕೆಲವು ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ ನಿರ್ದಿಷ್ಟ ಟ್ಯಾಗ್ನ ವಿಷಯಕ್ಕೆ ನಿಯಮಗಳನ್ನು ಅನ್ವಯಿಸಲು ನೀವು ಬಯಸಿದರೆ (ಉದಾಹರಣೆಗೆ, ಶೀರ್ಷಿಕೆ), ಒಂದು ನಿರ್ದಿಷ್ಟ ಅರ್ಥವನ್ನು ಹೊಂದಿರುವ, ನಂತರ ಅದನ್ನು ಈ ರೀತಿ ಬರೆಯಬೇಕು:
p(
…
}ಗುಣಲಕ್ಷಣದೊಂದಿಗೆ ಟ್ಯಾಗ್ಗಳ ವಿಷಯಕ್ಕೆ ನಿಯಮಗಳನ್ನು ಅನ್ವಯಿಸಬೇಕೆಂದು ನಾವು ಬಯಸಿದರೆ ಶೀರ್ಷಿಕೆ(ಅಥವಾ ಕೆಲವು), ಇದರ ಅರ್ಥವು ಕೆಲವು ಸಂಪೂರ್ಣ ಪದವನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ, ನಂತರ ನೀವು ಅದನ್ನು ಈ ರೀತಿ ಬರೆಯಬೇಕಾಗಿದೆ:
{
…
}ಶೀರ್ಷಿಕೆ(ಅಥವಾ ಇನ್ನೊಂದು), ಇದರ ಅರ್ಥದಲ್ಲಿ ಸಂಪೂರ್ಣ ಪದವಿಲ್ಲ, ಆದರೆ ಕೆಲವು ಪಠ್ಯದ ತುಣುಕು (ಉದಾಹರಣೆಗೆ, ಕ್ಯಾಸ್ಪಿಯನ್ ಪದವು ಕ್ಯಾಸ್ಪಿಯನ್ ಅನ್ನು ಒಳಗೊಂಡಿದೆ). ನಂತರ ನೀವು ಈ ರೀತಿ ಬರೆಯಬೇಕಾಗಿದೆ:
{
…
}ಗುಣಲಕ್ಷಣವನ್ನು ಹೊಂದಿರುವ ಟ್ಯಾಗ್ನ ವಿಷಯಕ್ಕೆ ನಿಯಮಗಳನ್ನು ಅನ್ವಯಿಸಲು ನಾವು ಬಯಸಿದರೆ ಶೀರ್ಷಿಕೆ(ಅಥವಾ ಇನ್ನೊಂದು), ಇದರ ಅರ್ಥವು ಕೆಲವು ಚಿಹ್ನೆಗಳೊಂದಿಗೆ (ಅಕ್ಷರಗಳು) ಪ್ರಾರಂಭವಾಗುತ್ತದೆ. ನಂತರ ನೀವು ಈ ರೀತಿ ಬರೆಯಬೇಕಾಗಿದೆ:
{
…
}ಗುಣಲಕ್ಷಣವನ್ನು ಹೊಂದಿರುವ ಟ್ಯಾಗ್ನ ವಿಷಯಕ್ಕೆ ನಿಯಮಗಳನ್ನು ಅನ್ವಯಿಸಲು ನಾವು ಬಯಸಿದರೆ ಶೀರ್ಷಿಕೆ(ಅಥವಾ ಇನ್ನೊಂದು), ಇದರ ಅರ್ಥವು ಕೆಲವು ಚಿಹ್ನೆಗಳೊಂದಿಗೆ (ಅಕ್ಷರಗಳು) ಕೊನೆಗೊಳ್ಳುತ್ತದೆ. ನಂತರ ನೀವು ಈ ರೀತಿ ಬರೆಯಬೇಕಾಗಿದೆ:
{
…
}ಅಟ್ರಿಬ್ಯೂಟ್ ಸೆಲೆಕ್ಟರ್ಗಳು ಅತ್ಯಂತ ಶಕ್ತಿಯುತವಾದ ಸಾಧನವಾಗಿದ್ದು, ದುರದೃಷ್ಟವಶಾತ್, ಇಂದು ಹೆಚ್ಚು ವ್ಯಾಪಕವಾಗಿ ಬಳಸಲಾಗುವುದಿಲ್ಲ, ಮೈಕ್ರೋಸಾಫ್ಟ್ ಮತ್ತು ಅದರ IE 6.7 ಮತ್ತು ಕೆಳಗಿನವುಗಳಿಗೆ "ಧನ್ಯವಾದಗಳು". ಆದರೆ, ಶೀಘ್ರದಲ್ಲೇ, IE ಆವೃತ್ತಿಗಳು 6.7 ಮತ್ತು ಕಡಿಮೆ ಅಂತಿಮವಾಗಿ ಸಾಯುವಾಗ, ಈ ಆಯ್ಕೆದಾರರು ದೃಢವಾಗಿ CSS ನ ಭಾಗವಾಗುತ್ತಾರೆ ಮತ್ತು ವ್ಯಾಪಕವಾಗಿ ಬಳಸುತ್ತಾರೆ.
ಹುಸಿ-ವರ್ಗದ ಆಯ್ಕೆದಾರರು ಅಂಶಗಳ ವಿಷಯವು ಕೆಲವು ಸ್ಥಿತಿಯಲ್ಲಿದ್ದಾಗ ಹೇಗೆ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ ಎಂಬುದನ್ನು ನಿಯಂತ್ರಿಸುತ್ತದೆ.
ಈ ಆಯ್ಕೆದಾರರು :ಲಿಂಕ್, :ಭೇಟಿ, :ಸಕ್ರಿಯ,:ಹೂವರ್,:ಫೋಕಸ್ ಮತ್ತು:ಫಸ್ಟ್-ಚಿಲ್ಡ್. ಮೊದಲ ಎರಡು ಲಿಂಕ್ಗಳಿಗೆ ಮಾತ್ರ ಸಂಬಂಧಿಸಿದೆ, ಅಂದರೆ. ಟ್ಯಾಗ್ಗಳ ವಿಷಯಗಳಿಗೆ , ಮತ್ತು ಉಳಿದವು ವಿಷಯವನ್ನು ಹೊಂದಿರುವ ಯಾವುದೇ ಟ್ಯಾಗ್ಗೆ ಅನ್ವಯಿಸಬಹುದು.:ಲಿಂಕ್ ಫಾರ್ಮ್ಯಾಟ್ಗಳು ಬಳಕೆದಾರ-ಸ್ಪರ್ಶಿತ ಲಿಂಕ್ಗಳು.
ಎ:ಲಿಂಕ್ (ಬಣ್ಣ:ನೀಲಿ)
ಈ ನಮೂದು ಮೂಲಕ ನಾವು ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿನ ಎಲ್ಲಾ ಲಿಂಕ್ಗಳು ಅಥವಾ ಬಳಕೆದಾರರು ಸ್ಪರ್ಶಿಸದ ಡಾಕ್ಯುಮೆಂಟ್ಗಳು ನೀಲಿ ಬಣ್ಣವನ್ನು ಹೊಂದಿರುತ್ತವೆ ಎಂದು ಹೇಳುತ್ತಿದ್ದೇವೆ.
a:ಭೇಟಿ ಮಾಡಲಾಗಿದೆ (ಬಣ್ಣ:ಕೆಂಪು;)
:ಸಕ್ರಿಯವು ಸಕ್ರಿಯ ಅಂಶವನ್ನು ಅಲಂಕರಿಸುತ್ತದೆ (ಮೌಸ್ ಕ್ಲಿಕ್ನ ಕ್ಷಣದಲ್ಲಿ). ಯಾವುದೇ ಅಂಶಕ್ಕೆ ಅನ್ವಯಿಸಬಹುದು, ಆದರೆ IE 6 ರಲ್ಲಿ ಹೈಪರ್ಲಿಂಕ್ಗಳಿಗಾಗಿ ಮಾತ್ರ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.
ಪು:ಸಕ್ರಿಯ (ಬಣ್ಣ:ಕೆಂಪು)
ಈ ನಮೂದುನೊಂದಿಗೆ ನಾವು ಮೌಸ್ನೊಂದಿಗೆ ಕ್ಲಿಕ್ ಮಾಡುವ ಕ್ಷಣದಲ್ಲಿ ಎಲ್ಲಾ ಪ್ಯಾರಾಗಳು ಕೆಂಪು ಬಣ್ಣದಲ್ಲಿ (ಅಕ್ಷರಗಳು) ಎಂದು ಹೇಳುತ್ತೇವೆ.
: ಹೋವರ್ - ಬಳಕೆದಾರರು ಮೌಸ್ನೊಂದಿಗೆ ಅದರ ಮೇಲೆ ಸುಳಿದಾಡಿದಾಗ ಅಂಶವನ್ನು ಅಲಂಕರಿಸುತ್ತದೆ. ಯಾವುದೇ ಅಂಶಕ್ಕೂ ಅನ್ವಯಿಸಬಹುದು, ಆದರೆ IE 6 ರಲ್ಲಿ ಹೈಪರ್ಲಿಂಕ್ಗಳಿಗಾಗಿ ಮಾತ್ರ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.
ಪು:ಫೋಕಸ್ (ಬಣ್ಣ:ಕೆಂಪು;)
ನೀವು ಟ್ಯಾಬ್ ಅನ್ನು ಒತ್ತಿದಾಗ, ಅಂಶಗಳಲ್ಲಿನ ಪಠ್ಯವು ಕೆಂಪು ಬಣ್ಣದ್ದಾಗಿರುತ್ತದೆ
: ಮೊದಲ ಮಗು - ಎಲ್ಲಾ ಅಂಶಗಳ ಮೊದಲ "ಮಕ್ಕಳಿಗೆ" ನಿಯಮಗಳನ್ನು ಹೊಂದಿಸುತ್ತದೆ. IE 6 ನಲ್ಲಿ ಕೆಲಸ ಮಾಡುವುದಿಲ್ಲ.
ನಾವು ಇನ್ನೊಂದು ಲೇಖನದಲ್ಲಿ ಮಕ್ಕಳು ಮತ್ತು ಪೋಷಕರು ಏನೆಂಬುದರ ಬಗ್ಗೆ ಹೆಚ್ಚು ಮಾತನಾಡುತ್ತೇವೆ, ಆದರೆ ಸದ್ಯಕ್ಕೆ ನಾನು ಇನ್ನೊಂದು ಟ್ಯಾಗ್ನೊಳಗೆ ಇರುವ ಟ್ಯಾಗ್ ಅದರ “ಮಗು” ಎಂದು ಹೇಳುತ್ತೇನೆ. ಉದಾಹರಣೆಗೆ, ನಾವು ಕೋಡ್ ಅನ್ನು ಹೊಂದಿದ್ದೇವೆ:ಬ್ರೌಸರ್ನಲ್ಲಿ ವೀಕ್ಷಿಸಿದಾಗ, ಮೊದಲ ಟ್ಯಾಗ್ನ ವಿಷಯಗಳು
ಇದು ಕೆಂಪು ಬಣ್ಣಕ್ಕೆ ತಿರುಗುತ್ತದೆ.
ಕೇವಲ ಎರಡು ಹುಸಿ-ಎಲಿಮೆಂಟ್ ಸೆಲೆಕ್ಟರ್ಗಳಿವೆ. ಅವುಗಳೆಂದರೆ: ಮೊದಲ-ಸಾಲು ಮತ್ತು: ಮೊದಲ-ಅಕ್ಷರ
: ಮೊದಲ ಸಾಲು - ಮೊದಲ ಸಾಲು (ಸಾಲು)
: ಮೊದಲ ಅಕ್ಷರ - ಮೊದಲ ಅಕ್ಷರ
ನಾವು ಬರೆದರೆ:ಪು: ಮೊದಲ ಸಾಲು (ಬಣ್ಣ: ನೀಲಿ), ನಂತರ
ಡಾಕ್ಯುಮೆಂಟ್ ಅಥವಾ ದಾಖಲೆಗಳ ಎಲ್ಲಾ ಪ್ಯಾರಾಗಳಲ್ಲಿ, ಮೊದಲ ಸಾಲುಗಳು ನೀಲಿ ಬಣ್ಣವನ್ನು ಹೊಂದಿರುತ್ತವೆ.
ನಾವು ಬರೆದರೆ:
ಪು: ಮೊದಲ ಅಕ್ಷರ (ಬಣ್ಣ: ನೀಲಿ), ನಂತರ
ಎಲ್ಲಾ ಪ್ಯಾರಾಗಳಲ್ಲಿ ಮೊದಲ ಅಕ್ಷರಗಳು ನೀಲಿ ಬಣ್ಣವನ್ನು ಹೊಂದಿರುತ್ತವೆ.
ಈ ಎರಡೂ ಆಯ್ಕೆದಾರರು IE 6 ರಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ.ನೀವು ಏನನ್ನಾದರೂ ಕಳೆದುಕೊಂಡಿದ್ದರೆ ಅಥವಾ ಎಲ್ಲೋ ತಪ್ಪು ಮಾಡಿದರೆ, ವಿಷಯಕ್ಕೆ ಕಾಮೆಂಟ್ಗಳಲ್ಲಿ ಬರೆಯಿರಿ.
HTML ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿ ನಾವು ನಿರ್ದಿಷ್ಟ CSS ಶೈಲಿಯನ್ನು ಅನ್ವಯಿಸಲು ಬಯಸುವ ಅಂಶವನ್ನು ಅನನ್ಯವಾಗಿ ಗುರುತಿಸಲು ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.
ಎಲಿಮೆಂಟ್ ಸೆಲೆಕ್ಟರ್
ಈ ಹಂತದವರೆಗೆ, ನಾವು ಈ ಆಯ್ಕೆಗಾರರೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುತ್ತಿದ್ದೇವೆ. ನಾವು ಈ ಶೈಲಿಯನ್ನು ಅನ್ವಯಿಸಲು ಬಯಸುವ html ಅಂಶದ ಹೆಸರನ್ನು ಆಯ್ಕೆಯಾಗಿ ಬಳಸಲಾಗಿದೆ. ಆ. ಪ್ಯಾರಾಗ್ರಾಫ್ (ಪಿ) ಗಾಗಿ ವರ್ಗವನ್ನು ಬರೆದ ನಂತರ, ಪುಟದಲ್ಲಿನ ಎಲ್ಲಾ ಪ್ಯಾರಾಗಳು ಈ ವರ್ಗದ ಶೈಲಿಯನ್ನು ಪಡೆದುಕೊಂಡವು.
P(
ಫಾಂಟ್ ಗಾತ್ರ: 12px
}ಈಗ ನೀವು ಮೊದಲ ಪ್ಯಾರಾಗ್ರಾಫ್ ಅನ್ನು ಒಂದು ಶೈಲಿಯಲ್ಲಿ ಮಾಡಬೇಕಾದ ಪರಿಸ್ಥಿತಿಯನ್ನು ಊಹಿಸಿ, ಎರಡನೆಯದು ಇನ್ನೊಂದರಲ್ಲಿ, ಮೂರನೆಯದರಲ್ಲಿ ಮೂರನೇ, ಇತ್ಯಾದಿ. ಇಲ್ಲಿ ಅದು ನಮ್ಮ ಸಹಾಯಕ್ಕೆ ಬರುತ್ತದೆ ವರ್ಗದಿಂದ ಆಯ್ಕೆಗಾರ.
ವರ್ಗದ ಮೂಲಕ ಸೆಲೆಕ್ಟರ್
CSS ನಲ್ಲಿ ಸಾಮಾನ್ಯ ವರ್ಗವನ್ನು ಹೇಗೆ ರಚಿಸುವುದು ಎಂದು ನೋಡೋಣ. ಮತ್ತು ಇದನ್ನು ಮಾಡಲು ತುಂಬಾ ಸರಳವಾಗಿದೆ: ಮೊದಲು ನಾವು ಅವಧಿಯನ್ನು ಹಾಕುತ್ತೇವೆ, ನಂತರ ತಕ್ಷಣವೇ, ಸ್ಥಳವಿಲ್ಲದೆ, ನಾವು ವರ್ಗದ ಹೆಸರನ್ನು ಬರೆಯುತ್ತೇವೆ ಮತ್ತು ನಂತರ ಕರ್ಲಿ ಬ್ರೇಸ್ಗಳಲ್ಲಿ ಶೈಲಿಯನ್ನು ಬರೆಯುತ್ತೇವೆ. ಉದಾಹರಣೆಗೆ:
.ಹಸಿರು(
ಫಾಂಟ್-ಕುಟುಂಬ: ಏರಿಯಲ್, ವರ್ಡಾನಾ, ಸಾನ್ಸ್-ಸೆರಿಫ್;
ಫಾಂಟ್ ಗಾತ್ರ: 12px; ಬಣ್ಣ:ಹಸಿರು;
}ಈ ಶೈಲಿಯನ್ನು ಹೇಗೆ ಅನ್ವಯಿಸಬೇಕು?
ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟ ಪ್ಯಾರಾಗ್ರಾಫ್ಗೆ ಈ ಶೈಲಿಯನ್ನು ಅನ್ವಯಿಸಲು ನಾವು ಬಯಸುತ್ತೇವೆ ಎಂದು ಹೇಳೋಣ. ಇದು html ನಲ್ಲಿ ಈ ರೀತಿ ಕಾಣುತ್ತದೆ:
ಪ್ಯಾರಾಗ್ರಾಫ್ ಪಠ್ಯ...
ನೀವು ನೋಡುವಂತೆ, ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಲಾಗುತ್ತದೆ ವರ್ಗಶೈಲಿಯ ಹೆಸರಿನ ಅರ್ಥದೊಂದಿಗೆ.
ಉದಾಹರಣೆ:
ಇದು ಸಾಮಾನ್ಯ ಪ್ಯಾರಾಗ್ರಾಫ್ ಆಗಿದೆ, ಇದು ಎಲಿಮೆಂಟ್ ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಬಳಸುತ್ತದೆ
ಈ ಪ್ಯಾರಾಗ್ರಾಫ್ ಹಸಿರು ಬಣ್ಣದ್ದಾಗಿದೆ ಏಕೆಂದರೆ ಇದಕ್ಕೆ ಒಂದು ವರ್ಗವನ್ನು ಅನ್ವಯಿಸಲಾಗಿದೆ
ಮತ್ತು ಈ ಪ್ಯಾರಾಗ್ರಾಫ್ ದೊಡ್ಡ ಫಾಂಟ್ ಮತ್ತು ಕೆಂಪು ಬಣ್ಣದಲ್ಲಿದೆ
ಎಲಿಮೆಂಟ್ ಸೆಲೆಕ್ಟರ್ ವರ್ಗದ ಪ್ರಕಾರ ಈ ಪ್ಯಾರಾಗ್ರಾಫ್ ಮತ್ತೆ ಸಾಮಾನ್ಯವಾಗಿದೆ
p(
ಫಾಂಟ್-ಕುಟುಂಬ:ಏರಿಯಲ್,ವರ್ಡಾನಾ,ಸಾನ್ಸ್-ಸೆರಿಫ್;
ಫಾಂಟ್-ಗಾತ್ರ: 18px;
}
.ಹಸಿರು (ಬಣ್ಣ:ಹಸಿರು;)
.big_red(
ಫಾಂಟ್ ಗಾತ್ರ: 28px;
ಬಣ್ಣ:ಕೆಂಪು;
}ನಾವು ಮೊದಲು ಎಲ್ಲಾ ಪ್ಯಾರಾಗ್ರಾಫ್ಗಳಿಗೆ ಮೂಲ ಶೈಲಿಯನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತೇವೆ (ಅಂಶದ ಮೂಲಕ ಆಯ್ಕೆ), ಮತ್ತು ನಂತರ, ನಾವು ಯಾವುದೇ ಪ್ಯಾರಾಗ್ರಾಫ್ನಲ್ಲಿ ಏನನ್ನಾದರೂ ಬದಲಾಯಿಸಲು ಬಯಸಿದರೆ, ಅದಕ್ಕಾಗಿ ವಿಶೇಷ ಶೈಲಿಯನ್ನು ರಚಿಸಿ (ವರ್ಗದ ಮೂಲಕ ಆಯ್ಕೆಗಾರ) ಮತ್ತು ಅದನ್ನು ಈ ಪ್ಯಾರಾಗ್ರಾಫ್ಗೆ ನಿಯೋಜಿಸಿ. ನಾವು ಈ ವಿಶೇಷ ವರ್ಗವನ್ನು ರಚಿಸಿದಾಗ, ಈ ಅಂಶದ ಮೂಲ ಶೈಲಿಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ನಾವು ಸೇರಿಸಲು ಅಥವಾ ಬದಲಾಯಿಸಲು ಬಯಸುವ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಮಾತ್ರ ನಾವು ಬರೆಯಬೇಕು.
ಮೇಲಿನ ಉದಾಹರಣೆಯಿಂದ ತರಗತಿಗಳನ್ನು ಪ್ಯಾರಾಗ್ರಾಫ್ಗೆ ಮಾತ್ರ ಅನ್ವಯಿಸಬಹುದು, ಉದಾಹರಣೆಗೆ, ಶಿರೋನಾಮೆಗಳಿಗೆ ಅಥವಾ, ಉದಾಹರಣೆಗೆ, ಟೇಬಲ್ ಸೆಲ್ಗೆ ಅಥವಾ ಸಂಕ್ಷಿಪ್ತವಾಗಿ, ಅವುಗಳನ್ನು ಎಲ್ಲಿ ಬೇಕಾದರೂ ಅನ್ವಯಿಸಬಹುದು ಏನನ್ನಾದರೂ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ (ಈ ಸಂದರ್ಭದಲ್ಲಿ ಬಣ್ಣ ಮತ್ತು ಪಠ್ಯ ನಿಯತಾಂಕ ಇರುವಲ್ಲೆಲ್ಲಾ).
ಡಾಟ್ನ ಮೊದಲು ಅಂಶದ ಹೆಸರನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುವ ಮೂಲಕ ನಿರ್ದಿಷ್ಟ ಅಂಶದ ಮೇಲೆ (ಉದಾಹರಣೆಗೆ, ಪ್ಯಾರಾಗ್ರಾಫ್) ಮಾತ್ರ ನೀವು ವರ್ಗವನ್ನು ಕಾರ್ಯನಿರ್ವಹಿಸುವಂತೆ ಮಾಡಬಹುದು:
P.green (ಬಣ್ಣ:ಹಸಿರು;)
ಈಗ ಹಸಿರು ವರ್ಗವು ಪಿ ಅಂಶವನ್ನು ಹೊರತುಪಡಿಸಿ ಬೇರೆ ಯಾವುದಕ್ಕೂ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ.
ಐಡಿ ಮೂಲಕ ಸೆಲೆಕ್ಟರ್
ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿರುವ ಎಲ್ಲಾ ಇತರಕ್ಕಿಂತ ವಿಭಿನ್ನವಾದ, ಅನನ್ಯವಾದ ಒಂದೇ ಒಂದು ಅಂಶವನ್ನು ನೀವು ಆಯ್ಕೆ ಮಾಡಬೇಕಾದರೆ ಈ ಆಯ್ಕೆಯನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಪುಟದಲ್ಲಿನ ಮೊದಲ ಶೀರ್ಷಿಕೆಯನ್ನು ನಿರ್ದಿಷ್ಟ ರೀತಿಯಲ್ಲಿ ಹೈಲೈಟ್ ಮಾಡೋಣ:
html ಭಾಗ:
<Н1 id="firstheader">ಪುಟದಲ್ಲಿ ಮೊದಲ ಶೀರ್ಷಿಕೆН1>
css-ಭಾಗ:
H1#firstheader (ಬಣ್ಣ: ಕೆಂಪು; ಫಾಂಟ್-ತೂಕ: ದಪ್ಪ; ಪಠ್ಯ-ಹೊಂದಾಣಿಕೆ: ಮಧ್ಯ)
ನೀವು ನೋಡುವಂತೆ, html ಭಾಗದಲ್ಲಿ, ವರ್ಗ ಗುಣಲಕ್ಷಣದ ಬದಲಿಗೆ, id ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಲಾಗುತ್ತದೆ ಮತ್ತು css ನಲ್ಲಿ, ಡಾಟ್ ಬದಲಿಗೆ, # ಚಿಹ್ನೆಯನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.
ತಾತ್ವಿಕವಾಗಿ, ವರ್ಗ J ಮೂಲಕ ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ಅದೇ ರೀತಿ ಮಾಡಬಹುದು
ಸಂದರ್ಭ ಆಯ್ಕೆ
ಇದು ತುಂಬಾ ಉಪಯುಕ್ತವಾದ ವಿಷಯ. ನಾವು ಕೋಷ್ಟಕಗಳು ಮತ್ತು ಪಠ್ಯದ ಪ್ಯಾರಾಗಳನ್ನು ಹೊಂದಿರುವ ಪುಟವನ್ನು ಹೊಂದಿದ್ದೇವೆ ಎಂದು ಹೇಳೋಣ ಮತ್ತು ಟೇಬಲ್ ಮತ್ತು ಪ್ಯಾರಾಗ್ರಾಫ್ಗಳಲ್ಲಿ ದಪ್ಪ ಪದಗಳಿವೆ. ದಪ್ಪದಲ್ಲಿ ಹೈಲೈಟ್ ಮಾಡಲಾದ ಪ್ಯಾರಾಗ್ರಾಫ್ನಲ್ಲಿನ ಪದಗಳು ಹಸಿರು ಬಣ್ಣದ್ದಾಗಿವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು ಅವಶ್ಯಕ. ಆದ್ದರಿಂದ ಇದು ಇಲ್ಲಿದೆ:
p ಪ್ರಬಲ (ಬಣ್ಣ: ಹಸಿರು)
ಆ. ಆರಂಭದಲ್ಲಿ ಪಿನಂತರ ಒಂದು ಜಾಗ, ನಂತರ ಬಲವಾದ,ಮತ್ತು ನಂತರ ಮಾತ್ರ ಶೈಲಿ. ಈ ಸಾಲು ಈ ರೀತಿ ಓದುತ್ತದೆ: ಅಂಶದ ಒಳಗೆ ಇದ್ದರೆ ಪಿಒಂದು ಅಂಶವಿದೆ ಬಲವಾದನಂತರ ಬಲವಾದ ಅಂಶಕ್ಕೆ ಹಸಿರು ಶೈಲಿಯನ್ನು ನಿಯೋಜಿಸಿ.
ಗೂಡುಕಟ್ಟುವಿಕೆ ಯಾವುದೇ ಮಟ್ಟದಲ್ಲಿರಬಹುದು. ಇನ್ನೊಂದು ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ: "ಒಂದು ವೇಳೆ ಇದ್ದಕ್ಕಿದ್ದಂತೆ ಟೇಬಲ್ ಸೆಲ್ ಒಳಗೆ ಇದ್ದರೆ ( ಟಿಡಿ), ಪ್ಯಾರಾಗ್ರಾಫ್ ( ಪಿ)ಅದರ ಒಳಗೆ ಒಂದು ಪದವು ದಪ್ಪದಲ್ಲಿ ಹೈಲೈಟ್ ಆಗಿರುತ್ತದೆ ( ಬಲವಾದ), ನಂತರ ಈ ಪದವು ಕೆಂಪು ಬಣ್ಣಕ್ಕೆ ತಿರುಗಲಿ! "
td p ಪ್ರಬಲ (ಬಣ್ಣ: ಕೆಂಪು;)
ವ್ಲಾಡ್ ಮೆರ್ಜೆವಿಚ್
ಐಡೆಂಟಿಫೈಯರ್ ("ಐಡಿ ಸೆಲೆಕ್ಟರ್" ಎಂದೂ ಕರೆಯುತ್ತಾರೆ) ಒಂದು ಅಂಶಕ್ಕೆ ವಿಶಿಷ್ಟವಾದ ಹೆಸರನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ, ಅದನ್ನು ಅದರ ಶೈಲಿಯನ್ನು ಬದಲಾಯಿಸಲು ಮತ್ತು ಸ್ಕ್ರಿಪ್ಟ್ಗಳ ಮೂಲಕ ಉಲ್ಲೇಖಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ.
ಗುರುತಿಸುವಿಕೆಯನ್ನು ಬಳಸುವ ಸಿಂಟ್ಯಾಕ್ಸ್ ಈ ಕೆಳಗಿನಂತಿರುತ್ತದೆ.
ಯುನಿವರ್ಸಲ್ ಸೆಲೆಕ್ಟರ್
ವ್ಲಾಡ್ ಮೆರ್ಜೆವಿಚ್
ಕೆಲವೊಮ್ಮೆ ನೀವು ಒಂದೇ ಸಮಯದಲ್ಲಿ ವೆಬ್ ಪುಟದ ಎಲ್ಲಾ ಅಂಶಗಳಿಗೆ ಒಂದು ಶೈಲಿಯನ್ನು ಹೊಂದಿಸಬೇಕಾಗುತ್ತದೆ, ಉದಾಹರಣೆಗೆ, ಫಾಂಟ್ ಅಥವಾ ಪಠ್ಯ ಶೈಲಿಯನ್ನು ಹೊಂದಿಸಿ. ಈ ಸಂದರ್ಭದಲ್ಲಿ, ವೆಬ್ ಪುಟದ ಯಾವುದೇ ಅಂಶಕ್ಕೆ ಹೊಂದಿಕೆಯಾಗುವ ಸಾರ್ವತ್ರಿಕ ಆಯ್ಕೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.
ಸಾರ್ವತ್ರಿಕ ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಸೂಚಿಸಲು ನಕ್ಷತ್ರ ಚಿಹ್ನೆ (*) ಅನ್ನು ಬಳಸಲಾಗುತ್ತದೆ, ಮತ್ತು ಸಾಮಾನ್ಯವಾಗಿ ಸಿಂಟ್ಯಾಕ್ಸ್ ಈ ಕೆಳಗಿನಂತಿರುತ್ತದೆ.
* (ಶೈಲಿ ನಿಯಮಗಳ ವಿವರಣೆ)
ಗುಣಲಕ್ಷಣ ಆಯ್ಕೆದಾರರು
ವ್ಲಾಡ್ ಮೆರ್ಜೆವಿಚ್
ಅನೇಕ ಟ್ಯಾಗ್ಗಳು ಅವು ಯಾವ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸುತ್ತವೆ ಎಂಬುದರ ಆಧಾರದ ಮೇಲೆ ಅವುಗಳ ಪರಿಣಾಮದಲ್ಲಿ ಬದಲಾಗುತ್ತವೆ. ಉದಾಹರಣೆಗೆ, ಟ್ಯಾಗ್ ಟೈಪ್ ಆಟ್ರಿಬ್ಯೂಟ್ನ ಮೌಲ್ಯವನ್ನು ಬದಲಾಯಿಸುವ ಮೂಲಕ ಬಟನ್, ಪಠ್ಯ ಕ್ಷೇತ್ರ ಮತ್ತು ಇತರ ಫಾರ್ಮ್ ಅಂಶಗಳನ್ನು ರಚಿಸಬಹುದು. ಆದಾಗ್ಯೂ, INPUT ಸೆಲೆಕ್ಟರ್ಗೆ ಶೈಲಿಯ ನಿಯಮಗಳನ್ನು ಸೇರಿಸುವುದರಿಂದ ಈ ಟ್ಯಾಗ್ ಬಳಸಿ ರಚಿಸಲಾದ ಎಲ್ಲಾ ಅಂಶಗಳಿಗೆ ಏಕಕಾಲದಲ್ಲಿ ಶೈಲಿಯನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ. ಅಂತಹ ಅಂಶಗಳ ಶೈಲಿಯನ್ನು ಮೃದುವಾಗಿ ನಿಯಂತ್ರಿಸಲು, ಗುಣಲಕ್ಷಣ ಆಯ್ಕೆಗಳನ್ನು CSS ಗೆ ಪರಿಚಯಿಸಲಾಗಿದೆ.
ಮಕ್ಕಳ ಆಯ್ಕೆಗಾರರು
ವ್ಲಾಡ್ ಮೆರ್ಜೆವಿಚ್
ಮಕ್ಕಳ ಅಂಶವು ನೇರವಾಗಿ ಪೋಷಕ ಅಂಶದೊಳಗೆ ಇರುವ ಒಂದು ಅಂಶವಾಗಿದೆ. ಡಾಕ್ಯುಮೆಂಟ್ ಅಂಶಗಳ ನಡುವಿನ ಸಂಬಂಧವನ್ನು ಚೆನ್ನಾಗಿ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು, ಸ್ವಲ್ಪ ಕೋಡ್ ಅನ್ನು ನೋಡೋಣ (ಉದಾಹರಣೆ 12.1).
ಉದಾಹರಣೆ 12.1. ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿನ ಅಂಶಗಳ ಗೂಡುಕಟ್ಟುವಿಕೆ
HTML5 CSS 2.1 IE Cr Op Sa Fx
ಪಕ್ಕದ ಆಯ್ಕೆದಾರರು
ವ್ಲಾಡ್ ಮೆರ್ಜೆವಿಚ್
ಡಾಕ್ಯುಮೆಂಟ್ ಕೋಡ್ನಲ್ಲಿ ತಕ್ಷಣವೇ ಪರಸ್ಪರ ಅನುಸರಿಸಿದಾಗ ವೆಬ್ ಪುಟದ ಅಂಶಗಳನ್ನು ಪಕ್ಕದ ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ. ಅಂಶ ಸಂಬಂಧಗಳ ಕೆಲವು ಉದಾಹರಣೆಗಳನ್ನು ನೋಡೋಣ.
ಲೋರೆಮ್ ಇಪ್ಸಮ್ ದುಃಖಕುಳಿತುಕೊಳ್ಳಿ.
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ ಟ್ಯಾಗ್ ಟ್ಯಾಗ್ನ ಮಗುವಾಗಿದೆ
ಏಕೆಂದರೆ ಅದು ಈ ಪಾತ್ರೆಯೊಳಗಿದೆ. ಕ್ರಮವಾಗಿ
ಪೋಷಕರಂತೆ ವರ್ತಿಸುತ್ತಾರೆ .
ಸಂದರ್ಭ ಆಯ್ಕೆಗಾರರು
ವ್ಲಾಡ್ ಮೆರ್ಜೆವಿಚ್
ವೆಬ್ ಪುಟವನ್ನು ರಚಿಸುವಾಗ, ನೀವು ಸಾಮಾನ್ಯವಾಗಿ ಕೆಲವು ಟ್ಯಾಗ್ಗಳನ್ನು ಇತರರೊಳಗೆ ನೆಸ್ಟ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ. ಈ ಟ್ಯಾಗ್ಗಳ ಶೈಲಿಗಳನ್ನು ಸರಿಯಾಗಿ ಬಳಸಲಾಗಿದೆಯೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು, ನಿರ್ದಿಷ್ಟ ಸಂದರ್ಭದಲ್ಲಿ ಮಾತ್ರ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಆಯ್ಕೆದಾರರು ಸಹಾಯ ಮಾಡುತ್ತಾರೆ. ಉದಾಹರಣೆಗೆ, ಟ್ಯಾಗ್ಗಾಗಿ ಶೈಲಿಯನ್ನು ಹೊಂದಿಸಿ ಅದು ಕಂಟೇನರ್ ಒಳಗೆ ಇರುವಾಗ ಮಾತ್ರ
ಈ ರೀತಿಯಾಗಿ ನೀವು ಏಕಕಾಲದಲ್ಲಿ ಪ್ರತ್ಯೇಕ ಟ್ಯಾಗ್ಗೆ ಶೈಲಿಯನ್ನು ಹೊಂದಿಸಬಹುದು, ಹಾಗೆಯೇ ಇನ್ನೊಂದರೊಳಗಿನ ಟ್ಯಾಗ್ಗೆ ಹೊಂದಿಸಬಹುದು.