CSS를 사용하는 방법

CSS(Cascading Style Sheets)는 웹 페이지에 스타일, 레이아웃, 디자인을 추가할 수 있는 언어입니다. CSS는 웹 페이지에 글꼴, 색상, 간격, 배경, 애니메이션 등과 같은 다양한 모양과 기능을 추가할 수 있는 매우 인기 있는 프로그래밍 언어입니다. 이 글에서는 웹 개발 중에 CSS를 더 잘 익히는 데 도움이 되도록 CSS 사용에 대해 자세히 알아볼 것입니다.

1. CSS 소개

CSS를 배우기 전에 먼저 HTML 파일에 CSS를 소개하는 방법을 이해해야 합니다. CSS 스타일 시트는 세 가지 방법으로 도입될 수 있습니다:

1. 인라인 스타일 시트

인라인 스타일 시트는 태그의 스타일 속성을 사용하여 정의됩니다. 예를 들어 HTML 파일에 다음과 같이 작성할 수 있습니다.

93dfe5a74cfae0d72312ce80a39081e1이것은 인라인 스타일시트가 있는 단락입니다.

2. 내부 스타일 시트

HTML 파일에서 c9ccee2e6ea535a969eb3f532ad9fe89 태그를 사용하여 내부 스타일 시트를 정의합니다. 예: c9ccee2e6ea535a969eb3f532ad9fe89 标签来定义内部样式表。例如：

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>内部样式表</title>
<style>
    body {
        background-color: grey;
        color: white;
        font-size: 20px;
    }
    h1 {
        color: red;
        font-size: 32px;
    }
</style>

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<h1>这是一个内部样式表的标题</h1>
<p>这是一个带有内部样式表的段落。</p>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

3.外部样式表

通过使用 2cdf5bf648cf2f33323966d7f58a7f3f

8b05045a5be5764f313ed5b9168a17e6

100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>外部样式表</title>
<link rel="stylesheet" href="style.css">

9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

<h1>这是一个外部样式表的标题</h1>
<p>这是一个带有外部样式表的段落。</p>

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

3.외부 스타일 시트

2cdf5bf648cf2f33323966d7f58a7f3f 태그를 사용하여 HTML 파일의 외부 스타일 시트를 연결하세요. 예:

8b05045a5be5764f313ed5b9168a17e6

100db36a723c770d327fc0aef2ce13b1

93f0f5c25f18dab9d176bd4f6de5d30e

color: red;
font-size: 32px;

9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

<title>类选择器</title>
<style>
    .selected {
        background-color: red;
        color: white;
    }
</style>

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

참고: 외부 스타일 시트를 사용하는 경우 연결된 스타일 시트 파일은 HTML 파일과 동일한 디렉터리에 있어야 하며 파일 확장자는 .css여야 합니다.

2. CSS 구문

CSS 구문은 매우 간단하며 주로 다음 부분으로 구성됩니다.

1. 선택기

선택기는 스타일을 적용할 HTML 요소를 지정하는 데 사용됩니다. 예를 들어, 다음 코드는 선택 헤더 요소에 대한 스타일을 지정합니다:

h1 {

<p class="selected">这个段落被选中了。</p>
<p>这个段落没有被选中。</p>
<p class="selected">这个段落也被选中了。</p>

}

2 속성

속성은 적용할 스타일 유형을 지정하는 데 사용됩니다. 예를 들어 다음 속성은 제목 요소의 색상과 글꼴 크기를 지정합니다.

font-size: 32px; 값

value는 속성의 특정 값을 지정합니다. 예를 들어, 다음 코드는 제목 요소에 대해 32픽셀의 글꼴 크기를 지정합니다.

font-size: 32px;

참고: CSS 속성은 이에 국한되지 않으며 더 많은 CSS 스타일 제어를 위한 다른 속성도 많이 있습니다.

3. 일반적인 CSS 스타일 속성

다음은 스타일을 적용할 때 사용할 수 있는 몇 가지 일반적인 CSS 스타일 속성입니다.

1. 배경색(배경색)

배경색 속성은 요소를 지정하는 데 사용됩니다. 배경색. 예:

background-color: red;

2. 글꼴 색상(color)

color 속성은 요소의 글꼴 색상을 지정하는 데 사용됩니다. 예:

color: white;

3. 텍스트 정렬(text-align)

text-align 속성은 요소의 텍스트 정렬을 지정하는 데 사용됩니다. 예:

text-align: center;

4. 글꼴 크기(font-size)

font-size 속성은 요소의 글꼴 크기를 지정하는 데 사용됩니다. 예:

font-size: 20px;

5. 테두리(border)

border 속성을 추가하면 요소에 테두리를 추가할 수 있습니다. 예:

border: 1px solid black;

참고: 테두리 속성 값에는 테두리 너비, 테두리 스타일 및 테두리 색상이 포함됩니다.

6. 너비(width)

width 속성은 요소의 너비를 지정하는 데 사용됩니다. 예:

width: 50%;

7. 높이(height)

height 속성은 요소의 높이를 지정하는 데 사용됩니다. 예:

height: 100px;

8. Padding(패딩)

padding 속성은 요소의 패딩을 지정하는 데 사용됩니다. 예:

padding: 10px;

9. 여백(margin)

margin 속성은 요소의 여백을 지정하는 데 사용됩니다. 예:

margin: 10px;

4. CSS 선택기

위의 기본 스타일 속성 외에도 스타일을 개선하는 데 도움이 되는 다양한 선택기 유형이 있습니다. 다음은 가장 일반적인 선택자 중 일부입니다.

1. 클래스 선택자(클래스 선택자)

클래스 선택자는 동일한 클래스 이름을 가진 요소를 선택하는 데 사용됩니다. 예:

8b05045a5be5764f313ed5b9168a17e6

100db36a723c770d327fc0aef2ce13b1

93f0f5c25f18dab9d176bd4f6de5d30e

<title>标签选择器</title>
<style>
    p {
        color: red;
    }
</style>

9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

2. 태그 선택기(태그 선택기)

태그 선택기는 동일한 태그 이름을 가진 모든 요소를 ​​선택하는 데 사용됩니다. 예:

8b05045a5be5764f313ed5b9168a17e6

100db36a723c770d327fc0aef2ce13b1

93f0f5c25f18dab9d176bd4f6de5d30e

<title>id 选择器</title>
<style>
    #header {
        color: red;
        font-size: 24px;
    }
</style>

9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

<h1 id="header">这是顶部标题</h1>
<p>这是一个段落。</p>

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

3 .id 선택기(id selector)

id 선택기는 지정된 ID를 가진 고유 요소를 선택하는 데 사용됩니다. 예:

8b05045a5be5764f313ed5b9168a17e6

100db36a723c770d327fc0aef2ce13b1

93f0f5c25f18dab9d176bd4f6de5d30e🎜

<title>继承性</title>
<style>
    body {
        background-color: grey;
        color: white;
        font-size: 20px;
    }
    h1 {
        color: red;
        font-size: 32px;
    }
</style>

🎜9c3bca370b5104690d9ef395f2c5f8d1🎜6c04bd5ca3fcae76e30b72ad730ca86d🎜

<h1>这是标题1</h1>
<p>这是一个段落。</p>
<h2>这是标题2</h2>
<p>这是另一个段落。</p>

🎜36cc49f0c466276486e50c850b7e4956🎜73a6ac4ed44ffec12cee46588e518a5e🎜🎜 4, CSS 상속🎜

CSS 样式是可以从父元素继承到子元素的。例如，如果在 body 元素上应用了一个背景颜色，那么所有的子元素（如段落、标题等）都将继承该背景颜色。例如：

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>继承性</title>
<style>
    body {
        background-color: grey;
        color: white;
        font-size: 20px;
    }
    h1 {
        color: red;
        font-size: 32px;
    }
</style>

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<h1>这是标题1</h1>
<p>这是一个段落。</p>
<h2>这是标题2</h2>
<p>这是另一个段落。</p>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

五、CSS的优先级

当多个样式应用到同一元素上时，CSS 样式有许多不同的规则来决定哪些样式结合在一起。以下是一些有关优先级的规则：

1.行内样式表的优先级最高

如果在元素上应用行内样式表，则行内样式表的样式将优先于内部或外部样式表。

2.选择器特殊性

如果选择器特殊性相同，则会根据选择器的出现位置决定优先级。例如，内部样式表的样式比外部样式表的样式更优先。

3.样式继承

当两个或多个样式同时应用于一个元素，且它们都是通过继承方式获得的，则优先选取本身的样式。

4.重载样式

如果两个样式在元素上应用，但具有相同的选择器和特殊性，则最后应用的样式将优先于其他样式。

六、总结

在本文中，我们已经深入了解了 CSS 的使用方法，包括引入样式表、基本 CSS 语法、常见样式属性、选择器、继承性和优先级。这些基本的 CSS 知识应该对您在网页开发中的样式和布局决策有所帮助。随着您的使用和实践，您会发现更多的 CSS 功能和方法，以及如何利用它们来创造出更好的网页设计。

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