찾다
웹 프론트엔드프런트엔드 Q&ACSS 스타일은 어떤 두 부분으로 구성됩니까?
CSS 스타일은 어떤 두 부분으로 구성됩니까?Jun 08, 2021 pm 12:10 PM
CSS 스타일선택자

CSS 스타일은 "선택기"와 "선언 블록"의 두 부분으로 구성됩니다. 선택기는 스타일을 지정해야 하는 HTML 요소를 가리키며 선언 블록에는 세미콜론으로 구분된 하나 이상의 선언이 포함되어 있습니다. 선언 블록은 중괄호로 묶여 있으며 각 선언에는 CSS 속성 이름과 값이 포함됩니다(예: "p{color:red;}").

CSS 스타일은 어떤 두 부분으로 구성됩니까?

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css 스타일(규칙 세트)은 선택기와 선언 블록으로 구성됩니다.

CSS 스타일은 어떤 두 부분으로 구성됩니까?

  • 선택기는 스타일을 지정해야 하는 HTML 요소를 가리킵니다.

  • 선언 블록에는 세미콜론으로 구분된 하나 이상의 선언이 포함되어 있습니다.

  • 각 선언에는 콜론으로 구분된 CSS 속성 이름과 값이 포함되어 있습니다. 속성은 변경하려는 속성이며 각 속성에는 값이 있습니다.

  • 여러 CSS 선언은 세미콜론으로 구분되며 선언 블록은 중괄호로 묶입니다.

예:

body {color: blue}

위 코드 줄은 본문 요소 내의 텍스트 색상을 파란색으로 정의하는 것입니다. 위의 예에서 본문은 선택자이고 중괄호로 묶인 부분은 선언입니다. 선언은 속성과 값의 두 부분으로 구성됩니다. 색상은 속성이고 파란색은 값입니다.

따옴표 쓰기를 기억하세요

팁: 값이 여러 단어인 경우 값에 따옴표를 추가해야 합니다.

p {font-family: "sans serif";}

다중 선언:

팁: 둘 이상의 선언을 정의하려는 경우, 각 선언문을 별도로 구분하려면 세미콜론을 사용해야 합니다. 아래 예에서는 빨간색 텍스트로 가운데 정렬된 단락을 정의하는 방법을 보여줍니다. 마지막 규칙은 세미콜론을 추가할 필요가 없다는 것입니다. 왜냐하면 세미콜론은 영어에서 닫는 기호가 아니라 분리 기호이기 때문입니다. 그러나 대부분의 숙련된 디자이너는 각 선언 끝에 세미콜론을 추가합니다. 이는 기존 규칙에서 선언을 추가하거나 뺄 때 오류 가능성을 최소화하는 이점이 있습니다.

p {text-align:center; color:red;}

다음과 같이 스타일 정의의 가독성을 높이기 위해 한 줄에 하나의 속성만 기술해야 합니다.

p {
text-align: center;
color: black;
font-family: arial;
}

공백 및 대소문자 구분

대부분의 스타일시트에는 둘 이상의 규칙이 포함되어 있으며 대부분의 규칙에는 다음이 포함됩니다. 하나 이상의 진술. 다중 선언과 공백 사용으로 인해 스타일시트를 더 쉽게 편집할 수 있습니다.

body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}

공백을 포함해도 CSS가 브라우저에서 작동하는 방식에는 영향을 미치지 않습니다. 또한 CSS는 XHTML과 달리 대소문자를 구분하지 않습니다. 한 가지 예외가 있습니다. HTML 문서 작업 시 클래스 및 ID 이름은 대소문자를 구분합니다.

(학습 영상 공유: css 영상 튜토리얼)

위 내용은 CSS 스타일은 어떤 두 부분으로 구성됩니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
css中id选择符的标识是什么css中id选择符的标识是什么Sep 22, 2022 pm 03:57 PM

在css中,id选择符的标识是“#”,可以为标有特定id属性值的HTML元素指定特定的样式,语法结构“#ID值 {属性 : 属性值;}”。ID属性在整个页面中是唯一不可重复的;ID属性值不要以数字开头,数字开头的ID在Mozilla/Firefox浏览器中不起作用。

如何使用HTML和CSS创建一个幻灯片布局页面如何使用HTML和CSS创建一个幻灯片布局页面Oct 16, 2023 am 09:07 AM

如何使用HTML和CSS创建一个幻灯片布局页面引言:幻灯片布局在现代web设计中被广泛使用,在展示信息或图片时具有很大的吸引力和交互性。本文将介绍如何使用HTML和CSS创建一个幻灯片布局页面,并提供具体的代码示例。一、HTML布局结构首先,我们需要创建一个HTML布局结构,包含一个幻灯片容器和多个幻灯片项。代码如下所示:<!DOCTYPEhtml&

如何使用:nth-child(-n+5)伪类选择器选择位置小于等于5的子元素的CSS样式如何使用:nth-child(-n+5)伪类选择器选择位置小于等于5的子元素的CSS样式Nov 20, 2023 am 11:52 AM

如何使用:nth-child(-n+5)伪类选择器选择位置小于等于5的子元素的CSS样式在CSS中,伪类选择器是一种强大的工具,可以通过特定的选择方式来选取HTML文档中的某些元素。其中,:nth-child()是一种常用的伪类选择器,可以选择特定位置的子元素。:nth-child(n)可以匹配HTML中的第n个子元素,而:nth-child(-n)可以匹配

如何使用HTML和CSS实现一个简单的聊天页面布局如何使用HTML和CSS实现一个简单的聊天页面布局Oct 18, 2023 am 08:42 AM

如何使用HTML和CSS实现一个简单的聊天页面布局随着现代科技的发展,人们越来越依赖于互联网来进行沟通和交流。而在网页中,聊天页面是一种非常常见的布局需求。本文将向大家介绍如何使用HTML和CSS来实现一个简单的聊天页面布局,并给出具体的代码示例。首先,我们需要创建一个HTML文件,可以使用任何文本编辑器。以index.html为例,先创建一个基本的HTML

css伪选择器学习之伪类选择器解析css伪选择器学习之伪类选择器解析Aug 03, 2022 am 11:26 AM

在之前的文章《css伪选择器学习之伪元素选择器解析​》中,我们学习了伪元素选择器,而今天我们详细了解一下伪类选择器,希望对大家有所帮助!

如何使用HTML和CSS实现一个详细页面布局如何使用HTML和CSS实现一个详细页面布局Oct 20, 2023 am 09:54 AM

如何使用HTML和CSS实现一个详细页面布局HTML和CSS是创建和设计网页的基础技术,通过合理使用这两者,我们可以实现各种复杂的网页布局。本文将介绍如何使用HTML和CSS来实现一个详细页面布局,并提供具体的代码示例。创建HTML结构首先,我们需要创建一个HTML结构来放置我们的页面内容。以下是一个基本的HTML结构:<!DOCTYPEhtml&g

如何使用HTML和CSS创建一个响应式卡片墙布局如何使用HTML和CSS创建一个响应式卡片墙布局Oct 25, 2023 am 10:42 AM

如何使用HTML和CSS创建一个响应式卡片墙布局在现代网页设计中,响应式布局是一项非常重要的技术。通过使用HTML和CSS,我们可以创建一个响应式的卡片墙布局,以适应不同屏幕尺寸的设备。下面将详细介绍如何使用HTML和CSS创建一个简单的响应式卡片墙布局。HTML部分:首先,我们需要在HTML文件中设置基本结构。我们可以使用无序列表(<ul>)和

从入门到精通:掌握is与where选择器的使用技巧从入门到精通:掌握is与where选择器的使用技巧Sep 08, 2023 am 09:15 AM

从入门到精通:掌握is与where选择器的使用技巧引言:在进行数据处理和分析的过程中,选择器(selector)是一项非常重要的工具。通过选择器,我们可以按照特定的条件从数据集中提取所需的数据。本文将介绍is和where选择器的使用技巧,帮助读者快速掌握这两个选择器的强大功能。一、is选择器的使用is选择器是一种基本的选择器,它允许我们根据给定条件对数据集进

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

SecList

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!