ಸಿಎಸ್ಎಸ್ ಜೊತೆ ಶೈಲಿ ಲಿಂಕ್ಸ್ ಹೇಗೆ

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

ಹೆಚ್ಚಿನ ವೆಬ್ ವಿನ್ಯಾಸಕರು "a" ಟ್ಯಾಗ್ನಲ್ಲಿ ಶೈಲಿಯನ್ನು ವಿವರಿಸುವ ಮೂಲಕ ಪ್ರಾರಂಭಿಸುತ್ತಾರೆ:

ಒಂದು {ಬಣ್ಣ: ಕೆಂಪು; }

ಇದು ಶೈಲಿಯ ಎಲ್ಲಾ ಅಂಶಗಳನ್ನೂ ಶೈಲಿ ಮಾಡುತ್ತದೆ (ಹೋವರ್, ಭೇಟಿ ಮಾಡಿ ಮತ್ತು ಸಕ್ರಿಯವಾಗಿದೆ). ಪ್ರತಿಯೊಂದು ಭಾಗವನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ಶೈಲಿಗೆ, ನೀವು ಲಿಂಕ್ ಹುಸಿ ತರಗತಿಗಳನ್ನು ಬಳಸಬೇಕು.

ಲಿಂಕ್ ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್

ನೀವು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದಾದ ನಾಲ್ಕು ಸೂಕ್ಷ್ಮ ರೀತಿಯ ಲಿಂಕ್ ಹುಸಿ ತರಗತಿಗಳು ಇವೆ:

• : ಲಿಂಕ್ - ಇದು ಲಿಂಕ್ಗಾಗಿ ಡೀಫಾಲ್ಟ್ ಶೈಲಿಯಾಗಿದೆ
• : ಭೇಟಿ - ಲಿಂಕ್ ನಂತರ ಕ್ಲಿಕ್ ಮಾಡಲಾಗಿದೆ
• : ಹೂವರ್ - ಲಿಂಕ್ನ ಮೇಲೆ ಮೌಸ್ ಅನ್ನು ಪೋಯ್ಸ್ ಮಾಡಲಾಗುವುದು (ಪೂರ್ವ ಕ್ಲಿಕ್)
• : ಸಕ್ರಿಯ - ಲಿಂಕ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಲಾಗುತ್ತಿದೆ

ಲಿಂಕ್ ಹುಸಿ ವರ್ಗ ವ್ಯಾಖ್ಯಾನಿಸಲು, ನಿಮ್ಮ ಸಿಎಸ್ಎಸ್ ಸೆಲೆಕ್ಟರ್ ಒಂದು ಟ್ಯಾಗ್ ಬಳಸಿ. ಆದ್ದರಿಂದ, ನಿಮ್ಮ ಎಲ್ಲಾ ಲಿಂಕ್ಗಳ ಬಣ್ಣವನ್ನು ಬೂದು ಬಣ್ಣಕ್ಕೆ ಬದಲಾಯಿಸಲು, ಬರೆಯಿರಿ:

a: ಭೇಟಿ {ಬಣ್ಣ: ಬೂದು; }

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

a: ಲಿಂಕ್, ಎ: ಹೂವರ್, ಎ: ಸಕ್ರಿಯ {ಬಣ್ಣ: ಕಪ್ಪು; } a: ಭೇಟಿ {ಬಣ್ಣ: ಬೂದು; }

ಲಿಂಕ್ ಬಣ್ಣಗಳನ್ನು ಬದಲಾಯಿಸಿ

ಶೈಲಿಯ ಲಿಂಕ್ಗಳಿಗೆ ಅತ್ಯಂತ ಜನಪ್ರಿಯವಾದ ಮಾರ್ಗವೆಂದರೆ ಮೌಸ್ ಅದರ ಮೇಲೆ ಸುತ್ತುವ ಬಣ್ಣವನ್ನು ಬದಲಾಯಿಸುವುದು:

a {color: # 00f; } a: ಹೂವರ್ {color: # 0f0; }

ಆದರೆ ಅದರೊಂದಿಗೆ ಕ್ಲಿಕ್ ಮಾಡುವಂತೆ ಲಿಂಕ್ ಹೇಗೆ ಕಾಣುತ್ತದೆ ಎಂಬುದನ್ನು ನೀವು ಪರಿಣಾಮ ಬೀರಬಹುದು ಎಂಬುದನ್ನು ಮರೆಯಬೇಡಿ: ಸಕ್ರಿಯ ಆಸ್ತಿ:

a {color: # 00f; } a: ಸಕ್ರಿಯ {color: # f00; }

ಅಥವಾ ನೀವು ಅದನ್ನು ಭೇಟಿ ಮಾಡಿದ ನಂತರ ಲಿಂಕ್ ಹೇಗೆ ಕಾಣುತ್ತದೆ: ಭೇಟಿ ನೀಡಿದ ಆಸ್ತಿ:

a {color: # 00f; } a: ಭೇಟಿ {ಬಣ್ಣ: # f0f; }

ಇದನ್ನು ಒಟ್ಟಾಗಿ ಜೋಡಿಸಲು:

a {color: # 00f; } a: ಭೇಟಿ {ಬಣ್ಣ: # f0f; } a: ಹೂವರ್ {color: # 0f0; } a: ಸಕ್ರಿಯ {color: # f00; }

ಚಿಹ್ನೆಗಳು ಅಥವಾ ಬುಲೆಟ್ಗಳು ಸೇರಿಸಲು ಲಿಂಕ್ಗಳ ಮೇಲೆ ಹಿನ್ನೆಲೆಗಳನ್ನು ಹಾಕಿ

ಸ್ಟೈಲಿಶ್ ಹಿನ್ನೆಲೆಗಳ ಲೇಖನದಲ್ಲಿರುವಂತೆ ನೀವು ಹಿನ್ನೆಲೆ ಹಿನ್ನಲೆ ಹಾಕಬಹುದು, ಆದರೆ ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಸ್ವಲ್ಪಮಟ್ಟಿಗೆ ಆಡುವ ಮೂಲಕ, ಸಂಯೋಜಿತ ಐಕಾನ್ ಹೊಂದಿರುವ ಲಿಂಕ್ ಅನ್ನು ನೀವು ರಚಿಸಬಹುದು. ಚಿಕ್ಕದಾದ ಐಕಾನ್ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡಿ, 15px ನಿಂದ 15px ವರೆಗೆ, ನಿಮ್ಮ ಪಠ್ಯ ದೊಡ್ಡದಾಗಿದ್ದರೆ. ಲಿಂಕ್ನ ಒಂದು ಬದಿಗೆ ಹಿನ್ನೆಲೆಯನ್ನು ಇರಿಸಿ ಮತ್ತು ಪುನರಾವರ್ತನೆಯ ಆಯ್ಕೆಯನ್ನು ಪುನರಾವರ್ತಿಸಿ. ನಂತರ ಲಿಂಕ್ ಅನ್ನು ಪ್ಯಾಡ್ ಮಾಡಿ, ಇದರಿಂದಾಗಿ ಲಿಂಕ್ನ ಪಠ್ಯ ಎಡಕ್ಕೆ ಅಥವಾ ಐಕಾನ್ ಅನ್ನು ನೋಡಲು ಬಲಕ್ಕೆ ಹೋಗುತ್ತದೆ.

ಒಂದು {ಪ್ಯಾಡಿಂಗ್: 0 2px 1px 15px; ಹಿನ್ನೆಲೆ: #fff url (ball.gif) ಎಡ ಸೆಂಟರ್ ಇಲ್ಲ-ಪುನರಾವರ್ತನೆ; ಬಣ್ಣ: # c00; }

ಒಮ್ಮೆ ನೀವು ನಿಮ್ಮ ಐಕಾನ್ ಅನ್ನು ಪಡೆದುಕೊಂಡ ಬಳಿಕ, ಲಿಂಕ್ ಬದಲಾವಣೆಯನ್ನು ಮಾಡಲು ನೀವು ನಿಮ್ಮ ಹೋವರ್, ಕ್ರಿಯಾತ್ಮಕ ಮತ್ತು ಭೇಟಿ ಮಾಡಿದ ಐಕಾನ್ಗಳಂತೆ ವಿಭಿನ್ನ ಚಿತ್ರವನ್ನು ಹೊಂದಿಸಬಹುದು:

ಒಂದು {ಪ್ಯಾಡಿಂಗ್: 0 2px 1px 15px; ಹಿನ್ನೆಲೆ: #fff url (ball.gif) ಎಡ ಸೆಂಟರ್ ಇಲ್ಲ-ಪುನರಾವರ್ತನೆ; ಬಣ್ಣ: # c00; } a: ಹೋವರ್ {background: #fff url (ball2.gif) ಎಡ ಕೇಂದ್ರವು ಪುನರಾವರ್ತನೆ ಇಲ್ಲ; } a: ಸಕ್ರಿಯ {background: #fff url (ball3.gif) ಎಡ ಕೇಂದ್ರವು ಪುನರಾವರ್ತನೆಯಾಗದಂತೆ; }

ನಿಮ್ಮ ಲಿಂಕ್ಗಳನ್ನು ಬಟನ್ಗಳಂತೆ ಮಾಡಿ

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

ಒಂದು {border: 4px ಪ್ರಾರಂಭದಲ್ಲಿ; ಪ್ಯಾಡಿಂಗ್: 2 px; ಪಠ್ಯ-ಅಲಂಕಾರ: ಯಾವುದೂ ಇಲ್ಲ; } a: ಸಕ್ರಿಯ {border: 4px inset; }

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

ಒಂದು {ಗಡಿ-ಶೈಲಿಯ: ಘನ; ಗಡಿ-ಅಗಲ: 1px 4px 4px 1px; ಪಠ್ಯ-ಅಲಂಕಾರ: ಯಾವುದೂ ಇಲ್ಲ; ಪ್ಯಾಡಿಂಗ್: 4 px; ಗಡಿ ಬಣ್ಣ: # 69f # 00f # 00f # 69f; }

ಮತ್ತು ನೀವು ಹೋವರ್ ಮತ್ತು ಬಟನ್ ಲಿಂಕ್ನ ಸಕ್ರಿಯ ಶೈಲಿಗಳ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು, ಕೇವಲ ಆ ಹುಸಿ ತರಗತಿಗಳನ್ನು ಬಳಸಿ:

a: link {border-style: solid; ಗಡಿ-ಅಗಲ: 1px 4px 4px 1px; ಪಠ್ಯ-ಅಲಂಕಾರ: ಯಾವುದೂ ಇಲ್ಲ; ಪ್ಯಾಡಿಂಗ್: 4 px; ಗಡಿ ಬಣ್ಣ: # 69f # 00f # 00f # 69f; } a: ಹೂವರ್ {border-color: #ccc; }