CSS를 사용하는 방법
- WBOY원래의
- 2023-05-29 09:42:37662검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!