CSS를 사용하는 방법

WBOY원래의: 2023-05-29 09:42:37730검색

CSS(Cascading Style Sheets)는 HTML(Hypertext Markup Language) 문서에 사용되는 스타일 시트 언어입니다. CSS는 웹 페이지의 모양을 더욱 아름답고 명확하게 만들고 웹 페이지의 가독성과 유지 관리성을 향상시킬 수 있습니다.

CSS 스타일 시트는 일반적으로 선택기, 속성 및 값의 세 부분으로 구성됩니다. 선택기는 스타일을 적용할 HTML 요소를 지정하고, 속성은 요소에 적용할 스타일을 정의하며, 값은 속성의 특정 값을 지정합니다.

CSS 사용법에 대해 자세히 알아봅시다.

CSS 스타일시트 만들기

먼저 HTML 문서용 CSS 스타일시트를 만들어야 합니다. 일반적으로 CSS 스타일 시트를 별도의 .css 파일에 저장하고 HTML 문서의 93f0f5c25f18dab9d176bd4f6de5d30e 태그 내의 2cdf5bf648cf2f33323966d7f58a7f3f 태그를 통해 소개합니다.

예:

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

Selector

선택기는 CSS 규칙이 적용되는 HTML 요소를 지정하는 식별자입니다. 일반적인 선택기에는 다음이 포함됩니다.

태그 이름 선택기: HTML 요소의 태그 이름을 사용하여 요소를 지정합니다. 예: p, h1, div 등
클래스 선택기: "."로 시작하고 그 뒤에 클래스 이름이 옵니다. 예: .class1, .class2.
ID 선택기: "#"으로 시작하고 그 뒤에 ID 이름이 옵니다. 예: #id1, #id2.
속성 선택기: HTML 요소의 속성을 기반으로 요소를 지정합니다. 예: [속성], [속성=값] 등
의사 클래스 선택기: 특정 특수 요소 상태를 지정하는 데 사용됩니다. 예: :hover, :focus 등

예:

/* 标签名选择器 */
p {
  color: blue;
}

/* 类选择器 */
.red {
  color: red;
}

/* ID选择器 */
#green {
  color: green;
}

/* 属性选择器 */
[class="yellow"] {
  color: yellow;
}

/* 伪类选择器 */
a:hover {
  color: purple;
}

속성

속성은 CSS 규칙이 적용되는 HTML 요소를 지정하는 스타일입니다. 일반적인 속성은 다음과 같습니다:

color: 텍스트 색상.
배경색: 배경색입니다.
font-size: 글꼴 크기.
font-family: 글꼴 유형.
font-weight: 글꼴 두께.
text-align: 텍스트 정렬.
margin: 외부 여백.
패딩: 패딩.
테두리: 테두리.

예:

/* 文本颜色 */
p {
  color: blue;
}

/* 背景颜色 */
body {
  background-color: #eee;
}

/* 字体大小、字体类型、字体粗细 */
h1 {
  font-size: 32px;
  font-family: Arial, sans-serif;
  font-weight: bold;
}

/* 文本对齐方式 */
div {
  text-align: center;
}

/* 外边距、内边距 */
.box {
  margin: 10px;
  padding: 20px;
}

/* 边框 */
.img {
  border: 1px solid black;
}

value

value는 속성의 특정 값입니다. 속성에 가능한 값의 범위는 속성 유형에 따라 다릅니다. 예를 들어, 색상은 미리 정의된 색상 이름(예: "red", "blue" 등)을 사용하거나 16진수 또는 RGB 값(예: "#ff0000", "rgb(255,0,0)" 등)을 사용할 수 있습니다. ).

예:

/* 颜色 */
p {
  color: blue;
}

/* 背景颜色 */
body {
  background-color: #eee;
}

/* 字体大小、字体类型、字体粗细 */
h1 {
  font-size: 32px;
  font-family: Arial, sans-serif;
  font-weight: bold;
}

/* 文本对齐方式 */
div {
  text-align: center;
}

/* 外边距、内边距 */
.box {
  margin: 10px;
  padding: 20px;
}

/* 边框 */
.img {
  border: 1px solid black;
}

상속

CSS의 스타일은 상속될 수 있습니다. 예를 들어 HTML 문서의 모든 단락에 대해 글꼴 속성을 설정할 수 있으며 이러한 속성의 값은 각 단락에 포함된 텍스트에 자동으로 상속될 수 있습니다.

예:

/* 字体 */
body {
  font-family: Arial, sans-serif;
}

Cascading

여러 CSS 규칙이 동일한 HTML 요소에 적용되면 계단식으로 적용됩니다. 즉, 일부 규칙은 더 높은 우선순위를 가지며 다른 규칙보다 우선합니다. CSS에서 사용되는 계단식 원리는 다음과 같습니다.

스타일 특이성: 간단히 말해서 선택기의 복잡성입니다.
파일 순서: 나중 규칙이 이전 규칙보다 우선합니다.

예:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 优先级为1，文件顺序为1 */
    p {
      color: red;
    }
  </style>
  <style>
    /* 优先级为10，文件顺序为2 */
    .green {
      color: green;
    }
  </style>
  <style>
    /* 优先级为100，文件顺序为3 */
    #blue {
      color: blue;
    }
  </style>
</head>
<body>
  <p class="green" id="blue">This text is blue.</p>
</body>
</html>

외부 스타일시트

2cdf5bf648cf2f33323966d7f58a7f3f 태그를 사용하여 CSS 스타일시트를 HTML 문서에 연결하는 것이 일반적으로 모범 사례로 간주됩니다. 이렇게 하면 다음과 같은 이점이 있습니다.

캐시 가능: 브라우저는 다음에 로드하기 위해 CSS 스타일 시트를 캐시할 수 있습니다.
유지관리성: 스타일은 별도의 파일로 편집하고 유지관리할 수 있습니다.
크로스 브라우저 지원: 외부 스타일 시트를 사용하면 다양한 브라우저에서 스타일 일관성을 보장할 수 있습니다.
적용성: 일관성을 보장하기 위해 동일한 스타일을 여러 페이지에 적용할 수 있습니다.

예:



<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

  This text is red.
  This text is blue.
  This text is green.

/* style.css */
.red {
  color: red;
}

.blue {
  color: blue;
}

.green {
  color: green;
}

내부 스타일시트

때로는 CSS 스타일시트를 HTML 문서에 저장하면 페이지 로드 속도가 향상될 수 있습니다. 스타일 시트가 현재 페이지에만 적용되는 경우 93f0f5c25f18dab9d176bd4f6de5d30e 태그 내의 c9ccee2e6ea535a969eb3f532ad9fe89 태그에 스타일 시트를 배치할 수 있습니다.

예:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 内部样式表 */
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p>This text is red.</p>
</body>
</html>

인라인 스타일

인라인 스타일은 CSS 규칙을 HTML 요소에 직접 적용하는 방법입니다. HTML 태그의 "style" 속성을 CSS를 입력하는 장소로 사용하세요.

예:

<!DOCTYPE html>
<html>
<head>
  <title>Inline Style Example</title>
</head>
<body>
  <p style="color: red; font-size: 20px;">This text is red and 20px font size.</p>
</body>
</html>

CSS 상자 모델

CSS 상자 모델은 HTML 문서에서 상자를 만들고 레이아웃하는 방법입니다. 상자는 다른 HTML 요소를 포함할 수 있는 HTML 요소의 직사각형 영역입니다.

CSS 상자 모델은 다음 부분으로 구성됩니다.

Content
Padding
Border
Margins

예:

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: #ccc;
      padding: 20px;
      border: 10px solid black;
      margin: 20px;
    }
  </style>
</head>
<body>
  <div class="box">This is a box.</div>
</body>
</html>

Summary

CSS는 웹 페이지를 만드는 데 중요한 부분입니다. CSS 사용 , HTML 요소의 스타일과 레이아웃을 쉽게 제어할 수 있습니다. 선택기, 속성, 값, 상속, 계단식, 외부 스타일 시트, 내부 스타일 시트 및 인라인 스타일을 사용하여 CSS 규칙을 정의하고 CSS 상자 모델을 사용하여 상자를 만들고 레이아웃할 수 있습니다. CSS를 능숙하게 사용하면 웹 개발의 효율성을 높일 수 있을 뿐만 아니라 보기에도 좋고, 읽기 쉽고, 유지 관리하기 쉬운 웹 페이지를 만들 수 있습니다.

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

css html 标识符继承 Attribute 选择器样式表外边距内边距 margin padding border 伪类 background

성명：

이전 기사：CSS는 무엇입니까?다음 기사：CSS는 무엇입니까?