"CSS 온라인 매뉴얼"은 공식 CSS 온라인 참조 매뉴얼입니다. 이 CSS 온라인 개발 매뉴얼은 다양한 CSS 속성, 정의, 사용 방법, 예제 작업 등을 포함하고 있습니다. WEB 프로그래밍 학습자와 개발자에게 없어서는 안될 온라인 쿼리 매뉴얼입니다! CSS: Cascading Style Sheets(영어 정식명: Cascading Style Sheets)는 HTML(Standard Universal Markup Language)을 표현하는 데 사용되는 애플리케이션입니다.
CSS(정식 영어 이름: Cascading Style Sheets)는 HTML(Standard Generalized Markup Language의 응용 프로그램) 또는 XML(Standard Generalized Markup Language의 하위 집합)과 같은 파일 스타일을 표현하는 데 사용되는 컴퓨터 언어입니다.
CSS는 웹 페이지를 정적으로 수정할 수 있을 뿐만 아니라 다양한 스크립팅 언어와 함께 작동하여 웹 페이지의 다양한 요소 형식을 동적으로 지정할 수도 있습니다.
CSS는 웹 페이지의 요소 위치 레이아웃에 대해 픽셀 수준의 정밀한 제어를 수행할 수 있고 거의 모든 글꼴 크기 스타일을 지원하며 웹 페이지 개체 및 모델 스타일을 편집할 수 있는 기능을 갖추고 있습니다.
팁: CSS를 계속 배우기 전에 HTML에 대한 기본적인 이해와 XHTML 지식이 필요합니다.
CSS 언어 기본
Attributes
속성의 이름은 법적 식별자이며 CSS 구문의 키워드입니다. 속성은 형식 지정의 측면을 지정합니다.
예: color는 텍스트의 색상 속성이고 text-indent는 단락의 들여쓰기를 지정합니다.
속성 값
정수 및 실수
길이 수량
퍼센트 수량
Selector
CSS 선택기는 원하는 스타일 요소를 선택하는 데 사용됩니다. 무늬. HTML 페이지의 요소는 CSS 선택기를 통해 제어됩니다.
각 CSS 스타일 정의는 두 부분으로 구성되며 형식은 다음과 같습니다.
[code] Selector {style} [/code] {} 앞의 부분은 "선택기"입니다. "선택기"는 {}의 "스타일" 객체, 즉 웹페이지에서 "스타일"이 작동하는 요소를 지정합니다.
다음은 스타일 시트 정의가 HTML 요소를 표시하는 방법을 소개합니다.
첫 번째 CSS 인스턴스를 만들고 실행해 보세요!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>
<body>
<h1>CSS 实例!</h1>
<p>这是一个段落。</p>
</body>
</html>아주 간단하지 않나요! CSS는 HTML 마크업 언어의 요소가 표시되는 방식을 정의하는 스타일 설명을 제공합니다. CSS는 웹 디자인 분야의 획기적인 발전입니다. 작은 스타일을 수정하여 이와 관련된 모든 페이지 요소를 업데이트하는 데 사용할 수 있습니다.
팁: CSS 튜토리얼은 CSS를 사용하여 여러 웹 페이지의 스타일과 레이아웃을 동시에 제어하는 방법을 단계별로 안내합니다. 궁금하신 점은 PHP 중국어 홈페이지CSS 커뮤니티에 접속하셔서 질문해주시면 열성적인 네티즌들이 답변해드리겠습니다.
CSS 언어의 기능
풍부한 스타일 정의: CSS는 다양한 문서 스타일 모양을 제공할 뿐만 아니라 텍스트 및 배경 속성을 설정하는 기능도 제공합니다. 요소 테두리와 다른 요소 사이의 거리, 요소 테두리와 요소 콘텐츠 사이의 거리를 통해 텍스트의 대문자 표시, 장식 및 기타 페이지 효과를 마음대로 변경할 수 있습니다.
사용 및 수정 용이: CSS는 HTML 요소의 스타일 속성이나 HTML 문서의 헤더 부분에서 스타일을 정의할 수 있습니다. 또는 HTML 페이지 인용문에 대한 특수 CSS 파일에서 스타일을 선언할 수 있습니다. 즉, CSS 스타일 시트는 모든 스타일 선언을 통합된 방식으로 저장하고 관리할 수 있습니다.
또한 동일한 스타일의 요소는 동일한 스타일을 사용하여 분류 및 정의할 수 있으며, 동일한 이름을 가진 모든 HTML 태그에 특정 스타일을 적용하거나 특정 스타일에 CSS 스타일을 할당할 수도 있습니다. 페이지 요소에서. 스타일을 수정하려면 스타일 목록에서 해당 스타일 설명을 찾아서 수정하기만 하면 됩니다.
다중 페이지 애플리케이션: CSS 스타일 시트를 별도의 CSS 파일에 저장할 수 있으므로 여러 페이지에서 동일한 CSS 스타일 시트를 사용할 수 있습니다. 이론적으로 CSS 스타일 시트는 어떤 페이지 파일에도 속하지 않으며 모든 페이지 파일에서 참조될 수 있습니다. 이러한 방식으로 여러 페이지의 스타일을 통합할 수 있습니다.
계단식: 간단히 말해서 계단식은 요소에 동일한 스타일을 여러 번 설정하는 것이며 마지막 속성 값 세트를 사용합니다. 예를 들어, 사이트의 여러 페이지에 동일한 CSS 스타일 시트 세트를 사용하고 일부 페이지의 일부 요소에 다른 스타일을 사용하려는 경우 이러한 스타일에 대해 별도의 스타일 시트를 정의하고 이를 적용할 수 있습니다. 페이지. 나중에 정의된 이러한 스타일은 이전 스타일 설정을 재정의하며 브라우저에 표시되는 내용은 마지막으로 설정된 스타일 효과가 됩니다.
페이지 압축: 페이지 효과를 정의하기 위해 HTML을 사용하는 웹사이트에서는 다양한 사양의 텍스트 스타일을 형성하기 위해 많은 수의 반복되는 표와 글꼴 요소가 필요한 경우가 많습니다. 그 결과 많은 수의 HTML 태그가 사용됩니다. 페이지가 생성되므로 파일 크기가 늘어납니다. CSS 스타일 시트에 스타일 선언을 별도로 넣으면 페이지 크기를 크게 줄일 수 있으므로 페이지 로딩에 소요되는 시간도 크게 줄어듭니다. 또한 CSS 스타일 시트를 재사용하면 페이지 크기가 훨씬 줄어들고 다운로드 시간도 단축됩니다.
이 CSS 튜토리얼 매뉴얼에서 다루는 내용
이 CSS 튜토리얼 매뉴얼은 CSS 정의, CSS 구문, CSS 속성, CSS 사용법, CSS 응답성 소개뿐만 아니라 많은 온라인 예제와 전체 CSS를 포함하여 CSS에 대한 모든 기본 지식을 다룹니다. 속성 참조 매뉴얼 등.
팁: 이 튜토리얼의 각 장에는 많은 CSS 예제가 포함되어 있습니다. "예제 실행" 버튼을 직접 클릭하면 실행 결과를 온라인으로 볼 수 있습니다. 이 예제는 CSS 언어를 더 잘 이해하고 사용하는 데 도움이 됩니다.
기타 CSS 관련 학습 참조 리소스
이 페이지 오른쪽의 지식 확장 외에도 다음 리소스도 모두를 위해 선택되었습니다
최신 장
관련 강좌
- 웹 프론트 엔드 개발에 대한 빠른 소개 2021-12-10
- 당신을 가장 잘 이해하는 프론트엔드 강좌: HTML5/CSS3/ES6/NPM/Vue/...[원본] 2022-09-30
- Gulp 시작하기 비디오 튜토리얼 2022-04-18
- 전우 Gao Luofeng CSS3 비디오 튜토리얼 2022-04-20
- AngularJS 개발 웹 애플리케이션 기본 예제 비디오 튜토리얼 2022-04-18
- Ajax 전체 접촉 2022-04-13
- MUI 프레임워크 기본 비디오 튜토리얼 2022-04-13
- 온라인 교육 수업 체험 수업 2019-01-10