Yuav siv blockquote li cas? HTML blockquote tag demo effect

WordPressHauv tsab xov xwm kho, muaj ib qho "block quote" khawm ▼

Yuav siv blockquote li cas? HTML blockquote tag demo effect

Thaum siv, nws ntxiv aKos npe hu rau qee cov lus hais los yog qhov tseem ceeb.

Blockquote txhais li cas?

Hauv qab no yogChen WeiliangCitation style rau blogs:

Lub blockquote XHTML tag yog ib qho tseem ceeb heev (yog tias qee qhov siv tsis tau) lub caij.Semantically, blockquote yuav tsum siv thaum twg koj tab tom hais cov ntawv ntev dua los ntawm lwm qhov chaw (lwm tus neeg hais lus, lwm lub vev xaib, thiab lwm yam).Qhov no yog ib txoj hauv kev los txiav cov ntawv thiab tso nws nrog lwm qhov chaw.
Style-wise, koj tuaj yeem ua txhua yam no nrog cov chav kawm tshwj xeeb ntawm kab ntawv cim npe ... tab sis qhov ntawd tsis muaj txiaj ntsig, tam sim no, puas yog? Blockquotes muaj qee cov qauv los ntawm lub neej ntawd.
Feem ntau browsers indent ntawv hauv blockquote tags, uas pab cov neeg siv txheeb xyuas cov ntawv hauv qee txoj kev.Tab sis leej twg hais tias peb yuav tsum nres ntawd?Nov yog yuav ua li cas rau style koj blockquotes nrog CSS.

Test test-css.html thiab ntxiv css seem rau html lub cev:

<!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>

Yuav siv blockquote li cas?

Nws pom tias qee cov ntsiab lus WordPress tsis ntxiv cov qauv siv hauv cov ntaub ntawv style.css.

Luam thiab muab tso rau hauv qab no xiav keeb kwm yav dhau puag ncig lub kaum sab xis rau hauv cov ntaub ntawv style.css ntawm lub ntsiab▼

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;
}

Kev siv cov qauv txiav txim siab lub cev ntawv (qhov loj me, xim), xim tom qab, qhov chaw dawb, ciam teb, thiab lwm yam ...

ciam teb style

Cov style no yog qhov yooj yim, uas yog, teeb tsa sab laug ciam teb thiab teeb lub thickness.Xim tswj cov xim font, thiab xim keeb kwm yav dhau los tswj cov xim tom qab (los yog pab pawg tom qab ncaj qha).

Cov npoo tswj tau qhov kev ncua deb ntawm lub qhov rais, sab laug ntawm ciam teb tswj cov ciam teb sab laug, thiab cov padding (tshwj xeeb tshaj yog sab laug ntawm lub padding sab laug) tswj qhov kev ncua deb ntawm cov ntawv mus rau (sab laug) ciam teb.

Qhov style no yog qhov yooj yim li blog yooj yim.

Luam thiab muab cov xim daj tom qab hauv qab no rau hauv cov ntaub ntawv style.css ntawm lub ntsiab▼

blockquote {
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px solid #fce27c;
background-color: #f6ebc1; }
blockquote p {
margin: 0; }
  • Cov saum toj no yog 2 blockquote styles.
  • Ntxiv ntau yam zoo tib yam yuav raug sau.
  • Yog li, thov xaiv ib qho ntawm lawv thiab ntxiv rau lub ntsiab lus style.css cov ntaub ntawv.

Cia siab Chen Weiliang Blog ( https://www.chenweiliang.com/ ) shared "Yuav siv blockquote li cas? HTML hauv blockquote tag demo nyhuv, pab koj.

Zoo siab txais tos los qhia qhov txuas ntawm kab lus no:https://www.chenweiliang.com/cwl-2123.html

Zoo siab txais tos rau Telegram channel ntawm Chen Weiliang blog kom tau txais qhov hloov tshiab tshiab!

🔔 Ua thawj tus tau txais txiaj ntsig "ChatGPT Content Marketing AI Tool Usage Guide" hauv cov npe saum toj kawg nkaus channel! 🌟 ib
📚 Daim ntawv qhia no muaj nuj nqis loj, 🌟Qhov no yog lub sijhawm tsis tshua muaj, tsis txhob nco nws! ⏰⌛💨
Share thiab like yog tias koj nyiam!
Koj qhov kev sib koom thiab kev nyiam yog peb qhov kev txhawb nqa tas mus li!

 

评论 评论

Koj email chaw nyob yuav tsis tsum luam tawm. Yuav tsum tau siv cov liaj teb * Ntaus Cim

scroll rau saum