CSS 코드 형식
- 巴扎黑원래의
- 2017-08-09 15:48:371624검색
텍스트 레이아웃 – – 글꼴
CSS 스타일을 사용하여 웹 페이지 텍스트의 글꼴, 글꼴 크기, 색상 및 기타 스타일 속성을 설정할 수 있습니다. 다음 코드 구현을 살펴보겠습니다. 웹 페이지의 텍스트 글꼴을 송나라로 설정합니다.
body{font-family:"宋体";}1 여기서는 일반적이지 않은 글꼴을 설정하지 않도록 주의하세요. 설정한 글꼴이 사용자의 로컬 컴퓨터에 설치되어 있지 않으면 브라우저의 기본 글꼴이 표시되기 때문입니다. (설정한 글꼴 스타일을 사용자가 볼 수 있는지 여부는 설정한 글꼴이 사용자의 로컬 컴퓨터에 설치되어 있는지 여부에 따라 다릅니다.)
요즘 대부분의 웹 페이지에서는 다음과 같이 "Microsoft Yahei"를 설정하는 것을 선호합니다:
body{font-family:"Microsoft Yahei";}1또는
body{font-family:"微软雅黑";}1참고:첫 번째 방법이 두 번째 방법보다 호환성이 더 좋습니다.
이 글꼴은 아름답고 클라이언트에서 안전하게 표시할 수 있기 때문입니다(일반적으로 사용자의 로컬 컴퓨터에 기본적으로 설치됩니다).
예제
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>认识html标签</title><style type="text/css">body{ font-family:"Microsoft Yahei";}span{ font-family:"宋体";}</style></head><body> <h1>三年级</h1> <p>三年级<span id="stress">三年级</span>三年级</p> <p>三年级</p></body></html>1234567891011121314151617181920텍스트 레이아웃 – – 글꼴 크기, 색상
다음 코드를 사용하여 웹 페이지 텍스트의 글꼴 크기를 12픽셀로 설정하고 글꼴 색상을 #666으로 설정할 수 있습니다. (회색):
body{font-size:12px;color:#666}1예제
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>字号、颜色</title><style type="text/css">body{font-size:12px;color:#666;}.stress{font-size:20px;color:red;}</style></head><body> <h1>三年级</h1> <p>三年级<span class="stress">三年级</span>三年级</p> <p>三年级<span>三年级</span>三年级</p></body></html>12345678910111213141516텍스트 레이아웃 – – 굵게
또한 CSS 스타일을 사용하여 텍스트 스타일을 변경할 수 있습니다: 굵게, 기울임꼴, 밑줄, 취소선 다음 코드를 사용할 수 있습니다. 굵은 글씨로 표시되도록 텍스트를 설정합니다.
p span{font-weight:bold;}1여기서 볼 수 있듯이 텍스트에 굵은 글꼴을 설정하려면 별도의 CSS 스타일이 있어야 합니다. 굵은 글꼴 스타일을 얻기 위해 더 이상 h1-h6 또는 강한 태그를 사용할 필요가 없습니다.
Example
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>粗体签</title><style type="text/css">p span{font-weight:bold;}a{font-weight:bold;}</style></head><body> <h1>三年级时</h1> <p>三年级时<span class="stress">三年级时</span>三年级时<a href="http://www.imooc.com">三年级时</a>三年级时</p> <p>三年级时</p></body></html>12345678910111213141516텍스트 레이아웃 – – 기울임체
다음 코드는 브라우저에서 텍스트가 기울임꼴 스타일로 표시되도록 구현할 수 있습니다.
p a{font-style:italic;}<p> 三年级 <a> 四年级 </a> 五年级 </p>12Example
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>斜体样式</title><style type="text/css">p{ font-style:italic;
}a{ font-weight: bold; color: red; font-style: normal;}</style></head><body><p>三年级<a>三年级</a>三年级</p> </body></html>1234567891011121314151617181920텍스트 레이아웃 – – 밑줄
Some 시각적으로 텍스트를 강조할 수 있는 밑줄 스타일로 텍스트를 설정하려면 다음 코드를 사용하면 됩니다.
p a{text-decoration:underline;}<p> 三年级 <a> 四年级 </a> 五年级 </p>12Example
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>下划线样式</title><style type="text/css">a { text-decoration:underline;
}span { text-decoration:underline;}</style></head><body><p><span>三年级</span><a> 四年级 </a> 五年级 </p></body></html>123456789101112131415161718텍스트 레이아웃 – – 취소선
If 웹 페이지에서 설정하고 싶습니다. 취소선으로 무엇을 해야 할까요? 이 스타일은 전자상거래 웹사이트에서 자주 볼 수 있습니다:
위 그림의 원래 가격에 대한 취소선은 다음 코드를 사용하여 얻을 수 있습니다:
.oldPrice{text-decoration:line-through;}1 예
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>删除样式</title><style type="text/css">.oldPrice{text-decoration:line-through;}</style></head><body><p>原价：<span class="oldPrice">300</span>元 现价：230 元</p> </body></html>12345678910111213단락 레이아웃 – – 들여쓰기
중국어 텍스트에서는 단락 앞에 두 개의 공백을 두는 것이 관례입니다. 이 특별한 스타일은 다음 코드를 사용하여 구현할 수 있습니다.
p{text-indent:2em;}<p>1922年的春天，一个想要成名名叫尼克卡拉威（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p>12참고: 2em은 다음을 의미합니다. 텍스트 크기의 두 배입니다.
예
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>缩进样式</title><style type="text/css">p{text-indent:2em;};</style></head><body> <h1>尼克?卡拉威</h1> <p>1922年的春天，一个想要成名名叫尼克?卡拉威（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p>
<p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p></body></html>123456789101112131415단락 조판 – – 줄 간격(줄 높이)
이 섹션에서는 문단 조판에서 중요한 역할을 하는 또 다른 줄 간격(줄 높이) 속성(줄 높이)에 대해 알아봅니다. ), 다음 코드는 단락 줄 간격을 1.5배로 설정하는 것을 구현합니다.
p{line-height:1.5em;}<p>菲茨杰拉德，二十世纪美国文学巨擘之一。</p>12예
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>行间距</title><style type="text/css">p{line-height:2em;}</style></head><body><p>菲茨杰拉德，二十世纪美国文学巨擘之一。</p></body></html>12345678910111213단락 레이아웃 – – 한자 간격, 자간
한자 간격, 자 간격 설정:
웹에서 문자 간격 또는 을 설정하려는 경우 페이지 레이아웃 문자 간격 은 다음 코드와 같이 letter-spacing을 사용하여 구현할 수 있습니다.
h1{
letter-spacing:50px;
}...<h1>了不起的乔布斯</h1>12345참고: 이 스타일이 영어 단어에 사용될 때 문자 사이의 간격을 설정합니다.
단어 간격 설정:
영어 단어 사이의 간격을 설정하고 싶다면 어떻게 해야 하나요? 이는 단어 간격을 사용하여 달성할 수 있습니다. 다음 코드는
h1{
word-spacing:50px;
}...<h1>welcome to iOS!</h1>12345Example
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>字间距</title><style type="text/css">h1{ letter-spacing:20px;}</style></head><body><h1>hello world!你好！</h1></body></html>123456789101112131415Note
설정 요소가 영어인 경우 글자 간격 설정은 영어 단어 사이가 아닌 글자 사이의 간격으로 설정됩니다.
단락 레이아웃 – – 정렬
블록 요소에서 텍스트와 이미지의 중심 스타일을 설정하고 싶으십니까? 텍스트 정렬 스타일 코드를 사용하면 텍스트를 중앙에 표시할 수 있습니다.
h1{
text-align:center/left/right;
}<h1>了不起的乔布斯</h1>1234예
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>对齐</title><style type="text/css">div{ text-align:center;}</style></head><body><div><img src="http://img.com/2000200.jpg" alt="CSS 코드 형식" ></div></body></html>123456789101112131415
위 내용은 CSS 코드 형식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!