CSS 코드 형식-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 코드 형식

巴扎黑

Aug 09, 2017 pm 03:48 PM

css체재

텍스트 레이아웃 – – 글꼴

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 id="三年级">三年级</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 id="三年级">三年级</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 id="三年级时">三年级时</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>12

Example

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

Example

<!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 웹 페이지에서 설정하고 싶습니다. 취소선으로 무엇을 해야 할까요? 이 스타일은 전자상거래 웹사이트에서 자주 볼 수 있습니다:
CSS 코드 형식

위 그림의 원래 가격에 대한 취소선은 다음 코드를 사용하여 얻을 수 있습니다:

 .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 id="尼克-卡拉威">尼克?卡拉威</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 id="了不起的乔布斯">了不起的乔布斯</h1>12345

참고: 이 스타일이 영어 단어에 사용될 때 문자 사이의 간격을 설정합니다.

단어 간격 설정:

영어 단어 사이의 간격을 설정하고 싶다면 어떻게 해야 하나요? 이는 단어 간격을 사용하여 달성할 수 있습니다. 다음 코드는

h1{
    word-spacing:50px;
}...<h1 id="welcome-nbsp-to-nbsp-iOS">welcome to iOS!</h1>12345

Example

<!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 id="hello-nbsp-world-你好">hello world!你好！</h1></body></html>123456789101112131415

Note
설정 요소가 영어인 경우 글자 간격 설정은 영어 단어 사이가 아닌 글자 사이의 간격으로 설정됩니다.

단락 레이아웃 – – 정렬

블록 요소에서 텍스트와 이미지의 중심 스타일을 설정하고 싶으십니까? 텍스트 정렬 스타일 코드를 사용하면 텍스트를 중앙에 표시할 수 있습니다.

h1{
    text-align:center/left/right;
}<h1 id="了不起的乔布斯">了不起的乔布斯</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="/static/imghwm/default1.png"  data-src="http://img.com/2000200.jpg"  class="lazy"    alt="CSS 코드 형식" ></div></body></html>123456789101112131415

위 내용은 CSS 코드 형식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는