CSS 스타일 시트는 개발자가 문서를 표시하는 방법에 대한 사소한 문제와 문서의 정보 내용을 분리하는 데 도움이 됩니다. 즉, 콘텐츠와 스타일을 분리하면 다음과 같은 이점이 있습니다. 2. 중복 방지 3. 웹 페이지 코드 양을 줄이고 웹 페이지 전송 효율성을 높입니다.
이 기사의 운영 환경: windows10 시스템, CSS3, thinkpad t480 컴퓨터.
(추천 튜토리얼: CSS 동영상 튜토리얼)
CSS 스타일 시트를 사용하는 이유는 무엇인가요?
CSS는 개발자가 문서의 정보 내용을 표시 방법이라는 사소한 문제와 분리하는 데 도움이 됩니다. 문서가 표시되는 방식에 관한 작은 사항을 문서 스타일이라고 합니다. 콘텐츠에서 스타일을 분리하면 다음과 같은 이점이 있습니다.
중복 방지
유지 관리가 더 쉬워집니다.
동일한 콘텐츠를 다양한 목적에 따라 다양한 스타일로 사용할 수 있습니다.
웹사이트에 유사한 수천 개가 있을 수 있습니다. 페이지. CSS를 사용하면 모든 페이지에서 공유하는 공통 파일에 스타일 정보를 저장할 수 있습니다. 사용자가 웹 페이지를 열면 사용자의 브라우저는 페이지 콘텐츠에 대한 스타일만 로드합니다. 사용자가 웹페이지를 인쇄할 때 인쇄된 페이지를 읽을 수 있도록 다양한 스타일을 제공해야 합니다.
일반적으로 스타일보다는 페이지의 내용을 설명하기 위해 HTML을 사용하고, 내용보다는 페이지의 스타일을 지정하기 위해 CSS를 사용합니다. 물론 예외도 있으며 HTML은 스타일을 지정하는 몇 가지 방법을 제공할 수도 있습니다. 예를 들어 HTML에서는 태그를 사용하여 텍스트를 굵게 표시할 수 있으며 태그에 페이지의 배경색을 지정할 수 있습니다. CSS를 사용할 때는 일반적으로 모든 스타일 정보를 한 곳에 보관하기 위해 HTML의 스타일 지정 기능을 사용하지 않습니다.
CSS 스타일 시트를 사용하는 주요 목적은 웹 디자인에서 노동 분업과 협업을 촉진하는 것입니다. 예를 들어 html 부분은 한 사람 또는 팀이 완료하고, js 프로그램 부분도 여러 사람이 완료합니다. , CSS도 전문가에게 맡깁니다. 이런 식으로 효율성은 확실히 향상될 수 있습니다. 집을 개조하는 것처럼 하드한 장식과 부드러운 장식 모두 전문 엔지니어링 팀이 수행하는 작업은 확실히 빠르고 잘 수행할 수 있습니다. 반대로 모든 작업을 엔지니어링 팀에 맡길 경우 품질과 공사 일정을 보장할 수 없습니다.
또한 웹페이지의 CSS 스타일 시트를 다른 웹페이지나 다른 웹사이트의 웹페이지에서 그대로 사용할 수 있습니다. 즉, CSS를 재사용할 수 있어 웹페이지의 코드 양을 크게 줄일 수 있고 웹 페이지 전송의 효율성을 높이면 웹 사이트의 모양을 균일하게 유지할 수 있으며, 물론 웹 디자이너의 작업 강도도 줄어듭니다. 이는 한 집의 장식 스타일을 비슷한 구조의 다른 집에 완전히 복사할 수 있는 것과 같습니다. 이는 집 장식 비용을 줄일 수 있을 뿐만 아니라 집을 통일된 장식 스타일로 유지할 수 있습니다.
연습: HTML 문서용 스타일 시트 만들기
스타일 시트 만들기
1. 이 파일이 스타일 시트입니다. 이름을 style1.css
2로 지정하고 다음 코드 줄을 복사한 후 파일을 저장하세요.
strong { color: red; }문서와 스타일시트를 연결하세요
1. 이 파일은 다음과 같습니다. 귀하의 문서. 원하는 대로 이름을 지정하세요.
2. HTML 파일에서 다음 코드를 복사하세요.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample document</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<p>
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
</body>
</html>3. 브라우저에서 확인하세요. 스타일 시트는 다음과 같이 태그의 문자를 빨간색으로 표시합니다.
Cascading Style Sheets
더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 코스를 방문하세요. ! !
위 내용은 CSS 스타일시트를 사용하는 이유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
