문서 나 텍스트에 밑줄을 긋는 것은 항상 쉬운 일로 간주됩니다. 하지만 웹 사이트의 경우를 고려해 보면 아직 쉽지 않을까요? 우리 중 대부분은 그렇다고 대답하지만 일부 맞춤 디자인을 포함하는 수평선을 만드는 것은이 간단한 작업을 지루하게 만듭니다. 다음과 같은 방식으로 CSS를 사용한 텍스트 장식의 여정을 시작하겠습니다.
텍스트 장식이란 무엇입니까?
텍스트의 장식 선 모양을 설정합니다. 다음에 대한 속기 속성입니다.
- 텍스트 장식 라인
- 텍스트 장식 색상
- 텍스트 장식 스타일
긴 문자를 나타내는 하나 이상의 공백으로 구분 된 값으로 지정됩니다.xt 장식 속성.
통사론:
텍스트 장식 : || ||
어디,
텍스트 장식 라인 : 다음과 같이 사용되는 장식의 종류를 설정하는 데 사용됩니다.밑줄, 윗줄 및 줄 쓰루.
텍스트 장식 색상 :장식의 색상을 설정하는 데 사용됩니다.
텍스트 장식 스타일 : 다음과 같은 선의 스타일을 설정하는 데 사용됩니다.실선, 물결 모양, 점선, 점선, 이중
CSS의 텍스트 장식 유형
- 윗줄 :
#decoration {text-decoration : overline} 
- 라인 스루 :
#decoration {text-decoration : line-through}- 밑줄:
#decoration {text-decoration : underline}- 콤비네이션:
#decoration {text-decoration : underline line-through overline}산출:
CSS를 사용한 텍스트 장식 : 코드
암호:
Java에서 double을 정수로 변환하는 방법
CSS 코드 :
#overline {text-decoration : 물결 모양 윗줄 라임} #underover {text-decoration : 점선 밑줄 윗줄} # 점선 {text-decoration : 밑줄 윗줄 점선 빨간색} #wavy {text-decoration : line-through wavy}산출:
텍스트 장식 건너 뛰기
text-decoration-skip으로 알려진 속성은 텍스트가 윗줄, 줄을 넘기고 밑줄을 긋는 곳에 사용할 수도 있습니다. 텍스트 장식에 도움이됩니다. 어 센더와 디 센더를 통과 할 때 윗줄과 밑줄이 그려지는 방식을 지정합니다.
#decoration {text-decoration-skip : ink}텍스트 장식 건너 뛰기와 함께 사용할 수있는 값은 다음과 같습니다.
사물 : (기본값) line은 이미지 또는 인라인 블록 요소와 같은 인라인 개체를 건너 뜁니다.
없음 : 선은 모든 것을 교차합니다.
공백 : 장식 선은 공백, 단어 구분 문자 및 문자 간격 또는 단어 간격으로 설정된 모든 공백을 건너 뜁니다.
잉크 : 장식 선은 글리프, 디 센더 또는 어 센더를 건너 뜁니다.
가장자리 : 장식 선은 내용의 시작 가장자리 약간 뒤에서 시작하여 내용의 끝 가장자리 약간 앞에서 끝납니다.
상자 장식 : 장식 선은 상속 된 여백, 테두리 및 패딩을 건너 뜁니다.
이 속성은 어떤 브라우저에서도 지원되지 않으므로 데모는 없지만 아래 이미지에는 text-decoration-skip이 구현 된 후 각 값이 어떻게 보일 수 있는지에 대한 예제가 있습니다.
이것으로, 우리는 CSS를 사용한 텍스트 장식 블로그의 끝입니다. 이 주제와 관련하여 질문이 있으시면 아래에 의견을 남겨 주시면 연락 드리겠습니다.
우리를 확인하십시오 강사 주도의 라이브 교육 및 실제 프로젝트 경험과 함께 제공됩니다. 이 교육을 통해 백엔드 및 프런트 엔드 웹 기술을 다루는 기술을 능숙하게 사용할 수 있습니다. 여기에는 웹 개발, jQuery, Angular, NodeJS, ExpressJS 및 MongoDB에 대한 교육이 포함됩니다.
초보자를위한 pl SQL 자습서
질문이 있으십니까? 'CSS를 사용한 텍스트 장식'블로그의 댓글 섹션에 언급 해 주시면 다시 연락 드리겠습니다.