CSS 스타일을 HTML로 가져오는 네 가지 방법 공유
- yulia원래의
- 2018-09-17 10:46:165281검색
페이지 레이아웃을 할 때 필연적으로 CSS와 HTML이 사용됩니다. 왜냐하면 HTML은 페이지의 주요 콘텐츠이고, CSS는 페이지의 성능이며, 일반인의 용어로 CSS는 HTML을 장식하는 데 사용되기 때문입니다. 그렇다면 HTML에서 CSS 스타일을 구현하는 방법은 무엇입니까? 이때 CSS 파일을 HTML에 도입해야 합니다. 오늘은 CSS를 HTML로 가져오는 방법에 대해 말씀드리겠습니다. 필요하시면 참고하시면 됩니다.
CSS를 HTML로 가져오는 방법에는 인라인, 임베디드 및 외부 스타일의 네 가지 방법이 있습니다. 외부 스타일은 가져오기 스타일과 링크 스타일로 구분됩니다.
1. 인라인 스타일, 즉 CSS 스타일을 HTML 태그에 직접 추가하고 스타일과 함께 추가하는 것입니다.
예: div의 글꼴을 40px로 설정하고 색상을 빨간색으로 설정합니다. 코드는 다음과 같습니다.
<div style="font-size: 40px;color: red;">今天星期一</div>
Rendering:
2. Embedded, 즉 에 CSS 스타일을 작성하고,
사이에 스타일을 넣으세요.예:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{font-size: 40px;color: orange;}
</style>
</head>
<body>
<div>今天星期二</div>
</body>
</html>Rendering:
3. 외부 스타일 (외부 스타일은 가져오기 유형과 링크 유형으로 구분됩니다.)
외부 스타일은 CSS 스타일 코드를 별도의 외부 파일에 작성하는 것입니다. , 이 외부 파일은 ".css" 확장자를 가지며 필수 HTML에 도입됩니다. 가져오기와 링크의 도입 방법이 다르며, 다음에 하나씩 소개하겠습니다.
1. 가져오기 유형, 즉 에서 @import URL을 사용합니다.
예: import를 사용하여 div의 글꼴을 40px로, 색상을 노란색으로 설정합니다. 코드는 다음과 같습니다.
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@import url("css/import.css");
</style>
</head>
<body>
<div>今天星期三</div>
</body>Rendering:
2. 링크 링크 스타일, 즉
href="css/index.css"/> 스타일 효과를 얻기 위해 외부 CSS 파일을 호출합니다.예: 외부 스타일 링크를 사용하여 div 색상을 녹색으로, 글꼴을 40px로 설정합니다. 코드는 다음과 같습니다.
<html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/index.css"/> </head> <body> <div>今天星期三</div> </body> </html>
렌더링:
요약:
1. 인라인 스타일은 번거롭고 검색이 불편하며 CSS의 장점을 반영하지 않으므로 권장하지 않습니다.
2. 큰 페이지에는 임베디드를 권장하지 않지만, 스타일이 거의 없는 작은 웹페이지에는 사용할 수 있습니다.
3. 외부 스타일이기도 합니다. 가져오기 스타일과 링크 스타일의 차이점은 무엇인가요? 링크 링크 방식을 사용하면 페이지의 주요 콘텐츠가 로드되기 전에 CSS 스타일 파일이 로드되므로 사용자가 보는 웹 페이지는 처음부터 스타일 효과를 갖게 됩니다. 가져오기 방식을 사용하면 전체 페이지가 로드된 후 CSS 스타일 파일이 로드되기 때문에 스타일이 표시되지 않는 경우도 있고, 스타일을 설정한 후 효과가 플래시 후에 나타나는 경우도 있습니다. 따라서 사용자 경험 측면에서 CSS 스타일을 도입하려면 링크 스타일을 사용하는 것이 좋습니다.
위에서는 CSS를 HTML로 가져오는 4가지 방법을 소개합니다. 구체적인 사용 방법은 상황에 따라 다르지만 가장 일반적으로 사용되는 방법은 링크 방법입니다. 당신에게 유용합니다!
위 내용은 CSS 스타일을 HTML로 가져오는 네 가지 방법 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!