CSS 스타일을 설정하는 방법

CSS 스타일은 웹 콘텐츠 형식을 지정하는 데 사용되는 언어입니다. CSS 스타일은 텍스트, 색상, 배경색, 정렬, 간격, 테두리 및 기타 웹 디자인 관련 스타일을 설정하는 데 사용됩니다. 대부분의 경우 CSS 스타일을 설정하면 웹사이트를 더욱 현대적이고 아름답고 사용하기 쉽게 만들 수 있습니다. 다음은 CSS 스타일을 지정하는 방법에 대한 몇 가지 기본 정보입니다.

1. 인라인 스타일

인라인 스타일은 HTML 요소에 CSS 스타일을 직접 작성하는 방법입니다. 이 접근 방식은 개별 요소에 유용하며 태그의 "style" 속성을 사용하여 구현할 수 있습니다. 예를 들어, 다음 코드는 인라인 CSS 스타일을 사용하여 단락의 텍스트 색상과 글꼴 크기를 설정합니다.

f4130bb7bc135aef37eb02b2dc13d1bbThis is a단락.0cba36f12cf561cef14ffa62bcdafa2c

이 코드에서 "style" 속성은 다음 스타일을 설정합니다.

“color: red;”设置颜色为红色
“font-size: 18px;”设置字体大小为 18 像素。

2. 포함된 스타일

포함된 스타일은 HTML 파일의 "head" 태그에 CSS 스타일을 작성하는 방법입니다. 이 방법을 사용하면 문서 전체에 동일한 스타일을 사용할 수 있으므로 대규모 웹 사이트에 유용합니다. 다음은 인라인 CSS 스타일의 예입니다.

93f0f5c25f18dab9d176bd4f6de5d30e
c9ccee2e6ea535a969eb3f532ad9fe89

p {
  color: blue;
  font-size: 16px;
}

531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

e388a4556c0f65e1904146cc1a846bee이것은 단락입니다. .94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956

이 코드에서 "p" 선택기는 위의 단락을 포함하여 모든 "p" 요소에 스타일을 적용합니다. 이 두 가지 CSS 스타일은 텍스트 색상을 파란색으로 설정하고 글꼴 크기를 16픽셀로 설정합니다.

3. 외부 스타일 시트

외부 스타일 시트는 CSS 스타일을 별도의 CSS 파일에 저장하는 방법입니다. 이 접근 방식은 여러 웹 페이지가 동일한 스타일을 사용할 때 유용하며 HTML 파일을 더 쉽게 읽고 유지 관리할 수 있습니다. 다음은 외부 CSS 스타일시트의 예입니다.

별도의 "style.css" 파일에서 다음과 같이 여러 스타일을 설정할 수 있습니다.

p {
color: green;
글꼴 크기: 14px

h1 {

color: blue;
글꼴 크기: 32px;
}

HTML 파일에서 다음 스타일시트를 링크합니다:

93f0f5c25f18dab9d176bd4f6de5d30e

b62e931c4aa8229ea6b9449eb05961cb
9c3bca370b5104690d9ef395f2c5f8d1

이제 모든 "p" 요소는 지정된 스타일(텍스트 색상 녹색, 글꼴 크기 14픽셀)을 가지며, 모든 "h1" 요소는 다른 스타일( 텍스트 색상은 파란색, 글꼴 크기는 32픽셀).

4. 선택기

CSS 스타일 선택기는 어떤 HTML 요소에 어떤 스타일을 적용할지 결정합니다. 선택자는 요소 유형, 클래스, ID, 속성 등을 기반으로 요소를 선택할 수 있습니다. 다음은 몇 가지 일반적인 선택기 형식입니다.

元素类型选择器：直接选择元素的名称。例如，“p”选择器将选择所有段落。
类选择器：“.”加上一个类名称。例如，“.my-class”选择器将选择具有名称“my-class”的所有元素。
ID 选择器：“#”加上一个 ID 名称。例如，“#my-id”选择器将选择具有 ID 名称“my-id”的所有元素。
属性选择器：“[]”加上一个属性名称和一个可选的属性值。例如，“[href]”选择器将选择具有任何 href 属性的元素，而“[href='https://example.com']”选择器将选择具有 href 设置为“https://example.com” 的元素。

선택기는 CSS 스타일과 함께 사용되며 중괄호 안에 배치됩니다. 다음은 선택기가 모든 "p" 요소에 스타일을 적용하는 예입니다.

p {

color: red;
글꼴 크기: 16px;
}

이것이 CSS 스타일링의 기본입니다. 이러한 개념을 이해하면 반응형 디자인, 애니메이션 등과 같은 고급 CSS 애플리케이션을 탐색할 수 있습니다. 어떤 유형의 웹 사이트를 만들고 있든 CSS 스타일을 지정하는 방법을 아는 것은 도움이 됩니다.

위 내용은 CSS 스타일을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!