CSS를 사용하는 방법

CSS는 웹 디자인의 중요한 부분으로 웹 페이지의 스타일과 레이아웃을 제어하는 ​​데 사용할 수 있습니다. 웹 디자인에서 CSS를 사용하면 웹 페이지를 더욱 아름답고 질서정연하며 읽기 쉽게 만들 수 있습니다. 이번 글에서는 CSS의 기본적인 사용법을 소개하겠습니다.

1. CSS란 무엇인가요?

CSS의 정식 명칭은 캐스케이딩 스타일 시트(Cascading Style Sheets)입니다. HTML이나 XML 문서의 표시 스타일을 변경하는 데 사용되는 마크업 언어입니다. CSS 스타일 시트의 기본 기능은 글꼴, 색상, 배경 등과 같은 다양한 속성을 다양한 웹 페이지 요소에 적용하여 다양한 시각적 효과를 얻는 것입니다.

2. CSS의 기본 구문

CSS의 기본 구문은 선택자, 속성, 값으로 구성됩니다. 선택자는 스타일이 적용되는 HTML 요소를 선택하는 데 사용됩니다. 속성은 설정할 속성을 지정하며 값은 속성의 특정 값입니다.

예를 들어 HTML 문서에서 단락 색상을 빨간색으로 설정하려면 다음 코드를 사용할 수 있습니다.

p { color: red }

코드의 p는 선택자입니다. 모든 단락 요소가 선택되어야 함을 의미하며, color는 색상이 설정되어야 함을 나타내는 속성이고, red는 색상이 빨간색으로 설정되어야 함을 나타내는 값입니다.

3. CSS 선택기

CSS 선택기는 스타일을 지정해야 하는 HTML 요소를 선택하는 데 사용됩니다. 요소의 태그 이름, 클래스, ID 및 기타 속성을 기반으로 선택할 수 있습니다.

1. 태그 선택기

태그 선택기는 태그 이름을 기준으로 요소를 선택하는 것을 의미합니다. 예를 들어 모든 단락 요소를 선택하려면 다음 코드를 사용할 수 있습니다.

p { color: red }

2. 선택기

클래스 선택기는 HTML 요소의 클래스 속성을 기반으로 요소를 선택하는 것을 의미합니다. 예를 들어 클래스 이름이 "intro"인 모든 요소를 ​​선택하려면 다음 코드를 사용할 수 있습니다.

.intro { color: red }

3. ID 선택기

ID 선택기는 HTML 요소의 ID 속성을 기반으로 요소를 선택하는 것을 의미합니다. 한 페이지에 두 개의 동일한 ID 속성이 있을 수 없습니다. 예를 들어 ID가 "intro"인 요소를 선택하려면 다음 코드를 사용할 수 있습니다.

intro { color: red }

4. CSS 속성 및 값 ​​

CSS 속성 및 값이 사용됩니다. CSS는 다양한 속성과 값을 사용하여 다양한 스타일 효과를 설정할 수 있습니다.

1. 글꼴 속성

글꼴 속성은 텍스트의 글꼴, 크기, 색상 및 기타 속성을 설정하는 데 사용할 수 있습니다. 예:

font-family: Arial, Verdana, sans-serif / 글꼴 유형/
font-size : 16px / 글꼴 크기/
color: #333; / 글꼴 색상/

2. 배경 속성

배경 속성을 사용하여 배경 색상, 그림, 위치 등을 설정할 수 있습니다. . 반복; /

배경이 반복되지 않습니다

/ background -position: center center; / 배경 위치
/3. 테두리 속성
테두리 속성을 사용하여 테두리 스타일, 두께, 색상 등을 설정할 수 있습니다. 예:
border-style: solid; / 테두리 스타일 /

border-width: 1px /

테두리 너비

/

border-color: #ccc; 4. 크기 속성

크기 속성은 요소의 너비, 높이, 최대 높이 등을 설정하는 데 사용할 수 있습니다. 예: width: 500px /
요소 너비/height : 300px; /
요소 높이/max-width: 100%; /

요소 최대 너비

/

max-height : 100%; /

요소의 최대 높이

/

5. CSS 우선순위
요소가 여러 선택기에 의해 선택되면 CSS 우선순위에 따라 요소에 적용되는 스타일이 결정됩니다. CSS의 우선순위는 높은 것부터 낮은 것 순으로 !important, 인라인 스타일, ID 선택기, 클래스 선택기, 태그 선택기입니다. 우선순위가 동일하면 이후 스타일이 이전 스타일보다 우선 적용됩니다. 예를 들어 다음과 같은 스타일 시트가 있는 경우:
p { color: blue; }.intro { color: red }
intro { color: green;}

이것은:

< p class="intro" id="intro" style="color:orange">이것은 단락입니다

그러면 텍스트 색상은 녹색입니다. 즉, ID 선택기가 클래스 선택자와 태그 선택자의 스타일을 다루는 가장 높은 우선순위입니다.

6. CSS의 상속

상속은 요소가 상위 요소의 스타일 속성을 상속할 수 있는 기능을 의미합니다. 이 기능을 사용하면 스타일 시트를 크게 줄여 파일 크기를 줄이고 가독성을 높일 수 있습니다. 예:

body {font-size: 14px; }

p { color: #333; }

이런 식으로 p 요소에서는 글꼴 크기가 14px이고 p 요소가 상속됩니다. 본문 요소 글꼴 크기.

7. CSS 도입 방법

CSS는 인라인, 내부, 외부의 세 가지 방법으로 도입할 수 있습니다. 인라인 스타일은 단일 요소에 대한 반면 외부 및 내부 스타일은 전체 HTML 페이지의 스타일 시트를 정의하는 데 사용됩니다.

1. 인라인

인라인 스타일은 HTML 요소의 스타일 속성을 사용하여 직접 정의할 수 있습니다. 예:

이것은 단락입니다.

2. 내부 스타일

내부 스타일은 HTML 문서의 head 태그에 CSS 스타일 시트를 정의하는 것을 의미합니다. 예:

<style>
    p { color: red; }
</style>

3.外部式

外部式是指将CSS样式表定义在一个单独的.css文件中，然后在HTML文档中引入，例如：

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

以上三种引入方式中，外部式是推荐使用的方式。这种方式可以使CSS样式表单独存放，方便维护和修改，也可以提高页面加载速度。

总结：

CSS是网页设计中的重要组成部分，它可以用来控制网页中的样式和布局。CSS的基本语法由选择器、属性和值组成，选择器用来选择要应用样式的HTML元素，属性指定要设置的属性，值是属性的具体数值。当同一个元素被多个选择器选中时，CSS的优先级决定它应用哪一个样式。CSS有三种引入方式：内联式、内部式和外部式，而外部式是推荐使用的方式。

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