기사 디렉토리
워드 프레스 게시글 편집 에는 흔히 볼 수 있는 "인용문 블록" 버튼이 있습니다 ▼
사용하면 추가됩니다.일부 인용문 또는 강조표시를 호출하는 마커입니다.
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 파일에 추가하십시오.
Chen Weiliang님의 블로그( https://www.chenweiliang.com/ ) 에 공유된 "blockquote 사용법? HTML에서 blockquote 태그 사용법 예시"라는 글이 여러분께 도움이 되기를 바랍니다.
이 기사 링크( https://www.chenweiliang.com/cwl-2123.html )를 자유롭게 공유해 주세요.