Κατάλογος άρθρου
σεWordPressΣτην επεξεργασία του άρθρου, υπάρχει ένα κοινό κουμπί "μπλοκ quote" ▼
Όταν χρησιμοποιείται, προσθέτει αΔείκτης για επίκληση κάποιας εισηγμένης δήλωσης ή επισήμανσης.
Τι σημαίνει blockquote;
Το παρακάτω είναιChen WeiliangΣτυλ αναφοράς για ιστολόγια:
Η ετικέτα XHTML blockquote είναι ένα πολύ χρήσιμο (αν κάποιο υποχρησιμοποιημένο) στοιχείο.Σημασιολογικά, το blockquote θα πρέπει να χρησιμοποιείται κάθε φορά που παραθέτετε μεγαλύτερο κείμενο από άλλη πηγή (άλλος ομιλητής, άλλος ιστότοπος κ.λπ.).Αυτός είναι ένας τρόπος για να οριοθετήσετε κείμενο και να το εμφανίσετε με άλλες πηγές.
Από άποψη στυλ, μπορείτε να τα κάνετε όλα αυτά με ειδικές τάξεις σε ετικέτες παραγράφων... αλλά αυτό είναι σημασιολογικά άχρηστο, τώρα, έτσι; Τα μπλοκ εισαγωγικά έχουν ορισμένα στυλ από προεπιλογή.
Τα περισσότερα προγράμματα περιήγησης εισάγουν κείμενο σε ετικέτες blockquote, κάτι που βοηθά τους χρήστες να αναγνωρίσουν το κείμενο με κάποιο τρόπο.Αλλά ποιος θα πει ότι πρέπει να σταματήσουμε εκεί;Δείτε πώς να διαμορφώσετε τα μπλοκ εισαγωγικά σας με CSS.
Δοκιμάστε το test-css.html και προσθέστε την ενότητα css στο σώμα html:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Test CSS blockquote</title> </head> <blockquote> <p>The blockquote XHTML tag is a fairly useful (if somewhat underused) element. Semantically speaking, a blockquote should be used any time you’re quoting a longer piece of text from another source – another speaker, another website, whatever. It’s a way of setting the text apart, and showing that it came from some other source. Stylistically, you could accomplish all this with a special class on your paragraph tags… but that wouldn’t be as semantically useful, now, would it?<br> Blockquotes do have some styling by default. Most browsers will indent the text in a blockquote tag, which helps the user recognize that the text is different somehow. But who's to say that we need to stop there? Here are six different ways you could style your blockquotes using CSS.</p> </blockquote> </body> </html>
Πώς να χρησιμοποιήσετε το blockquote;
Διαπιστώθηκε ότι ορισμένα θέματα του WordPress δεν προσθέτουν στυλ αναφοράς στο αρχείο style.css.
Αντιγράψτε και επικολλήστε το ακόλουθο στυλ στρογγυλεμένης γωνίας μπλε φόντου στο αρχείο style.css του θέματος▼
blockquote, q {
font: bold 21px/1.5 Consolas,"Courier New","KaiTi","KaiTi_GB2312","FangSong_GB2312",SimHei,arial,Monaco,monospace;
color: #000;
margin: 1em;
margin-left: 2em;
margin-right: 2em;
padding: 3px;
max-width: 95%;
quotes: "\201C""\201D""\2018""\2019";
background: #C3F3F7;
border-radius: 20px;
}Τα στυλ αναφοράς καθορίζουν το κύριο κείμενο (μέγεθος, χρώμα), το χρώμα του φόντου, τα κενά, τα περιγράμματα κ.λπ...
στυλ περιγράμματος
Αυτό το στυλ είναι σχετικά απλό, δηλαδή ορίστε το αριστερό περίγραμμα και ορίστε το πάχος.Το χρώμα ελέγχει το χρώμα της γραμματοσειράς και το χρώμα φόντου ελέγχει το χρώμα του φόντου (ή την άμεση ομάδα φόντου).
Το περιθώριο ελέγχει την απόσταση από το στοιχείο του παραθύρου, η αριστερή πλευρά του περιγράμματος ελέγχει το στυλ του αριστερού περιγράμματος και το padding (ειδικά η αριστερή πλευρά του padding αριστερά) ελέγχει την απόσταση από το κείμενο στο (αριστερό) περίγραμμα.
Αυτό το στυλ είναι τόσο απλό όσο ένα απλό blog.
Αντιγράψτε και επικολλήστε το παρακάτω κίτρινο στυλ φόντου στο αρχείο style.css του θέματος▼
blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }
- Τα παραπάνω είναι 2 στυλ μπλοκ.
- Η προσθήκη πολλαπλών πανομοιότυπων στυλ θα αντικατασταθεί.
- Επομένως, επιλέξτε ένα από αυτά και προσθέστε το στο αρχείο style.css του θέματος.
Ιστολόγιο Hope Chen Weiliang ( https://www.chenweiliang.com/ ) κοινοποίησε το "Πώς να χρησιμοποιήσω το blockquote; HTML στο εφέ επίδειξης ετικέτας blockquote, για να σας βοηθήσει.
Καλώς ήρθατε να μοιραστείτε τον σύνδεσμο αυτού του άρθρου:https://www.chenweiliang.com/cwl-2123.html
Καλώς ήρθατε στο κανάλι Telegram του ιστολογίου του Chen Weiliang για να λαμβάνετε τις τελευταίες ενημερώσεις!
📚 Αυτός ο οδηγός περιέχει τεράστια αξία, 🌟Αυτή είναι μια σπάνια ευκαιρία, μην τη χάσετε! ⏰⌛💨
Κοινοποιήστε και κάντε like αν σας αρέσει!
Η κοινή χρήση και τα like σας είναι το συνεχές μας κίνητρο!