HTML 스타일 설정

WBOY원래의: 2023-05-15 14:12:39823검색

HTML 스타일링은 웹 디자인을 만드는 데 중요한 부분입니다. HTML 스타일은 레이아웃, 색상, 글꼴 크기 및 스타일과 같은 다양한 측면을 조정할 수 있을 뿐만 아니라 대화형 특수 효과를 구현할 수 있습니다. 이 기사에서는 CSS 스타일 시트 작성부터 HTML 요소에 CSS 스타일 적용까지 HTML 스타일에 대한 기본 지식을 소개하여 독자가 웹 디자인 목표를 달성하도록 돕습니다.

1. CSS 스타일 시트

CSS는 HTML 문서에서 표현과 내용의 분리가 부족하여 혼동되는 문제를 해결하기 위해 제안된 Cascading Style Sheet를 말합니다. CSS 스타일 시트는 HTML 요소의 색상, 배경, 글꼴 크기, 줄 높이, 너비, 높이 및 여백을 변경하는 클래스, ID 및 태그 선택기와 기타 선택기를 정의하여 HTML 요소의 모양을 제어하는 데 사용할 수 있습니다. 몇 가지 일반적인 CSS 스타일 시트 작업이 아래에 소개됩니다.

CSS 파일 생성 방법

우리는 일반적으로 스타일 시트 파일을 CSS 파일로 저장하며, 파일의 확장자는 .css입니다. 스타일시트 파일을 만드는 단계는 다음과 같습니다.

메모장이나 텍스트 편집을 지원하는 기타 소프트웨어를 열어 텍스트 파일을 만듭니다.
파일의 첫 번째 줄에 스타일 시트 코드, 즉 "c9ccee2e6ea535a969eb3f532ad9fe89" 태그와 "/style>" 태그를 추가하세요.
클래스, ID, 태그 등의 선택기와 기타 CSS 스타일 속성이 될 수 있는 태그 사이에 CSS 스타일시트 코드를 추가하세요.
CSS 파일에서는 관계를 나타내기 위해 각 선택기와 해당 스타일 속성 사이에 중괄호가 있어야 합니다.
CSS 스타일 정의를 완료한 후 CSS 파일을 .css 파일로 저장하고 HTML 문서에 연결해야 합니다.

CSS 스타일 시트 주석

CSS 스타일 시트 주석의 역할은 개발자가 코드를 유지할 때 쉽게 설명하고 기술할 수 있도록 하는 것입니다. CSS 스타일 시트 주석은 /로 시작하고 /로 끝납니다. 다음 예:

/*댓글 한 줄입니다
댓글 두 번째 줄입니다*/

CSS 스타일 시트의 기본 작업

CSS 스타일 시트 작성은 선택기의 기본 작업을 기반으로 합니다.

선택기: CSS 스타일 시트는 특정 기호를 사용하여 클래스 선택기(".") 및 ID 선택기("#") 등과 같이 수정할 HTML 요소를 선택합니다.
속성: CSS 스타일 시트는 속성을 사용하여 "글꼴 크기", "색상", "배경"과 같은 HTML 요소의 스타일을 정의합니다.

다음 코드는 제목인 HTML 요소의 기본 스타일 조정을 보여줍니다.

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>CSS样式表调整标题样式的例子</title>
<style>
    h1 {
        color: red;
        font-size: 36px;
        background: yellow;
    }
</style>

9c3bca370b5104690d9ef395f2c5f8d1
1d6e7d87652dd104f173dbf7284e2799

<h1>这是一级标题</h1>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

위 코드는 제목 텍스트 크기를 36픽셀(글꼴 크기: 36px;)로 변경하고 배경색을 노란색(배경: 노란색;)으로 설정합니다. , 텍스트 색상을 빨간색(색상: 빨간색;)으로 설정합니다. 이러한 속성은 스타일, 색상, 글꼴 등에 맞게 수정하거나 제거할 수 있습니다.

2. HTML 요소에 적용된 CSS 스타일시트

이제 간단한 CSS 스타일시트 파일을 만들고 CSS 스타일 속성에 대한 값을 정의했습니다. 다음으로, HTML 요소의 스타일 제어를 달성하기 위해 이러한 스타일 속성을 HTML 요소와 연관시켜야 합니다.

인라인 스타일링

인라인 스타일링은 HTML 요소 내부의 "style" 속성에 스타일 속성을 적용하는 것을 의미합니다. 이 방법은 주로 HTML 문서 내에서 직접 CSS 스타일 코드를 작성하는 것과 관련됩니다. 이 방법은 HTML 요소의 스타일을 빠르게 조정하는 데 유용합니다. 다음 코드는 인라인 스타일의 예입니다.

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>内嵌样式CSS设置</title>

9c3bca370b5104690d9ef395f2c5f8d1
e52692a4b3185faa6d84d861e3f648b9

<h1 style="color: MediumBlue; font-size: 50px;">大标题</h1>
<p style="color: Black; font-size: 30px;">小标题</p>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

위 코드에서는 배경색을 밝은 회색(Background-color: LightGray;)으로 설정하고 큰 제목 색상을 진한 파란색(color)으로 설정했습니다. : MediumBlue;) 제목 글꼴 크기를 50픽셀(글꼴 크기: 50px;)로 설정하고 자막 색상을 검정색(색상: Black;)으로 설정하고 제목 글꼴 크기를 30픽셀(글꼴 크기: 30px)로 설정합니다. ;).

내부 스타일(내부 스타일링)

내부 스타일 시트 방식은 HTML 문서의 "head" 태그 내 "style" 태그에 스타일 시트 코드를 넣어 모든 HTML 문서에서 사용하는 스타일을 수정하는 것입니다. 이 방법은 인라인 스타일보다 더 유연하며 HTML 파일과 스타일 시트의 분리를 유지합니다. 다음 코드는 내부 스타일 시트의 예입니다.

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>内部样式表CSS设置</title>
<style>
    body {
        background-color: LightGray;
    }
    h1 {
        color: MediumBlue;
        font-size: 50px;
    }
    p {
        color: black;
        font-size: 30px;
    }
</style>

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<h1>大标题</h1>
<p>小标题</p>

73a6ac4ed44ffec12cee46588e518a5e

在上述代码中，我们将背景颜色设置为浅灰（body {background-color: LightGray;}），将大标题颜色设置为深蓝（h1 {color: MediumBlue;font-size: 50px;}），将标题字体大小设置为50像素（h1 {color: MediumBlue;font-size: 50px;}），并将小标题颜色设置为黑色（p {color: black;font-size: 30px;}），将标题字体大小设置为30像素（p {color: black;font-size: 30px;}）。

外部样式表（external styling）

外部样式表是指在HTML文件中以CSS文件的形式链接到HTML文档的样式表，这种方式最好适用于大型网站或多个页面，对于一些共享设计风格的网站更为便捷。下面是示例代码：

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>外部样式表CSS设置</title>
<link rel="stylesheet" type="text/css" href="style.css">

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<h1>大标题</h1>
<p>小标题</p>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

在上述代码中，我们通过c29ea0143d4a2d5dc6725f7851494a02属性将外部样式表链接到HTML文档，这包含了全部HTML文档所用到的样式定义。样式表文件的代码如下：

body {

background-color: LightGray;

}
h1 {

color: MediumBlue;
font-size: 50px;

}
p {

color: black;
font-size: 30px;

}

以上就是HTML样式设置的基础知识，包括创建和使用CSS样式表的不同方法。通过这些基本操作，我们可以对网页的排版、字体、颜色和特效等方面进行控制，创造出各种个性化的网页设计。

위 내용은 HTML 스타일 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：html 태그의 정기적인 교체다음 기사：html 태그의 정기적인 교체