CSS 기초 !!

소스코드

 

 

 

 <style>

        .js {

            font-weight: bold;

            color: red;

        }

        #first {

            color: green;

        }

        span {

            color: blue;

        }

    </style>

 

 

 

<h1><a href="index.html">WEB</a></h1>

    <h2 style="background-color:coral;color:powderblue;">JavaScript</h2>

    <p>

        <span id="first" class="js">JavaScript</span> (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level,

        dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside

        <span>HTML</span> and <span>CSS</span>, <span class="js">JavaScript</span> is one of the three core technologies

        of World Wide Web content production. It is used to make webpages interactive and provide online programs,

        including video games. The majority of websites employ it, and all modern web browsers support it without the

        need for plug-ins by means of a built-in <span class="js">JavaScript</span> engine. Each of the many <span

            class="js">JavaScript</span> engines represent a different implementation of <span

            class="js">JavaScript</span>, all based on the ECMAScript specification, with some engines not supporting

        the spec fully, and with many engines supporting additional features beyond ECMA.

    </p>

</body>

 

 

 

결과문

위 결과문을 설명하자면

1.  <h2 style="background-color:coral;color:powderblue;"> JavaScript </h2>

     - 해당되는 요소에 직접 style 속성을 사용하여 스타일을 줄 수 있다(인라인 스타일)

     - 다른 스타일 방법보다 우선순위가 높다

2.  span { color: blue}

     html문서 내부에 style태그를 사용하여 스타일을 지정할 수 있다(내부 스타일)

  - 인라인 스타일보다 우선순위가 낮고  외부스타일 보다 우선순위가 높다

3.. js  #first (선택자)

  - 특정한 요소들을 선택하여 스타일을 줄 수 있다

  - id : 한번 적용될 때 쓰는 스타일에 id를 사용한다

  - Class : 반복될 필요가 있는 스타일은 클래스를 사용한다

우선순위 적용순서

속성값 ! important > inline > id > Class >  적용된다