HTML_HTML/Xhtml_웹페이지 제작에 CSS를 도입하는 3가지 방법 소개
- WBOY원래의
- 2016-05-16 16:39:262539검색
HTML에서 CSS를 도입하는 주요 방법은 인라인, 임베디드, 임포트, 링크
인라인: 마크의 스타일 속성에 CSS 스타일을 설정하는 방식이 본질적으로 CSS의 장점입니다. 위 사항에는 반영되지 않으므로
사용을 권장하지 않습니다. 코드는 다음과 같습니다:
임베디드:
임베디드는 와 사이에 페이지의 다양한 요소에 대한 설정을 작성하는 것입니다. 단일 웹페이지의 경우 이 방법이 매우 편리합니다. 그러나 많은 페이지가 포함된 웹 사이트의 경우 각 페이지가 자체 스타일을 인라인으로 설정하면 CSS가 제공하는 큰 이점을 잃게 됩니다. 따라서 웹 사이트는 일반적으로 다음 두 가지 방법 중 하나를 사용하여 독립적인 CSS 스타일 시트 파일을 작성합니다. HTML 문서에 도입되었습니다.
예:
코드 복사
코드는 다음과 같습니다.
< ;html> 텍스트 데모< ;/title> ;</u><style type="text/css"></span>h1{</div> color:white;</div> background-color:boue;<div class="msgborder" id="phpcode60"> }<br></ style><br> </head><br> <body><br><h1>이것은 텍스트 한 줄입니다.</h1><br><h1>이것은 또 다른 텍스트 줄입니다. </ h1><br> </body><br> </html><br><br><br><br>가져오기 및 링크: <br>가져오기 및 링크의 목적은 독립적인 CSS 파일은 HTML 파일을 도입하며 둘 사이에는 상응하는 차이점이 있습니다. <br>실제로 둘 사이의 가장 큰 차이점은 링크 유형은 HTML 태그를 사용하여 외부 CSS 파일을 소개하는 반면, 가져오기 유형은 CSS 규칙을 사용하여 외부 CSS 파일을 소개한다는 것입니다. 따라서 구문도 다릅니다. <br>링크 스타일을 사용하는 경우 다음 명령문을 사용하여 외부 CSS 파일을 도입해야 합니다. <br><link href="mystyle.css" rel="stylesheet" type="text/css" /><br>import를 사용하는 경우 다음 문을 사용해야 합니다. <br>
</div>
<br><strong></strong><br>코드 복사<br><br><br>코드는 다음과 같습니다.<br><br><div class="msgheader"><style type=" text/css "><div class="right"> @import "mystyle.css";<span style="CURSOR: pointer" onclick="copycode(getid('phpcode61'));"></style><u></u></span>또한 이 두 가지 방법의 표시 효과도 약간 다릅니다. 링크 방식을 사용할 경우 CSS 파일은 설치 페이지의 주요 부분 이전에 로드되므로 표시되는 웹 페이지는 처음부터 스타일 효과가 나타납니다. 가져오기 방식을 사용할 경우 CSS 파일은 설치 페이지 이후에 로드됩니다. 전체 페이지가 로드되는 경우 일부 브라우저의 경우 웹 페이지 파일의 크기가 상대적으로 크면 스타일이 지정되지 않은 페이지가 먼저 표시되고 플래시 후에 스타일 설정 효과가 나타납니다. 뷰어의 관점에서 보면 이는 가져오기 사용의 단점입니다. 상대적으로 큰 일부 웹 사이트의 경우 유지 관리를 용이하게 하기 위해 모든 CSS 스타일을 여러 CSS 파일에 넣을 수 있습니다. 이런 식으로 링크 가져오기를 사용하는 경우 CSS 파일을 별도로 가져오기 위한 여러 명령문이 필요합니다. CSS 파일의 분류를 조정하려면 HTML 파일도 동시에 조정해야 합니다. 이는 유지 관리 작업의 단점입니다. 가져오기 방법을 사용하는 경우 일반 CSS 파일만 가져올 수 있으며 이 파일에 있는 다른 독립 CSS 파일을 가져올 수 있습니다. 링크 방법에는 이 기능이 없습니다. </div>
</div>그래서 여기에서 제안하는 바는 CSS 파일을 도입해야 하는 경우 링크 방법을 사용하고, 여러 CSS 파일을 도입해야 하는 경우 먼저 링크 방법을 사용하여 "디렉토리" CSS 파일을 도입하는 것입니다. "디렉토리" CSS 파일을 가져온 다음 가져오기를 사용하여 다른 CSS 파일을 소개합니다. <div class="msgborder" id="phpcode61">JavaScript를 통해 가져올 CSS 파일을 동적으로 결정하려면 연결을 사용해야 합니다.</div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="html의 JavaScript 모두 선택/모두 선택 해제 작업 샘플 코드_HTML/Xhtml_웹페이지 제작" href="http://m.php.cn/ko/faq/11508.html">html의 JavaScript 모두 선택/모두 선택 해제 작업 샘플 코드_HTML/Xhtml_웹페이지 제작</a></span><span>다음 기사：<a class="dBlack" title="html의 JavaScript 모두 선택/모두 선택 해제 작업 샘플 코드_HTML/Xhtml_웹페이지 제작" href="http://m.php.cn/ko/faq/11510.html">html의 JavaScript 모두 선택/모두 선택 해제 작업 샘플 코드_HTML/Xhtml_웹페이지 제작</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="http://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ko/faq/348757.html" title="HTML 지식 요약" class="aBlack">HTML 지식 요약</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348804.html" title="HTML을 빨리 배우는 방법" class="aBlack">HTML을 빨리 배우는 방법</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348873.html" title="html xhtml xml의 차이점" class="aBlack">html xhtml xml의 차이점</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348884.html" title="src와 href 속성의 차이점" class="aBlack">src와 href 속성의 차이점</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348902.html" title="HTML5 및 CSS 대체 사용 정보" class="aBlack">HTML5 및 CSS 대체 사용 정보</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p></div><div class="footermid"><a href="http://m.php.cn/ko/about/us.html">회사 소개</a><a href="http://m.php.cn/ko/about/disclaimer.html">부인 성명</a><a href="http://m.php.cn/ko/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>