집 >웹 프론트엔드 >프런트엔드 Q&A >CSS 코드 작성 및 적용 방법

CSS 코드 작성 및 적용 방법

PHPz원래의: 2023-04-21 11:23:17631검색

Cascading Style Sheets의 전체 이름인 CSS는 웹 디자인에 사용되는 스타일 시트 언어로 HTML 또는 XML(SVG 또는 XHTML을 포함한 모든 XML 문서에 적용됨) 문서의 모양과 레이아웃을 설명하는 데 사용됩니다. CSS는 특정 태그와 관련된 속성을 정의하여 이러한 태그가 브라우저에서 렌더링되는 방식을 지정함으로써 작동하며 이를 통해 웹 페이지의 스타일, 타이포그래피 및 레이아웃을 구현합니다.

웹 디자인에 있어서 CSS는 웹 페이지의 모양과 레이아웃을 더욱 아름답고 조작하기 쉽게 만들어주기 때문에 매우 중요한 역할을 합니다. CSS를 사용하기 위해서는 CSS 코드를 작성하고 적용하는 방법을 알아야 합니다.

CSS 코드 작성

CSS 코드는 선택기와 선언으로 구성됩니다. 선택기는 웹 페이지에서 HTML 태그 요소를 지정하는 데 사용되며 선언은 이러한 요소의 스타일을 정의하는 데 사용됩니다. 다음은 CSS 코드 예입니다.

p {
    color: red;
    font-size: 18px;
}

위 예에서 p는 선택기입니다. 이는 모든  태그를 일치시키고 해당 스타일을 해석한다는 의미입니다. 선언 블록 CSS의 경우. color 및 font-size는 특정 CSS 속성이며 해당 값은 각각 red 및 18px입니다. p是一个选择器，表示匹配所有标签，并将其样式解读为一个CSS声明块。color和font-size是具体的CSS属性，它们的值分别为red和18px。

嵌入CSS代码

嵌入CSS代码意味着将CSS代码放入HTML文档的<head>标记之间的<style>标记内。这种方法定义的CSS样式仅适用于当前页面。示例如下：

<!DOCTYPE html>
<html>
<head>
    <title>嵌入CSS代码示例</title>
    <style>
        p {
            color: red;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>这是一段红色的文本，字号为18像素。</p>
</body>
</html>

在这个示例中，我们定义了一个p选择器，将文本颜色设置为红色，字号设置为18像素。这个CSS样式仅作用于当前页面的元素。

外部CSS文件链接

我们还可以将CSS代码保存在一个独立的CSS文件中，并在HTML文档中使用<link>标记将它们链接到页面中。这种方法定义的CSS样式可以供多个页面使用。示例如下：

假设我们将以下CSS代码保存在一个名为“style.css”的文件中：

p {
    color: red;
    font-size: 18px;
}

下面是一个链接到“style.css”的HTML文档示例：

<!DOCTYPE html>
<html>
<head>
    <title>外部CSS文件链接示例</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p>这是一段红色的文本，字号为18像素。</p>
</body>
</html>

在这个示例中，我们使用<link>标记将style.css

<head>

<style&gt에 CSS 코드를 넣는 것을 의미합니다. ;

<link>

style.css

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

css html xhtml xml 选择器样式表

성명：

이전 기사：CSS를 사용하여 코드와 요소를 숨기는 방법다음 기사：CSS를 사용하여 코드와 요소를 숨기는 방법