简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > 프런트엔드 Q&A > 본문

CSS를 사용하는 방법

WBOY
풀어 주다： 2023-05-29 09:42:37
원래의
713명이 탐색했습니다.

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

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

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

  1. CSS 스타일시트 만들기

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

예: 

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
로그인 후 복사
  1. 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;
}
로그인 후 복사
  1. 속성

속성은 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;
}
로그인 후 복사
  1. 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;
}
로그인 후 복사
  1. 상속

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

예: 

/* 字体 */
body {
  font-family: Arial, sans-serif;
}
로그인 후 복사
  1. 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>
로그인 후 복사
  1. 외부 스타일시트

태그를 사용하여 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;
}
로그인 후 복사
  1. 내부 스타일시트

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