HTML 스타일 시트
- 王林원래의
- 2024-09-04 16:16:281055검색
다음 문서에서는 HTML 스타일 시트에 대한 개요를 제공합니다. HTML 계단식 스타일 시트는 지정된 모든 스타일을 사용하여 HTML을 렌더링하는 방법을 브라우저에 알려주는 규칙과 속성이 포함된 시트입니다. CSS는 웹페이지의 스타일을 지정하는 방법입니다. CSS에는 페이지의 모든 요소에 대해 정의할 수 있는 배경, 색상, 글꼴, 간격, 테두리 등과 같은 모든 속성이 있습니다.
HTML 스타일 시트는 머리글, 바닥글 또는 기타 요소가 페이지에 배치될 위치와 같은 페이지 레이아웃을 설정하는 데에도 사용됩니다. CSS는 항상 HTML과 함께 사용됩니다. 스타일이 없는 페이지는 제목 등의 강조 표시가 없어 매우 창백하고, 페이지 전체에 걸쳐 동일한 글꼴 크기로 인해 사용자에게 전혀 보기 좋지 않기 때문입니다.
HTML 스타일 시트를 사용하는 방법은 무엇입니까?
과거에는 스타일, 스크립트, HTML 모든 것이 같은 페이지에 작성되었습니다. 이로 인해 페이지가 매우 길어지고 읽고 편집하기가 매우 어려워졌습니다. 그러다가 HTML, 스타일, Javascript를 분리하는 방법이 나왔습니다.
웹페이지에 HTML 스타일 시트를 포함하는 방법
스타일을 포함하는 방법에는 3가지가 있습니다.
1. 인라인 스타일링
이것은 스타일이라는 속성 내에서 HTML 자체 내의 모든 요소에 대한 스타일을 작성하는 방법입니다.
이러한 스타일 지정 방법은 HTML이 복잡해 보이고 "한 번 작성하여 여러 곳에서 사용"하는 접근 방식을 따를 수 없으므로 전혀 권장되지 않습니다.
예:
코드:
<h1 style=”font-size: 10px;margin-top: 10px;”>Hello World!</h1>
2. 내부 스타일링
스타일 태그에 스타일을 포함시켜 HTML 위에 웹페이지에 배치하는 것입니다. 이러한 스타일링 방식은 한 번에 여러 요소에 사용해야 하는 경우 공통 스타일을 함께 묶을 수 있으므로 인라인 스타일링보다 여전히 좋습니다.
개발 단계에서 HTML 파일을 편집하는 것이 더 쉽고, 매번 해당 CSS 파일을 열어서 매번 편집할 필요가 없습니다.
예:
코드:
<html>
<head>
<style>
container-block{
font-size: 10px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class=”container-block”>Hello World!</div>
</body>
3. 외부 스타일링
이것은 웹페이지 스타일을 지정하는 가장 일반적이고 가장 좋은 방법입니다. 이는 내부 스타일링과 유사하지만 확장자가 .css인 별도의 파일에 스타일을 작성하고 이에 대한 참조를 웹페이지의 head 태그에 배치한다는 점이 다릅니다.
웹페이지에서 CSS 파일을 연결하는 구문은 다음과 같습니다.
구문:
<link rel="stylesheet" type="text/css" href="theme.css">
스타일은 HTML의 body 태그(즉, 실제 콘텐츠) 위에 있는 head 태그에 포함되어야 합니다.
인라인, 내부, 외부 스타일링의 우선순위는 무엇인가요?
인라인 스타일은 내부 스타일보다 우선순위가 높으며, 외부 스타일은 그 다음으로 중요합니다.
인라인>내부>외부
CSS 사용 모범 사례:
- CSS는 하나의 파일이 아닌 여러 개의 파일로 분리될 수 있습니다.
- 분리된 CSS 파일은 링크 태그를 사용하여 헤드 태그에 하나씩 포함할 수 있습니다.
- 또는 하나의 CSS 파일에 나머지 CSS 파일을 가져오기 위한 여러 가져오기 문이 있을 수 있습니다. 이는 CSS를 논리적으로 분리하지만 궁극적으로는 분리됩니다. 모든 스타일은 동일한 파일에서 렌더링됩니다.
사용법: @import './process.css';
- HTML 태그 자체, 클래스 이름, ID, 모든 속성 이름과 같은 선택기가 있는 모든 웹페이지 요소에 대해 스타일을 정의할 수 있습니다.
- 다음과 같은 의사 선택기가 있습니다.
- 이전
- 이후
- n번째
- 첫째
- 마지막 아이
- 호버
- 방문했습니다
이것은 기본적으로 선택한 요소의 상태이며 실제로 정확한 요소는 아닙니다.
- 곱해진 CSS 파일이 페이지에 포함되면 마지막 파일이 가장 높은 우선순위를 가지며 동일한 선택기를 사용하는 이전 파일의 기존 스타일을 재정의합니다.
- 페이지가 로드되는 동안 스타일이 적용되도록 HTML 자체보다 먼저 스타일시트를 사용해야 합니다. 마지막에 포함하면 HTML이 먼저 로드된 다음 천천히 스타일이 적용되므로 사용자에게 매우 나쁜 경험을 선사합니다.
HTML Cascading Style Sheet의 다양한 기능
다양한 기능은 다음과 같습니다.
- CSS는 애니메이션을 제공합니다: 이전에는 자바스크립트가 애니메이션에만 사용되었습니다. 하지만 최신 CSS, 즉 CSS3에서는 속성 자체를 활용하여 애니메이션을 제공합니다.
- 공급업체 접두사: 브라우저가 새로운 기능에 대한 표준 버전/속성 이름을 출시하기 전에 브라우저는 실험적으로 일정 기간 동안 일부 공급업체 접두사를 제공합니다. 개발자는 브라우저가 표준 버전을 출시할 때까지 기다려야 하며 그 동안 공급업체 접두사와 함께 실험적 기능을 사용할 수 있습니다.
- CSS 변환: 전환은 주어진 기간 내에 속성의 한 값에서 다른 속성 값으로 점진적으로 이동하는 데 사용됩니다.
예:
Code:
-webkit-transition: width 2s, height 4s;
- CSS Transforms: Transforms in CSS allow you to translate, rotate, scale and skew elements.
Media Queries
Mobile, Desktops, iPads behave differently; however, we cannot style the pages in the same way. Previous web standards have been designed in such a way that we had different CSS for every type of device.
With the progress of web standards and the way the web is built, browsers are developed to have a single CSS that can be used for any type of device. To change the styles for devices based on width and height, media queries are used with which we can specify the min or max-width of the device and write styles within it.
Example:
Code:
@media screen and (max-width: 767px){
container{
width: 60%;
padding: 20px;
}
}
Styles are definitely a boon for the web. And as web development has increased exponentially in recent times, CSS3 has definitely gained a lot of demand to make the pages extremely interactive and intuitive.
위 내용은 HTML 스타일 시트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!