CSS를 작성하는 네 가지 방법

우선순위: 외부 스타일 < 내부 스타일 시트

우선순위, 즉 이름이 같은 선택기의 오른쪽이 왼쪽을 덮어씁니다

1. 내부 스타일시트

<span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">>
    <span style="color: #0000ff"><</span><span style="color: #800000">style</span><span style="color: #0000ff">></span>
        <span style="background-color: #f5f5f5; color: #008000">/*</span><span style="background-color: #f5f5f5; color: #008000">内部样式表，一般用于覆盖公用样式</span><span style="background-color: #f5f5f5; color: #008000">*/</span><span style="background-color: #f5f5f5; color: #800000">
        ＃headTip </span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
            color</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 0xff5</span><span style="background-color: #f5f5f5; color: #000000">;</span>
         <span style="background-color: #f5f5f5; color: #000000">}</span>
    <span style="color: #0000ff"></</span><span style="color: #800000">style</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>

</p>
<p>2. 링크 태그를 사용하여 문서에서 외부 리소스 사용을 선언하는 것이 가장 일반적인 방법입니다. </p>
<p>CSS 외부 스타일 시트에 지정된 @CHARSET="utf-8"; 인코딩은 첫 번째 줄에 배치되어야 합니다. </p>
<div class="cnblogs_code">
<pre class="brush:php;toolbar:false"><span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">link </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="./my-common.css"</span><span style="color: #ff0000"> rel</span><span style="color: #0000ff">="stylesheet"</span><span style="color: #ff0000"> media</span><span style="color: #0000ff">="screen"</span><span style="color: #ff0000"> type</span><span style="color: #0000ff">="text/css"</span><span style="color: #0000ff">/></span>
<span style="color: #0000ff"></</span><span style="color: #800000">head</span><span style="color: #0000ff">><br></span>

3.@ 메서드, CSS를 소개합니다. 이는 비동기적으로 로드되므로 전체 HTML이 로드된 후에 로드되므로 페이지가 깜박입니다. 권장되지 않습니다.

<span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">style</span><span style="color: #0000ff">></span><span style="background-color: #f5f5f5; color: #800000">
        @import 'my-common.css';
    </span><span style="color: #0000ff"></</span><span style="color: #800000">style</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>

4. 인라인 스타일 시트는 우선순위가 가장 높고 가장 간단하지만 재사용이 불가능하고 유지관리가 쉽지 않습니다.

<span style="color: #0000ff"><</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="color:0x550;font-size:30px;"</span><span style="color: #0000ff">/></span>
<span style="color: #0000ff"></</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>