CSS 텍스트


CSS 텍스트형식

텍스트 형식

이 텍스트는 일부 텍스트 형식 속성으로 스타일이 지정되었습니다. 제목은 텍스트 정렬, 텍스트를 사용합니다. -변환 및 색상 속성. 단락이 들여쓰기되고 정렬되며 문자 사이의 공백이 지정됩니다. "사용해 보세요" 링크에서 밑줄이 제거됩니다.

텍스트 색상

color 속성은 텍스트의 색상을 설정하는 데 사용됩니다.

색상은 대부분 CSS를 통해 지정됩니다.

  • 16진수 값 ​​- 예: "#FF0000"

  • RGB 값 - "RGB(255,0,0)"

  • 색상 이름 - 예: "red"

CSS 색상 참조 값 풀 컬러 값을 봅니다.

웹 페이지의 배경색은 본문 내 선택을 나타냅니다.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p>
<p class="ex">This is a paragraph with class="ex". This text is blue.</p>
</body>
</html>

Running Instance»

온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요

1.gifW3C 표준 CSS의 경우: 색상 속성을 정의하는 경우 배경색 속성도 정의해야 합니다. .

텍스트 정렬

텍스트 정렬 속성은 텍스트의 가로 정렬을 설정하는 데 사용됩니다. <… 왼쪽 및 오른쪽 여백은 정렬(예: 잡지 및 신문)입니다.

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>
</head>

<body>
<h1>CSS text-align 实例</h1>
<p class="date">2015 年 3 月 14 号</p>
<p class="main">“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”</p>
<p><b>注意：</b> 重置浏览器窗口大小查看 "justify" 是如何工作的。</p>
</body>

</html>

인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

텍스트 장식

텍스트 장식 속성은 텍스트 장식을 설정하거나 삭제하는 데 사용됩니다.

디자인 관점에서 볼 때 텍스트 장식 속성은 주로 링크의 밑줄을 제거하는 데 사용됩니다.

예

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
a {text-decoration:none;}
</style>
</head>

<body>
<p>链接到: <a href="http://www.php.cn">php中文网</a></p>
</body>

</html>

인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
다음과 같이 텍스트를 장식할 수도 있습니다.

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>

</html>

인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

링크가 아닌 텍스트는 강조표시하면 사용자에게 혼란을 줄 수 있으므로 권장하지 않습니다.

텍스트 변환

텍스트 변환 속성은 텍스트에 대문자와 소문자를 지정하는 데 사용됩니다.

은 모든 단어를 대문자 또는 소문자로 만들거나 각 단어의 첫 글자를 대문자로 만드는 데 사용할 수 있습니다.

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>

<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

텍스트 들여쓰기

텍스트 들여쓰기 속성은 텍스트 첫 줄의 들여쓰기를 지정하는 데 사용됩니다.

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p {text-indent:50px;}
</style>
</head>
<body>

<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

예제 더보기

문자 사이의 간격 지정
이 예에서는 문자 사이의 간격을 늘리거나 줄이는 방법을 보여줍니다.

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

줄 사이의 간격 지정
이 예는 단락에서 줄 사이의 간격을 지정하는 방법을 보여줍니다.

예

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p.small {line-height:70%;}
p.big {line-height:200%;}
</style>
</head>

<body>
<p>
This is a paragraph with a standard line-height.<br>
This is a paragraph with a standard line-height.<br>
The default line height in most browsers is about 110% to 120%.<br>
</p>

<p class="small">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</p>

<p class="big">
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
</p>

</body>
</html>

예제 실행»

온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요

요소의 텍스트 방향 설정
이 예에서는 텍스트 방향을 변경하는 방법을 보여줍니다. 요소의.

인스턴스

<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
div.ex1 {direction:rtl;}
</style>
</head>
<body>

<div>一些文本。 默认书写方向</div>
<div class="ex1">一些文本。从右到左的书写方向。</div>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

단어 사이의 공백 늘리기
이 예는 단락에서 단어 사이의 공백을 늘리는 방법을 보여줍니다.

인스턴스

<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
p
{ 
	word-spacing:30px;
}
</style>
</head>
<body>

<p>
This is some text. This is some text.
</p>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

요소 내 텍스트 줄 바꿈 비활성화

이 예에서는 요소 내 텍스트 줄 바꿈을 비활성화하는 방법을 보여줍니다.

인스턴스

<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
p
{
	white-space:nowrap;
}
</style>
</head>
<body>

<p>
这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
</p>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

이미지 수직 정렬
이 예에서는 텍스트에 수직 정렬 이미지를 설정하는 방법을 보여줍니다.

인스턴스

아아아아

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

텍스트 그림자 추가
이 예에서는 텍스트를 설정하는 방법을 보여줍니다. 그림자.

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}
</style>
</head>

<body>
<p>An <img src="https://img.php.cn/upload/article/000/000/015/5c67d9134b166854.png" alt="php中文网" width="80" height="50" /> image with a default alignment.</p> 
<p>An <img class="top" src="https://img.php.cn/upload/article/000/000/015/5c67d9134b166854.png" alt="php中文网" width="80" height="50" /> image with a text-top alignment.</p> 
<p>An <img class="bottom" src="https://img.php.cn/upload/article/000/000/015/5c67d9134b166854.png" alt="php中文网" width="80" height="50" /> image with a text-bottom alignment.</p>
</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

모든 CSS 텍스트 속성.

属性描述
color设置文本颜色
direction设置文本方向。
letter-spacing设置字符间距
line-height设置行高
text-align对齐元素中的文本
text-decoration向文本添加修饰
text-indent缩进元素中文本的首行
text-shadow设置文本阴影
text-transform控制元素中的字母
unicode-bidi设置或返回文本是否被重写 
vertical-align设置元素的垂直对齐
white-space设置元素中空白的处理方式
word-spacing设置字间距
←
→