집 >웹 프론트엔드 >CSS 튜토리얼 >CSS란 무엇입니까? 세 가지 CSS 스타일 및 텍스트 속성 소개

CSS란 무엇입니까? 세 가지 CSS 스타일 및 텍스트 속성 소개

不言원래의: 2018-08-09 15:31:552702검색

이 글에서는 CSS가 무엇인지 소개합니다. 세 가지 CSS 스타일과 텍스트 속성에 대한 소개는 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

CSS란 무엇인가요?

캐스케이딩 스타일 시트(CSS라고도 함), 계단식 스타일 시트.
HTML 파일을 수정하고 웹 페이지 요소에 대한 조판 또는 크기 제어와 같은 작업을 수행하는 데 사용됩니다.
즉, HTML 파일은 웹페이지의 콘텐츠를 채우고 CSS는 콘텐츠의 성능을 제어합니다
예: 요소의 크기, 웹 페이지의 요소 위치, 요소의 배경 및 기타 속성.

CSS 코드는 어디에 작성되어 있나요?

1 인라인 스타일(inline): CSS 코드는 html 태그에 작성할 수 있습니다. style="css style"을 사용하세요.

<p style="color: red;">这是一个段落</p>

2 내부 스타일:

스타일 태그에 CSS 코드를 작성하세요
이론적으로 스타일 태그는 문서의 어느 곳에나 작성하여 적용할 수 있지만 우리는 모두 헤드 태그에 스타일을 작성하겠습니다

<html>
    <head>        ...
        <style type="text/css">
            css样式
        </style>
    </head>
</html>

3 외부 스타일:

외부 스타일은 CSS 코드를 별도의 CSS 파일에 작성하는 것입니다. (CSS 접미사 파일) 중간
그런 다음 링크 태그를 사용하여 외부 스타일 파일을 소개하세요
외부 스타일 파일에는 스타일 태그가 필요 없으며 CSS 코드를 직접 작성하면 됩니다

<html>
    <head>        ...
        <link rel="stylesheet" type="text/css" href="css文件路径" />
    </head>
</html>

세 가지 스타일을 동시에 여러 가지 방법으로 사용할 수 있습니다

텍스트 속성: 글꼴 속성

1 글꼴 크기: 글꼴- size

설정 글꼴의 크기, px, em, pt 등 단위가 있는 값을 사용합니다.

font-size: 12px;

2 글꼴 색상: color

color: red;

3 글꼴 스타일 :font-family

송나라, 야헤이 등의 글꼴을 설정하세요.
여러 값을 가질 수 있습니다
하지만 글꼴 스타일은 하나만 표시됩니다
첫 번째 글꼴을 사용할 수 있으면 첫 번째 글꼴을 사용하고, 그렇지 않으면 두 번째 글꼴을 사용하세요
두 번째 글꼴을 사용할 수 없으면 세 번째 글꼴을 사용하세요.
값이 영어 쉼표로 구분되거나 여러 단어인 경우 영어 큰따옴표로 묶어야 합니다.

normal기본값, 굵은 글씨 없음

boldboldervalue

font-family: "宋体",Times,"New Century Schoolbook";

5 텍스트 케이스: text-transform 확인 값 선택Description


Bold, 굵은 글씨보다 효과가 더 확실함
100~90 0 단위값 없음, 일반적으로 100 ~500은 일반 효과, 600~900은 굵게, 값이 클수록 글꼴이 굵어집니다

none기본값, 효과 없음

capitalize첫 글자는 대문자대문자모두 대문자소문자모두 소문자

font-weight: bold;

6 텍스트 가로 정렬: text-align선택적 값 설명

left기본값, 왼쪽 정렬

right오른쪽 정렬중심중심 정렬justify양쪽 끝 정렬

text-transform: capitalize;

7 텍스트 세로 정렬선택 값description

baseline 기본값. 요소는 상위 요소의 기준선에 배치됩니다.

sub텍스트의 아래 첨자를 수직으로 정렬합니다.super텍스트의 위 첨자를 수직으로 정렬합니다.top 행에서 가장 높은 요소가 있는 요소 요소의 상단을 정렬text-top요소의 상단을 상위 요소 글꼴의 상단과 정렬middle이 요소를 상위 요소의 중간bottom요소의 상단 정렬 행에서 가장 낮은 요소의 상단을 정렬text-bottom요소의 하단을 상위 요소의 하단과 정렬 fontinherit 수직 정렬 속성의 값이 상위 요소 에서 상속되어야 함을 지정합니다. 요소가 인라인 또는 인라인 블록에 속하는 경우에만 수직 정렬 속성이 작동합니다.

text-align: left;

8 텍스트 장식선택적 값description

없음밑줄 없음

밑줄overline Line-through가운데 전체(취소선)


	line-through
	text-decoration: underline; 9 首行缩进: text-indent 该属性接受一个带单位的值规定文本首行缩进多少个单位的空间只对第一行有缩进，而且只用于块元素 text-indent: 2em; text-indent的属性值一般会使用em作为单位，因为一般缩进都以多少个字符为标准 10字间距: letter-spacing 该属性接受一个带单位的值规定每个字符之间间隔多少个单位的空间 letter-spacing: 1em; 11 词间距: word-spacing 该属性接受一个带单位的值规定每个单词之间间隔多少个单位的空间该属性对中文无效相关文章推荐：鼠标划过字体时如何用css来实现字体变色？（代码实测） css三栏布局的三种实现方式（圣杯布局、双飞翼布局、Flex布局）

line-through

text-decoration: underline;

9 首行缩进: text-indent

该属性接受一个带单位的值
规定文本首行缩进多少个单位的空间
只对第一行有缩进，而且只用于块元素

text-indent: 2em;

text-indent的属性值一般会使用em作为单位，因为一般缩进都以多少个字符为标准

10字间距: letter-spacing

该属性接受一个带单位的值
规定每个字符之间间隔多少个单位的空间

letter-spacing: 1em;

11 词间距: word-spacing

该属性接受一个带单位的值
规定每个单词之间间隔多少个单位的空间
该属性对中文无效

CSS란 무엇입니까? 세 가지 CSS 스타일 및 텍스트 속성 소개

관련 기사