JavaWeb의 CSS에 대한 자세한 설명

CSS 소개

1. CSS 개요 및 기능

CSS(Cascading Style Sheets)는 웹 페이지의 표시 효과를 정의하는 데 사용되는 계단식 스타일 시트입니다. 이는 HTML 코드의 스타일 정의 중복을 해결하고 최신 스타일 코드의 유지 관리성을 향상시키며 웹 페이지의 표시 효과를 향상시킬 수 있습니다.
기능: CSS는 웹페이지 콘텐츠와 표시 스타일을 분리하여 표시 기능을 향상시킵니다.

2. CSS와 HTML의 조합(*****)(4가지 유형)

CSS와 HTML을 결합하는 방법

1.style 속성 모드:

각 태그의 표시 스타일을 변경하려면 태그의 스타일 속성을 사용하세요.

예:

<span style="color: #0000ff"><span style="color: #800000">p </span><span style="color: #ff0000">style</span><span style="color: #0000ff">="background-color:#FF0000; color:#FFFFFF"</span><span style="color: #0000ff">></span><span style="color: #000000">
        p标签段落内容。
</span><span style="color: #0000ff"></span><span style="color: #800000">p</span><span style="color: #0000ff">></span></span>

이 방법은 더 유연하지만 여러 개의 동일한 태그에 대해 동일한 스타일을 정의하는 것이 더 번거롭기 때문에 로컬 수정에 적합합니다.

2.style 태그 방식: (임베디드 방식)

여러 태그를 통합적으로 수정하려면 head 태그에 스타일 태그를 추가하세요. ​

<span style="color: #0000ff"><span style="color: #800000">head</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">style </span><span style="color: #ff0000">type</span><span style="color: #0000ff">=”text/css”</span><span style="color: #0000ff">></span><span style="background-color: #f5f5f5; color: #800000">
        p </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">#FF0000</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></span></span>

이 방법은 단일 페이지의 스타일을 균일하게 설정할 수 있지만, 지역적으로는 유연성이 부족합니다.

　3. 가져오기 방법 : (일반적으로 사용되는 방법)

전제는 정의된 CSS 파일이 이미 존재한다는 것입니다. 웹페이지 스타일의 일부를 사용해야 하는 경우 이 방법을 사용하세요.

예:

<span style="color: #0000ff"><span style="color: #800000">style </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text/css"</span><span style="color: #0000ff">></span><span style="background-color: #f5f5f5; color: #800000">
    @import url(css_3.css);
    div </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">#FF0000</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>

마지막에 외부 CSS 파일(.css)을 정의합니다.
@import url("css 파일 주소")는

참고: URL 괄호는 세미콜론으로 끝나야 합니다. 가져온 스타일이 이 페이지에 정의된 스타일과 겹치는 경우 이 페이지에 정의된 스타일이 우선 적용됩니다.

　4. 링크 방식 : (일반적으로 사용되는 방식)

head 태그에 link 태그를 통해 구현되는데, 먼저 정해진 CSS 파일이 있어야 한다는 전제가 있습니다.

예:

<span style="color: #0000ff"><span style="color: #800000">link </span><span style="color: #ff0000">rel</span><span style="color: #0000ff">="stylesheet"</span><span style="color: #ff0000"> type</span><span style="color: #0000ff">="text/css"</span><span style="color: #ff0000"> href</span><span style="color: #0000ff">="css_3.css"</span> <span style="color: #0000ff">/></span></span>

　는