Home-theater-designers
CSS(Cascading Style Sheet)는 HTML이 화면에 요소를 표시하는 방법을 설명합니다. CSS는 몇 줄의 코드로 여러 웹 페이지의 레이아웃을 제어할 수 있습니다.
CSS에는 텍스트의 간격, 모양 및 정렬에 영향을 주는 서식 속성이 있습니다. 다음은 앱 페이지에서 텍스트 스타일을 지정하는 데 사용할 수 있는 몇 가지 속성입니다.
오늘의 메이크업 비디오
1. 텍스트 색상
그만큼 색상 속성은 텍스트의 기본 전경색을 지정합니다. 다음과 같이 미리 정의된 색상 이름을 사용할 수 있습니다. 빨간색 , 하얀색 , 또는 녹색 . 16진수 값이나 RGB, HSL 및 RGBA와 같은 다른 단위를 사용할 수도 있습니다.
같은 CSS 프레임워크 테일윈드 CSS 다양한 음영을 표시하는 내장 색상 기능이 있습니다. 이렇게 하면 원하는 음영을 더 쉽게 선택할 수 있습니다. 이러한 속성 중 일부를 사용하여 다음 제목의 색상을 변경해 보겠습니다.
<body>
<h1>Change My Color</h1>
<h2>Change My Color</h2>
<h3>Change My Color</h3>
<h4>Change My Color</h4>
</body>
CSS는 다음과 같이 표시됩니다.
h1 {
color: orange;
}
h2 {
color: #ff6600;
}
h3 {
color: rgb(255, 102, 0);
}
h4 {
color: hsl(24, 100%, 50%);
}
스타일이 지정된 텍스트는 다음과 같이 표시됩니다.
2. 배경색
당신은 사용할 수 있습니다 배경색 생성할 속성 매력적인 배경 . 다음 제목에 대해 다른 배경을 설정하는 데 사용합니다.
무료 휴대폰 잠금 해제 코드(완전히 합법)
<body>
<h1>Change My Background Color</h1>
<h2>Change My Background Color</h2>
<h3>Change My Background Color</h3>
<h4>Change My Background Color</h4>
</body>
다음 CSS 사용:
h1 {
background-color: orange;
}
h2 {
background-color: #009900;
}
h3 {
background-color: rgb(204, 0, 0);
}
h4 {
background-color: hsl(60, 100%, 50%);
}
브라우저가 이 페이지를 렌더링하면 다음과 같이 표시됩니다.
3. 텍스트 정렬
그만큼 텍스트 정렬 속성은 텍스트의 가로 정렬을 설정합니다. 이 값은 왼쪽 , 오른쪽 , 센터 , 또는 신이 옳다고 하다 .
justify 값은 텍스트의 각 줄을 늘이기 때문에 모두 오른쪽 및 왼쪽 여백에서 동일한 너비를 차지합니다. 다음 샘플 코드를 사용하여 이 네 가지 값을 탐색합니다.
0B322083CE9F7F58F83DC38E690708309822데베다른 정렬을 적용하려면 다음 CSS를 사용하십시오.
h1 {
text-align: left;
}
h2 {
text-align: right;
}
h3 {
text-align: center;
}
.ex4{
text-align: justify;
}
브라우저에서 다음과 같이 표시됩니다.
4. 텍스트 방향
그만큼 텍스트 방향 속성은 텍스트의 방향을 정의합니다. 속성을 사용하여 방향 정의 rtl (오른쪽에서 왼쪽으로) 또는 리터 (왼쪽에서 오른쪽으로). 이 두 가지는 텍스트를 흐르게 할 방향을 지정합니다.
예를 들어 rtl 히브리어나 아랍어처럼 오른쪽에서 왼쪽으로 쓰는 언어로 작업할 때. 너는 사용한다 리터 영어와 같이 왼쪽에서 오른쪽으로 쓰는 언어의 경우.
아래 코드로 이를 설명하겠습니다.
<body>
<div>
<p class='ex1'>This paragraph goes from right to left. The cursor
moves from right to left when you type more information on the
page.</p>
<p id="ex2">This paragraph goes from left to right. The cursor moves
from left to write when you type more information on the page!</p>
</div>
</body>
함께 제공되는 CSS:
.ex1 {
direction: rtl;
}
#ex2 {
direction: ltr;
}
최종 결과는 다음과 같습니다.
5. 텍스트 장식
그만큼 텍스트 장식 속성은 텍스트의 장식선 모양을 설정합니다. 의 줄임말입니다. 텍스트 장식 라인, 텍스트 장식 색상, 텍스트 장식 스타일 , 그리고 텍스트 장식 두께 재산. 링크가 있는 요소에 대한 속성을 원하지 않으면 다음을 사용하십시오. 텍스트 장식: 없음 ;
일반 텍스트에 밑줄을 긋는 스타일은 일반적으로 링크를 나타내므로 피해야 합니다. 다음 그림은 코드의 몇 가지 예를 보여줍니다.
<body>
<h1>Overline text decoration</h1>
<h2>Line-through text decoration</h2>
<h3>Underline text decoration</h3>
<p class="ex">Overline and underline text decoration.</p>
<p><a href="default.asp">This is a link</a></p>
</body>
이 CSS로 다양한 데코레이션 효과를 적용할 수 있습니다.
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
p.ex {
text-decoration: overline underline;
}
a {
text-decoration: none;
}
그러면 다음과 같이 표시됩니다.
6. 텍스트 변환
그만큼 텍스트 변환 속성은 문자가 나타나는 대소문자 유형을 지정합니다. 대문자 또는 소문자일 수 있습니다. 각 단어의 첫 글자를 대문자로 표시하는 데 사용할 수도 있습니다.
다음 예제에서는 코드에서 수행하는 방법을 보여줍니다.
<body>
<h1>Examples of text-transform property</h1>
<p class="uppercase">This sentence is in uppercase.</p>
<p class="lowercase">This sentence is in lower case.</p>
<p class="capitalize">Capitalize this text.</p>
</body>
CSS 파일:
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
결과는 다음과 같습니다.
7. 문자 간격
그만큼 문자 간격 속성은 텍스트의 문자 사이의 간격을 지정합니다. 다음 예는 다른 간격 스타일을 지정하는 방법을 보여줍니다.
<body>
<h1>Examples of Letter-spacing</h1>
<h2>This is heading 1</h2>
<h3>This is heading 2</h3>
</body>
CSS 파일에서 픽셀 또는 기타 측정 단위를 사용합니다.
h2 {
letter-spacing: 7px;
}
h3 {
letter-spacing: -2px;
}
그러면 결과 텍스트가 늘어나거나 줄어듭니다.
8. 단어 간격
그만큼 단어 간격 속성은 텍스트에서 단어 사이의 간격을 지정합니다. 브라우저에는 단어 사이의 표준 길이가 있지만 직접 설정할 수 있습니다. 다음 예는 단어 사이의 간격을 늘리거나 줄이는 방법을 보여줍니다.
<body>
<h1>Examples of the Word-spacing Property</h1>
<p>Normal word spacing.</p>
<p class="ex1">Large word spacing.</p>
<p class="ex2">Small word spacing.</p>
</body>
이 CSS 사용:
p.ex1 {
word-spacing: 1rem;
}
p.ex2 {
word-spacing: -0.3rem;
}
단어 간격의 효과를 명확하게 볼 수 있습니다.
9. 라인 높이
그만큼 선 높이 속성은 단락에서 줄 사이의 간격을 지정합니다. 대부분의 브라우저에서 표준 및 기본 줄 높이는 약 110%에서 120%입니다. 다음 코드는 이를 변경하는 방법을 보여줍니다.
<body>
<h1>Using line-height</h1>
<p>
Standard line-height.
Standard line-height.
</p>
<p class="small">
Small small line-height.
Small line-height
</p>
<p class="big">
Bigger line-height.
Bigger line-height.
</p>
</body>
다음 CSS 사용:
p.small {
line-height: 0.7;
}
p.big {
line-height: 1.8;
}
각 단락의 각 행 사이에 결과가 표시됩니다.
10. 텍스트 그림자
그만큼 텍스트 그림자 속성은 텍스트에 그림자를 적용합니다. 수평 그림자와 수직 그림자를 지정해야 합니다. 텍스트 그림자 색상 및 흐림 반경을 포함할 수 있습니다. 다음 코드로 이를 설명하겠습니다.
<body>
<h1>Examples of Text-shadow effect.</h1>
<h1 class="ex1">Text-shadow with color</h1>
<h1 class="ex2">Text-shadow with blur effect.</h1>
</body>
이 CSS로:
h1 {
text-shadow: 2px 2px;
}
.ex1 {
text-shadow: 2px 2px orange;
}
.ex2 {
text-shadow: 2px 2px 10px red;
}
일부 독특하고 흥미로운 효과를 생성합니다.
CSS 텍스트 스타일 속성을 배우는 이유는 무엇입니까?
CSS는 현대 웹 디자인의 중추입니다. 기본 형식이든 프레임워크이든 CSS 속성의 기본 기능은 동일합니다. 텍스트 서식 속성을 마스터하면 매력적이고 읽기 쉬운 사용자 인터페이스를 만들 수 있습니다.
CSS의 최신 버전인 CSS3는 애니메이션에서 다중 열 레이아웃에 이르기까지 새로운 개념을 도입합니다. 이러한 개념을 통해 전문적인 응용 프로그램과 문서를 보다 쉽게 만들 수 있습니다.