CSS를 읽는 방법
- WBOY원래의
- 2023-05-14 22:16:07483검색
CSS(Cascading Style Sheets)는 웹 디자인에 일반적으로 사용되는 마크업 언어로 웹 페이지의 스타일, 레이아웃 및 대화형 효과를 제어할 수 있습니다. CSS는 원래 W3C(World Wide Web Consortium)에서 도입되었으며 현재는 표준의 일부입니다. CSS를 배울 때 먼저 CSS의 기본 구문과 공통 속성을 이해한 다음 CSS를 웹 디자인에 적용하는 방법을 배워야 합니다.
먼저 CSS의 기본 구문을 살펴보겠습니다. CSS는 선택자로 구성되며 HTML의 속성은 선택자에 따라 선택되며 속성을 통해 요소의 스타일이 정의됩니다. 다음은 간단한 CSS 구문 예입니다.
h1 {
color: red;
font-size: 24px;
}이 CSS 코드 블록의 기능은 HTML에서 h1 요소를 선택한 다음 글꼴 색상을 빨간색으로, 글꼴 크기를 24픽셀로 설정하는 것입니다. 이 코드 블록에서 h1은 선택기이고, 색상과 글꼴 크기는 속성이고, 빨간색과 24px는 속성 값입니다.
CSS를 배울 때 몇 가지 일반적인 CSS 속성과 값도 이해해야 합니다. 다음은 일반적으로 사용되는 CSS 속성과 해당 기능입니다.
- color: 텍스트 색상을 설정합니다.
- font-size: 텍스트 글꼴 크기를 설정합니다.
- background-color: 요소의 배경색을 설정합니다.
- margin: 요소 여백을 설정합니다.
- padding: 요소의 내부 여백을 설정합니다.
- border: 요소 테두리를 설정합니다.
- 너비/높이: 요소의 너비와 높이를 설정합니다.
- display: 요소의 표시 모드를 설정합니다.
CSS를 적용할 때 CSS 코드를 HTML에 삽입하거나 별도의 CSS 파일로 저장한 후 HTML에서 참조해야 합니다. 다음은 CSS를 적용하는 몇 가지 일반적인 방법입니다.
- HTML에 CSS 코드 삽입
아래와 같이 HTML의 head 태그에 스타일 태그를 사용하여 CSS 코드를 삽입합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Page</title>
<style>
h1 {
color: red;
font-size: 24px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>이 예에서는 다음을 수행합니다. 코드는 HTML에 포함되어 있으며 h1 요소의 글꼴 색상을 빨간색으로 설정하고 글꼴 크기를 24픽셀로 설정합니다.
- CSS 코드를 별도의 CSS 파일로 저장하세요
CSS 코드를 별도의 CSS 파일로 저장하고 HTML에서 다음과 같이 참조하세요.
별도의 CSS 파일에서 정의할 수 있습니다. 모든 스타일은 참조하여 적용됩니다. 이 파일을 HTML에 넣습니다.
CSS는 웹 디자인에서 매우 중요한 부분입니다. CSS 구문과 공통 속성을 익히면 현대적이고 아름답고 사용자 친화적인 웹 페이지를 만들 수 있습니다.
위 내용은 CSS를 읽는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!