블록 인용을 사용하는 방법? HTML 블록 인용 태그 데모 효과

워드프레스(WordPress)기사 편집에는 공통 "블록 인용"버튼이 있습니다▼

블록 인용을 사용하는 방법? HTML 블록 인용 태그 데모 효과

사용하면 추가됩니다.일부 인용문 또는 강조표시를 호출하는 마커입니다.

blockquote은 무슨 뜻인가요?

다음은천 웨이량블로그 인용 스타일:

blockquote XHTML 태그는 (일부 활용도가 낮은 경우) 매우 유용한 요소입니다.의미상으로 다른 출처(다른 발표자, 다른 웹사이트 등)에서 더 긴 텍스트를 인용할 때마다 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>

블록 인용을 사용하는 방법?

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

참조 스타일은 본문 텍스트(크기, 색상), 배경색, 공백, 테두리 등을 결정합니다.

테두리 스타일

이 스타일은 상대적으로 간단합니다. 즉, 왼쪽 테두리를 설정하고 두께를 설정합니다.색상은 글꼴 색상을 제어하고 배경 색상은 배경 색상(또는 직접 배경 그룹)을 제어합니다.

여백은 창 요소까지의 거리를 제어하고 테두리의 왼쪽은 왼쪽 테두리 스타일을 제어하며 패딩(특히 왼쪽 여백의 왼쪽)은 텍스트에서 (왼쪽) 테두리까지의 거리를 제어합니다.

이 스타일은 단순한 블로그처럼 간단합니다.

다음 노란색 배경 스타일을 테마의 style.css 파일에 복사하여 붙여넣기▼

blockquote {
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px solid #fce27c;
background-color: #f6ebc1; }
blockquote p {
margin: 0; }
  • 위는 2개의 인용구 스타일입니다.
  • 동일한 스타일을 여러 개 추가하면 덮어씁니다.
  • 따라서 그 중 하나를 선택하여 테마의 style.css 파일에 추가하십시오.

희망 첸 웨이량 블로그( https://www.chenweiliang.com/ ) 공유 "블록 인용을 사용하는 방법? 당신을 돕기 위해 blockquote 태그 데모 효과의 HTML.

이 기사의 링크를 공유하는 것을 환영합니다:https://www.chenweiliang.com/cwl-2123.html

최신 업데이트를 받으려면 Chen Weiliang 블로그의 Telegram 채널에 오신 것을 환영합니다!

🔔 채널 상위 디렉토리에서 귀중한 "ChatGPT 콘텐츠 마케팅 AI 도구 사용 가이드"를 가장 먼저 받아보세요! 🌟
📚 이 가이드에는 엄청난 가치가 담겨 있습니다. 🌟이것은 흔치 않은 기회입니다. 놓치지 마세요! ⏰⌛💨
당신이 원한다면 공유하고 좋아하십시오!
당신의 공유와 좋아요는 우리의 지속적인 동기 부여입니다!

 

发表 评论

귀하의 이메일 주소는 공개되지 않습니다. 必填 项 已 用 * 标注

맨위로 스크롤