CSS 스타일 클래스 설명(예제 포함)

이 글은 CSS 스타일 클래스에 대한 설명을 제공합니다(예제 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

CSS 개요

CSS는 Cascading Style Sheets를 의미합니다.
스타일은 HTML 요소를 표시하는 방법을 정의합니다.
스타일은 일반적으로 스타일 시트에 저장됩니다.
스타일은 콘텐츠와 프리젠테이션의 분리를 해결하기 위해 HTML 4.0에 추가되었습니다. 문제
외부 스타일 시트는 작업 효율성을 크게 향상시킬 수 있습니다.
외부 스타일 시트는 일반적으로 CSS 파일에 저장됩니다.
여러 스타일 정의를 하나로 계단식으로 배열할 수 있습니다.

HTML 태그는 원래 문서 내용을 정의하기 위해 설계되었습니다.

,

, 과 같은 태그를 사용하여 HTML의 원래 의도는 "이것은 제목입니다", "이것은 문단입니다", "이것은 표입니다"와 같은 정보를 표현하는 것이었습니다. . 동시에 서식 태그를 사용하지 않고 브라우저에서 문서 레이아웃이 완성됩니다.

모든 주요 브라우저는 캐스케이딩 스타일 시트를 지원합니다.

div 및span의 이해

1. div는 html 태그이며 블록 수준 요소(별도의 줄에 표시됨)이며 단독으로 사용하면 의미가 없으며, CSS와 결합해야 함 주로 페이지 레이아웃에 사용

2. span은 html 태그, 인라인 요소(선 표시)이므로 단독으로 사용할 때는 의미가 없으며 주로 CSS와 결합하여 사용해야 합니다. 동봉된 콘텐츠의 스타일을 지정하려면 Modification;

클래스 선택기

클래스 선택기를 사용하기 전에 세기 문서를 표시해야 클래스 선택기 역할을 수행할 수 있습니다.

.name{text-align:center}

문서 뒷부분에서 스타일과 관련된 'class' 속성을 포함하고 사전 정의된 스타일 중 하나를 'name' 값으로 지정하여 이 태그의 특정 사례에 사용할 스타일을 명시적으로 선택할 수 있습니다.

ID 선택기

ID 선택기는 클래스 선택기와 유사하며, ID 선택기 앞에는 # 기호(체커보드 숫자 또는 파운드 기호라고도 함)가 옵니다. 클래스 선택기와 마찬가지로 ID 선택기에서는 와일드카드 선택기를 무시할 수 있습니다.

ID는 고유 식별자이며 한 번만 사용할 수 있습니다.

<p></p>

태그 선택기

nbsp;html>


    <meta>
    <title>类选择器</title>
    <style>
        .sheen{font-size: large;color: salmon}
    </style>


<div>
    Sie sprechen gut Deutsch.
</div>
<div>
    Was machen Sie hier in Berlin?Arbeiten Sie hire?
</div>
<div>
    Nein,ich studiere.
</div>

링크 스타일 설정

링크를 설정할 수 있는 CSS 속성이 많이 있습니다. 스타일(예: 색상, 글꼴 모음, 배경 등)

링크의 특별한 점은 링크의 상태에 따라 스타일을 지정할 수 있다는 것입니다.
링크의 네 가지 상태:
a:link - 방문하지 않은 일반 링크
a:visited - 사용자가 방문한 링크
a:hover - 마우스 포인터가 링크 위에 있음
a:active - 링크가 클릭된 순간

CSS 소개 styles

소개 방법: <p></p>1) 인라인 소개:

2) 내부 소개: head 태그에 작성된 스타일 태그 내부 스타일;
3). : CSS 스타일을 파일로 분리하고 를 통해 현재 html 파일과 연결합니다.

도입 방법의 3가지 우선순위: 근접성 원칙<p></p>

nbsp;html>


    <meta>
    <title>ID选择器</title>
    <style>
        #sheen{font-size: x-large;color: rosybrown}
        #star{font-size: large;color: #c0ffff}
        #clotho{font-size: xx-large;color: darkgreen}
    </style>


    <div>
        Sheen:Sie sprechen gut Deutsch.
    </div>
    <div>
        Star:Was machen Sie hier in Berlin?Arbeiten Sie hire?
    </div>
    <div>
        Clotho:Nein,ich studiere.
    </div>

nbsp;html>


    <meta>
    <title>标签选择器</title>
    <style>
        div{margin: 0 auto;border: 1px;color: darkgreen;font-size: larger;text-align: center}

    </style>


<h3 id="使用CSS">使用CSS</h3>
<div>
    类选择器
</div>
<div>ID选择器</div>
<div>标签选择器</div>

위 내용은 CSS 스타일 클래스 설명(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!