CSS 텍스트

QQ截图20161011145219.png

위 표의 속성은 하나씩 설명하지 않고 주로 모든 사람이 동시에 배우고 연습할 수 있도록 일반적으로 사용되는 몇 가지 속성만 설명합니다. 다른 콘텐츠를 직접 테스트할 수도 있고, w3c에서 각 속성의 특정 콘텐츠를 볼 수도 있습니다.

예시 1 color color

index.html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <p>查看颜色</p>
        <h1>标题查看颜色</h1>
    </body>
</html>

style.css

body{
   color: aqua;
}

실행 결과 :

QQ截图20161011145634.png

본문에 색상을 설정한 것을 볼 수 있는데, p 태그와 h1 태그도 다음과 같이 설정한 색상을 보여줍니다. 본문 글꼴 색상은 두 태그가 본문의 글꼴 색상을 상속함을 나타냅니다.

예제 2 text-align

text-align은 요소 정렬에서 텍스트 줄 간의 관계에 영향을 미치는 기본 속성입니다. 처음 3개 값은 매우 간단하지만 4번째와 5번째 값은 좀 더 복잡합니다.

left, right, center 값을 사용하면 요소의 텍스트가 각각 왼쪽 정렬, 오른쪽 정렬, 가운데 정렬됩니다.

서양어는 왼쪽에서 오른쪽으로 읽으며, 모든 text-align의 기본값은 왼쪽입니다. 텍스트는 왼쪽 테두리에 정렬되고 오른쪽 테두리에는 들쭉날쭉합니다("왼쪽에서 오른쪽으로" 텍스트라고 함). index.html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <p>php中文网</p>
    </body>
</html>

style.css

body{
   color: red;
   text-align: center;
}

실행 결과:

QQ截图20161011145702.png

예 3 텍스트 들여쓰기

텍스트 들여쓰기는 웹 페이지에서 단락의 첫 번째 줄을 들여쓰기하는 데 가장 일반적으로 사용되는 텍스트 서식 지정 효과 중 하나입니다. CSS는 텍스트 들여쓰기를 편리하게 구현할 수 있는 text-indent 속성을 제공합니다. text-indent 속성을 사용하면 모든 요소의 첫 번째 줄을 주어진 길이, 심지어 음수 값만큼 들여쓰기할 수 있습니다. 이 속성의 가장 일반적인 용도는 단락의 첫 번째 줄을 들여쓰는 것입니다. 다음 규칙은 모든 단락의 첫 번째 줄을 5em씩 들여쓰는 것입니다.

p {text-indent: 5em;}

아래 index.html의 코드는 다음과 같습니다. 🎜>

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <div>
            <h3>PHP中文网</h3>
            <p>最好的自学网站</p>
            <p>最好的自学网站</p>
            <p>最好的自学网站</p>
            <p>最好的自学网站</p>
         </div>
    </body>
</html>

이번에 CSS 수정을 추가하지 않으면. 표시되는 효과는 다음과 같습니다.

style.css 코드에 다음 들여쓰기를 추가하여 "Lab Building" 세 단어를 2바이트씩 들여씁니다.

 h3{
   text-indent: 5em;
 }

실행 결과:

QQ截图20161011145739.png

단어 간격

단어 간격 속성은 다음과 같습니다. 확인 문자(단어) 사이의 표준 간격을 변경합니다. 기본값인 Normal은 값을 0으로 설정하는 것과 같습니다.

단어 간격 속성은 양수 또는 음수 길이 값을 허용합니다. 양수 길이 값이 제공되면 단어 사이의 간격이 늘어납니다. 단어 간격에 음수 값을 설정하면 더 가까워집니다.

<html>
<body>
		<h1 style="word-spacing:15px;">设置中文字符间距</h1>
		<h1 style="word-spacing:15px;">this is a test</h1>
	</body>
</html>

문자 간격

letter-spacing 속성과 word-spacing의 차이점은 문자 간격은 문자 또는 문자 사이의 간격을 수정한다는 것입니다.

word-spacing 속성과 마찬가지로 letter-spacing 속성에도 가능한 값에는 모든 길이가 포함됩니다. 기본 키워드는 Normal입니다(letter-spacing:0과 동일). 입력된 길이 값은 지정된 양만큼 글자 사이의 간격을 늘리거나 줄입니다:

<html>
<head>
<style type="text/css">
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
</style>
</head>
<body>
<h1>php中文网</h1>
<h4>php中文网</h4>
</body>
</html>

문자 변환

text-transform 속성은 텍스트의 대소문자를 처리합니다. 이 속성에는 4개의 값이 있습니다:

없음
대문자
소문자
대문자

기본값 없음은 텍스트를 변경하지 않으며 소스 문서에서 원래 대문자를 사용합니다. 이름에서 알 수 있듯이 대문자와 소문자는 텍스트를 모두 대문자와 소문자로 변환합니다. 마지막으로 대문자는 각 단어의 첫 글자만 대문자로 표시합니다.

속성으로서 text-transform은 중요하지 않을 수 있지만 갑자기 모든 h1 요소를 대문자로 만들기로 결정한 경우 유용할 수 있습니다. 모든 h1 요소의 콘텐츠를 개별적으로 수정하는 대신 text-transform을 사용하면 됩니다.

h1 {text-transform: uppercase}

text-transform을 사용하면 두 가지 이점이 있습니다. 먼저, h1 요소 자체를 수정하지 않고 이 수정을 수행하기 위한 간단한 규칙을 작성하세요. 둘째, 나중에 모든 케이스를 원래 케이스로 다시 전환하기로 결정한 경우 수정을 완료하는 것이 더 쉬울 것입니다.

텍스트 장식

다음으로, 많은 흥미로운 동작을 제공하는 매우 흥미로운 속성인 텍스트 장식 속성에 대해 논의합니다.

텍스트 장식에는 5가지 값이 있습니다:

없음
밑줄
overline
line-through
깜박임

역시 밑줄은 요소에 밑줄이 그어짐 , HTML의 U 요소와 같습니다. overline은 정반대의 작업을 수행하고 텍스트 상단에 윗줄을 그립니다. line-through 값은 HTML의 S 및 Strike 요소와 동일하게 텍스트 중간에 관통 선을 그립니다. 깜박임은 Netscape에서 지원하는 깜박임 태그와 유사하게 텍스트를 깜박이게 합니다.

none 값은 원래 요소에 적용된 모든 장식을 끕니다. 일반적으로 일반 텍스트가 기본 모양이지만 항상 그런 것은 아닙니다. 예를 들어, 링크에는 기본적으로 밑줄이 그어져 있습니다. 하이퍼링크의 밑줄을 제거하려면 다음 CSS를 사용하면 됩니다.

a {text-decoration: none;}

참고: 링크의 밑줄을 제거하기 위해 이러한 규칙을 명시적으로 사용하는 경우 앵커와 일반 텍스트 사이의 유일한 시각적 차이점은 색상입니다(적어도 이것이 기본값이지만 반드시 그렇지 않다는 보장은 없습니다). 색상은 동일합니다) 차이).

하나의 규칙으로 여러 장식을 결합할 수도 있습니다. 모든 하이퍼링크에 밑줄과 윗줄을 모두 표시하려면 규칙은 다음과 같습니다:

a:link a:visited {text-decoration: underline overline;}

그러나 두 개의 서로 다른 장식이 동일한 요소와 일치하는 경우 승리 규칙의 값은 정확히 바꾸기입니다. 또 다른 가치. 다음 규칙을 고려하세요:

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

주어진 규칙에 대해, 끈적끈적 클래스가 있는 모든 h2 요소에는 하나의 관통선 장식만 있고 밑줄이나 윗줄은 없습니다. 왜냐하면 텍스트 장식 값이 Accumulate 대신 대체되기 때문입니다.

공백 처리

white-space 속성은 사용자 에이전트가 소스 문서에서 공백, 줄 바꿈 및 탭 문자를 처리하는 데 영향을 줍니다.

이 속성을 사용하면 브라우저가 단어 사이와 텍스트 줄 사이의 공백을 처리하는 방법에 영향을 줄 수 있습니다. 어느 정도 기본 XHTML 처리에서는 이미 공백을 처리합니다. 모든 공백 문자를 단일 공백으로 병합합니다. 따라서 다음 마크업이 주어지면 웹 브라우저에 표시될 때 각 단어 사이에 공백 하나만 표시되고 요소의 줄 바꿈은 무시됩니다.

<p>This     paragraph has    many
    spaces           in it.</p>

이 기본값은 다음 선언을 사용하여 명시적으로 설정할 수 있습니다. 동작:

p {white-space: normal;}

위 규칙은 브라우저에 일반적인 작업을 수행하도록 지시합니다. 즉, 추가 공백을 삭제합니다. 이 값을 지정하면 개행 문자(캐리지 리턴)가 공백으로 변환되고, 한 줄에 여러 공백이 연속적으로 있으면 단일 공백으로 변환됩니다.

텍스트 방향

영어로 책을 읽으면 왼쪽에서 오른쪽으로, 위에서 아래로 읽는 것이 영어입니다. 흐름 방향. 그러나 이것이 모든 언어에 해당되는 것은 아닙니다. 우리는 고대 중국어는 오른쪽에서 왼쪽으로 읽는다는 것을 알고 있으며, 물론 히브리어와 아랍어는 오른쪽에서 왼쪽으로 읽습니다. CSS2는 방향성을 설명하는 속성을 도입했습니다.

방향 속성은 블록 수준 요소의 텍스트 쓰기 방향, 테이블의 열 레이아웃 방향, 콘텐츠가 요소 상자를 가로로 채우는 방향, 양쪽 맞춤 요소의 마지막 줄 위치에 영향을 줍니다. .

참고: 인라인 요소의 경우 방향 속성은 unicode-bidi 속성이 embed 또는 bidi-override로 설정된 경우에만 적용됩니다.

direction 속성에는 ltr과 rtl이라는 두 가지 값이 있습니다. 대부분의 경우 기본값은 왼쪽에서 오른쪽으로 텍스트를 표시하는 ltr입니다. 오른쪽에서 왼쪽으로 텍스트를 표시하는 경우 rtl 값을 사용해야 합니다.

지속적인 학습

새로운 파일

<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div> <h3>PHP中文网</h3> <p>最好的自学网站</p> <p>最好的自学网站</p> <p>最好的自学网站</p> <p>最好的自学网站</p> </div> </body> </html>

제출하다 코드 재설정

자동운전